it-swarm.com.de

Thumbnail für Link in WhatsApp anzeigen || og: Bild-Meta-Tag funktioniert nicht

Versuchte diese Frage zu beantworten: Bereitstellen eines Bildes für das Teilen von WhatsApp-Links

 enter image description here

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-Browser ist korrekt validiert und in Facebook ist er perfekt dargestellt, aber wenn ich versuche, per WhatsApp zu teilen, wird das Bild nicht angezeigt.

Ich versuche es auf WhatsApp auf Android

Dies ist die URL der Beispiel-Webseite

52
JesuLopez

Ich glaube, Sie müssen itemprop zum og:image-Meta-Tag hinzufügen, die Bildgröße muss auf 256x256 eingestellt sein, und es würde auch nicht schaden, die Eigenschaften site_name, type und updated_time hinzuzufügen.

<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 Metatags in Aktion auf Google Maps sehen.
Nachdem Sie Ihre Meta-Tags geändert haben, müssen Sie möglicherweise eine Weile warten, bis mögliche Caches aktualisiert wurden.

Sie können Open Graph-Metatags mit dem Facebook-Debugger debuggen/überprüfen [].
Wenn Sie alle Ihre Tags dort sehen können, haben die Websites/Apps, auf denen Ihre Tags nicht ordnungsgemäß angezeigt werden, möglicherweise andere Anforderungen für Open Graph-Tags.

BEARBEITEN:
Wenn Sie ein Bild über einen HTTP-Secure-Link angeben, müssen Sie og:image:secure_url anstelle von og:image verwenden.

EDIT2:
Sie müssen auch og:type angeben, da es sich um einen der vier erforderlichen Basisparameter handelt.
<meta property="og:type" content="website" /> sollte Sie in die richtige Richtung bringen.

57
Unknown

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

Die wichtigste Eigenschaft, um ein Bild auf Whatsapp anzuzeigen, ist also: 

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

Und die Größe des anzuzeigenden Bildes muss weniger als 300 KB sein

11
Cedriga

Ich habe die Lösung hier gefunden Whatsapp-Link für die Vorschau am 2. März 16

Und du solltest arbeiten sehen Vor und nach Screenshoot

 enter image description here

Es gibt zwei Arten von Code. Erste 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.

9
wong_udik

Ich stehe auch vor diesem Problem ... Endlich habe ich es gelöst

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

Meine Bildeigenschaft

  1. Dimension: 300X200
  2. Größe: <300 KB
  3. URL: http://ihredomain.de/ihrfolder/bildname.png

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

8

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

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

Achtung ! Sichern Sie Ihre Nachrichten vor dieser Aktion.

 clear whatsapp data and cache

Dann das Ergebnis: vor und nach dem Löschen der Daten und Zwischenspeichern von WhatsApp  before and after sharing

3
Azodium

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

Testen Sie die aktualisierte Version für schema.org

<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>
1
Joell Lapitan

Ich weiß nicht, wie viele Meta-Tags mindestens erforderlich sind, um an WhatsApp zu arbeiten. Ich habe dies irgendwo gefunden und das hat für mich 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>
1
falero80s

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 Domäne gehostet werden soll, oder sie wird nicht auf WhatsApp angezeigt. Ich habe versucht, eine URL von Amazon zu laden. Die Bildvorschau funktioniert nicht.

1
Joell Lapitan

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

Ich hatte das ähnliche Problem. Das Bild wurde in allen anderen Freigabedialogen korrekt angezeigt. Nur WhatsApp konnte das Bild nicht anzeigen, auch wenn der Facebook-Debugger das og: image-Tag 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. So etwas wie:

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

Ich habe diese URL im Meta-Tag og: image verwendet. Es funktionierte für Facebook usw., aber es scheint, als ob 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 og: image-Tag verwenden. Jetzt funktioniert es auch in WhatsApp.

Vorher (funktioniert nicht in WhatsApp, aber 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 (arbeitet 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 :)

1

Ich habe die perfekte Detaillösung hier dokumentiert - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html .__ perfekte Vorschau.

  1. Titel: Fügen Sie Ihrer Website einen Keyword-reichen Titel mit maximal 65 Zeichen hinzu.

  2. Meta Description: 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: Beschreibung: Maximal 65 Zeichen.

  6. og: image: Bild (JPG oder PNG) mit einer Größe von weniger als 300 KB und einer Mindestgröße 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 Zeichenbegrenzung und die Beispielkennungen. Tun Sie es positiv, wenn Sie es zufriedenstellend finden. 

1
GZone

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, 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 löschen und müssen keine Daten löschen.

Segen für alle!

0
David E

In meinem Fall wurde das Problem durch Hinzufügen des folgenden Meta-Tags behoben. Ich habe arabische Inhalte verwendet und musste diese 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.

0
Rami Zebian

Geöffnete Graphdaten:

<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"/>
0
Amranur Rahman

Nur diese 3 Tags scheinen erforderlich zu sein (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

Für mich war es am einfachsten, mit CodeSandbox zu experimentieren, indem Sie die folgenden Schritte ausführen:

  • Erstellen Sie eine Vanilla-App mit https://codesandbox.io/s/
  • Ändern Sie Ihre Meta-Tags entsprechend in der Datei index.html
  • 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 ein einzelnes Zeichen am Ende der URL hinzu. Dadurch wird die "vorherige zwischengespeicherte Vorschau" verworfen.

Zitate erforderlich

Stellen Sie sicher, dass Sie IMMER Angebote und Schlussangebote haben, da WhatsApp darauf reagiert. In Ihrem obigen Beispiel ist kein Abschlusszitat für Ihren og:description vorhanden.

0
Francois

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

0
user6649894