Facebook: Webseite bzw. Link mit eigenem Miniaturbild einstellen.

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

 

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 oderhier…

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: bild, Facebook, image, image_src, Link, meta, Miniaturbild,pfad, posten, Webseite

Der Beitrag wurde am Samstag, den 08. Oktober 2011 um 14:23 Uhr veröffentlicht und wurde unter Tools, Tutorials | abgelegt. du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

24 Antworten zu “Facebook: Webseite bzw. Link mit eigenem Miniaturbild einstellen.”
  1. meinName Sagt:
    18. Dezember 2011 at 17:45

    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:
    18. Dezember 2011 at 20:43

    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:
    28. März 2012 at 14:25

    FB will 200*200 als mindest Auflösung.

  4. admin Sagt:
    16. Mai 2012 at 14:45

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

  5. Michaela Sagt:
    11. Juni 2012 at 13:11

    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:
    11. Juni 2012 at 13:58

    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:
    08. Juli 2012 at 18:13

    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:
    24. Juli 2012 at 12:14

    Wie leidet die SEO unter mehreren meta-Tags?

  9. admin Sagt:
    24. Juli 2012 at 14:40

    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:
    30. Juli 2012 at 11:49

    Genau. Also: Leidet nicht.

  11. Robert Sagt:
    13. September 2012 at 10:59

    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:
    13. September 2012 at 11:20

    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:
    14. September 2012 at 15:13

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

  14. Christian Sagt:
    10. Januar 2013 at 18:54

    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:
    12. Januar 2013 at 12:27

    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.hmleingebe, 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:
    12. Januar 2013 at 13:19

    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:
    12. Januar 2013 at 13:45

    Hallo Lars

    Vielen Dank!

    Dies war das Problem. Funktioniert nun bestens.

    Gruss

    Christian

  18. Urs Sagt:
    09. April 2013 at 10:42

    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:
    09. April 2013 at 10:43

    oben ist das Metatag rausgefallen.

    Auf unserer Seite ist

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

    gesetzt

  20. admin Sagt:
    09. April 2013 at 13:44

    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:
    10. April 2013 at 10:07

    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:
    10. April 2013 at 10:21

    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:
    10. April 2013 at 13:23

    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:
    10. April 2013 at 14:07

    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.



Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s