OnPage.org

Mehr erfahren
AdWords, KMU, wir machen den Unterschied!
Mehr erfahren

Open Graph – Social Media kontrollieren

Internet  |   |  , 10:20 Uhr  |  15 Kommentare

Beim Teilen von Links auf Facebook oder auch Google+ werden nicht nur die URL, sondern auch der Titel, eine Beschreibung und ein Bild angezeigt. In den SERPS kann man eine Meta-Description angeben, doch wie macht man das hier? Mit den Meta-Tags fürs soziale Web – dem Open Graph Protokoll.

Einbau

Wie bei den „normalen Metadaten“ müssen auch hier nur Meta-Tags gesetzt werden, jedoch andere als für die Suchmaschinen:

og:title Der Titel der Seite
og:type Typ der Seite. Zum Beispiel game für Spiele oder movie für Filme. Eine vollständige Liste gibt es hier.
og:image Das Bild, was zur Anzeige genommen wird.
og:url Die Url der Seite. Diese ist wie der canonical-Tag zu beachten, es sollte pro Inhalt eine eindeutige Url geben.
og:description Beschreibung der Seite (optional)
og:site_name Name der kompletten Website (optional)

Als Beispiel habe ich eine Seite aufgesetzt, die das Lorem Ipsum enthält. In den Meta-Tags ist aber folgendes zu finden:

<meta property="og:title" content="Open Graph Test" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://stevieswebsite.de/test/opengraph.html" />
<meta property="og:image" content="http://images.stevieswebsite.de/tools/smarty/debug.jpg" />
<meta property="og:description" content="Ein Test f&uuml;r das OpenGraph-Protokol - Besuch lohnt nicht" />
<meta property="og:site_name" content="SteviesWebsite" />

Wenn man diese Seite jetzt als Link bei Facebook eingeben möchte, erhält man ein Bild und eine Beschreibung, die es auf der Seite gar nicht zu finden gibt!

Opengraph auf Facebook

Open Graph auf Facebook

Ein ähnliches Bild bietet Google+:

OpenGraph auf Google+

Open Graph auf Google+

Neben den Basisdaten gibt es noch Eigenschaften für:

  • Den Standort
  • Kontaktinformationen
  • Videodaten
  • Audiodaten

Vollständige Liste

Vorteile und Möglichkeiten

Durch Open Graph kann man das Auftreten einer Seite in sozialen Netzwerken positiv beeinflussen. Wichtig sind vor allen die Beschreibung und das Bild. Den Titel kann man einfach wie im <title> setzen. Beim Bild könnte man zum Beispiel das Logo, oder ein bestimmtes Bild im Artikel mit passender Größe einbauen.

Die Beschreibung sollte eine so begrenzte Länge haben, dass sie vollständig zu lesen ist. Sie könnte etwas emotionaler sein als die Meta-Description. Zum Beispiel mit Aufforderungen oder Ähnlichem. Der mögliche Besucher sucht schließlich nicht genau nach der Seite, sondern findet sie einfach im sozialen Netzwerk. Sein Interesse für das Thema muss erst noch geweckt werden.

Über den Autor:

Mein Name ist Stefan Wienströer, ich bin der Entwickler des CMS ContentLion. Damit erstelle ich zur Zeit ein neues SEO Tool, welches mit einem eigenen Crawler ausgestattet wird. Ich blogge auch ab und an in meinem eigenen Blog über die Themen Webentwicklung, Webanalyse und SEO.
S. Wienströer, stevieswebsite.de
Sie befinden sind hier: Open Graph – Social Media kontrollieren

Kommentare zu diesem Beitrag:

  1. Sebastian Website sagt:

    Wichtiges Thema…

    Hier zwei praktische Generatoren zum Erstellen von OpenGraph Tags:

    delrosario.mobi/open-graph-protocol-generator
    opengraphgenerator.com

    Gruß,
    Sebastian

  2. Markus Website sagt:

    Hab das bei mir auch eingebaut, allerdings wird es nur eingebunden wenn der Facebook Bot kommt, an Google+ hab ich bisher da noch gar nicht dran gedacht. Kennt einer zufällig den Bot Namen von +?

  3. Mathuseo sagt:

    Als Ergänzung noch dazu: Die offizielle Webseite des Open Graph Protocols für weiterführende Infos, Beispiele und ergänzende Beschreibungen: ogp.me

    Gruß.

  4. Markus Bruchmann Website sagt:

    Ich habe vor einiger Zeit ein WordPress Plugin für die OpenGraph Tags geschrieben.

    Viele Grüße

  5. Stefan Website sagt:

    Moin Stefan,

    kleine Ergänzung: OGP ist ja von Facebook. Google (zusammen mit Bing und Yahoo) haben Anfang dieses Jahres mit schema.org eine Gegeninitiative auf den Weg gebracht, siehe hier. Könnte sich lohnen, da mal einen Blick drauf zu werfen.

    Liebe Grüße,
    (ebenfalls) Stefan 🙂

  6. eMaBo Website sagt:

    Hmm – wieder was, was man pflegen sollte. Aber ich denke auch, dass es im Social-Media-Umfeld dazugehört. Einmal implementiert ist man für die „Social-Zukunft“ gewappnet. Hoffentlich auch für das was nach Facebook und Google+ noch so kommen wird 😉

  7. Sebastian Website sagt:

    Hallo,

    in eigener Erfahrung muss ich leider berichtigen. Google+ scheint og:image zu ignorieren. So war es auf jeden Fall bei allen meinen Seiten. Nur das hat geholfen.

    Gruß
    Sebastian

    • Stefan Website sagt:

      Bei mir hats funktioniert, hatte das Bild selbst nicht auf der Seite eingebunden – Hatte gar kein Bild eingebunden. Vielleicht nimmt er das nur, wenn sonst kein Bild vorhanden ist.

  8. Sebastian Website sagt:

    Sorry HTML wird scheinbar ignoriert, ich meine natürlich [spitzeklammerauf]link rel=“image_src“ href=“http://www.goopl.de/goopl-150×150.png“ /[spitzeklammerzu]

  9. Ulli Website sagt:

    Schöne Sache. Die normale Meta-Description passt ja nicht bei jeder Seite unbedingt gut für Facebook.

  10. […] Wie Webentwickler die Darstellung via Open Graph mit Meta-Tags beeinflussen können steht bei seo-united beschrieben […]

Kommentieren

Loading Disqus Comments ...

Ihre Agentur noch nicht dabei?

Ihr Job noch nicht dabei?

Ihr Beitrag noch nicht dabei?