HAN SEO - SOCIAL MEDIA BLOG

Im Zuge der immer größer werdenden Nutzung und Akzeptanz von Social Media Diensten, werden auch immer Seiten an den so genannten Open Graph angebunden.

Dabei gibt es allerdings einiges zu Beachten bzw. einige Konfigurationsmöglichkeiten für die Inhalte, die an den Open Graph übermittelt werden sollen.

Open Graph – Was ist das?

Das “Open Graph Protocol” wird z. B. intensiv von Facebook genutzt, um bei dem Teilen (Sharen), Senden (Send) und Mögen (Liken) von Webseiten oder einzelnen News bzw. Blogartikeln, automatisiert Daten über die Herkunft an Facebook zu senden. Facebook hat im Developer-Bereich eine eigene Dokumentation zum “Open Graph Protocol” veröffentlicht.

Dabei werden nicht nur die URL der jeweiligen Seite, sondern auch der Seitentitel, eine Beschreibung sowie ein Bild übergeben. Sind für diese Daten keine Vorgaben gesetzt, werden Titel, Beschreibung und Bild automatisch gewählt und an Facebook übertragen. Im Normalfall wären das der eigentliche Seitentitel (bei einer Webseite), bei Blogartikeln die entsprechende Headline, die Beschreibung aus dem Meta-Tag Description und falls nicht vorhanden/gefüllt, die ersten Wörter des Beitrags/Seiteninhalts, sowie ein Bild (meistens das Logo oder das erste Bild, das gefunden werden kann), übermittelt.

Rechtliche Fallstricke – potenzielle Probleme

Problematisch kann es werden, wenn man keine Rechte an einem Bild besitzt, dieses trotzdem verwendet und gerade dieses Bild an den Open Graph übermittelt wird. Wenn man keine festen Vorgaben für den Open Graph gesetzt hat, dann kann das Bild, sowohl beim Posten bei Facebook sowie auch bei Google+, welches veröffentlicht werden soll, gewählt werden. Dabei tauchen auch die Bilder von potenziell integrierten Werbemitteln (Banner, etc.) auf. Hierbei könnte es schon kritisch werden.

Damit das alles nicht passiert und man immer auf der sicheren Seite ist, vergibt man am Besten feste Vorgaben für die Daten, die an den Open Graph übermittelt werden sollen.

Inhalte kontrolliert an den Open Graph übermitteln

Die Angaben für den Open Graph ähneln den herkömmlichen Meta-Tags und werden ebenfalls wie die Meta-Tags im Headbereich des Quellcodes hinterlegt.

Die Angaben werden im folgenden Stil bzw. mit dem folgenden Tag integriert:

<meta property="og:Feldname" content="Feldinhalt/Vorgabe" />

Folgende Basis-Tags stehen für Anbindung an den Open Graph zu Verfügung und sollten in jedem Fall angegeben :

• og:title Der Titel der Seite bzw. des Artikels/Posts.
• og:type Der Seitentyp, z. B. blog für Blogs oder product für Produkte oder movie für Filme. Auf ogp.me findet ihr die vollständige Liste.
• og:image Das Bild, welches angezeigt werden soll.
• og:url Die Url der Seite. Achtung: Pro Inhalt sollte eine eindeutige Url angegeben werden.
• og:description Die Beschreibung der Seite (optional)
• og:site_name Name der kompletten Website – Firmenname oder Blogname(optional)

Über diese obligatorischen Basis-Tags hinaus, gibt es natürlich noch eine Vielzahl an weiteren Tags für das Open Graph Protocol – die vollständige Liste findet ihr auf ogp.me.

Die Meta-Tags für die Anbindung dieses Tutorials an den Open Graph sehen wir folgt aus:

<meta property="og:title" content="Tutorial: Webseite an Open Graph anbinden" />

<meta property="og:site_name" content="HAN SEO" /> 

<meta property="og:description" content="Im Zuge der immer größer werdenden Nutzung und Akzeptanz von Social Media Diensten, werden auch immer Seiten an den so genannten Open Graph angebunden. Dabei gibt es allerdings einiges zu Beachten bzw. einige Konfigurationsmöglichkeiten für die Inh..." /> 

<meta property="og:type" content="article" /> 

<meta property="og:url" content="http://www.han-seo.de/tutorial-webseite-an-open-graph-anbinden" /> 

<meta property="og:image" content="http://www.han-seo.de/wp-content/uploads/2011/09/open_graph_protocol_logo1-150x150.png" />

Beim Posten dieses Artikels in Facebook bzw. Google+ sieht der Post dann so aus:

Facebook unterstützt das “Open Graph Protocol” komplett. Ganz im Gegensatz zu Google. Bei Google+ kann immer noch ein Bild für den Post gewählt werden (siehe oben), selbst wenn in den Meta-Tags ein bestimmtes Bild angegeben ist. Text und Titel werden im Normalfall aus den “normalen” Meta-Tags entnommen.
Wann Google+ das “Open Graph Protocol” ebenfalls komplett unterstützen wird ist mir nicht bekannt.

Open Graph Protocol + Facebook + HTML5

So – bis hierhin war die Pflicht – nun kommt die Kür. Im Zuge des aufstrebenden HTML5 könnten einige von euch auf den Gedanken kommen, die “Open Graph Anbindung” HTML valide zu gestalten.
Wer bereits obige “Basis-Tags” in seine Seiten integriert hat, wird wahrscheinlich ziemlich schnell bemerken, dass diese Tags leider nicht HTML valide sind.

Open Graph Protocol valide einbinden

Ich kann es bereits vorwegnehmen – es geht leider nicht. Was kann man denn sonst tun? Ganz einfach, ihr könnt die “Open Graph Tags” allerdings generell ausblenden und nur dann angeben, wenn Facebook auf die Seite zugreift. Bei sämtlichen anderen Zugriffen werden diese Tags dann nicht in den Quellcode integriert.

Die folgende Funktion bindet ihr direkt im HEADER eurer Webseite bzw. des entsprechenden Templates ein – bei WordPress kann diese auch in die “funkctions.php” des aktiven Themes eingebunden werden:

<?php
function is_facebook(){
	if(!(stristr($_SERVER["HTTP_USER_AGENT"],'facebook') === FALSE))
	return true;
}
?>

Den Folgenden Aufruf der Funktion gebt ihr in jedem Fall im HEADER eurer Seite aus – zwischen den Tags hinterlegt ihr die “Open Graph Tags”:

<?php if(is_facebook()){?>

Hier wird der Quellcode für den Open-Graph geschrieben. 

<?php } ?>

Der Vorteil dieser Vorgehensweise ist, dass der Validator eine valide Seite – ohne “Open Graph Tags” vorfindet, Facebook jedoch trotzdem die benötigten Daten für den Open Graph erhält. Dieses Vorgehen wäre TOP, wenn es nicht auch noch andere Social Media Plattformen gäbe, die ebenfalls den Open Graph unterstützen.
Oben habe ich erwähnt, dass Google den Open Graph nicht vollständig unterstützt, dass ist korrekt. Jedoch erkennt Google, dass “Open Graph Tags” im Quellcode vorkommen – werden diese nun allerdings lediglich für die Zugriffe seitens Facebook in den Quellcode integriert, so bleiben diese Tags auch Google vorenthalten.

Hat jemand von euch bereits mehr Erfahrungen mit Google+ und dem Open Graph machen können? Gibt es eine Lösung, die Meta-Tags auch für Google+ einzublenden?

Tutorial: Webseite an Open Graph anbinden, 5.0 out of 5 based on 4 ratings Schlage diesen Artikel Deinen XING-Kontakten vor:
Follow @moedee