Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

More Over<head>: Social Media

Was heutzutage alles in den head muss – Teil II

More Over<head>: Social Media

Tagtäglich posten Millionen Nutzer etliche Links in den sozialen Netzen. Es heißt, allein auf Facebook werden alle zwanzig Minuten eine Million Links geteilt. Grund genug, die eigene Website für Social Media herzurichten. Mit Hilfe der passenden Meta-Tags.

Ging es im ersten Teil um die allgemeinen Infos, die in den head einer Seite sollten, beschäftigt sich der zweite Teil mit den Infos, die verschiedene soziale Netzwerke für die Verlinkung der Seite benötigen. Dort hat jeder Anbieter seine eigenen Vorstellungen und Ideen.

Open Graph

Der Branchenprimus Facebook hat vor einigen Jahren den »Open Graph« eingeführt, um Webseiten besser maschinenlesbar zu gestalten. Dadurch wird die Vorschau der verlinkten Seiten auf Facebook mit Inhalten und Infos angereichert, wie z.B. einer Beschreibung oder aussagekräftiger Bilder. Mittlerweile ist das Protokoll der Quasi-Standard und damit weit verbreitet – nicht nur bei Facebook.

Damit diese Daten von sozialen Netzwerken auch gelesen werden können, müssen ein paar Meta-Tags im head gesetzt werden:

  1. <meta property="og:title" content="More Over&lt;head&gt;: Social Media">
  2. <meta property="og:description" content="Welche Meta-Tags können im &lt;head&gt; für Soziale Netzwerke verwendet werden?">
  3. <meta property="og:url" content="http://webkrauts.de/artikel/2013/more-over-social-media">
  4. <meta property="og:type" content="article">
  5. <meta property="og:image" content="">

Bei »og:title« handelt es sich um die Überschrift der Seite, »og:description« beinhaltet eine kurze Zusammenfassung. Die im ersten Teil beschriebene Canonical-URL sollte im »og:url« Meta-Tag ebenfalls enthalten sein. »og:type« beschreibt hingegen die Art des verlinkten Inhalts, der entweder als Website (»website«), Buch (»book«), Produkt (»product«) oder Artikel (»article«) klassifiziert ist.

Das passende Bild zur Seite (etwa ein Screenshot, Teaser oder das eigene Logo) wird mit »og:image« hinzugefügt. Facebook gibt hier eine Mindestgröße von 600×315 Pixel vor. Das Seitenverhältnis sollte idealerweise 1.91:1 sein, da Facebook Bilder entsprechend zuschneidet. Bei anderen sozialen Netzwerken (etwa Twitter) können diese Angaben aber auch abweichen, wie im Folgenden noch zu sehen ist. Daher lässt sich mit diesem Tag auch mehr als ein Bild definieren, etwa mit verschiedenen Größen oder Motiven:

  1. <meta property="og:image" content="/beispiel1.jpg">
  2. <meta property="og:image:width" content="600">
  3. <meta property="og:image:height" content="600">
  4. <meta property="og:image" content="/beispiel2.jpg">
  5. <meta property="og:image" content="/beispiel3.jpg">
  6. <meta property="og:image:height" content="1200">

Die Größe eines Bildes wird immer jeweils nach dem Bild angegeben. Dazu nimmt man die spezifischere Auszeichnung »og:image:width«, diese bezieht sich dann auf die letzte allgemeinere Information »og:image«. Der Besucher der Seite kann sich dann das Bild in seinem sozialen Netzwerk beim Verlinken aussuchen. Ideal ist es, seitenspezifische Bilder anzugeben und nicht nur immer die gleichen allgemeinen Bilder.

Twitter Cards

Auch Twitter bietet seit Anfang 2013 die Möglichkeit, einen Link »anzureichern«. Um die sogenannten »Twitter Cards« nutzen zu können, muss die eigene Seite bei Twitter allerdings noch freigeschaltet werden. Der genaue Ablauf ist in der Twitter Developers Dokumentation beschrieben. Die Syntax einer Twitter Card sieht dabei folgendermaßen aus:

  1. <meta name="twitter:card" content="summary">
  2. <meta name="twitter:site" content="@andiweiss">
  3. <meta name="twitter:creator" content="@andiweiss">
  4. <meta name="twitter:title" content="">
  5. <meta name="twitter:description" content="">
  6. <meta name="twitter:image" content="beispiel.jpg">

Der von Twitter gewählte Aufbau sieht in einigen Punkten der »Open Graph«-Struktur sehr ähnlich. Kein Wunder, sie benötigen ja größtenteils die gleichen Informationen. Nutzt ihr die Meta-Angaben für beide Dienste, könnt ihr euch doppelte Schreibarbeit sparen. Fehlen benötigte Angaben in den Twitter-Auszeichnungen, wird automatisch nach entsprechenden »Open Graph«-Daten auf der Seite gesucht:

Twitter Card Open Graph Anmerkungen
twitter:urlog:urlCanonical-URL
twitter:descriptionog:descriptionmax. 200 Zeichen
twitter:titleog:titlemax. 70 Zeichen
twitter:imageog:imageje nach Card-Typ

Dadurch werden nur noch ein paar zusätzliche Informationen benötigt, die noch nicht im »Open Graph« angegeben wurden:

  1. <meta name="twitter:creator" content="@andiweiss">
  2. <meta name="twitter:site" content="@webkrauts">
  3. <meta name="twitter:card" content="summary">

»twitter:creator« ist der Twitter-Account des Artikel-Autoren, »twitter:site« ist der Account des Inhabers der Seite. Mit »twitter:card« kann zwischen verschiedenen Darstellungen gewählt werden. Am interessantesten sind hier »summary« und »summary_large_image« zu nennen. Sie beinhalten den Titel, die Beschreibung, den Autor sowie ein Bild der verlinkten Seite und sind für Artikel-Zusammenfassungen gedacht.
Die anderen Möglichkeiten sind die Photo-Card, Gallery-Card, App-Card, Player-Card und die Product-Card.

Twitter bietet in seinem Developer-Bereich auch einen Validator und einen Baukasten für die benötigten Meta-Tags an.

Google+

Google und damit auch Google+ setzen hauptsächlich auf das schema.org-System, um eine Webseite maschinenlesbar zu machen. Die Anreicherung mit Metadaten findet hier allerdings im Body statt und fällt damit aus dem Rahmen dieses Artikels. Aber auch in diesem Fall kommen wieder Meta-Daten mit ins Spiel: Wenn keine schema.org-Deklarationen vorhanden sind, greift Google auch hier auf vorhandene »Open Graph«-Angaben zurück.

Pinterest

Ein anderes Soziales Netzwerk ist Pinterest. Der Reiz dabei liegt vor allem im Verlinken von Bildern auf Webseiten, die hier sehr prominent präsentiert und auch als Kopie auf der Servern von Pinterest abgelegt werden. Wer diesbezüglich Bedenken hat oder es aus Urheberrechtsgründen verhindern möchte, kann das Anpinnen seiner Bilder mit einem einfach Meta-Tag unterdrücken:

  1. <meta name="pinterest" content="nopin" description="Leider erlaubt der Seitenbesitzer kein Pinnen seiner Inhalte.">

Analytics

Ein weiteres Themengebiet sind die Analyse-Tools. Neben Google Analytics bieten auch Facebook und Pinterest die Möglichkeit, die Aufrufe der eigenen Website zu messen, wenn ihr euch über einen Meta-Tag als Besitzer der Seite verifiziert habt.

Facebook Insights

Um Informationen zu Aktivitäten rund um die eigene Seite bei Facebook zu erhalten, könnt ihr euch in Facebook Insights umschauen. Die eigene Website muss dazu mit diesen Angaben mit einem Facebook-Account verknüpft werden:

  1. <meta property="fb:admins" content="user_id">
  2. <meta property="fb:app_id" content="your_app_id">

Die User-ID und die App-ID findet ihr im Insight-Dashboard, hier helfen aber auch die Insights-Dokumentation auf den Facebook-Entwicklerseiten weiter.

Pinterest Analytics

Pinterest bietet eine sehr ähnliche Funktionalität wie Facebook an: Zuerst schaltet ihr die eigene Webseite in eurem Pinterest-Account frei, danach muss auch hier der Verifizierungs-Code in den head der Seite:

  1. <meta name="p:domain_verify" content="">

Google Analytics/Webmaster-Tools

Google Analytics und die Webmaster-Tools von Google, Bing oder Yahoo! wollen genauso verifiziert werden, bevor ihr Zugriff auf die Informationen erhaltet. Dies geschieht auch entweder über ein Meta-Tag oder über eine Datei, die im Root der Website ablegt wird. Um so viele unnötige Infos wie möglich im head-Bereich zu vermeiden, empfiehlt sich an dieser Stelle die Validierung per Datei.

Fazit

Heutzutage gibt es unzählige Möglichkeiten eine Webseite mit vielen – teilweise sehr speziellen – Informationen und Funktionen zu erweitern. Jeder Betreiber sollte sich aber sehr genau überlegen, welche Angaben sinnvoll sind und auf welche Spielereien besser verzichtet werden kann. Mit den vorgestellten Anregungen dieses Artikels lässt sich der head-Bereich der eigene Seiten nun nach individuellen Bedürfnissen optimieren.

Kommentare

Tim Pietrusky
am 20.12.2013 - 08:50

Vielen Dank für diese Zusammenstellung!

Die Open-Graph Meta-Tags können mit dem Facebook Object Debugger unter https://developers.facebook.com/tools/debug validiert werden.

Permanenter Link

Manuel Strehl
am 20.12.2013 - 09:23

Danke für die beiden Artikel! Mir ist ja leider schleierhaft, was sich die OG-Entwickler dabei gedacht hatten, das proprietäre [code]@property[/code]-Attribut bei [code]<meta[/code] einzuführen statt [code]@name[/code]. Kennt ihr eine Methode, diese FB-Einbindungen valide zu bekommen?

Permanenter Link
Frederic Hemberger

Frederic Hemberger (Autor)
am 21.12.2013 - 16:55

Open Graph basiert auf RDFa, welches das "property"-Attribut verwendet.

Um das Ganze in HTML5 valide umzusetzen, muss der Code so aussehen
(Hab ich grad erst herausgefunden, benutze selber kein Facebook oder Open Graph):

  1. <!DOCTYPE html>
  2. <html prefix="og: http://ogp.me/ns#">
  3.     <head>
  4.         <meta property="og:title" content="The Rock"/>
  5.         <meta property="og:type" content="movie"/>
  6.         <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
  7.         <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
  8.         <meta property="og:site_name" content="IMDb"/>
  9.         <title>Validator-Test für Open Graph</title>
  10.     </head>
  11.     <body>
  12.     </body>
  13. </html>
Permanenter Link

Henry Zeitler
am 23.12.2013 - 12:18

Tolle Übersicht. Noch zwei Anmerkungen:
Eine ebenfalls wichtige Komponente ist rel="alternate", zumindest für den SEO-Bereich. Die Einsatzmöglichkeiten sind vielseitig:

  1. <!-- Multilanguage Sites -->
  2. <link rel=”alternate” href=”<a href="http://example.com/en-ie">http://example.com/en-ie</a>” hreflang=”en-ie” />
  3. <!-- Mobile Site -->
  4. <link rel="alternate" media="only screen and (max-width: 640px)" href="<a href="http://m.example.com/page-1"">http://m.example.com/page-1"</a> >
  5. <!-- RSS Feed -->
  6. <link rel="alternate" type="application/rss+xml" href="feed/">

schema.org kann auch im Head eingesetzt werden. Z. B.:

  1.  <head itemscope itemtype="<a href="http://schema.org/WebPage">
  2. ">http://schema.org/WebPage">
  3. </a>        <title itemprop="name">Seitentitel</title>  
  4.         <meta itemprop="description" name="Beschreibung" content="Beschreibung">
  5.         <meta itemprop="image" content="Link zum Image">
  6.  </head>

Permanenter Link

Henry Zeitler
am 23.12.2013 - 18:50

In der itemtype-Annotation natürlich ohne a-Tag. War die automatische Umwandlung ;)

Permanenter Link

Die Kommentare sind geschlossen.