Featured Posts

Vorteile des TV-Trackings Die TV Werbung, die umsatztechnisch bis vor einigen Jahren noch marktf├╝hrend war, wurde mittlerweile vom Online-Marketing ├╝bertroffen. Dennoch stellt sie auch heute noch einen wichtigen Teil des Marketing-Mix vieler Unternehmen dar. Das TV-Tracking...

Action!

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!

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: