Digitale Visitenkarte mit QR-Code – selbst gehostet

Eine Kontaktseite pro Person, die per QR-Code aufgerufen wird: am Messestand, beim Netzwerktreffen, vom Sperrbildschirm des Smartphones oder von der gedruckten Karte. Ein Tipp auf „Kontakt speichern“ übernimmt alle Daten samt Foto ins Adressbuch. Ohne App, ohne Abo bei einem Visitenkarten-Dienst, auf dem eigenen Webspace.

Beispiel: team.falk.plus/jens/

• Ein QR-Code für immer: Der Code enthält nur die Adresse der Seite (z. B. https://team.example.de/max/). Ändern sich Telefonnummer oder Texte, wird nur die Seite neu erzeugt – Druck, Sperrbildschirm und Wallet-Karte bleiben gültig.
• Kontakt speichern: Eine vCard-Datei (.vcf) mit Name, Rolle, Firma, Telefon, E-Mail, Adresse, Website, LinkedIn und Foto. Android und iPhone öffnen sie direkt mit „Kontakt hinzufügen“.
• Alle Wege auf einen Blick: Anrufen, E-Mail, Termin buchen, Website, LinkedIn – große Schaltflächen, fürs Smartphone gemacht, mit hellem und dunklem Modus.
• Im eigenen Erscheinungsbild: Farben, Schrift und Logo der Firma; die Schrift liegt auf dem eigenen Server (keine Google Fonts).
• Für das ganze Team: eine Seite pro Person unter einer eigenen Subdomain, später ergänzt um eine Teamübersicht.

Die Seiten sind reines HTML – kein CMS, keine Datenbank, nichts, was gepflegt oder abgesichert werden muss. Erzeugt werden sie von einem kleinen Python-Skript aus einer Datendatei:

{
  "personen": [
    {
      "kuerzel": "max",
      "vorname": "Max",
      "nachname": "Muster",
      "rolle": "Inhaber · IT-Partner für …",
      "mobil": "+49 …",
      "email": "max@example.de",
      "linkedin": "https://www.linkedin.com/in/…"
    }
  ]
}

Das Skript erzeugt je Person:

• index.html – die Kontaktseite
• vorname-nachname.vcf – die vCard (Version 3.0, mit Foto)
• qr.svg / qr.png – den QR-Code, beliebig skalierbar für den Druck
• sperrbildschirm.png – Hintergrundbild fürs Smartphone mit großem QR-Code
• catima.png – Kartenbild für die Wallet-App Catima (Android)

Die Kürzel in der Adresse (/max/) werden nie geändert – sie stehen im QR-Code.

• Fehlerkorrektur H (höchste Stufe): Bis zu 30 % des Codes dürfen fehlen. Das erlaubt eine freie Fläche in der Mitte für Logo oder Bildmarke.
• Dunkel auf Hell, nie invertiert – viele Scanner lesen helle Codes auf dunklem Grund schlecht.
• Kurze Adresse = grobes Raster = auch aus Entfernung und bei schwachem Licht gut lesbar.
• Beim Zeigen vom Smartphone: Helligkeit hoch. Catima erledigt das beim Öffnen der Karte automatisch.

BEGIN:VCARD
VERSION:3.0
N:Muster;Max;;;
FN:Max Muster
ORG:Beispiel GmbH
TITLE:Inhaber · IT-Partner für Onlinehandel + DMS + Buchhaltung
TEL;TYPE=WORK,VOICE:+49 …
EMAIL;TYPE=INTERNET,WORK:max@example.de
URL:https://example.de/
PHOTO;ENCODING=b;TYPE=JPEG:/9j/4AAQ…
END:VCARD

• Kommas und Semikolons maskieren: \, und \; – sonst wird z. B. die Rolle beim Komma abgeschnitten.
• Lange Zeilen falten: nach 75 Byte umbrechen, Folgezeile beginnt mit einem Leerzeichen. Das Foto als Base64 ist sonst eine einzige riesige Zeile.
• Foto klein halten: 240 × 240 Pixel JPEG reichen fürs Adressbuch.
• Richtiger Dateityp: Der Webserver muss .vcf als text/vcard ausliefern, sonst bieten Smartphones nur einen Download an.
• Rolle in der vCard nicht vergessen: Wer die Formulierung auf der Seite ändert, muss auch das Feld TITLE ändern – sonst landet die alte Rolle im Adressbuch der Kunden. Deshalb kommen bei uns Seite und vCard aus derselben Datendatei.

• Seite indexierbar machen, wenn sie bei der Suche nach dem Namen gefunden werden soll: <meta name=„robots“ content=„index, follow“>, <link rel=„canonical“> und eine offene robots.txt. Dann erscheint die Karte auch in KI-gestützten Suchen.
• Open-Graph-Tags (og:title, og:description, og:image) sorgen für eine ordentliche Vorschau, wenn die Adresse in WhatsApp, Signal oder LinkedIn geteilt wird.
• Die vCard selbst auf noindex: In den Suchergebnissen soll die Seite stehen, nicht ein nackter Download.
• Achtung bei der Mobilnummer: Was auf einer indexierbaren Seite steht, ist öffentlich. Wir verwenden dafür eine eigene Geschäfts-Mobilnummer und halten die private getrennt.
• Prüfen, ob noindex nicht doppelt gesetzt ist: neben dem Meta-Tag auch im Server-Header X-Robots-Tag und in der robots.txt.

Für nginx (z. B. unter ISPConfig als „nginx Directives“; eine .htaccess wirkt dort nicht):

# Kontaktdateien mit richtigem Typ, aber nicht in Suchmaschinen
location ~* \.vcf$ {
    types { }
    default_type "text/vcard; charset=utf-8";
    add_header X-Robots-Tag "noindex, nofollow" always;
}

Datendatei, Skript, Fotos und Schrift liegen in einem Git-Repository (bei uns: eigene Gitea-Instanz). Der Ablauf bei einer Änderung:

1. Datendatei bzw. Foto ändern, Skript ausführen.
2. Eintragen (Commit) und versenden (Push).
3. Auf dem Webserver: git pull und den erzeugten Ordner ins Webverzeichnis spiegeln (rsync –delete).

Wichtig: Der erzeugte Ordner wird nie von Hand geändert – weder lokal noch auf dem Server. Der nächste Lauf überschreibt sonst alles. Und: Die Subdomain bekommt ein eigenes Webverzeichnis, nicht unterhalb der Hauptwebsite – Website-Generatoren wie Publii löschen beim Synchronisieren fremde Dateien.

• Wallet-App (Android: Catima): Karte hinzufügen, QR-Code vom Bildschirm scannen, Kartenbild hinterlegen. Beim Öffnen wird der Bildschirm automatisch hell.
• Sperrbildschirm: Das erzeugte Hintergrundbild (1080 × 2400) als Sperrbildschirm setzen – der Code ist ohne Entsperren sofort zur Hand.
• E-Mail-Signatur: ein Link „Visitenkarte →“ auf die Seite (siehe Einheitliche E-Mail-Signaturen mit Gitea).

Wir richten die digitalen Visitenkarten in Ihrem Erscheinungsbild auf Ihrem Webspace ein – einschließlich QR-Codes für Druck und Messe. Sprechen Sie uns an: falk.plus/kontakt