Featured Posts

Autoplay der Facebook Videos deaktivieren, so geht´s So deaktiviert ihr die neue Autoplay-Funktion der Facebook Videos   Mittlerweile ist die Autoplay-Funktion bei Videos bei nahezu allen Facebook-Nutzern aktiv. Videos werden dabei direkt nach dem Erscheinen auf dem sichtbaren Bereich eurer Pinnwand...

Action!

SEOkanzler - Der MEGA-SEO-Contest 2013 Der Seokanzler 2013 Deutschland und Österreich wählen den Seokanzler   Der Wahnsinn - nachdem die Wellen des SEOphonist-SEO-Contests abgeebbt  sind, startet bereits der nächste Contest. Der MEGA-SEO-Contest 2013 wurde soeben von Fabian Rossbacher,...

Action!

Gewinne ein Ticket und erlebe das große SEOphonist-Finale LIVE auf dem OMClub 2013 Jedes Jahr findet im Rahmen der dmexco die inoffizielle Party "Hurra.com OMClub 2013" statt. Die Tickets hierfür sind streng limitiert und sind nicht im freien Verkauf verfügbar. Du möchtest unbedingt auf den OMClub und mit den coolen Leuten der...

Action!

SEOphonist - SEO-Contest 2013 Alle Jahre wieder gibt es einen SEO-Contest. So hat auch in diesem Jahr wieder Randolf Jorberg einen SEO-Contest ausgerufen und wenn Randolf zum Wettbewerb ruft, dann wird diesem Aufruf auch Folge geleistet. Die Gewinner werden dann auf einer SEO-Party...

Action!

Google Shopping wird kostenpflichtig Product Listing Ads Bei Google überschlagen sich in den letzten Wochen die Ereignisse. Das neueste Produkt aus dem Hause Google heißt "Product Listing Ads" (PLA). Es handelt sich hierbei um die bisher kostenlos angebotene Google "Shopping" Sparte....

Action!

Tutorial: Webseite an Open Graph anbinden

1

Category : facebook, google, Social Media, Tutorials

Logo - Open Graph ProtocolIm 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.

Facebook Open GraphDabei 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:

HAN SEO - Open Graph

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?

VN:F [1.9.22_1171]
Rating: 5.0/5 (4 votes cast)
Tutorial: Webseite an Open Graph anbinden, 5.0 out of 5 based on 4 ratings Schlage diesen Artikel Deinen XING-Kontakten vor: Deinen XING-Kontakten zeigen


Kommentare (1)

[...] eher darauf klickt, kann man auf der eigenen Website im HTML Code “OG Tags” einbauen. Die Methode lässt sich automatisieren und für Content Management Systeme wie WordPress gibt es sogar enstprechende [...]

Deine Meinung ist gefragt - hinterlasse einen Kommentar

Security Code: