Es wurde versucht, dieser Frage zu folgen: Stellen Sie ein Bild für die Freigabe von WhatsApp-Links bereit

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

<!--FACEBOOK-->
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas />
<meta property="og:image" content="http://pollosweb.wesped.es/programa_pollos/play.png" />        

Der Facebook-Linter wird korrekt validiert und in Facebook wird er perfekt angezeigt, aber wenn ich versuche, ihn über WhatsApp zu teilen, wird das Bild nicht angezeigt.

Ich versuche es auf WhatsApp auf Android

→ Dies ist die URL der Beispielwebseite

Ich glaube Sie hinzufügen müssen , itempropum die og:imageMeta - Tag, haben die Bildgröße auf 256x256und auch , es wäre nicht der hinzufügen schaden site_name, typeund updated_time Eigenschaften entweder :)

<meta property="og:site_name" content="San Roque 2014 Pollos">
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas" />
<meta property="og:image" itemprop="image" content="http://pollosweb.wesped.es/programa_pollos/play.png">
<meta property="og:type" content="website" />
<meta property="og:updated_time" content="1440432930" />

Sie können diese Meta-Tags beispielsweise in Google Maps in Aktion sehen .
Nachdem Sie Ihre Meta-Tags geändert haben, müssen Sie möglicherweise eine Weile warten, bis mögliche Caches aktualisiert werden.

Sie können Open Graph-Meta-Tags im Facebook-Debugger debuggen / überprüfen.
Wenn Sie dort alle Ihre Tags sehen können, haben die Websites / Apps, auf denen Ihre Tags nicht richtig angezeigt werden, möglicherweise andere Anforderungen an Open Graph-Tags.

BEARBEITEN:
Wenn Sie ein Bild über einen HTTP-SecureLink angeben möchten, müssen Sie og:image:secure_urlstattdessen verwenden og:image.

EDIT2:
Sie müssen auch angeben, og:typeda dies einer der vier erforderlichen Basisparameter ist.
<meta property="og:type" content="website" />sollte Sie in die richtige Richtung bringen.

Ich hatte das gleiche Problem und das Problem war die Größe des Bildes. WhatsApp unterstützt keine Bilder mit einer Größe von mehr als 300 KB.

Die wichtigste Eigenschaft zum Anzeigen von Bildern auf WhatsApp ist also:

<meta property="og:image" content="url_image">

Die Größe des anzuzeigenden Bildes muss weniger als 300 KB betragen

Ich stehe auch vor diesem Problem. Schließlich habe ich es gelöst

<meta property="og:image" itemprop="image" content="http://yourdomain.com/yourfolder/imagename.png" />

Meine Bildeigenschaft

1. Abmessung: 300X200
2. Größe: <300 KB
3. URL: http://yourdomain.com/yourfolder/imagename.png

Stellen Sie sicher, dass im Bildnamen kein Leerzeichen vorhanden ist. Wenn Sie zwei Wörter haben, verwenden Sie das Unterstrichzeichen

Nachdem ich monatelang versucht hatte, dies herauszufinden, löste ich endlich das Problem. Hier ist meine Lösung:

<!-- MS, fb & Whatsapp -->

<!-- MS Tile - for Microsoft apps-->
<meta name="msapplication-TileImage" content="http://www.example.com/image01.jpg">    

<!-- fb & Whatsapp -->

<!-- Site Name, Title, and Description to be displayed -->
<meta property="og:site_name" content="The Rock Photo Studio">
<meta property="og:title" content="The Rock Photo Studio in Florida">
<meta property="og:description" content="The best photo studio for your events">

<!-- Image to display -->
<!-- Replace   «example.com/image01.jpg» with your own -->
<meta property="og:image" content="http://www.example.com/image01.jpg">

<!-- No need to change anything here -->
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpeg">

<!-- Size of image. Any size up to 300. Anything above 300px will not work in WhatsApp -->
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">

<!-- Website to visit when clicked in fb or WhatsApp-->
<meta property="og:url" content="http://www.example.com">

Kopieren Sie das Obige und fügen Sie es in den Kopfbereich der Website ein. Schließen Sie Ihre WhatsApp-App, öffnen Sie sie erneut und testen Sie sie. Sie müssen den Cache nicht leeren und müssen keine Daten löschen.

Segen für alle!

Ich habe die Lösung hier gefunden. WhatsApp-Vorschau-Link veröffentlicht am 2. März 16

Und Sie sollten sehen, wie vor und nach dem Screenshoot funktioniert

Es gibt zwei Arten von Code. Erstes Meta og: Bild in <head>

<meta property="og:image" content="url_image">

Thumbnail-Schema von schema.org in <body>

<link itemprop="thumbnailUrl" href="url_image"> 
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> 
  <link itemprop="url" href="url_image"> 
</span>

Ich hoffe das hilft. Vielen Dank.

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

Android Phone : Go to SETTINGS > APPS > Application List > WhatsApp > Storage and Clear Data.

Achtung ! Sichern Sie Ihre Nachrichten vor dieser Aktion.

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

Ich weiß nicht, wie viele Meta-Tags mindestens für die Arbeit mit WhatsApp erforderlich sind. Ich habe dies irgendwo gefunden und es hat bei mir einwandfrei funktioniert. Hinweis: Die Bildauflösung beträgt 256 x 256.

   <head>
    <meta property="og:site_name" content="sitename" />
    <meta property="og:title" content="title">
    <meta property="og:description" content="description">
    <meta property="og:image" itemprop="image" content="http://www.yoursite.com/yourimage.jpg">
    <link itemprop="thumbnailUrl" href="http://www.yoursite.com/yourimage.jpg"> 
    <meta property="og:image:type" content="image/jpeg">
    <meta property="og:updated_time" content="updatedtime">
    <meta property="og:locale" content="en_GB" />
    </head>

    <body>
    <span itemprop="image" itemscope itemtype="image/jpeg"> 
      <link itemprop="url" href="http://www.yoursite.com/yourimage.jpg"> 
    </span>

    </body>

Zusätzliche nützliche Informationen:

Sie können mehrere og: images bereitstellen, WhatsApp verwendet das letzte. Dies hilft bei dem Problem, dass zB Facebook ein Verhältnis von 1,91: 1 und WhatsApp 1: 1 haben möchte

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

Als Antwort auf https://stackoverflow.com/a/35785393/1518500

Probieren Sie die aktualisierte Version für schema.org aus

<span itemprop="image" itemscope itemtype="http://schema.org/ImageObject"> 
 <link itemprop="url" href="imgurlHere">
 <meta itemprop="width" content="1200">
 <meta itemprop="height" content="800">
</span>

oder mit dem json-ld-Format von Google

<script type="application/ld+json">
 {
"@context": "http://schema.org/",
"@type": "ImageObject",
 "url": "ImgURLhere",
    "height": 800,
    "width": 1200

 }
 </script>

Für alle, die dieses Problem noch haben und für mich hat keine der veröffentlichten Lösungen geklappt.

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

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

https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/ ? alt = media & token = JJJJJJJJJJJJJJJJJJJJJJJJJJJ

Ich habe diese URL im Meta-Tag og: image verwendet. Es hat für Facebook usw. funktioniert, aber es scheint, dass WhatsApp das Bild nicht von dieser URL herunterladen konnte. Stattdessen müssen Sie das Bild in Ihr Projektverzeichnis aufnehmen und diesen Link für das Tag og: image verwenden. Jetzt funktioniert es auch in WhatsApp einwandfrei.

Vorher (nicht in WhatsApp, sondern auf Facebook usw.)

<meta property="og:image" itemprop="image" content="https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/your_image?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY">

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

<meta property="og:image" itemprop="image" content="https://domain_name/path_to_image">

Hoffe es könnte einigen von euch helfen :)

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

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

2. Meta-Beschreibung: Beschreiben Sie Ihre Webseite mit 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: Ein Bild (JPG oder PNG) mit einer Größe von weniger als 300 KB und einer Mindestabmessung von 300 x 200 Pixel wird empfohlen.

7. Favicon: Ein kleines Symbol mit den Abmessungen 32 x 32 Pixel.

Auf der obigen Seite haben Sie die erforderlichen Spezifikationen, die Zeichenbeschränkung und Beispiel-Tags. Stimmen Sie ab, wenn Sie es zufriedenstellend finden.

Ich hoffe diese Hilfe:

<meta property="og:title" content="Title goes here">
<meta property="og:site_name" content="Site name">
<meta property="og:image" content="imageURLShouldBeFromSameDomainName">
<meta property="og:image:width" content="640">
<meta property="og:image:height" content="300">

Beachten Sie die imgURL, die von derselben Domain gehostet werden soll, da sie sonst nicht in WhatsApp angezeigt wird. Ich habe versucht, eine URL von Amazon zu laden. Die Bildvorschau funktioniert nicht.

In meinem Fall wurde das Problem durch Hinzufügen des folgenden Meta-Tags behoben. Ich habe arabischen Inhalt verwendet und musste diesen hinzufügen, damit das Bild auf WhatsApp angezeigt wird:

<meta property='og:locale' content='ar_AR' />

Hinweis: Wenn Sie englischen Inhalt verwenden, müssen Sie dieses Meta-Tag nicht hinzufügen, da Englisch der Standardwert ist.

Sie müssen die Nachricht am Anfang nur mit "http: //" eingeben. Beispiel: http://www.google.com zeigt das Miniaturbild, aber www.google.com Nr.

Öffnen Sie die Grafikdaten:

<meta property="og:title" content="Title of your website | website.com"/>
<meta property="og:type" content="Most popular business directory of Bangladesh"/>
<meta property="og:url" content="http://www.website.com/"/>
<meta property="og:image" content="http://www.moumaachi.com/images/dhaka-city.jpg"/>
<meta property="og:site_name" content="@website"/>
<meta property="fb:admins" content="Author"/>
<meta property="og:description" content="website.com is your online business directory of Country"/>

Nur scheinen diese drei Tags erforderlich sind ( og:title, twitter:description, rel="icon"):

<meta property="og:title" content="San Roque 2014 Pollos" />

<meta name="twitter:description" property="og:description" itemprop="description" content="Programa de fiestas" />

<link rel="icon" type="image/png" href="https://images.weserv.nl/?url=http://pollosweb.wesped.es/programa_pollos/play.png&w=192&height=192" sizes="192x192" />

Experimentieren / spielen

Der einfachste Weg für mich, mit CodeSandbox zu experimentieren, war mit den folgenden Schritten:

• Erstellen Sie eine Vanilla-App mit https://codesandbox.io/s/
• Ändern Sie Ihre Meta-Tags in der index.htmlDatei entsprechend
• Speichern Sie die Datei ( ctrl+s), die die App verzweigen würde, und generieren Sie eine eigene eindeutige URL
• Fügen Sie diese URL in WhatsApp ein, um die Vorschau anzuzeigen (Sie müssen nicht einmal eine Nachricht senden).
• Nehmen Sie Änderungen an den Meta-Tags vor
• Ändern Sie die URL - fügen Sie am Ende der URL ein einzelnes Zeichen hinzu. Dadurch wird die "vorherige zwischengespeicherte Vorschau" verworfen.

Angebote erforderlich

Stellen Sie nur sicher, dass Sie IMMER Anführungszeichen und schließende Anführungszeichen haben, da WhatsApp dafür sensibel ist. In Ihrem obigen Beispiel ist kein Abschlussangebot für Sie enthalten og:description.

Für alle, die dies noch erleben, habe ich festgestellt, dass Bilder, die auf Amazon S3 bereitgestellt werden, nicht für die WhatsApp-App für Mobilgeräte funktionieren (sowohl für Android als auch für iOS, aber die Mac-Desktop-App war in Ordnung). Es ist sehr wahrscheinlich, dass unsere AWS-Einstellungen dies verursachen, aber ich habe das Muster auch auf anderen Websites bemerkt (z. B. auf dieser Seite , wenn og:imageeine Domain wie diese getroffen wirdhttps://s3.amazonaws.com ).

Auf keiner anderen Plattform, die ich ausprobiert habe, gab es Probleme, nur auf WhatsApp-Apps für Mobilgeräte. Sobald ich auf meine zeigte<meta property="og:image" content="https://some-non-aws-location" /> eine andere öffentliche URL wie eine Google Drive-Datei (natürlich öffentlich freigegeben), funktionierte dies einwandfrei.

Ich habe auch versucht, das Image in unserem Repo festzuschreiben, das auf AWS mit einer benutzerdefinierten Domain gehostet und bereitgestellt wird, und das hat auch nicht funktioniert. AWS scheint also immer noch der Schuldige zu sein. Hoffe das hilft jemandem!

Wenn nach all diesen Tipps das Miniaturbild immer noch nicht angezeigt wird, versuchen Sie Folgendes:

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

Die Lösung bestand also darin, diese Entfernung abzubrechen und das Attribut removeAttributeQuotes auf false zu setzen:

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

In meiner Entwicklungsumgebung habe ich es in der Datei "webpack.prod.conf.js" festgelegt. Stellen Sie es auf Ihre entsprechende Datei ein.

Einfach wieder aufbauen und es funktioniert jetzt.