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“.
• Anfragen mit Herkunft: Der Link „Termin vereinbaren“ trägt eine Herkunft in der Adresse (z. B. ?utm_source=visitenkarte-max&utm_medium=visitenkarte). Anfragen, die über die Karte kommen, sind in Webanalyse und Marketing-Automatisierung (bei uns Mautic) eindeutig erkennbar. Mehr dazu unter Anfragen aus der Signatur erkennen.
• 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: der 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, denn 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. So ist der Code ohne Entsperren sofort zur Hand.
• E-Mail-Signatur: ein Link „Visitenkarte →“ auf die Seite (siehe Einheitliche E-Mail-Signaturen mit Gitea).