Forum
27.09.2011, 13:36

Open Graph Tags für z.B. facebook

Sehr geehrte Kunden,

mit "etwas" Verspätung haben wir jetzt auch die Open Graph Tags fest im System intergriert. Mit diesen Tags legt man bestimmte Dinge wie das Bild, die URL, den Seitentitel, die Sprache oder den Typ fest, welche so z.B. mit dem "Gefällt-mir-Button" an facebook übergeben werden.

Eingebunden haben wir also folgende:


    [li]og:image = Artikeldetailbild (12345p.jpg) bzw. alle anderen Seiten (og_shopimage.jpg)[/li]
    [li]og:url = canonical-URL[/li]
    [li]og:title = Seitentitel[/li]
    [li]og:locale = Sprache[/li]
    [li]og:type = Artikeldetail=article, alle anderen Seiten=website[/li]


Diese sind fest im Quelltext verankert und passen sich automatisch an, berücksichtigt haben wir das Artikeldetail und die Startseite.

Wie schon erwähnt verwenden wir für das Bild das "og:image"-Tag, im Artikeldetail ist das immer das "normale" Artikeldetailbild (12345p.jpg).

Für die Startseite (bzw. alle anderen Seiten im Shop) haben wir eine Grafik festgelegt, welche Sie (sofern Sie das nutzen möchten) über "Sonstiges" > "IMG-Explorer" hochladen sollten!

Diese Grafik muss wie folgt heißen: og_shopimage.jpg

Diese Grafik muss mindestens 50x50 Pixel groß und entweder ein PNG, JPEG oder GIF sein.

An image URL which should represent your object within the graph. The image must be at least 50px by 50px and have a maximum aspect ratio of 3:1. We support PNG, JPEG and GIF formats. You may include multiple og:image tags to associate multiple images with your page.

Im Quelltext sieht das dann z.B. so aus:

<meta property="og:image" content="http://www.hutshopen.de/pic/35457p.jpg">
<meta property="og:url" content="http://www.hutshopping.de/39THIRTY_Mandible_NY_Cap_by_NEW_ERA.html">
<meta property="og:title" content="39THIRTY Mandible NY Cap by NEW ERA, EUR 28,00 --> Hüte und Caps online kaufen - Mützen im Hut Shop Hutshopping">
<meta property="og:locale" content="de_DE">
<meta property="og:type" content="article">


Wenn man den "Gefällt-mir-Button" anklickt oder direkt einen Link bei facebook postet, sieht das dann so aus:



Was bei welcher Seite übergeben wird können Sie hier prüfen, in dem die entsprechende URL in das Feld eingetragen und auf "Fehlerbehebung" klicken: developers.facebook.com/tools/debug />
Weitere Infos dazu finden Sie auch auf:
developers.facebook.com/docs/opengraph/ />
Bei Fragen oder Problemen dazu bitte einfach melden.