Digitale Visitenkarte mit QR-Code, selbst gehostet [Best Practice Guide]

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== 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: [[https://team.falk.plus/jens/|team.falk.plus/jens/]]

===== 1. Was die Visitenkarte leistet =====

  * **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 [[auftritt:e-mail-signaturen:start#anfragen_aus_der_signatur_erkennen|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.

===== 2. Aufbau =====

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:

<code json>
{
  "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/…"
    }
  ]
}
</code>

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 [[https://catima.app|Catima]] (Android)

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

===== 3. Der 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.

===== 4. Die vCard: Details, die oft schiefgehen =====

<code>
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
</code>

  * **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.

===== 5. Suchmaschinen bewusst steuern =====

  * **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):

<code nginx>
# 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;
}
</code>

===== 6. Pflege über Git =====

Datendatei, Skript, Fotos und Schrift liegen in einem Git-Repository (bei uns: eigene [[https://vw.falk.plus|Gitea-Instanz]]). Der Ablauf bei einer Änderung:

  - Datendatei bzw. Foto ändern, Skript ausführen.
  - Eintragen (Commit) und versenden (Push).
  - 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.

===== 7. Auf dem Smartphone =====

  * **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 [[auftritt:e-mail-signaturen:start|Einheitliche E-Mail-Signaturen mit Gitea]]).
Impressum | Datenschutz