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

Nicht sicher, ob es ein Problem mit WhatsApp ist oder was, aber mir funktioniert es, den Link ohne "/" am Ende einzufügen.

Beispiel :-

https://example.com - FUNKTIONIERT
https://example.com/ - VORSCHAU FUNKTIONIERT NICHT

Answer 2

Wenn nach all diesen Tipps das Miniaturbild immer noch nicht angezeigt wird, versuche dies:

Mein Problem war, dass die doppelten Anführungszeichen der og-Attribute entfernt wurden, wenn sie für die Produktion erstellt wurden (npm run build). Das Minify-Modul hat das gemacht.

Die Lösung bestand also darin, diese Entfernung zu deaktivieren, indem das removeAttributeQuotes-Attribut auf false gesetzt wird:

minify: {
    ...
    removeAttributeQuotes: false,
    ...
}

In meiner Entwicklungsumgebung habe ich es in der Datei "webpack.prod.conf.js" gesetzt. Setze es in deiner entsprechenden Datei.

Einfach neu erstellen und es funktioniert jetzt.

Answer 3

Bitte überprüfen Sie, ob das Dateiformat Ihres Vorschaubilds für WhatsApp funktioniert

In meinem Fall funktionieren die anderen Chat-Apps wie Messenger oder Telegram gut mit einem GIF-Vorschaubild, aber WhatsApp nicht, deshalb muss ich die Bild-URL ändern

Answer 4

Ich habe die perfekte detaillierte Lösung hier dokumentiert - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html Es gibt sieben Schritte, um die perfekte Vorschau zu erhalten.

1. Titel: Fügen Sie einen titelreichen Titel zu Ihrer Webseite hinzu mit maximal 65 Zeichen.

2. Meta-Beschreibung: Beschreiben Sie Ihre Webseite in maximal 155 Zeichen.

3. og:title: Maximal 35 Zeichen.

4. og:url: Vollständiger Link zu Ihrer Webseitenadresse.

5. og:description: Maximal 65 Zeichen.

6. og:image: Bild (JPG oder PNG) von einer Größe von weniger als 300 KB und einer Mindestabmessung von 300 x 200 Pixel wird empfohlen.

7. Favicon: Ein kleines Symbol mit Abmessungen von 32 x 32 Pixeln.

Auf der obigen Seite finden Sie die erforderlichen Spezifikationen, die Zeichenbeschränkung und Beispiel-Tags. Gefällt es Ihnen, stimmen Sie bitte für meinen Beitrag.

Answer 5

Für alle, die dieses Problem immer noch haben und für mich haben keine der geposteten Lösungen funktioniert.

Ich hatte ein ähnliches Problem. Das Bild wurde in allen anderen Freigabedialogen korrekt angezeigt. Nur WhatsApp konnte das Bild nicht anzeigen, obwohl der Facebook-Debugger das og:image-Tag korrekt hatte.

Die Lösung, die für mich funktioniert hat: Ich benutze Firebase. Für hochgeladenen Inhalt in deren Speicher erhalten Sie eine eindeutige Download-URL mit einem Medientoken. Etwas Ähnliches wie:

https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY

Ich habe diese URL in das og:image-Meta-Tag eingefügt. Es hat für Facebook usw. funktioniert, aber anscheinend konnte WhatsApp das Bild nicht von dieser URL herunterladen. Stattdessen müssen Sie das Bild in Ihrem Projektverzeichnis einschließen und diesen Link für das og:image-Tag verwenden. Jetzt funktioniert es auch ordnungsgemäß in WhatsApp.

Vorher (funktioniert nicht in WhatsApp, aber Facebook usw.)

Nachher (funktioniert jetzt in allen getesteten Freigabedialogen, einschließlich WhatsApp)

Hoffentlich hilft es einigen von euch :)