Facebook: Webseite bzw. Link mit eigenem Miniaturbild einstellen.

Wer seine eigene Webseite in Facebook posten möchte, hat oft das Problem kein passendes Miniaturbild von Facebook angeboten zu bekommen. Ein eigenes Miniaturbild für Facebook zu wählen ist nicht so ohne weiteres möglich. Wer in Google sucht wird schnell fündig und bekommt den Link:

<link rel=”image_src” href=”PfadzumBild” />

für den Header seiner Seite empfohlen. Leider funktioniert diese Methode nicht mehr.

Die neue Lösung: Mit Meta-Tags im Open Graph Protocol zu arbeiten. Facebook unterstützt diese Meta-Tags und zieht seine Informationen daraus.

<meta property=”og:title” content=”Titelzeile”/>
<meta property=”og:type” content=”movie”/>
<meta property=”og:url” content=”http://www.website.de”/>
<meta property=”og:locale” content=”de_DE”/>
<meta property=”og:image” content=”http://pfad/bild.jpg”/>

Ein von Facebook akzeptierter vollständiger Baustein siehst so aus wie oben aufgeführt. Eine Liste und Beschreibung der og:type findet man hier: https://developers.facebook.com/docs/opengraph/#types oder hier…

Facebook Link eigenes Miniaturbild einfügenWenn man bereits versucht hat seinen Link zu posten, kann es sein das Facebook diese Daten bereits im Cache hat. Nach dem einfügen der neuen Meta-Tags sieht man dann immernoch kein Ergebnis. In diesem Fall sollte man den Facebook-Debugger nutzen und dort seine Domain abfragen: https://developers.facebook.com/tools/debug
Der Facebook-Cache wird hierdurch geleert und man kann den Link erneut, mit Erfolg laden. Nach jeder Änderung der Meta-Angaben sollte man den Debugger einsetzten.

Für das Miniaturbild eignet sich ein Bild in der Originalgröße 90 x 90 Pixel. Dann ist die Darstellung optimal.

(Korrektur nach Kommentar): Für das Miniaturbild eignet sich ein Bild in der Originalgröße 100 x 100 Pixel. Dann ist die Darstellung optimal.

Tags: , , , , , , , , ,

25 Antworten zu “Facebook: Webseite bzw. Link mit eigenem Miniaturbild einstellen.”

  1. meinName Sagt:

    Meiner Meinung nach sollte 100×100 Pixel verwendet werden. 90×90 sieht verschwommen aus und wird auf 100×100 Pixel skaliert.

    Gibt es die Möglichkeit mehrere Bilder zu nutzen? Denn mit der o.g. Methode stehen die restlichen Bilder des Links nicht mehr zur Auswahl bereit.

  2. admin Sagt:

    Danke für den Tipp. In der Tat ist eine Auflösung von 100 x 100 Pixel besser geeignet. Der Eintrag wurde entsprechend angepasst. Eine Methode um die restlichen Bilder zusätzlich und autmatisch wieder zur Verfügung zu stellen ist mir nicht bekannt. Es ist aber möglich durch weitere meta property=”og:image” Einträge weitere Bilder bereitzustellen. Ich würde diese Option aber nicht zu exzesiv einsetzen, da für eine relative kleinen Nutzen (nur Facvebook) recht viel zusätzlicher Code sonst in die Seite “gepumpt” wird. Das Content-Verhältnis und damit auch die SEO leidet darunter schnell.

  3. Geistronaut Sagt:

    FB will 200*200 als mindest Auflösung.

  4. admin Sagt:

    Nicht für die Miniaturbilder, hier sind es 100 x 100 Pixel.

  5. Michaela Sagt:

    Hmm..Ich hätte das auch gerne gemacht, aber bei jimdo.com kenne ich mich gar nicht aus :/ wüsste nicht mal wo ich mein gewünschtes Bild hochladen kann bei jimdo, um den Pfad zu bestimmen. Wenn jemand auf gefällt mir drückt bei der Startseite ist das Miniaturbild ein Teil vom Header, gefällt mir gar nicht,…

  6. admin Sagt:

    Jimodo ist soviel ich weiß ein Homepage-Baukasten. Dort sind die Einstellungen und Zugriffe leider entsprechend eingeschränkt. Ich vermute daher, dass die gewünschte Einstellung nicht möglich sein wird.

  7. Holger Lübeck Sagt:

    Der Tipp hat sehr gut geholfen! DANKE
    Leider wird bei mir, trotz debugger, immer noch die falsche Grafik angezeigt, wenn ich den Schalter in meinem Forum (WBB 3) benutze. Trage ich einen Link manuell bei FB ein, dann wird auch das richtige Logo und nicht irgendein Smilie geladen.

    Kann ich noch irgendwas falsch machen?

  8. Alexander Sagt:

    Wie leidet die SEO unter mehreren meta-Tags?

  9. admin Sagt:

    Nun dies ist wie die Frage nach dem Huhn und dem Ei. SEO ist kein verbindliches Naturgesetzt mit klaren Regeln. Was dem einen Lieb ist dem anderen Last… eine gezielte Präsentation in Facebook kann einer Seite mehr Schub geben, als ein paar optimierte Metas für eine geringfügige, kaum einsehbare Verbesserung in Google.

  10. Alexander Sagt:

    Genau. Also: Leidet nicht.

  11. Robert Sagt:

    Es ist wirklich so, dass Facebook 200×200 pixel große Bilder für die thumbnails möchte.
    Der Debugger meckert bei 100×100px Bildern.

  12. admin Sagt:

    Es stimmt, Facebook meckert im Debugger dass 200 x 200 Pixel verwendet werden sollen. Aber wen interessiert dies schon was Facebook so will? Fakt ist, das Thumbnail wird mit 100 x 100 Pixel in Facebook selbst abgebildet und dass hochladen einer größeren Datei erhöht die Datenmenge (man kämpft doch um jedes KB beim guten Webdesign) und macht eine Skalierung notwendig (mit den damit verbundenen Qualitätseinbußen). Facebook ist in Sachen Bildqualität ohnehin eine Katastophe, dasher rate ich 100 x 100 Pixel zu verwenden um klare und schön scharfe Thumbnails zu bekommen, trotz der Debugger-Anzeige. Wichtig ist, dass es funktioniert!

  13. Flo Sagt:

    Sehr geil, danke! Diese Seite hat mir einige Nerven erspart :)

  14. Christian Sagt:

    Hallo

    Kann mir jemand sagen warum bei mir im Quelltext dies so aussieht – es scheint als dass die ” umgewandelt werden:

    Gruss

    Christian

  15. Christian Sagt:

    Hallo

    Ich krieg es nicht hin dass auf facebook das gewünschte Bild angezeigt wird. Der Debugger zeigt das korrekte Bild.

    Er gibt aber auch noch eine Fehlermeldung aus welche sagt, dass die Canonical nicht mit der og:url übereinstimmt. Das ist korrekt. Bei der Canonical hänget er im html file automatisch nicht die index.html an. Die krieg ich nicht weg obwohl ich nur http://www.rosengala.ch eingeben habe.

    Aber auch wenn ich in der og:url die http://www.rosengala.ch/indext.hml eingebe, kommt auf facebook nicht das korrekte Bild. Er holt sich dann immer Sponsorenbilder von ganz unten auf der webseite.

    Vielleicht hat jemand eine Ahnung wie ich das hinbekomme. Vorallem sollte das Bild mit http://www.rosengala.ch erscheinen. Denn niemand gibt noch die index.html mit.

    Gruss

    Christian

  16. admin Sagt:

    Hallo Christian,

    das Bild, welches du über og:image einbindest ist ein Banner, welches das Format 200 x 200 Pixel nicht einhält (es ist viel größer). Zwar warnt der Debugger es nicht, aber ich würde einmal ein 200×200 oder ein 100×100 Pixel Bild nehmen und nochmals Debuggen. Ich vermute dann klappt es. Wenn man einen Link postet, möchte er eben ein kleines Bild zeigen.

    Das mit der URL kannst du ignorieren. Der Debugger gibt eben aus was er bemerkt, aber verpflichtend ist dies nicht.

    Gruß,
    Lars

  17. Christian Sagt:

    Hallo Lars

    Vielen Dank!

    Dies war das Problem. Funktioniert nun bestens.

    Gruss

    Christian

  18. Urs Sagt:

    Auf unserer Site ist gesetzt. Im Debugger erscheint auch unser Bild. Trotzdem schlägt Facebook beim Weiterempfehlen dann aber immer auch noch ein zweites Bild, das es auf unserer Site gefunden hat, vor (“Miniaturbild auswählen”). Habt ihr das schon mal gesehen?

    Zu sagen ist, dass wir vielleicht nicht mehr den allerneusten Like-Code verwenden, ist ein älteres JS-Snippet. Falls das eine Rolle spielen sollte: gibt es einen guten Code für “Weitersagen”, den man auf einem eigenen Link absetzen kann?

  19. Urs Sagt:

    oben ist das Metatag rausgefallen.

    Auf unserer Seite ist

    meta property=”og:image” content=”http://www.domain.com/unserbild.jpg

    gesetzt

  20. admin Sagt:

    Leider ist Facebook manchmal ein wenig “eigen”! Caches alle geleert? Ist das Bild in Ordnung und in der richtigen Größe? Stimmt der Pfad zum Bild auch? Evtl. mal ein png einbauen.
    Das die gepostete Domain nur ein Musterpfad ist, kann ich es nicht selbst prüfen.

  21. Urs Sagt:

    Hier ein Beispiel, vielen Dank!
    http://www.werliestwo.ch/detail?id=169
    Es geht nicht um das Like-iframe oben rechts, sondern um den “Weitersagen” Link unten links…

  22. admin Sagt:

    Ich verstehe. Dieses Verhalten kann man meines Wissens nach nicht beeinflussen. Facebook nimmt an Bildern was es finden kann. Man müsste auf alle anderen Bilddaten auf der Seite verzichten, was natürlich meist nicht möglich ist. Entscheidend ist aber, dass dein Bild zumindest als erstes geladen wird, also sollte es doch passen!

  23. Urs Sagt:

    Danke fürs reinschauen!
    Manchmal nimmt es halt auch das 2. Bild zuerst.

    Dass man mit sharer.php arbeitet, ist schon noch aktuell, oder?

  24. admin Sagt:

    Warum Facebook auch manchmal wechselt ist vielen ein Rätsel. Die Community hat das schön öfters diskutiert. Facebook macht es eben… Leider nicht so toll aber so ist Facebook halt. Ich habe es bisher auch akzeptieren müssen. Sorry, aber mehr fällt mir nicht ein dazu. Am Skript liegt es aber nicht, denn wenn ich deinen Link in meinem Statusfeld innerhalb von Facebook eintrage zeigt sich der Effekt auch.

  25. Facebook: Webseite bzw. Link mit eigenem Miniaturbild einstellen. | dazzling dragon grafik design tipps Sagt:

    [...] Quelle: http://www.liquid-artwork.de/liquidblog/2011/10/08/facebook-webseite-bzw-link-mit-eigenem-miniaturbi... [...]

Hinterlasse eine Antwort