Die essentiellen Meta-Tags für Social Media

Heutzutage ermutigt fast jede Website ihre Besucher, ihre Seiten in den sozialen Medien zu teilen. Wir alle haben die allgegenwärtigen Facebook- und Twitter-Symbole gesehen, die geradezu darum betteln, angeklickt zu werden. Das ist keine Überraschung, denn das Teilen über soziale Medien, die Internet-Inkarnation der Mund-zu-Mund-Propaganda, ist eine der effektivsten Möglichkeiten für Unternehmen und Einzelpersonen, ihre Bekanntheit zu steigern.

Wenn sich Nutzer dafür entscheiden, diese Links zu teilen, ist es die Aufgabe des Webentwicklers, dafür zu sorgen, dass die zugehörigen Webseiten richtig aufbereitet sind, was wir uns jetzt ansehen werden. Facebook und Twitter sind bei weitem die beliebtesten Social-Media-Plattformen, also konzentrieren wir uns auf diese beiden.

Freigeben auf Facebook und Twitter

Facebook bietet Entwicklern verschiedene Optionen, wie eine geteilte Webseite in ihrer Timeline erscheint, abhängig vom Inhalt der Website. Wenn nicht anders angegeben, ist jede Webseite standardmäßig auf den Typ „Webseite“ eingestellt, den wir hier als Beispiel verwenden werden.

Sagen wir, jemand hat die Homepage eines fiktiven Reiseunternehmens geteilt – Facebook zeigt sie so an:

Auch Twitter hat mehrere Möglichkeiten, geteilte Webseiten zu formatieren, die in seinem Feed erscheinen, aber wir werden uns diejenige ansehen, die dem obigen Beispiel von Facebook sehr ähnlich ist, die Twitter „Summary Card with Large Image“ nennt:

Wie wir sehen können, weist jede mehrere Attribute der geteilten Webseite auf:

ein prominentes Bild und ein Titel
eine Beschreibung
der Domainname

Eigene <meta> Tags

Wie legen wir diese Attribute fest? Mit <meta>-Tags. Wenn ein Link geteilt wird, scrapen sowohl Facebook als auch Twitter die zugehörige Webseite und lesen deren <meta>-Tags, um die entsprechenden Informationen anzuzeigen.

Facebook verwendet <meta>-Tags und nutzt dabei das Open Graph-Protokoll, ein Klassifizierungssystem für Webseiten, das über die bereits in HTML5 definierten <meta>-Tags hinausgeht. Eine vollständige Liste der verfügbaren <meta>-Tags finden Sie auf der Open-Graph-Website. Es gibt so viele, aus denen man wählen kann, dass es etwas einschüchternd sein kann, aber nur vier werden tatsächlich benötigt:

<meta property="og:title" content="European Travel Destinations"><meta property="og:description" content="Offering tour packages for individuals or groups."><meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"><meta property="og:url" content="http://euro-travel-example.com/index.htm">

Twitter hat seine eigenen <meta>-Tags, die dem Open-Graph-Protokoll ähnlich sind, aber das Präfix „twitter“ anstelle von „og“ verwenden. Wie bei Facebook sind nur wenige erforderlich. Die Art des Anzeigeformats, das wir von Twitter anfordern, ist ebenfalls angegeben:

<meta name="twitter:title" content="European Travel Destinations "><meta name="twitter:description" content=" Offering tour packages for individuals or groups."><meta name="twitter:image" content=" http://euro-travel-example.com/thumbnail.jpg"><meta name="twitter:card" content="summary_large_image">

Beide, Facebook und Twitter, bieten Richtlinien an, wie die oben genannten <meta>-Tags zu verwenden sind. Sie sind einander recht ähnlich, obwohl sie in der Interpretation etwas subjektiv sein können. Beachten Sie, dass sich Facebook für unsere Zwecke auf die freigegebene Webseite bezieht, wenn es den Begriff „Objekt“ verwendet:

	Facebook	Twitter
Titel	Der Titel, Überschrift oder Name des Objekts.	Ein prägnanter Titel für den zugehörigen Inhalt.
Beschreibung	Eine kurze Beschreibung oder Zusammenfassung des Objekts.	Eine Beschreibung, die den Inhalt prägnant zusammenfasst, wie es für die Präsentation innerhalb eines Tweets angemessen ist. Sie sollten nicht den Titel als Beschreibung wiederverwenden oder dieses Feld verwenden, um die allgemeinen Dienste der Website zu beschreiben.
Bild	Die URL des Bildes für Ihr Objekt. Es sollte mindestens 600×315 Pixel groß sein, aber 1200×630 oder größer wird bevorzugt (bis zu 5MB). Halten Sie sich an ein Seitenverhältnis von 1,91:1, um Beschneidungen zu vermeiden.	Eine URL zu einem eindeutigen Bild, das den Inhalt der Seite darstellt. Sie sollten kein allgemeines Bild wie das Logo Ihrer Website, ein Autorenfoto oder ein anderes Bild verwenden, das sich über mehrere Seiten erstreckt. Bilder für diese Karte sollten mindestens 280px in der Breite und mindestens 150px in der Höhe sein. Das Bild muss weniger als 1 MB groß sein.
URL	Die kanonische URL für Ihre Seite. Dies sollte die unverzierte URL sein, ohne Session-Variablen, benutzeridentifizierende Parameter oder Zähler.

Da diese proprietären <meta>-Tags letztlich auf die gleichen Elemente verweisen, wäre es ideal, wenn es eine Möglichkeit gäbe, die beiden miteinander in Einklang zu bringen. Glücklicherweise gibt es das.

Abstimmung von <meta> Tags

Es schadet nicht, mehrere <meta> Tags zu haben, die redundant erscheinen. Zu viele Informationen haben noch niemandem geschadet, außer dass sie der HTML-Datei ein paar zusätzliche Bytes hinzufügen.

Aber für unsere Zwecke und der Kürze halber können wir die Tatsache nutzen, dass Twitter uns erlaubt, Open Graph <meta>-Tags durch seine eigenen zu ersetzen. Am Ende wird, abgesehen von der Notwendigkeit, ein Anzeigeformat anzugeben, keines der benutzerdefinierten Twitter <meta>-Tags benötigt. Damit ergibt sich folgendes Bild, das als das absolute Minimum an <meta>-Tags betrachtet werden kann, die notwendig sind, um eine Webseite für das Teilen in sozialen Medien geeignet zu machen:

<meta property="og:title" content="European Travel Destinations"><meta property="og:description" content="Offering tour packages for individuals or groups."><meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"><meta property="og:url" content="http://euro-travel-example.com/index.htm"><meta name="twitter:card" content="summary_large_image">

Die Umsetzung der Richtlinien für das Bild ist einfach: Befolgen Sie die Facebook-Empfehlung einer Mindestgröße von 1200×630 Pixeln und einem Seitenverhältnis von 1.91:1, aber halten Sie sich an die von Twitter geforderte Dateigröße von weniger als 1 MB.

Validierung von <meta> Tags

Wenn Sie Zweifel an der Rechtmäßigkeit der Reduzierung auf diese fünf Tags haben, können Sie die hilfreichen Tools Facebook Sharing Debugger und Twitter Card Validator verwenden. Diese beiden Tools durchsuchen jede Webseite, die auf einem öffentlichen Server gehostet wird, nach relevanten <meta>-Tags und zeigen an, wie sie aussehen würde, wenn sie geteilt würde. Es werden auch alle Fehler aufgelistet und Vorschläge gemacht. Wie lief es also bei unserem speziellen Beispiel? Bei Twitter scheint alles in Ordnung zu sein, Facebook hingegen listet einen Punkt als Warnung auf:

Dies bietet eine

Social Media Analytics

Was Facebook damit andeutet, ist, dass Sie, wenn Sie ihr Analysetool verwenden, das sie Domain Insights nennen, die eindeutige ID-Nummer angeben müssen, die mit Ihrem Konto verbunden ist. Der <meta>-Tag würde dann etwa so aussehen:

<meta property="fb:app_id" content="your_app_id" />

Twitter hat etwas Ähnliches, das sie Twitter Card Analytics nennen. Um dieses Tool optimal zu nutzen, empfiehlt Twitter, das folgende <meta>-Tag zu verwenden, das den Twitter-Benutzernamen enthält, den Sie mit der freigegebenen Webseite verknüpfen möchten:

<meta name="twitter:site" content="@website-username">

Denken Sie jedoch daran, dass das Weglassen der beiden obigen <meta>-Tags keinen Einfluss darauf hat, wie eine geteilte Webseite in der Facebook-Timeline oder im Twitter-Feed angezeigt wird, wenn Sie kein besonderes Interesse an der Nutzung dieser Analysetools haben.

Sonstiges?

Die Facebook-Dokumentation empfiehlt ein zusätzliches <meta>-Tag, obwohl es nicht erforderlich ist. Ein <meta>-Tag, das den Namen der Website angibt, auf der sich die freigegebene Seite befindet:

<meta property="og:site_name" content="European Travel, Inc.">

Twitter schlägt ebenfalls ein weiteres <meta>-Tag vor, das empfohlen wird, aber nicht erforderlich ist:

<meta name="twitter:image:alt" content="Alt text for image">

Dies bietet eine alternative Bildbeschreibung für Menschen mit Sehbehinderung.

Abschließendes Markup

Das sollte genügen. Um es noch einmal zu wiederholen: Wenn Sie sich die Dokumentation von Facebook und Twitter zum Teilen von Webseiten ansehen, gibt es viele andere <meta>-Tags, die verwendet werden können, um verschiedene Arten von Inhalten anzugeben. Aber im Allgemeinen wird das Folgende ausreichen:

<!-- Essential META Tags --><meta property="og:title" content="European Travel Destinations"><meta property="og:description" content="Offering tour packages for individuals or groups."><meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"><meta property="og:url" content="http://euro-travel-example.com/index.htm"><meta name="twitter:card" content="summary_large_image"><!-- Non-Essential, But Recommended --><meta property="og:site_name" content="European Travel, Inc."><meta name="twitter:image:alt" content="Alt text for image"><!-- Non-Essential, But Required for Analytics --><meta property="fb:app_id" content="your_app_id" /><meta name="twitter:site" content="@website-username">