Drücke die Tasten ◄ ► für weitere Artikel  

Social-Media-Sharing: So optimierst du deine Seite für Google+ und Facebook

Aus dem
t3n Magazin Nr. 28

06/2012 - 08/2012

Google+ und Facebook stellen durch Nutzer empfohlene Webseiten höchst unterschiedlich dar – meist eher schlecht als recht. Dabei unterstützen die sozialen Netzwerke das Open-Graph-Protokoll, mit dem man als Betreiber einer Website explizit Informationen bereitstellen kann. Genutzt hat das kaum jemand. Bis jetzt.

Social-Media-Sharing: So optimierst du deine Seite für Google+ und Facebook
Socia-Media-Sharing mit Google+ und Facebook

Im Prinzip sind Maschinen, und damit auch soziale Netzwerke, dumm. Schon ein Blick in den dortigen Nachrichtenstream offenbart: Die Webseiten werden mal mit, mal ohne Beschreibungstext gezeigt, mit zu kleinem, falschen oder ganz ohne Bild – obwohl diese scheinbar alle Informationen enthalten.

Der Grund ist einfach: Die Maschinen schnappen sich jene Informationen, die sie als erstes im Quelltext einer Webseite finden. Und das kann unter Umständen auch ein Werbebanner sein, das sicher kein Nutzer anklicken würde, hat es doch mit der eigentlichen Seite nichts zu tun.

dms eb3b09af8af9244141233b4248808ea8
Eine mit Open-Graph-Protokoll bei eingebundene Website.

Doch es gibt einen Ausweg aus dem Dilemma, um seine Seite ins rechte Licht zu rücken: das Open-Graph-Protokoll (OPG). Dies wurde ursprünglich von entwickelt und lehnt sich an Dublin-Core, Mikroformate und RFDa an. Das Prinzip dahinter ist ganz einfach: Aus der jeweiligen Seite macht der Betreiber durch Meta-Elemente (Meta-Tags) im HTML-Kopf <head> einfach ein soziales Objekt, das alle wichtigen Informationen in maschinenlesbarer Form enthält.

Wenig bis gar nicht dokumentiert unterstützen die großen Netzwerke diese bereitgestellten Informationen schon längst. Insbesondere Google+, aber auch Facebook verwenden diese noch vor dem eigentlichen Seitentitel oder Description-Element der Seite. So lässt sich dem Netzwerk quasi diktieren, wie es die Seite darzustellen hat.

Bevor aus der Seite über Meta-Elemente ein soziales Informationsobjekt wird, müssen die benötigten Daten bereitgestellt werden. Dabei gilt es, festzulegen, was auf der Seite empfohlen werden soll: die Website als solches, ein einzelner (Blog-)Artikel, das Autorenprofil oder etwa die Rezension eines Kinofilms. Diese Einteilung bezeichnet man als Inhaltstyp; sie kann unter Umständen die Platzierung und Darstellung der Seite innerhalb des Netzwerks beeinflussen.

dms 6cac344ec7478504be14f5177779e334
Dieselbe Website bei Google+, dieses Mal ohne Open-Graph-Protokoll.

Der Titel lässt sich am Beispiel WordPress mit $post->post_title beziehungsweise the_title() recht einfach auslesen; andere Dinge wie das Bild in der richtigen Thumbnail-Größe müssten zunächst noch angelegt werden. Im Idealfall passiert das automatisch im CMS oder ; das WordPress-Plugin „SocialMediaEnhancer“ bietet dafür ein gutes Beispiel.

Das soziale Objekt

Die aufzubereitende Seite sollte folgende Merkmale enthalten: einen Titel, eine Kurzbeschreibung, einen Inhaltstyp, ein Bild und andere Informationen wie die „canonical URL“. Nach dem Schema des Open-Graph-Protokolls wird daraus dann ein soziales Objekt, mit dem die Netzwerke umgehen können. Den Titel etwa definiert das Meta-Element og:title im Head-Bereich des HTML-Quelltexts.

Titel-Definition eines sozialen Objekts

<meta property="og:title" content="Titel des Artikels">

Das Attribut „content“ definiert den Inhalt, und „property“ (beginnt beim OGP mit „og:“) gibt Auskunft über die Art der Information. Dabei stellt das Open-Graph-Protokoll folgende Inhaltstypen für „property“ zur Verfügung:

  • „og:type“ gibt Auskunft über das Objekt. Ein regulärer Blogartikel wird mit „article“ gekennzeichnet, eine Buchbesprechung mit „book“, ein Film mit „movie“, ein Autorenprofil mit „profile“ und die Website als Ganzes mit „website“.
  • „og:title“ und „og:description“ definieren Titel und Beschreibung des Objekts. Dies sind genau jene Informationen, die die sozialen Netzwerke später hauptsächlich anzeigen.
  • „og:image“ definiert das Thumbnail, das wohl wichtigste Merkmal, um beim Nutzer Aufmerksamkeit zu erzeugen. Dieses Bild sollte in ausreichender Größe vorliegen und – falls möglich – auch im idealen Seitenverhältnis (je nach Netzwerk quadratisch, 4:3 oder 16:9), da sonst ein zu kleines Bild angezeigt wird. Definiert werden sollte es immer – auch wenn zum Beispiel der Artikel gar kein Bild enthält. In diesem Fall ist das Logo der Website als Fallback zu empfehlen. Denn im Vergleich zum Eintrag ohne Bild wirkt das Logo besser.

dms 3a682d5e90edf93fc62b25e8c7e6b7c8
Das gleiche Bild zeigt sich bei Facebook. Im Beispiel mit unterstütztem Open-Graph-Protokoll.

Die optionalen Parameter „og:image:width“ und „og:image:height“ spendieren der Maschine darüber hinaus Informationen, wie groß ein Bild ist. Dies ist nützlich, will man von einem Bild mehrere Größen oder unterschiedliche Seitenverhältnisse bereitstellen. Als Fallback für andere Suchmaschinen und Dienste wird das Link-Element „image_src“ definiert.

Ideale Open-Graph-Informationen

<meta property="og:title" content="Titel des Artikel">
<meta property="og:type" content="article">
<meta property="og:url" content="http://url-des-artikels.de">
<meta property="og:site_name" content="Name der Website">
<meta property="og:description" content="Aussagekräftige Kurzzusammenfassung des Artikels.">
<meta property="og:image" content="http://url-des-artikels.de/artikelbild.jpg">
<meta property="og:image:width" content="283">
<meta property="og:image:height" content="159">
<link rel="image_src" href="http://url-des-artikels.de/artikelbild.jpg">

Grundsätzlich gilt: Je mehr Informationen angeboten werden, desto genauer können die sozialen Netzwerke das Objekt darstellen. Die Startseite einer Website mit dem Typ „website“ könnte allgemeine Informationen bereitstellen, während ein Artikel („article“) die jeweiligen Inhalte wiedergibt. Doch die Informationen sollten prägnant sein. Zwar werden diese in erster Linie von Maschinen erfasst, doch es sind Nutzer, die die Inhalte lesen. Ein mit Keywords bestückter SEO-Text wird sicher niemanden zum Klick auf den Link animieren, geschweige denn eine Suchmaschine beeindrucken.

Technische Einbindung in die Website

Eine statische Website kann mit den Meta-Elementen leicht zu einem sozialen Objekt gemacht werden. Da reicht das Kopieren des genannten Quelltexts im Grunde schon aus.

In einem CMS oder Blog wie WordPress wird es etwas schwieriger. Dort könnte man in der Theme-Datei functions.php einen Hook einrichten – eine Methode, die jedem Artikel die benötigen Meta-Elemente hinzufügt. In jedem Fall sollte die Funktion „Artikelbild / Post Thumbnail“ genutzt werden, um einem Artikel ein Hauptbild hinzuzufügen (Artikel bearbeiten > „Optionen einblenden“). Neue Thumbnail-Größen sind hier empfehlenswert.

Alternativ übernimmt das WordPress-Plugin „SocialMediaEnhancer“ die Arbeit, das sich explizit um die Nutzung des Open-Graph-Protokolls kümmert. Es bindet die entsprechenden Meta-Elemente ein, definiert eine neue Thumbnail-Größe und verwendet als Fallback das erste Bild aus dem Artikel, falls das Hauptbild nicht genutzt wird. Darüber hinaus bindet es die Share-Buttons von Google+, Facebook und Twitter ein, die nicht über externes JavaScript geladen werden, um Ressourcen zu sparen. Es ermittelt die Nutzer-Empfehlungen im Vorfeld und speichert diese zur Anzeige im Artikel. Forks und explizite CMS-Anpassungen des Plugins sind übrigens ausdrücklich erwünscht.

Ausblick

Zwar extrahieren die sozialen Netzwerke auch ohne das Open-Graph-Protokoll Inhalte aus der Seite, doch mit dem Protokoll können Entwickler die Darstellung direkt beeinflussen. Wer das OGP in seine Seite einbinden möchte, kann auf Snippet-Tools von Google und Facebook zurückgreifen, um zu überprüfen, welche Informationen am Ende ausgelesen werden.

Links und Literatur

Softlink 3131
  1. 1 http://ogp.me
    Open Graph Protocol
  2. 2 https://developers.google.com/+/plugins/snippet/
    Google+ Snippet mit OGP-Unterstützung
  3. 3 https://developers.facebook.com/docs/opengraph/
    Facebook mit OGP-Unterstützung
  4. 4 http://goo.gl/j8kn7
    Über rel="canonical"
  5. 5 http://codex.wordpress.org/Theme_Development#Plugin_API_Hooks
    Hooks in WordPress
  6. 6 http://codex.wordpress.org/Post_Thumbnails
    Thumbnails in WordPress
  7. 7 https://github.com/macx/SocialMediaEnhancer
    SocialMediaEnhancer
  8. 8 http://www.google.com/webmasters/tools/richsnippets
    Google-Debugger
  9. 9 https://developers.facebook.com/tools/debug
    Facebook Debugger
Autor:
303 Shares bis jetzt –Dankeschön!

Bewerten
VN:F [1.9.22_1171]
23 Antworten
  1. von Peter am 21.05.2012 (14:31Uhr)

    Hi,

    der 2.Link geht ebenso wie der 3. auf Facebook ;)

  2. von David Maciejewski am 21.08.2012 (14:48Uhr)

    Danke Peter, der Link ist hier nun korrigiert.

  3. von ViATiCO - Agentur für Technik und Marke… via facebook am 22.08.2012 (08:46Uhr)

    Super Artikel! Danke.

  4. von Sebastian am 22.08.2012 (12:22Uhr)

    Für den Großteil der Aufgaben gibt es standardisierte Meta-Elemente. Proprietäre Erweiterungen haben im Netz nichts zu suchen. Wir haben doch lange genug darauf gewartet, dass das Web überall einigermaßen funktioniert. Ist jedenfalls meine Meinung.

    http://sgaul.de/2012/06/21/optimiert-fur-internet-explorer-und-facebook/

  5. von David Maciejewski am 22.08.2012 (12:37Uhr)

    @Sebastian Man kann seine Webseite mit Metainformationen anreichern und so den Maschinen klar machen, was sie vor sich haben, oder man lässt es, weil einem die Art nicht passt. Letzteres ist nicht zielführend und kontraproduktiv. Zudem tun Metainformationen niemanden weh, machen nichts kaputt und lassen deine Webseite weiterhin validieren.

  6. von Axel Fresh am 22.08.2012 (14:16Uhr)

    Reicht nicht eigentlich das 'All in One SEO Pack'? Ich hatte noch keine Probleme bzgl. Social Media.

  7. von David Maciejewski am 22.08.2012 (14:20Uhr)

    Schlussendlich bedarf es keines einzigen Plugins. Der Artikel erklärt ja, wie man es auch händisch allgemein umsetzen kann. Und damit richtig er sich auch an Nicht-WordPress-User. Dies war hier nur als Beispiel erwähnt.

  8. von Sebastian am 22.08.2012 (16:28Uhr)

    @David: Es geht hier nicht um allgemeine Metainformationen (ich begrüße jede Bestrebung hin zum semantischen Web), sondern darum, ob man proprietäre Protokolle einzelner Anbieter unterstützen oder gar verbreiten sollte. Neben bei den W3C-Metaelementen und Dublin Core brauchen wir sicher nicht noch weiteren Datenmüll für Dienst a, b und c. Du magst das jetzt als zielführend betrachten, das ist aber leider recht kurzsichtig: Wenn man sich all das bieten lässt, werden die großen Player stets eigene Technologien aufdrücken, statt sich an Standards zu orientieren.

    Und natürlich macht unnützer Datenmüll sogar ziemlich viel kaputt: Das Internet wird langsamer, mehr Durchsatz kostet mehr Geld, verbraucht mehr Strom, schädigt mehr die Umwelt usw. Es wäre sicher ein leichtes, das Internet um 10% Ballast zu befreien, indem man einfach nur auf derartigen Blödsinn verzichtet. Da geht es nicht nur um ein paar Millionen...

  9. von Christopher Nickel am 22.08.2012 (22:49Uhr)

    Das Thumbnail kann man auch mit



    definieren, oder?

  10. von Christopher Nickel am 22.08.2012 (23:11Uhr)

    Ups :D falscher Kommentar.
    Ich meinte, kann man das Thumbnail auch mit:



    definieren :) ?

  11. von Twitter ist doof [TechnikLOAD 95] » t3n… am 23.08.2012 (16:01Uhr)

    [...] Social-Media-Sharing: So optimierst du deine Seite für Google+ und Facebook [...]

  12. von Arnold Margolf am 24.08.2012 (08:49Uhr)

    Ich nenne das : "Nicht SEO sondern FAO – Die Kunst der Facebook-Optimierung für Webseiten"

    http://www.new-pixel.de/index.php/blog/item/48-nicht-seo-sondern-fao-die-kunst-der-facebook-optimierung-fuer-webseiten

  13. von PR-Beiträge 34/2012: Shitstorms & S… am 24.08.2012 (11:02Uhr)

    [...] Social-Media-Sharing: So optimierst du deine Seite für Google+ und Facebook [...]

  14. von Rainer Lauer am 27.08.2012 (11:34Uhr)

    Für WordPress gibt es da ein schönes Plugin. Ich nutze es schon lange. Dabei kann explicit festgelegt werden ob es sich um einen Beitrag, ein Profil, ein Produkt oder Video handelt. Die passenden Titel, Beschreibungen und Meta Tags können leicht ohne Kenntnisse von html oder php eingetragen werden. Sogar ein Rating für den entsprechenden Review kann aktiviert werden. Das Plugin heist SEO Ultimate und neben einem 404 Monitor, Nofollow Manager bietet es auch noch einen Link Mask Generator. Ich kann diese Plugin mit seinen vielen Modulen nur empfehlen und bin sehr zufrieden damit.

  15. von Linksammlung KWs 33 und 34/2012 | daburn… am 27.08.2012 (21:53Uhr)

    [...] Social-Media-Sharing: So optimierst du deine Seite für Google+ und Facebook: Tipps, wie man seine Website für das Teilen via Link in sozialen Netzwerken optimiert. [...]

  16. von sam.steiner am 04.09.2012 (20:14Uhr)

    Das Plugin ist unfertig (wie auch im Artikel erwähnt). Finde es zu früh, darüber zu berichten, wenn in der Installationsanleitung drin steht, man solle eine functions.php des Themes ändern. Das würde ja heissen, man muss ein Child Theme erstellen, obwohl man zufrieden ist mit dem Theme und keine manuellen Anpassungen vornehmen will.

    (Auch hätte man transparenterweise deklarieren sollen, dass das Plugin vom Artikelschreiber selbst stammt)

    Die Idee ist gut, habs aber deaktivieren müssen aus obigen Gründen.

  17. von David Maciejewski am 05.11.2012 (16:20Uhr)

    @sam.steiner

    Das Plugin habe ich inzwischen gründlich überarbeitet. Es ist nicht mehr nötig, die function.php zu nutzen. Dies enthält nun selbst eine Optionsseite, mit der du alles einstellen kannst.
    Einfach installieren und Gas geben!

  18. von Benjamin_Wagener am 15.12.2012 (13:56Uhr)

    @David: Bin gerade über Technikwürze auf diesen Artikel gestoßen. Fände es irgendwie mal praktisch zu erfahren was der SocialMediaEnhancer im Vergleich zu WordPress SEO von Yoast kann. WordPress SEO von Yoast ist klar dokumentiert mit Screenshots usw.. Beim SocialMedieEnhancer ist das jetzt nicht wirklich gegeben...

  19. von David Maciejewski am 17.12.2012 (09:03Uhr)

    Das stimmt, Benjamin. Ich hatte bisher keine Zeit, die Doku zu machen oder das Plugin bei WordPress hochzuladen. Der SocialMediaEnhancer stellt zwei neue Thumbnailgrößen für jeden Post bereit, der nur für die Verteilung an Google+, Facebook und Twitter bestimmt ist. Diese Netzwerke erhalten auch Metainformationen für genau diesen Zweck – und nichts anderes.
    Darüber hinaus sammelt der SME die Anzahl der Shares und Likes aller Portale und cacht die – im Gegensatz zu den nativen Buttons der Netzwerke, die alles bei jedem Post via JavaScript nachladen. Zudem gibt es performante Sharing-Buttons ohne JavaScript.

    Ich werde demnächst mal Zeit in die Doku stecken. Wenn du noch Fragen hast, melde dich doch einfach persönlich bei mir.

  20. von Benjamin_Wagener am 17.12.2012 (12:01Uhr)

    Klingt gut. Wird der SME dann auch ins WP-Plugin-Repo eingepflegt, damit man so automatisch Updates beziehen kann?

  21. von Cortex: Die beste Social-Sharing-Extensi… am 15.04.2013 (18:30Uhr)

    [...] Social-Media-Sharing: So optimierst du deine Seite für Google+ und Facebook – t3n News [...]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich Facebook
Social Locker: Mächtiges Plugin verspricht Webseiten mehr Reichweite in Sozialen Netzwerken
Social Locker: Mächtiges Plugin verspricht Webseiten mehr Reichweite in Sozialen Netzwerken

Social Locker ist ein WordPress-Plugin, das es auch als jQuery-Version gibt und mit dem ihr eure Nutzer per Social-Media-Aktion für bestimmte Inhalte bezahlen lassen könnt. Was damit genau möglich. ... » weiterlesen

Social Media: 10 Tipps für mehr Viralität im Social Web
Social Media: 10 Tipps für mehr Viralität im Social Web

Ihr teilt eure Inhalte auf euren Social Media-Kanälen? Und eure Fans und Kunden tun das auch? Damit das quasi von selbst richtig gut aussieht und sich fast von selbst verbreitet, haben wir hier ein. ... » weiterlesen

Social-Media-Analytics: 8 Tools zur Analyse deiner sozialen Aktivitäten [#smwhh]
Social-Media-Analytics: 8 Tools zur Analyse deiner sozialen Aktivitäten [#smwhh]

Fast jedes Unternehmen ist mittlerweile in Sozialen Netzwerken aktiv, teilt regelmäßig auf Plattformen wie Facebook oder YouTube eigene und fremde Inhalte. Doch was bringt das alles eigentlich?... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen