W-SEO-04 — Open Graph + Social-Preview

49 €

Worum es geht

Wenn jemand einen Link zu Ihrer Seite in WhatsApp, LinkedIn, Slack oder anderswo teilt, erscheint dort eine kleine Vorschau-Karte: Bild, Titel, kurze Beschreibung. Was diese Karte zeigt, legen Sie selbst fest — über sogenannte Open-Graph-Tags im HTML-Kopf jeder Seite.

Sind diese Tags nicht gesetzt, raten die Dienste, was sie aus der Seite herauslesen können. Das Ergebnis ist oft ein zufälliges Bild aus dem Seitenaufbau, ein abgeschnittener Text, manchmal gar keine Karte. Der Baustein setzt diese Tags sauber, sodass die Vorschau überall aussieht, wie Sie sie wollen.

Was technisch passiert

Pro Seite werden im HTML-Kopf folgende Tags gesetzt:

  • og:title — der Titel, der in der Karte erscheint
  • og:description — die zwei bis drei Zeilen darunter
  • og:image — das Vorschaubild (1200 × 630 Pixel)
  • og:url — die kanonische Adresse der Seite
  • og:type — meist website, bei Blogartikeln article
  • og:locale — die Sprache, etwa de_DE

Ergänzend werden die Twitter-Card-Tags gesetzt (twitter:card, twitter:title, twitter:description, twitter:image), weil einige Dienste diese statt der Open-Graph-Tags auswerten.

Inhalte für og:title und og:description werden aus den bestehenden <title>- und <meta description>-Tags der Seite übernommen, sofern vorhanden — oder im Bericht zur Ergänzung markiert.

Vorschaubild

Das Vorschaubild ist die Stelle, an der die meiste Wirkung entsteht — und an der ohne Vorlage am häufigsten daneben gegriffen wird. Bei der Buchung können Sie ein eigenes Bild im Format 1200 × 630 Pixel hochladen.

Wenn Sie keines haben, wählen wir aus den Bildern der Seite das geeignetste aus und legen es im richtigen Format an — meist eine Kombination aus Logo, Hauptbild und kurzer Bildaussage. Das Ergebnis ist nüchtern und brauchbar, aber ein eigens gestaltetes Bild wirkt deutlich stärker.

Bei Seiten mit eigenständigen Unterseiten (etwa Blogartikel) können pro Seite eigene Vorschaubilder gesetzt werden, sofern Sie sie liefern. Sonst nutzt jede Unterseite das Hauptbild der Seite.

Was Sie tun müssen

Vor der Buchung: gegebenenfalls ein Vorschaubild bereitlegen (1200 × 630 Pixel, JPG oder PNG). Sonst nichts.

Wenn sich später einmal Titel, Beschreibung oder Vorschaubild ändern sollen, werden die Open-Graph-Tags in den HTML-Seiten neu gesetzt. Bei einzelnen Seiten ein kleiner Vorgang; bei einer größeren Anpassung über alle Seiten hinweg lohnt sich eine kurze Anfrage per Mail oder Kontaktformular.