WordPress, Facebook und Probleme mit Vorschaubildern

Veröffentlicht: 31/07/2017 in Marketing, Technik
Schlagwörter:, , ,

Ein Artikel außerhalb der Reihe meiner üblichen Themen.
Als Hilfe für Andere Blogger und Erinnerung für mich.

Es geht darum wie man Facebook dazu bekommt, das richtige Vorschaubild zu zeigen.

Vorschau-Bild

Ärger mit dem Vorschau-Bild

Inhalt

  • Allgemeine Bild-Vorbereitung
    • Die Bild-Gestaltung
    • Die Bild-Meta Informationen (EXIF) entfernen
  • Allgemeine WordPress-Vorbereitung
    • Benutzt die Featured Image Funktion
  • Facebook-Kontrolle
  • Fehler & Lösungen
    • Facebook manuell Aktualisieren
    • Der Sharing Debugger zeigt das falsche Bild, ohne Fehlermeldung
    • Der Sharing Debugger zeigt das falsche Bild oder kein Bild, mit Fehlermeldung

Allgemeine Bild-Vorbereitung

  • Die Bild-Gestaltung
    Zunächst sollte man darauf achten, dass das Vorschaubild die richtigen Spezifikationen hat.
    .
    Die Bild-Dimensionen sollten mindestens 200×200 Pixel betragen. Für unsere Zwecke sind 1200×627 Pixel ideal.
    Die Bilder sollten unter 4 MB groß sein. Unter 100 KB ist ideal.
    .
    Mehr Informationen hierzu gibt es auf: Social Genius: Facebook Bildgrößen 2017
  • Die Bild-Meta Informationen (EXIF) entfernen
    Manche Bilder enthalten EXIF genannte Meta-Informationen. Facebook kann Bilder mit diesen Informationen, unter Umständen, nicht richtig lesen.
    .
    Ich empfehle daher diese Informationen zu entfernen. Gerade wenn die EXIF Daten ohne Euer zu tun hinzugefügt wurden. Bspw.: durch die Benutzung von Paint.
    .
    Informationen dazu, und Tips wie man sie entfernt finden sich hier (Englisch):
    3 Ways To Remove EXIF MetaData From Photos (And Why You Might Want To)
    Darüberhinaus gibt es Tools, wenn ihr mit dieser Option nicht weiter kommt:
    VIEW AND REMOVE EXIF ONLINE

Allgemeine WordPress-Vorbereitung

  • Benutzt die Featured Image Funktion
    Wordpress bietet in dem zuschaltbaren „Post Settings“ Tab, einen Reiter namens Featured Image. In diesem könnt ihr das Bild auswählen, welches in der Vorschau angezeigt werden soll:
    bsp1
    .
    Technisch wird die Information im „og:image“-RAW-Tag nachgehalten.
    Eine Meta-Information Eures Blog-Artikel, die ihr nicht manuell bearbeiten könnt.

Facebook-Kontrolle

  • Überprüfung was Facebook verwendet
    Facebook bietet das recht wichtige, kostenlose Tool:
    Facebook For Developers – Sharing Debugger
    .
    Hier könnt ihr einerseits einsehen wie Facebook eure Seite erfasst und in den Cache geladen hat.

Fehler & Lösungen

  • Facebook manuell Aktualisieren
    .
    Beispiel 1: Ihr habt Euren Artikel veröffentlicht und kein „Featured Image“ gewählt. Facebook hat zielsicher ein hässliches oder unpassendes, schlicht das falsche Bild, ausgewählt und zeigt es an.
    Beispiel 2: Ihr habt Euren Artikel veröffentlicht und anschließend ein neues „Featured Image“ ausgewählt. Facebook beharrt auf Eurem Alten Bild.

    Lösung:
    Ihr geht auf den Sharing Debugger: Facebook For Developers – Sharing Debugger
    Ihr gebt Eure URL ein und klickt auf „Fehlerbehebung“.
    Ihr seht die Informationen durch und klickt auf „Erneut Scrappen“
    bsp2
    .
    Hinweis:
    Der Sharing Debugger wird, das Bild, welches Facebook verwendet, anzeigen. Ihr könnt es darüber kontrollieren, anstelle Facebook zu verwenden.
    .

  • Der Sharing Debugger zeigt das falsche Bild, ohne Fehlermeldung
    .
    Beispiel: Ihr habt Facebook manuell aktualisiert. Der Sharing Debugger gibt keine Fehlermeldung an, zeigt jedoch das falsche Bild.
    .
    Kontrolle:
    Der Sharing Debugger gibt an, was im „og:image“ Tag steht:
    bsp3

    Kontrolliert die URL des Bildes, ob sie mit der URL, der WordPress Mediathek übereinstimmt. Ihr findet es diese wie folgt:
    ) Öffnet die Mediathek (Klick auf das runde Plus-Zeichen)
    ) Klickt das Vorschau-Bild an
    ) Klickt auf „Edit“
    .
    Es wird sich ein neues Fenster öffnen. In dem ihr unter anderen die Beschreibung eingeben könnt. Dort befindet sich als letzter Eintrag „Copy URL“
    bsp4.jpg
    Über einen Klick auf „Copy URL“ könnt ihr die URL des Bildes in die Zwischenablage nehmen und in ein Text-Fenster kopieren. Vergleicht anschließend die URL mit der Angabe im „og:image“ Tag. Wenn die URLs gleich sind, gibt es ein anderes Problem.
    .
    Was ist passiert: WordPress ist am spinnen, und respektiert Eure Auswahl nicht.
    .
    Lösung:
    Löscht alle Graphiken aus dem Blog-Artikel.
    Löscht die neuen Graphiken aus dem Blog-Artikel, aus der Mediathek.
    Tragt Eure Graphik erneut ein, gebt sie als Featured Image an. Macht ein Update. Aktualisiert Facebook manuell neu (Sharing Debugger). Anschließend könnt ihr Euren Artikel erneut illustrieren.
    .
    Hinweis: Es ist ein Schmerz. Hilft aber.
    Wenn der Sharing Debugger Fehler anzeigt, hilft es erst Eure Graphik dahingehend zu kontrollieren. Bevor ihr euch an das entfernen von Graphiken macht.
    .

  • Der Sharing Debugger zeigt das falsche Bild oder kein Bild, mit Fehlermeldung
    .
    Beispiel:
    Ihr überprüft Eure Seite mit dem Sharing Debugger. Dieser zeigt eine Warning wie die folgende:
    bsp5
    Alternativ sagt er Euch das Bild hätte nicht die korrekten Maße.
    .
    Kontrolle: Überprüft ob Euer Bild größer als 200×200 Pixel ist und kleiner als 8 MB.
    Wenn beides kontrolliert ist, aber der Debugger immernoch den Fehler gibt, lest weiter.
    .
    Lösung: Löscht Euer Featured Image und entfernt es aus der Mediathek.
    Nehmt die Datei und befreit sie von EXIF MetaData Informationen:
    Online Tool: VIEW AND REMOVE EXIF ONLINE
    Anleitung: 3 Ways To Remove EXIF MetaData From Photos (And Why You Might Want To)
    .
    Was ist passiert: Der Warnhinweis bedeutet das Euer Bild wahrscheinlich EXIF-Informationen hat. Diese seht Ihr nicht ohne weiteres, und der Sharing Debugger erkennt das Problem nicht direkt.
Advertisements

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