Open-Graph

Open Graph: Social Media für SEO
Inhalt des Artikels

Das Open-Graph Protokoll erweitert den Header deiner Webseite und gibt dir die Macht über die Darstellung deiner Seiten in sozialen Netzwerken.

Welche Beschreibung wird auf Facebook oder Twitter angezeigt? Welches Bild wird beim Teilen deiner Seiten angezeigt? Das kannst du mit Open-Graph festlegen.

Wie kann man Social-Media für SEO nutzen

Wenn man bei Facebook eine Seite teilt, eine Seite bei Twitter tweetet, sehen das andere (und meist wird dann wieder geteilt oder geliked).

Dass eine Webseite weiter geteilt wird, dadurch mehr Traffic (Besucher) und vielleicht auch Backlinks bekommt, ist sicher der Job eines SEOs.

Aber wie kann ein Suchmaschinenoptimierer das erreichen? Social-Media-Meta-Tags verwenden, die festlegen, wie das Beitragsbild aussieht, wenn man eine Seite bei Facebook teilt und das geht mit Open-Graph.

Darum braucht man Social-Media-Tags

Hier eine Webseite von einem kleinen Unternehmen, ich fand die Leistung toll und wollte das auch allen Freunden bei Facebook sagen. Ich kopiere also die URL und teile sie als Statusmeldung (denn leider existierten keine Sharebuttons). Und dann kommt das zum Vorschein.

Social Media SEO - geteilt ohne Open Graph

Eine URL aber keine Erklärung, kein Bild?
Ok auf der Seite existieren nur per CSS (Cascading Style Sheet) eingebundene Bilder – Facebook sieht diese nicht automatisch!

Würde einen solchen Beitrag jemand Liken oder gar Teilen?
Und wenn ja, müsste das dem Unternehmen nicht ein wenig unangenehm sein?

Klar einen solchen Post in meinem Feed werde ich nicht liken, nicht teilen und sicher nicht anklicken. Vielleicht markiere ich es als Spam. Die Click-Through Rate (CTR) steigert ein solcher Beitrag nicht. Social-Media-SEO ist hier also dringend erforderlich!

Nun der Vergleich mit dem Teilen der intenSEO Startseite.

Ich habe mit den Open Graph Tags ein Bild festgelegt. Das bedeutet auch, wenn mehrere Bilder existieren, wird beim Teilen immer dieses verwendet.

Social Media SEO - geteilt mit Open Graph

Dazu eine Beschreibung und einen Title. Beides muss, weil es ja in Social-Networks geteilt wird, gar nicht so Keyword-Rich sein. Bei diesen Tags achtet man vor allem auf Klickbarkeit.

Das wäre also eine Einstellung für die Startseite, nicht spektakulär aber mit Firmenlogo und passender Aussage, worum es hier geht. Für die Unterseiten braucht es natürlich wieder andere Bilder und Beschreibungen. Schöner und größer, du kennst das!

Welche Social-Media-SEO-Tags gibt es?

Man kann in den sozialen Netzwerken vieles Teilen. Bilder, Videos oder Beiträge wie diesen hier. Die meisten Netzwerke, wie auch Facebook, greifen auf Social-Graph zurück. Auch Google+ hatte es getan, solang es existierte. Lediglich Twitter verwendet Twitter-Cards.

Folgende Twitter Cards gibt es: Summaries, Images, Galleries, Apps, Video, Audio, und Products. Auch Facebook hat ein Sammelsurium an möglichen Meta Tags.

Und folgendes bietet Facebook: Articles, Photos, Audio, Video, und einiges mehr.

Wer WordPress nutzt und das Yoast SEO Plugin verwendet, der hat es schon sehr leicht diese Meta-Tags einzubinden. Wer das Plugin nicht kennt, hier meine Zusammenfassung über das Yoast SEO Tool für WordPress und zwei weiter gute SEO Plugins.

Diese Social-Media-Meta-Tags sollte man auf jeden Fall verwenden

Um Herr über das „Geteilt werden“ zu sein und selbst zu bestimmen, wie Ihr in den gängigen Social-Networks ausseht, braucht man wenigstens die Artikel (FB) und die Twitter Summary.

Wenn du auch bei Pinterest gepinnt werden möchtest: Auch hier gibt es Meta Tags – die sogenannten Rich Pins. Ich bleibe bei den häufigsten Verdächtigen: Facebook, Twitter und andere Netzwerke die sich an OG halten.

Der Artikel oder die Summary sind der einfachste Weg, um in Social-Networks nicht 0815 auszusehen.

Alle Social-Media-Tags und passende Meta-Tags

Hier also das komplette SEO-Meta-Tags und Social-Media-SEO-Tag -Table das eine Webseite braucht. (Das beinhaltet auch Meta-Description und Title Tag!)

<!-- Der HTML- TAG braucht das itemscope und itemtype attribut! -->
<html itemscope itemtype="http://schema.org/Article">

<!-- Das gehört in den Head Bereich eurer Webseite, Title und Meta Description -->
<title>Der Page Title. Maximal 70 Zeichen lang, mindestens 55</title>
<meta name="description" content="Die Meta-Description, nicht länger als 155 Zeichen." />

<!-- Schema.org markup für Google sieht so aus: -->
<meta itemprop="name" content="Name, das steht hier für den Title">
<meta itemprop="description" content="Seitenbeschreibung für Google ">
<meta itemprop="image" content=" http://www.example.com/image.jpg">

<!-- Die Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Seiten Title">
<meta name="twitter:description" content="Twitter Beschreibung ist kürzer als 200 Zeichen">
<meta name="twitter:creator" content="@author_handle">

<!-- Twitter summary card mit einem großen Bild (wenigstens 280x150px) -->
<meta name="twitter:image:src" content=" http://www.example.com/image.html">

<!-- Open Graph data (Facebook) -->
<meta property="og:title" content="Title muss nicht der selbe sein wie oben" />
<meta property="og:type" content="article" />
<meta property="og:url" content=" http://www.example.com/" />
<meta property="og:image" content=" http://example.com/image.jpg" />
<meta property="og:description" content="Beschreibung mehr auf Social Media User zugeschnitten als die Meta-Description" />
<meta property="og:site_name" content="Name der Seite, hier intenSEO" />
<meta property="article:published_time" content="2014-07-25T07:59:00+02:00" />
<meta property="article:modified_time" content="2014-07-16T19:08:47+02:00" />
<meta property="article:section" content="Article Section" />
<meta property="article:tag" content="Article Tag" />
<meta property="fb:admins" content="Facebook numberic ID des Admins" />

Warum Open-Graph verwenden

  • Um zu bestimmen, wie deine Webseite geteilt wird.
  • Um die Click-Through-Rate aus sozialen Netzwerken deutlich zu erhöhen!

Wie Open-Graph verwenden

Du baust einfach die passenden Metadaten von oben ein. Achtest aber bei den Titeln und der Beschreibung darauf, dass der Inhalt nicht auf Keywords optimiert werden muss.

Es ist darauf zu achten, was ein Mensch in deiner Zielgruppe anklicken würde. Nicht was eine Maschine darüber denkt.

Auch die Bilder und Social-Media Bildgrößen sind nicht optimiert auf Ladezeit, sondern auf Schönheit und Klickbarkeit.