Titel, Bilder und Beschreibung bei Facebook Share und Google +1

Google Plusone und Facebook Share

Website-Besucher und Seitenbetreiber wundern sich häufig, wenn Facebook Share und Google+1 Buttons falsche Bilder, Überschriften oder Beschreibungstexte nutzen. Die Social Media Integration in Blogs, Shops und Contentportale ist zwar einfach und unkompliziert. Doch empfehlen wir die zusätzliche Nutzung des Open Graph Protokolls (OGP), womit es  Homepage-Inhaber selbst in der Hand haben, welche Images, Headlines und Descriptions als Snippet angezeigt werden. Sowohl Facebook als auch Google greifen für die korrekte Darstellung auf das Open Graph Protocol zu, dass die grundlegenden Meta Tags basierend auf Mikroformaten verwendet.

Bevor die Verwendung des OGP eine Rolle spielt, muss zunächst die Facebook Integration stattfinden bzw. der Google+1 Button auf der Homepage eingebunden werden. Auf den folgenden Seiten finden Sie die wichtigsten Quellcode Generatoren, Tools und Anleitungen für erfolgreiches Social Media Marketing:

Inhaltsverzeichnis

 

Facebook Share Button

Der Facebook Button hilft Nutzern dabei relevante Inhalte an die eigene Community weiterzuleiten. Die geteilten Inhalte werden auf der persönlichen Facebook Chronik des Anwender gepostet und erreicht so dessen Freunde. Neben dem Bild, Titel, Link und Beschreibungstext kann der Nutzer eine Nachricht bzw. Kommentar schreiben.

Facebook Share Button

Abb. 1: Verwendung der Facebook Share Box

Der einfachere Facebook Like Button sammelt hingegen „Gefällt mir“ Klicks.Der User klickt hierzu lediglich auf den „Like“ Button. Der Link samt Image, Link, Text und Titel landet in der Chronik des Facebook Nut.

Facebook Gefällt mir Klick

Abb. 2: Facebook Gefällt mir in Facebook Chronik

 

Google +1 Schaltfläche

Mit dem Google +1 Button kann jeder Besucher von Webseiten oder der Google Suche bestimmte Webseiten empfehlen. Je mehr Empfehlungen eine Seite erhält, desto interessanter ist der Inhalt. Mit der Google +1 Schaltfläche ist es sogar möglich Kommentare einzutragen, um seine Meinung zum Seiteninhalt anderen Nutzern mitzuteilen. Zugleich ist es möglich den Content direkt an seine eigenen Kreise weiterzuleiten, für die der Inhalt interessant sein könnte. Neben dem üblichen Script platzieren Sie die folgende Quellcodezeile an passender Stelle im Layout ihrer Homepage.

<!-- Platzieren Sie diese Zeile, an der die +1-Schaltfläche angezeigt werden soll. -->
<div data-size="tall" data-annotation="inline"></div>

google+ Schaltfläche

Abb. 3: Google +1 Box

Nachdem der Anwender auf „Teilen“ klickt, landet der Inhalt ähnlich wie bei Facebook im Google +1 Autorenprofil.

google +1 Posting

Abb. 4: Content im Google +1 Autorenprofil

 

Open Graph Protokoll

Durch die Einbindung von grundlegenden Metadaten verwandeln Sie die eigene Seite in ein Graph Objects. Die initiale Version des Protokolls nutzt den RDFa Standard, bei dem zusätzliche <meta>-Tags im <head>-Bereich zum Einsatz kommen. Die vier wichtigsten Eigenschaften jeder Seite sind:

  • og:title – Der Seitentitel der Webseite, z.B., „Online Shop Hosting und Domain Hosting“.
  • og:type – Der Datentyp des Objekts, z.B. „article“, „book“, „profile“ oder „website“
  • og:image – Eine Bilder URL die das Objekt darstellt, z.B. „http://wallaby.de/hosting.png“
  • og:url – Die kanonische URL des Objektes, z.B. „http://wallaby.de/shop/webhosting.html“

Weitere optionale und ebenfalls empfehlenswerte Parameter sind in Abhängigkeit vom Graph Object:

  • og:audio – Eine URL zu einer Audiodatei die das Objekt erläutern
  • og:description – Ein bis zwei Sätze, die das Objekt näher beschreiben
  • og:determiner – Ein Wort, das vor dem Objekttitel erscheint, z.B. „ein“
  • og:locale – Der lokale Tag, z.B. de_DE
  • og:site_name – Der (Marken-)Name einer große Website, z.B. „Online ShopBuch“
  • og:video – Eine URL zu einer Videodatei, die das Objekt bescheibt

Für die richtige Befüllung des Facebook Share Buttons mit Inhalten benötigen Sie im <head> Bereich den nachfolgenden Quellcode. Falls Sie die eigene Webseite nicht mit Tags versehen, dann schnappt sich Facebook Share nicht unbedingt die optimalsten Daten bei Seitentitel, Zusammenfassung als Beschreibungstext und Thumbnail Bild. Mit Hilfe der folgenden Quellcodezeilen kontrollieren Sie die exakten Daten, die Facebook nutzt:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de-DE" dir="ltr"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
  ...
  <meta property="og:title" content="title" />
  <meta property="og:image" content="imageurl" />
  <meta property="og:description" content="description" />
  <meta property="og:url" content="siteurl" />
  ...
<head>

 

Empfohlene Bildgröße

Damit ein Vorschaubild bei Facebook und Google +1 auch tatsächlich übernommen wird, gibt es ein paar offizielle Vorschläge, wie so ein Bild aussehen soll. Nur wenn die folgenden Bilderrichtlinien befolgt werden, kommt die im og:image Tag eingetragene URL zum Einsatz.

Facebook Empfehlungen

  • Breite und Höhe des Vorschaubildes müssen mindestens 50 px betragen
  • Seitenverhältnis darf nicht gößer als 3 : 1 sein (bzgl. Breite und Höhe)
  • Vorschaubild soll nicht größer sein als 130 x 110 px
  • Bilder im Facebook Stream nutzen als Breite/Höhe max. 90 px
  • Bild wird automatisch proportional verkleinert

Google Empfehlungen

  • Bilder sollten eine Mindestgröße besitzen und nahezu quadratisch sein
  • Beträgt die Bildbreite weniger als 100 px, dann darf das Seitenverhältnis nicht größer als 3 : 1 sein
  • Die Bildhöhe muss mindestens 120 px betragen
  • Bilder im Google Autorenprofil oder auf Google Seiten nutzen als Breite/Höhe max. 150 px
  • Bild wird automatisch proportional verkleinert

Allgemeine Empfehlungen

Bilder sollten nahezu quadratisch sein, im Optimalfall empfiehlt sich für beide Plattformen eine Bildgröße von 120 x 120 px.

 

Parser, Debugger & Tools

Im Web gibt es mittlerweile zahlreiche von der Open Source Community entwickelte Parser, Debugger und Publishing Tools:

4 Reaktionen zu “Woher holen Facebook Share und Google +1 die Bilder und Texte?”

  1. Pat McCrawam 14. April 2012 um 08:53 Uhr

    Stand nicht oben drüber: „Die Social Media Integration in Blogs, Shops und Contentportale ist zwar einfach und unkompliziert.“?
    Ich finde daran überhaupt nichts einfach. Zumal es die Anleitung von FB nicht einmal in deutsch gibt.

  2. Autorenmarketingam 14. April 2012 um 10:51 Uhr

    Social Media Marketing ist schon einfach. Sharebutton, Gefällt mir Button, Retweetbutton oder Like-Box einbauen von Facebook, Google +1, Twitter, Pinterest, etc. Und schon geht es los. Jeder Homepage Besucher kann sofort die eingebundenen Social Media Tools nutzen. Mich hat nur gestört, dass beim Klick darauf fast immer die falschen Bilder genutzt wurden. Dies führt zur Verwirrung und ist meines Erachtens aus Usabilitygründen nicht akzeptabel. Die Meta Tags der Open Graph Einbindung im -Bereich dient also eher als Optimierungsmaßnahme. Social Media funktioniert auch ohne, aber mir ist es lieber ich habe alles selber in der Hand, was die Social Media Anbieter anzeigen.

    Gruss Wolfgang

  3. Rosieam 15. April 2012 um 17:01 Uhr

    @Pat McCraw
    Man muss sich natürlich ein wenig einarbeitern aber im Prinzip, wollen Facebook und Co. überall präsent sein und halten dementsprechend die Implementierung simple.

  4. Christianeam 11. Juli 2012 um 13:14 Uhr

    Sehr interessanter Artikel muss ich sagen. Meiner Meinung nach ist Marketing im Netz aber für alle Bereiche unseres täglichen Lebens auf dem Vormarsch. Dazu reicht es sich zu verdeutlichen, was für einen massenhaften Anstieg Dienstleister wie http://www.website-zum-buch.de erleben. Aber das ist ja sowieso nicht mehr aufzuhalten, von daher sollte man wenigstens die Zusammenhänge verstehen.

    LG

Trackback URI | Kommentare als RSS

Einen Kommentar schreiben