Ich weiß zwar nicht wirklich warum, aber wenn ein Beitrag von meinem Blog auf Facebook geteilt wurde, dann war erst das richtige und später das falsche Vorschaubild auf Facebook zu sehen.
Völlig unerklärlich ist mir hierbei aber, warum ausgerechnet eines der letzten Bilder im Quellcode, aus dem Footer genommen wurde. Naja, nun auch egal – ich habe das Problem beheben können.
Erst habe ich geschaut, ob das Problem bereits bekannt ist. Dabei bin ich über Google auf einen Post von Chris Beyeler gestoßen der zwar eine Lösung bietet, jedoch kam diese für mich nicht in Frage. Ich möchte für Dinge die mit 2 Zeilen Code gelöst werden können kein Plugin installieren – das beeinträchtigt die Performance des Blogs.
Also habe ich mir schnell eine eigene Lösung gebastelt die aus nur 2 Schritten besteht. An dieser möchte ich euch nun teilhaben lassen.
Schritt 1: Bearbeiten der Datei header.php im aktiven Theme
Um Facebook das richtige Bild zu kommunizieren, müssen wir eine kleine Änderung der der header.php vornehmen. Diese liegt auf dem FTP unter folgendem Pfad:
|
1 |
DEIN_WORDPRESS/wp-content/themes/DEIN_THEME/header.php |
Alternativ kann man die Datei aber auch direkt im WordPress Admin-Panel bearbeiten.
In der Datei ist eine Zeile mit dem folgenden Code zu finden:
|
1 |
</head> |
Vor diese Zeile muss nun dieser Code platziert werden:
|
1 2 3 4 5 6 |
<?php $yag_images = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'thumbnail' ); ?> <?php if($yag_images != ''):?> <meta property="og:image" content="<?php echo $yag_images[0]; ?>" /> <?php else: ?> <meta property="og:image" content="http://www.beispiel.tld/fb_logo.png" /> <?php endif;?> |
Die URL zum festen Bild nach der “else”-Condition “http://www.beispiel.tld/fb_logo.png” muss mit einem eigenen von euch frei wählbaren Pfad ersetzt werden. Dieses Logo/Bild wird angezeigt, wenn im Beitrag kein Artikelbild vorhanden ist. Wichtig ist hierbei natürlich, dass das Bild auch unter dem angegeben Pfad existiert 
Wer routiniert in der Anpassung von Code ist, kann den Codeschnipsel natürlich auch an einer beliebig anderen Stelle im Head-Bereich platzieren – die Angabe des </head>-Bereich dient hier nur zur Orientierung.
Nachdem der Code in der header.php eingebaut ist, sind wir auch schon fast fertig. Im nächsten Schritt testen wir, ob alles so funktioniert wie wir uns das vorstellen.
Schritt 2: Testen ob Facebook das richtige Thumbnail nimmt
Nachdem der oben genannte Code-Schnipsel im Theme eingebaut wurde, testen wir, ob Facebook nun “checkt” was für ein Bild wirklich zu dem Artikel gehört und welches nicht. Glücklicherweise stellt Facebook wenigstens ein Tool zur Verfügung um zu prüfen, welche Daten aus dem Post “herausgezogen” werden, so muss man nicht sein Profil spammen.
Hier ist der Link zum Tool - dort muss einfach die URL zum WordPress-Post eingetragen werden.
Unter dem Unterpunkt “Object Properties” sollte dann das richtige Bild zu sehen sein. Hier noch ein Screenshot…
Facebook Debug-Tool
Wichtig ist noch anzumerken, dass ich die Artikelbild-Funktion von WordPress nutze und dementsprechend in jedem Artikel ein Artikelbild definiert sein muss. Ich denke ich darf davon ausgehen, dass heutzutage jeder die Artikelbild -Funktion nutzt, oder? Über ein entsprechendes Feedback in den Kommentaren würde ich mich freuen.
Wer die Artikelbild-Funktion von WordPress noch nicht nutzt und wissen möchte wie es funktioniert, der findet auf perun.net eine gute Anleitung zum Thema. Bei den meisten modernen WordPress Themes sind keine Code-Anpassungen mehr notwendig.
So, das wars, hoffe auch Ihr habt bald die richtigen Vorschaubilder auf Facebook
Schlagwörter: Code, Facebook, Software, Tuto, Tutorial
7 Kommentare
Hi Yannick
Du hast recht, deine Lösung ist viel schlanker und belastet das WP dadurch nicht. Vielleicht baue ich mein Theme auch so um
Danke für den Tipp.
Gruss Chris
Hi Yannick,
super Lösung, VIELEN DANK! war schon ratlos, aber dein lösungsweg ist wirklich genial. Danke für die nachvollziehbare Erklärung!
anna
Hallo Anna,
schön dass ich dir helfen konnte! Freue mich über Likes, Shares, Links oder Gourmet-Fresspakete zu Weihnachten
Liebe Grüße,
Yannick
Super schon wieder einen Tipp gefunden, den ich Umsetzen kann ohne entsprechendes Plugin. Klasse. Vielen Lieben Dank.
Grüße
Chris
[...] wie möglich, um die Performance des Blogs nicht zu verschlechtern, zur Not code ich eben schnell ein paar Zeilen selbst… Dementsprechend habe ich auf dem ganzen Blog aktuell nur 4 Plugins installiert. 2 davon [...]
[...] wie möglich, um die Performance des Blogs nicht zu verschlechtern, zur Not code ich eben schnell ein paar Zeilen selbst… Dementsprechend habe ich auf dem ganzen Blog aktuell nur 4 Plugins installiert. 2 davon [...]
Hallo Yannick,
auch ich als absoluter Laie habe das hinbekommen und freue mich, endlich das richtige Bild angezeigt zu bekommen. Dankeschön!!