Stellen Sie ein Bild für die WhatsApp-Linkfreigabe bereit

Wie können wir ein Bild in unsere Website aufnehmen, um es in WhatsApp anzuzeigen, wenn wir einen solchen Link freigeben?

2020 Standards

In wenigen Schritten erhalten Sie die perfekte Vorschau für WhatsApp-, Twitter-, Facebook- und Lesezeichensymbole für PCs und Mobilgeräte. Wenn Sie gerne lesen, gehen Sie zu ogp.me. - die Schritte 1 bis 6 in dieser Antwort, um die beste WhatsApp-Vorschau zu erhalten.

Bitte beachten Sie: Einige Apps oder Websites verwenden den Cache oder speichern die Website-Vorschau sogar in ihrer Datenbank. Wenn Sie beispielsweise Ihren Link in WhatsApp oder Facebook testen, werden Sie höchstwahrscheinlich nicht sofort einen Unterschied feststellen. Die Verwendung eines anderen Links (einer anderen Seite) reicht aus. Sobald Sie diesen Link jedoch einmal verwenden, beginnt dieser Abschnitt "Bitte beachten" von vorne.

Schritt 1: Titel

Maximal 65 Zeichen

<title>your keyword rich title of the website and/or webpage</title>

Schritt 2: Beschreibung

Maximal 155 Zeichen

<meta name="description" content="description of your website/webpage, make sure you use keywords!">

Schritt 3: og: Titel

Maximal 35 Zeichen

<meta property="og:title" content="short title of your website/webpage" />

Schritt 4: og: url

Vollständiger Link zur aktuellen Webseitenadresse

<meta property="og:url" content="https://www.example.com/webpage/" />

Schritt 5: og: Beschreibung

Maximal 65 Zeichen

<meta property="og:description" content="description of your website/webpage">

Schritt 6: og: Bild

Bild (JPG oder PNG) mit einer Größe von weniger als 300 KB und Mindestabmessungen von 300 x 200 ^*

<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">

^* @RichDeBourke hat dies mir gegenüber erwähnt, aber anscheinend hat WhatsApp seine maximale Bildgröße (Abmessungen sowie Dateigröße) erhöht. Ich habe einige Tests durchgeführt: Es funktioniert nicht jedes Mal auf jedem Gerät. Ich habe 2.x Mb Bilder getestet und selbst das schien 9/10 mal zu funktionieren. <300 KB ist der sicherste Ansatz, aber Sie sollten ab dem 18.02.2020 größere Bilder verwenden können. Ich würde jedoch empfehlen, die Dateigröße unter 2 MB zu halten. Und werfen Sie Ihr Bild definitiv durch TinyPNG oder einen anderen Bildkomprimierungsalgorithmus, wenn Sie dies noch nicht getan haben.

Wenn Sie die obigen Schritte ausgeführt haben, können Sie jetzt Ihre Vorschau in WhatsApp sehen! Beachten Sie jedoch, der „bitte zur Kenntnis“ Abschnitt oben.

Schritt 7: og: Typ

Damit Ihr Objekt im Diagramm dargestellt wird, müssen Sie seinen Typ angeben. Hier ist eine Liste der verfügbaren globalen Typen: http://ogp.me/#types . Sie können auch Ihre eigenen Typen angeben.

<meta property="og:type" content="article" />

Schritt 8: og: Gebietsschema

Das Gebietsschema der Ressource. Sie können auch og: locale: alternative verwenden, wenn Sie andere Sprachübersetzungen zur Verfügung haben.

Wenn Sie og: locale nicht angeben, wird standardmäßig en_US verwendet.

<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />

Schritt 9: Twitter

Für die beste Twitter-Unterstützung lesen Sie diese .

Schritt 10: Facebook

Für die beste Facebook-Unterstützung lesen Sie diese .

Schritt 11: Favicon

Lesen Sie dies, um die beste Favicon-Unterstützung für alle Browser und Geräte zu erhalten .

Bonusschritt 12: Video / Audio

Es ist auch möglich, Audio / Video zu teilen. Facebook und Twitter zum Beispiel teilen Videos sehr gut. Lesen Sie ogp.me .

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 .

Wenn das Problem weiterhin besteht, lesen Sie auch die Antwort auf diese ähnliche Frage

Ich denke, es gibt keine weiße Liste in WhatsApp, da ich eine Lösung gefunden habe, die für mich funktioniert hat. Gehen Sie wie folgt vor. 3 Meta-Tags einfügen:

<meta property="og:image" content="http://yourimage_with_complete_URL.png"/>  
<meta property="og:title" content="Your Title"/>  
<meta property="og:description" content="Your description."/>  

Ihr Bild muss im PNG-Format und in der Größe 600 x 600 Pixel vorliegen und den Namen "logo-yoursite.png" haben (sobald es für mich funktioniert hat, genau so).

Vergessen Sie nicht, den Link zu WhatsApp in Ihre Website einzufügen:

<a href='whatsapp://send?text=Text to send withe message: http://www.yoursite.com'>whatsApp</a>

Tun Sie dies und Sie werden gut gemacht sein!

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.

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

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

og: title: Maximal 35 Zeichen.

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

og: description: Maximal 65 Zeichen.

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.

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 möchte darauf aufmerksam machen, dass ein einfaches <meta property="og:image" content="image.png" />, wie oben vorgeschlagen, für mich nicht funktioniert (dies hatte mich tatsächlich seit Wochen in einer Schleife). Was funktioniert, ist entweder eine absolute URL:
<meta property="og:image" content="https://domainname.com/image.png" />

oder mit einem Schrägstrich beginnen (wenn sich das Bild im Stammverzeichnis befindet):
<meta property="og:image" content="/image.png" />

(Ich hätte dies als Kommentar hinzugefügt, darf es aber noch nicht. Moderatoren können dies gegebenenfalls verschieben.)

Ich habe versucht, dies auch selbst zu tun, und ich habe alle richtigen Meta-Tags hinzugefügt:

<meta property="og:image" itemprop="image" content="image_url" />
<meta property="og:image:url" itemprop="image" content="image_url" />
<meta property="og:image:type" content="image/png" />

Das Bild konnte jedoch nicht angezeigt werden, wenn mein Link in WhatsApp freigegeben wurde.

Ich habe festgestellt, dass WhatsApp auch eine Art Caching des Bildes und der URL-Informationen durchführt. Ich weiß nicht, wie lange.

Um zu überprüfen, ob ich die richtigen Tags eingefügt habe, habe ich einfach eine andere URL ausprobiert, zum Beispiel: http://domain.com anstelle von http://www.domain.com .

hoffentlich hilft das jemand anderem.

Nachdem Sie in einem Bugg gearbeitet haben, haben Sie herausgefunden, dass Elemente in HEAD unter IOS möglicherweise die WhatsApp-Suche nach og: image / og: description / name = description stoppen . So versuchen sie zuerst an der Spitze zu setzen alles andere.

Das funktioniert nicht

<head>
    <div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>

    <meta property="og:description" content="description" />
    <meta property="og:image" content="http://cdn.some.com/random.jpg" />
</head>

Diese Arbeit:

    <head>
        <meta property="og:description" content="description" />
        <meta property="og:image" content="http://cdn.some.com/random.jpg" />

        <div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
    </head>

Ich würde empfehlen, immer einen Blick auf https://developers.facebook.com/tools/debug/sharing zu werfen , um Ihre Eigenschaften zu überprüfen, da Facebook häufig seine Richtlinien, Konformitäten und API ändert.

Wenn Sie mit Messenger-Bots oder anderen FB-Apps arbeiten, benötigen Sie möglicherweise die Eigenschaft fb: app_id, damit Linkbilder in WhatsApp funktionieren. Mehr auf der Webmaster-Website der Facebook-Entwickler. https://developers.facebook.com/docs/sharing/webmasters

Ich hatte das gleiche Problem, hier ist zu lösen.

Es sollte angezeigt werden, wenn Sie meta og: image hinzufügen

Das Problem ist, dass WhatsApp kein Bild anzeigt, wenn Sie ohne http: // eingeben und mit / enden. Wenn Sie beispielsweise http://google.com/ eingeben, werden Bild und Beschreibung angezeigt. jedoch nicht mit google.com

Hoffe es hilft jemandem.

Ich möchte diesem Thread eine Antwort hinzufügen, um speziell zu erwähnen, welcher der oben genannten Threads mir geholfen hat, das Problem zu lösen, und in welcher Reihenfolge sie befolgt werden können, um die Grundursache richtig zu verstehen und ein für alle Mal zu beheben:

Mit dieser Lösung konnte ich meine umfangreiche Vorschau abrufen, während ich den Link in den sozialen Medien teilte .

Ich habe in diesem Thread verschiedene Optionen befolgt und unten sind die richtigen Antworten am nächsten und sie alle haben zum Endergebnis beigetragen:

1. Tags erforderlich (Haupt-Tag zum Fokussieren auf - og: image)
2. Bildparameter
3. Werkzeug, das auf jeden Fall helfen wird
4. So geben Sie den Bildpfad richtig an
5. Grundursache und Lösung

Dies erspart hoffentlich jemandem die Zeit, die erforderlich ist, um durch die richtigen Antworten zu scrollen und den richtigen Aufwand für alle Versuche und Irrtümer zu finden.

Ich habe unter diesem Thread und bei meinen externen Suchen mehrere Vorschläge versucht, aber es war ein ganz anderes Problem für mich. Meine spezielle Anweisung zur Verwendung eines durch das og: image- Tag gekennzeichneten Bildes wurde durch die vom Jetpack-Plugin bereitgestellten offenen Diagramm-Tags überschrieben. Meine ausführliche Antwort finden Sie hier . Ich hielt es jedoch für sinnvoll, die Schritte in diesem weiterverfolgten Thread kurz hinzuzufügen. Hoffe das hilft jemandem.

Der Facebook Sharing Debugger hat mir geholfen, die Grundursache zu identifizieren, und von dort aus habe ich die folgenden Schritte ausgeführt:

1. Debuggen Sie Ihre Website mit dem obigen Debugger. Geben Sie einfach die URL ein und klicken Sie auf Debuggen. Dies sollte Ihnen eine Liste von Warnungen geben. Sobald Sie zu den geöffneten Abschnitten mit Diagramm-Tags gescrollt haben, können Sie die Werte sehen, die für Ihre Website abgerufen werden. Derjenige, auf den Sie sich konzentrieren sollten, ist das Tag og: image .
2. Scrollen Sie weiter nach unten zum Link "Sehen Sie genau, was unser Scraper für Ihre URL sieht" und suchen Sie nach dem Tag " og: image" , um den Bösewicht in Ihrer Geschichte zu finden.
3. Wählen Sie jetzt einfach die Mittel, um eine auftretende Überschreibung zu entfernen. In meinem Fall fand ich die folgende Funktion hilfreich. Das Standardbild wird immer dann geändert, wenn Jetpack kein zu verwendendes Bild bestimmen kann.

Das Standardbild wird immer dann geändert, wenn Jetpack kein zu verwendendes Bild bestimmen kann

function custom_jetpack_default_image() {
    return 'YOUR_IMAGE_URL';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

Ich sollte hinzufügen, dass die Bildparameter wie mindestens 300 x 200 Pixel und Größe <300 KB empfohlen werden. Und bitte befolgen Sie diese Anweisungen, wenn solche allgemeinen Anweisungen für Sie nicht funktionieren, da dann höchstwahrscheinlich Ihr Problem meinem ähnlich ist. Manchmal besteht die einfachste Lösung auch darin, das Plugin zu entfernen (vorausgesetzt, Sie überprüfen, ob Sie darauf verzichten können).

Am Ende sollten Sie etwas sehen können wie -

Hoffe das hilft.

NS

Sie benötigen die folgenden Tags, um eine WhatsApp-Bildvorschau zu erhalten:

<meta property="og:title" content="Website name" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://url.com/" />
<meta property="og:description" content="Website description" />
<meta property="og:image" content="image.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="600" />

Wenn Sie die Größe von og: image angeben, wird diese, wie in Facebook-Dokumenten angegeben , schnell und nicht asynchron abgerufen.

Für das Bildformat wird PNG empfohlen. Es wird empfohlen, mindestens 600 x 600 Pixel zu verwenden.

Wenn Sie ein Bild neben einer URL von Ihrer Website haben möchten, die jemand auf WhatsApp geteilt hat, müssen Sie ein Metatag auf der Seite einfügen, auf die die URL verweist:

<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>

Hatte das gleiche Problem, fügte og: image hinzu und es funktionierte nicht, während die URL mit einem Schrägstrich (/) endete. Nach dem Entfernen des Schrägstrichs aus der URL wird das Bild geladen. Interessanter Fehler ...

Die folgenden Aktionen haben in meinem Fall geholfen.

Bild unter denselben Host stellen .

<meta property="og:url" content="https://www.same-host.com/whatsapp-image.png" />

Passing benötigt Bild zu WhatsApp speziell durch ihre Benutzeragenten von führenden Teilzeichenerfassungs Beispiel

WhatsApp/2.18.380 A

Warten Sie einige Sekunden, bevor Sie die Senden-Taste drücken, damit WhatsApp Zeit hat, Bild und Beschreibung aus den Metadaten abzurufen.

Auch nach diesen Versuchen. Meine Website-Bilder wurden manchmal und manchmal nicht abgerufen. Nach der Validierung mit https://developers.facebook.com/tools/debug/sharing

Ich habe festgestellt, dass mein Django (Python) Framework den Bildpfad relativ rendert. Ich musste den Pfad des Bildes mit vollständiger URL ändern. (einschließlich http: //). dann fing es an zu arbeiten

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

<meta property="og:image" content="https://www.link.com/facebook.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />


<meta property="og:image" content="https://www.link.com/whatsapp.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />

https://roei.stream/2018/11/18/ideal-open-graph-image-size-for-whatsapp-link-share/

https://css-tricks.com/essential-meta-tags-social-media/