-
Die Artikel dieses Blogs können als RSS Feed abonniert werden.
Tocki zwitschert bei Twitter unter twitter.com/tocki.
-
Meta Tags für Facebook
Um die eigene Website für Facebook fit zu machen, ist es mit der vielerorts beschriebenen Integration des Like-Buttons nicht getan. Damit die Website auch im Facebook-Stream nett dargestellt werden kann ist etwas Handarbeit im Head-Bereich der Website von Nöten.
Das Ziel
Wenn jemand einen Link in Facebook postet, dann soll ein Miniaturbild angezeigt werden und der Seitentitel soll übergeben werden:
So schaut ein so eingefügter Link dann aus. Unter dem Seitentitel, der als Link zur Website ausgegeben wird, wird noch die URL der Domain und darunter eine kurze Beschreibung angezeigt. All diese Angaben, sowie das Thumbnail kann mittels der richtigen Meta-Tags beeinflussen.
Die Anpassungen im HTML-Tag
Zunächst muss man die Seite zu einem Element des Open Graphs machen. Dazu erweitert man das <HTML> Element ganz zu Anfang der Seite durch folgende Angaben.
<html dir="ltr" lang="de-DE" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
Erklärung: Die Angaben in der ersten Zeile sind noch nichts besonderes, das sollte in jedem Header einer deutschen Website stehen. In der 2. und 3. Zeile werden Open Graph und Facebook Standards geladen, die die Kommunikation von Facebook mit der Seite ermöglichen.
Die kompletten Meta Tags für Facebook
Nachdem die Seite nun Teil des Open Graphs ist folgen jetzt im <HEAD> Bereich die erweiterten Meta-Tags.
<!-- Facebook Meta Data -->
<meta property="og:image" content="https://blog.tocki.de/wp-content/uploads/2010/10/virgin-2010-thumb.jpg"/>
<meta property="og:locality" content="Stuttgart"/>
<meta property="og:country-name" content="Germany"/>
<meta property="og:latitude" content="48.78502"/>
<meta property="og:longitude" content="9.16254"/>
<meta property="og:type" content="blog"/>
<meta property="og:title" content="Virgin Atlantic Advert 2010"/>
<meta property="og:url" content="https://blog.tocki.de/2010-10-05/virgin-atlantic-advert-2010/"/>
<meta property="og:site_name" content="Blog.Tocki.de"/>
<meta property="fb:admins" content="123456789,234567891"/>
<meta property="fb:page_id" content="200185198887" />
Erklärung:
Nicht alle Angaben sind zwingend, vor allem die Tags zur Lokalisation werden für die Darstellung im Stream nicht benötigt. Sind aber durchaus empfehlenswert, da Facebook mehr und mehr auf eine Verknüpfung mit der realen Welt drängt.
og:image gibt den Pfad zu dem Thumbnail an, das später neben dem Eintrag angezeigt werden soll.
og:locality ermöglicht zusammen mit og:country-name die Herkunftsangabe der Seite.
og:latitude und og:longitude geben die Längen/Breitenangaben an (ein Tool dazu gibt es hier).
og:type Dieser Wert dient Facebook dazu die Website korrekt einzuordnen. Eine Liste der „erlaubten“ Typen gibt es unter http://opengraphprotocol.org/#types
og:title gibt den Titel der Seite an. og:url gibt die URL der zu verlinkenden Website an.
og:site_name dies ist der Name der Homepage – nicht der Name des Artikels, der verlinkt wird.
Wenn man die Website mit einer Fanpage bei Facebook verbinden möchte, dann ermöglichen einem die folgenden beiden Angaben die Verzahnung der beiden. Damit hat man administrativen Zugriff auf einige Facebook-Funktionen auf der eigenen Website („Kommentar entfernen“) und erweitert die Statistiken bei Facebook um die Facebook-Funktionen auf der Website.
fb:admins – die IDs der Admins, bei mehreren Admins mit Komma getrennt.
fb:page_id – die ID der Fanpage, mit der man die Website verbinden möchte.
Einfach mal ausprobieren
Damit ist die Website also fit für Facebook. Besonders gut kann man die Auswirkungen dieses Tunings bei Facebooks „Share“-Funktion sehen. Also einfach gleich hier mal ausprobieren und sich ein Bild davon machen!
// Trackback URL
// Kommentare als RSS 2.0
10 Kommentare zu "Meta Tags für Facebook"
[…] Facebook Open Graph: XML-Meta-Tags […]
[…] Meta Tags für Facebook […]
[…] Infoshttp://ogp.me/https://blog.tocki.de/2010-10-21/facebook-open-graph-meta-tags-header/https://developers.facebook.com/docs/opengraph/keyconcepts/#actions-objectshttp://davidwalsh.name/facebook-meta-tags Dieser Beitrag wurde unter Allgemein abgelegt und mit facebook, meta-tags verschlagwortet. Setze ein Lesezeichen auf den Permalink. ← HTML5 Video: 18 Player für Websites und Blogs […]
Hallo!
Ich habe das Problem, dass Änderungen an den Metatags nicht übernommen werden.
Hatte zunächst zum Test den Code von hier einfach rüberkopiert und erst im Nachhinein geändert und jetzt habe ich auf fast allen Seiten unterschiedliche Buttons mit unterschiedlichen Tags, obwohl diese nur durch EINE Datei geliefert werden. Am Cache liegts nicht…
Kann mir jemand helfen? Es wirkt so, als könnten sie nicht mehr überschrieben werden..
Liebe Grüße!
Kein Kommentar, aber eine Frage: Wie geht das bei Joomla 1.5.26 und WordPress? Wo kann ich da diese Tags eintragen? Ich möchte erreichen, dass beim verlinken in Facebook ein Miniaturbild angezeigt wird. Genau dieser og:image-Verweis wäre da wohl richtig – aber ich komme nicht an das “ Element ganz zu Anfang der Seite“ heran… könnt ihr mir da helfen? Danke!
Hi,
ich habe folgende Infos in mein doctype eingebaut
xmlns:og=“http://opengraphprotocol.org/schema/“
xmlns:fb=“http://www.facebook.com/2008/fbml“>
nun überschreibt dies jedoch einiger meiner CSS Dateien und somit auch das Design der Seite.
Weißt du womit ich das unterbinden kann?
Moin zusammen,
ich habe die Metatags erfolgreich eingebunden, alles klappt auch super, jedoch tritt folgendes Problem auf:
wenn ich im „Status“ bei Facebook die URL meiner Webseite eintrage, dann erscheint auch das Vorschaubild und die Beschreibung, nur werden zwei Miniturbilder angezeigt. Dort steh dann auch „2 von 2“ und rechts danaben steht Miniturbild auswählen. Es wird das img, dass auf meiner Website eingebunden ist abgezeigt und durch Klick auf den Pfeil daneben, kann ich dann auf das eigentlich Vorschaubild wechseln.
Ich möchte aber nur das eigentlich Vorschaubild anzeigen lassen, es soll nicht zwischen den Vorschaubildern gewechselt werden können.
hat jemand von euch eine Idee, woran es liegen könnte???
Danke für Eure Antworten.
Schöne Grüße
Hallo,
war grade auch auf der Suche danach. Allerdings hätte mir ein einfacher Meta-Tag auch gereicht ohne das man da noch dieses Open Graph einbinden muss.
Allerdings erschreckt es mich jetzt schon wieder, was man da alles für Informationen eingeben kann. Dann weiß Facebook direkt schon wieder genau welcher User Admin einer Seite ist etc.
MFG BlackY :-)
Hi, sorry, aber bei mir klappt das gar nicht.
Wenn ich die meta tags so in mein kopiere, dann passiert irgendwie gar nichts. Weder Titel, noch Bild etc ändern sich nicht.
Kann mir jemand helfen?
Danke,
Andy
Hallo,
ich habe das Problem, das wenn ich auf den Like Button auf meiner Seite gehe, und ich das liken bestätige kein Miniaturbild angezeigt wird, keine Beschreibung usw. … wenn ich jedoch direkt in facebook den seitennamen eingebe erhalte ich alle daten.
Kann mir jemand helfen?
CashKaetzchen.com
<!–
if(navigator.userAgent.indexOf(‚MSIE‘)!=-1) document.write(“);
<!–
var xr_nextpage=“index_2.htm“; var xr_transition=0; var xr_transitiontime=500;var xr_prevpage=““; var xr_btransition=0; var xr_btransitiontime=0;
VIELEN DANK IM VORRAUS