Thumbnail für Links in WhatsApp anzeigen || og:image-Metatag funktioniert nicht

Question

Versuchte, dieser Frage zu folgen : Bild für WhatsApp-Linkfreigabe bereitzustellen

Habe eine einfache HTML-Webseite mit den grundlegenden Facebook-Metatags erstellt:

Der Facebook-Linter validiert korrekt und in Facebook wird es perfekt angezeigt, aber beim Teilen über WhatsApp wird das Bild nicht angezeigt.

Ich versuche es auf WhatsApp auf Android

Dies ist die URL der Beispielseite

Answer 1

Es dauerte 1 Tag, aber ich fand heraus, was benötigt wird. Folgende Checkliste könnte Ihnen helfen

Es ist in Ordnung, wenn Sie die Meta-Tags og:image:width und og:image:height nicht einschließen. Hier ist mein Code, der funktioniert. Verwenden Sie Facebook Debugger, um Fehler zu finden

1. Das Bild sollte kleiner als 200kb sein
2. Die Breite des Bildes sollte maximal 600px betragen, es ist in Ordnung, wenn die Höhe weniger als 600px beträgt, aber maximal sollte sie 600px betragen
3. Wenn Ihre Website https ist, stellen Sie sicher, dass die Bild-URL auch https hat
4. Stellen Sie sicher, dass die Seiten-URL gleich der ist, die Sie bei og:url übergeben. In meinem Fall war die Seiten-URL https://stgwww.moneycontrol.com/us-markets/, aber meine og:url war
5. Das og:image-Domain sollte mit der Domain Ihrer Website übereinstimmen, Sie können nicht den Bild-Link einer anderen Website verwenden.

6. Verwenden Sie den vollständigen Pfad, ein relativer Pfad funktioniert nicht.

   //korrekt

   //falsch

Answer 2

Ich weiß nicht, wie viele Meta-Tags mindestens erforderlich sind, um auf WhatsApp zu arbeiten. Ich habe das irgendwo gefunden und es hat bei mir einwandfrei funktioniert. Hinweis: Die Bildauflösung beträgt 256 x 256.

Answer 3

Zusätzliche nützliche Informationen:

Sie können mehrere og:images bereitstellen, WhatsApp verwendet das letzte. Dies hilft bei dem Problem, dass z.B. Facebook ein Verhältnis von 1,91:1 und WhatsApp 1:1 wünscht

https://stackoverflow.com/a/61078968/8486854

Answer 4

Löschen Sie Ihre WhatsApp-Daten und den Cache (oder verwenden Sie eine andere WhatsApp)!

Android-Telefon: Gehen Sie zu EINSTELLUNGEN > APPS > Anwendungsliste > WhatsApp > Speicher und löschen Sie die Daten.

Seien Sie vorsichtig! Sichern Sie Ihre Nachrichten, bevor Sie diese Aktion durchführen.

Dann das Ergebnis: vor und nach dem Löschen von Daten und Cache von WhatsApp

Answer 5

Hatte das gleiche Problem, ich habe es schließlich nach einigen Versuchen zum Laufen gebracht. Hier sind die 8 HTML-Tags, die ich auf meiner Webseite verwendet habe, um die Vorschau zum Funktionieren zu bringen:

Im -Tag:

Im -Tag:

Diese 8 Tags (6 im Kopf, 2 im Körper) haben perfekt funktioniert.

Tips:

1. Verwenden Sie die genaue Bildspeicherort-URL anstelle des Verzeichnisformats, dh verwenden Sie nicht images/OG_thumb.jpg

2. Dateierweiterung beachten: Wenn der Bilddateiname auf Ihrem Hosting-Anbieter ".JPG" ist, dann verwenden Sie nicht ".jpg" oder ".jpeg". Ich habe festgestellt, dass basierend auf der Kombination aus Hosting-Anbieter und Browser Fehler auftreten können oder nicht, also ist es sicherer, einfach die Groß- und Kleinschreibung der Dateierweiterung anzupassen.

3. Wenn nach Durchführung der obigen Schritte die Miniaturvorschau in der WhatsApp-Nachricht immer noch nicht angezeigt wird:

a. Beenden Sie die mobile App erzwingen (Ich habe es auf Android versucht) und versuchen Sie es erneut

b. Verwenden Sie ein Online-Tool zur Vorschau des OG-Tags, z.B. habe ich verwendet: https://searchenginereports.net/open-graph-checker

c. Fügen Sie den direkten Link zum OG-Daumen in den mobilen Browser ein und aktualisieren Sie den Browser 4-5 Mal. z.B. https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG