it-swarm.com.de

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?

 enter image description here

87
maxdaniel98

2019 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 -, aber lesen Sie in dieser Antwort die Schritte 1 - 6, um die beste WhatsApp-Vorschau zu erhalten.


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: title

Maximal 35 Zeichen

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

Schritt 4: og: url

Vollständiger Link zu Ihrer 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: 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

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

Schritt 7: og: type

Damit Ihr Objekt innerhalb des Diagramms dargestellt werden kann, 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: locale

Das Gebietsschema der Ressource. Sie können auch og: locale: verwenden, falls andere Übersetzungen verfügbar sind.

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

Um die beste Unterstützung für Twitter zu erhalten, lesen Sie this .


Schritt 10: Facebook

Um die beste Unterstützung für Facebook zu erhalten, lesen Sie this .


Schritt 11: Favicon

Um die beste Unterstützung von Favicon für alle Browser und Geräte zu erhalten, lesen Sie this .


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 .

178

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">

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

Wenn das Problem bestehen bleibt, lesen Sie auch die Antwort auf diese ähnliche Frage

13
Cedriga

Ich denke, es gibt keine Whatsapp in der Whatsapp, da ich eine Lösung gefunden habe, die für mich funktioniert. Gehen Sie wie folgt vor. 3 Metatags 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 das PNG-Format und die Größe 600 x 600 Pixel haben und "logo-yoursite.png" heißen.

Vergessen Sie nicht, den Link zu WhatsApp auf Ihrer Website einzufügen:

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

Tun Sie das und Sie werden gut gemacht!

11

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

Titel: Fügen Sie Ihrer Webseite einen Keyword-Titel mit maximal 65 Zeichen.

Meta Description: Beschreiben Sie Ihre Webseite mit maximal 155 Zeichen.

og: title: Maximal 35 Zeichen.

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

og: Beschreibung: Maximal 65 Zeichen.

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

5
GZone

Nachdem Sie in einem Fehler gearbeitet hatten, stellte sich heraus, dass in IOS elements in HEAD) die WhatsApp-Suche des og stoppt: image/og: description/name = description. Also versuche zuerst, sie oben zu setzen von allem anderen.

Das geht 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>
3
Kim Sant

Ich habe selbst versucht, dies auch 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" />

konnte das Bild jedoch nicht sehen, wenn ich meinen Link in WhatsApp freigebe.

Ich habe herausgefunden, dass WhatsApp auch eine Art Zwischenspeicherung des Bildes und der URL-Informationen vornimmt, weiß nicht wie lange.

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

hoffentlich hilft das jemand anderem. 

3
jony89

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 anzeigen würde, wenn Sie ohne http: // eingeben und mit /.__ enden. Zum Beispiel werden Bild und Beschreibung angezeigt, wenn Sie http://google.com/ eingeben, jedoch nicht mit google.com

Hoffe es hilft jemandem.

2
jurgel

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

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. Weitere Informationen finden Sie auf der Website für Entwickler von Facebook-Entwicklern . http: //developers.facebook. de/docs/sharing/webmasters

1
Braconnot_P

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" />

Wie Facebook docs sagt, wenn Sie die og: Bildgröße angeben, wird diese schnell und nicht asynchron abgerufen.

PNG wird für das Bildformat empfohlen. Empfohlen werden mindestens 600x600 Pixel.

0
moreirapontocom

Folgende Aktionen haben in meinem Fall geholfen.

Bild unter denselben Host setzen .

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

Übergabe des benötigten Bildes an WhatsApp, indem der Benutzeragent anhand der führenden Teilzeichenfolge erkannt wird, Beispiel

WhatsApp/2.18.380 A

Warte ein paar Sekunden bevor du die Sendetaste drückst, damit WhatsApp Zeit hat, Bild und Beschreibung von den og Metadaten abzurufen.

0
baur

Hatte dasselbe Problem, fügte og: image hinzu und funktionierte nicht, während die URL mit einem Schrägstrich (/) endete. Nachdem Sie den Schrägstrich von der URL entfernt haben, wird das Bild geladen. Interessanter Fehler ...

0
Yedidia

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

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

Auch nach diesen Versuchen. Meine Website-Bilder wurden einige Male 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 darstellt. Ich musste den Pfad des Bildes mit voller URL ändern. (einschließlich http: //). dann fing es an zu arbeiten

0
Siddaram H