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

Aktualisierung 2023:

• Wenn Sie "title" und "description" in Ihrer Anwendung verwenden, nimmt Whatsapp den Titel und die Beschreibung als "og:title" und "og:description".

• Also sollten Sie es auch mit den Meta-Tags "og:title" und "og:description" aktualisieren.

  this.meta.addTag({ property: 'og:title', content: "Ihr Titel" });
  this.meta.updateTag({ property: 'title', "Ihr Titel" });
  this.title.setTitle("Ihr Titel");
  this.meta.addTag({ property: 'og:site_name', content: "Ihr Titel" });
  this.meta.addTag({ property: 'og:description', content: "Ihre Beschreibung" });
  this.meta.updateTag({ property: 'description', content: "Ihre Beschreibung" });
  this.meta.updateTag({ property: 'og:image', content: "direkter/pfad/zum/bild" });

Denken Sie daran, dass wir diese Meta-Tags haben sollten, wenn wir sie aktualisieren. Deshalb haben wir "updateTag" verwendet. Wenn Sie Twitter-Tags verwenden, dann könnte es auch das Whatsapp "og:image" ersetzen, also überlegen Sie, sie ebenfalls zu ersetzen.

Answer 2

Ich hatte mit allen möglichen Problemen zu kämpfen, bis ich dieses Problem lösen konnte, was mir geholfen hat, richtig zu debuggen sind 1 https://developers.facebook.com/tools/debug/?q= MEINE URL 2 Beim Einfügen meiner URL in Whatsapp füge ich einen Parameter hinzu, um Whatsapp dazu zu zwingen, den Cache zu löschen meineUrl?x=123 meineUrl?x=1234 ...

Answer 3

Ich habe ein paar Optionen ausprobiert und der untenstehende Code funktioniert für mich.

Außerdem, wie von @Azodium vorgeschlagen, können Sie manchmal aufgrund von WhatsApp-Daten und Zwischenspeichern Probleme haben, um das gewünschte Ergebnis zu erhalten. In diesem Fall müssen Sie möglicherweise den Zwischenspeicher löschen (Um WhatsApp-Daten zu löschen und zu leeren, folgen Sie bitte der oben genannten Lösung von @Azodium) oder Sie können einfach eine andere WhatsApp-Nummer verwenden, um die Website zu teilen, indem Sie die URL Ihrer Website eingeben. Stellen Sie außerdem sicher, dass Sie den vollständigen Pfad des Bildes property="og:image" anstelle des relativen Pfades und property="og:image:type" den richtigen Bildtyp verwenden, d.h. png, jpeg, jpg je nach Ihrem Bildtyp

Answer 4

Ich habe alle Anweisungen in den Antworten hier befolgt, und es hat trotzdem nicht funktioniert. Es scheint, dass WhatsApp auch die Erweiterung benötigt, damit das Bild angezeigt wird.

Also für einen Tag, der auf ein JPEG zeigt:

Ändern Sie die API, um die Erweiterung zuzulassen und verwenden Sie:

und dann scheint es zu funktionieren...

Answer 5

Nur diese 3 Tags scheinen erforderlich zu sein (og:title, twitter:description, rel="icon"):

Experimentieren / Spielen

Der einfachste Weg für mich zu experimentieren war mit CodeSandbox, indem ich diese Schritte befolgte:

• Erstellen Sie eine Vanilla-App mit https://codesandbox.io/s/
• Passen Sie Ihre Meta-Tags entsprechend in der Datei index.html an
• Speichern Sie die Datei (Strg+S), was die App verzweigt und ihre eigene eindeutige URL generiert
• Fügen Sie diese URL in WhatsApp ein, um die Vorschau anzuzeigen (Sie müssen nicht einmal eine Nachricht senden)
• Führen Sie Änderungen an den Meta-Tags durch
• Ändern Sie die URL - fügen Sie am Ende der URL ein einzelnes Zeichen hinzu. Dadurch wird die "vorherige zwischengespeicherte Vorschau" verworfen

Zitate erforderlich

Stellen Sie nur sicher, IMMER Anführungszeichen und Abschlussanführungszeichen zu haben, da WhatsApp darauf sensibel reagiert. Ihr obiges Beispiel hat kein Abschlusszitat für Ihr og:description.