Stellen Sie ein Bild für die WhatsApp Linkfreigabe bereit

2018 standards

Es dauert ein paar Schritte, um die perfekte Vorschau für WhatsApp, Twitter, Facebook-und bookmark-icons für pc und mobile Geräte. Wenn Sie gerne Lesen, gehen Sie zu ogp.mir - aber stellen Sie sicher, Lesen Sie die Schritte 1 - 6 in diese Antwort zu Holen Sie sich die besten WhatsApp-Vorschau.

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ändigen link auf Ihre Webseite-Adresse

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

Schritt 5: og:description

Maximal 65 Zeichen

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

Schritt 6: og:image

Bild(JPG oder PNG), die kleiner als 300 KB und Mindestmaß von 300 x 200 pixel wird empfohlen

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

Schritt 7: og:type

Um für Ihr Objekt dargestellt werden-innerhalb der Grafik, müssen Sie Ihren Typ festlegen.

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

Schritt 8: og:locale

Das Gebietsschema für die Ressource. Sie können auch verwenden, og:locale:alternate, wenn Sie andere übersetzungen zur Verfügung.

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

<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 den besten Twitter support Lesen diese.

Schritt 10: Facebook

Für die beste Facebook-support Lesen diese.

Schritt 11: favicon

Für das beste favicon-Unterstützung für alle Browser und Geräte Lesen diese.

Bonus Schritt 12: video - /audio -

Es ist auch möglich, die Freigabe von audio/video. Facebook und twitter zum Beispiel videos sehr gut. Lesen ogp.mir.

InformationsquelleAutor der Antwort Derk Jan Speelman

Ich denke, es gibt keine weiße Liste in whatsapp, als ich eine Lösung gefunden, die für mich gearbeitet. Gehen Sie wie folgt vor.
legen Sie 3 meta-tags:

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

Ist, muss das Bild sein .png-format und 600x600px dimension und muss mit dem Namen 'logo-yoursite.png'
(einmal hat es geklappt für mich EINFACH so)

Vergessen Sie nicht, fügen Sie den link zu whatsapp in Ihre website:

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

Tun Sie dies und Sie werden gut gemacht!

InformationsquelleAutor der Antwort Alejandro Brasil

Wenn Sie wollen, um ein Bild neben einem url von Ihrer Webseite jemand geteilt über WhatsApp, Sie setzen einen metatag auf der Seite, wo die URL-Verknüpfungen, wie diese:

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

InformationsquelleAutor der Antwort maxdaniel98

Ich habe versucht, diese selbst zu tun, wie gut und ich habe all die richtigen meta-tags :

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

aber noch nicht sehen konnte, das Bild beim teilen von meinem link in WhatsApp.

Habe ich entdeckt, dass WhatsApp auch nicht, irgendeine Art von Zwischenspeicherung des Bildes und den url-info, weiß nicht, für wie lange.

Überprüfen, die habe ich eingefügt, die richtigen tags, ich habe gerade versucht, verschiedene url, zum Beispiel : http://domain.com statt http://www.domain.com .

ich hoffe, dies hilft jemand anderes.

InformationsquelleAutor der Antwort jony89

Nach der Arbeit in ein bugg, fand heraus, dass in IOS, Elemente im KOPF stoppen könnte, das WhatsApp der Suche nach dem og:image /og:description /name=Beschreibung. So versuchen Sie zuerst, um Sie auf top - alles andere.

Dies nicht funktioniert

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

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

InformationsquelleAutor der Antwort Kim Sant