Fornisci un'immagine per la condivisione dei collegamenti WhatsApp

Come possiamo includere un'immagine nel nostro sito Web da visualizzare in WhatsApp quando condividiamo un link come questo?

Standard 2020

Bastano pochi passaggi per ottenere l'anteprima perfetta per WhatsApp, Twitter, Facebook e le icone dei segnalibri per PC e dispositivi mobili. Se ti piace leggere vai su ogp.me , ma assicurati di leggere i passaggi 1 - 6 in questa risposta per ottenere la migliore anteprima di WhatsApp.

Nota: alcune app o siti Web utilizzano la cache o addirittura archiviano l'anteprima del sito Web nel loro database. Questo significa, ad esempio, quando stai testando il tuo link in WhatsApp o Facebook, molto probabilmente non vedrai alcuna differenza. Usare un altro link (un'altra pagina) farà il trucco. Ma non appena si utilizza quel collegamento una volta, questa sezione "si prega di notare" ricomincia da capo.

Passaggio 1: titolo

Massimo 65 caratteri

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

Passaggio 2: descrizione

Massimo 155 caratteri

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

Passaggio 3: og: titolo

Massimo 35 caratteri

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

Passaggio 4: og: url

Link completo all'indirizzo della pagina Web corrente

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

Passaggio 5: og: descrizione

Massimo 65 caratteri

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

Passaggio 6: og: immagine

Immagine (JPG o PNG) con dimensioni inferiori a 300 KB e dimensioni minime di 300 x 200 ^*

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

^* @RichDeBourke me ne ha parlato, ma apparentemente WhatsApp ha aumentato la dimensione massima dell'immagine (dimensioni e dimensione del file). Ho fatto alcuni test: non funziona costantemente su ogni dispositivo. Ho testato immagini da 2.x Mb e anche quello sembrava funzionare 9/10 volte. <300 KB è l'approccio più sicuro, ma dovresti andare bene usando immagini più grandi dal 18-02-2020. Consiglio comunque di mantenere le dimensioni del file al di sotto di 2 MB. E sicuramente getta la tua immagine attraverso TinyPNG o qualsiasi altro algoritmo di compressione delle immagini se non l'hai già fatto.

Se hai completato i passaggi precedenti, ora puoi vedere la tua anteprima in WhatsApp! Tuttavia, tenere presente la sezione "si prega di notare" sopra.

Passaggio 7: og: digitare

Affinché il tuo oggetto sia rappresentato nel grafico, devi specificare il suo tipo. Ecco un elenco dei tipi globali disponibili: http://ogp.me/#types . Puoi anche specificare i tuoi tipi.

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

Passaggio 8: og: locale

Le impostazioni internazionali della risorsa. Puoi anche usare og: locale: alternate se hai traduzioni in altre lingue disponibili.

Se non si specifica og: locale, il valore predefinito è 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" />

Passaggio 9: Twitter

Per il miglior supporto Twitter leggi questo .

Passaggio 10: Facebook

Per il miglior supporto di Facebook leggi questo .

Passaggio 11: favicon

Per il miglior supporto favicon per tutti i browser e dispositivi leggi questo .

Bonus passaggio 12: video / audio

È anche possibile condividere audio / video. Facebook e Twitter, ad esempio, condividono molto bene i video. Leggi ogp.me .

Ho avuto lo stesso problema e il problema era la dimensione dell'immagine. Whatsapp non supporta immagini con dimensioni superiori a 300 KB.

Quindi la proprietà più importante per visualizzare l'immagine su Whatsapp è:

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

E la dimensione dell'immagine da visualizzare deve essere inferiore a 300 KB .

Se il problema persiste, leggi anche la risposta a questa domanda simile

Immagino che non ci sia una lista bianca in whatsapp, poiché ho trovato una soluzione che ha funzionato per me. Fai come segue. inserisci 3 meta tag:

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

La tua immagine deve essere in formato .png e dimensione 600x600px e deve essere chiamata 'logo-yoursite.png' (una volta che ha funzionato per me SOLO COME)

Non dimenticare di inserire il link a whatsapp nel tuo sito Web:

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

Fallo e sarai ben fatto!

Ho documentato la soluzione perfetta dettagliata qui - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html Ci sono sette passi da fare per ottenere l'anteprima perfetta.

Titolo: aggiungi un titolo ricco di parole chiave alla tua pagina web con un massimo di 65 caratteri.

Meta Description: Descrivi la tua pagina web in un massimo di 155 caratteri.

og: titolo: massimo 35 caratteri.

og: url: link completo all'indirizzo della tua pagina web.

og: descrizione: massimo 65 caratteri.

og: image: si consiglia un'immagine (JPG o PNG) di dimensioni inferiori a 300 KB e dimensione minima di 300 x 200 pixel.

favicon: una piccola icona di dimensioni 32 x 32 pixel.

Nella pagina sopra, hai le specifiche richieste, il limite di caratteri e i tag di esempio. Fai voto una volta che lo trovi soddisfacente.

Vorrei attirare l'attenzione sul fatto che un semplice <meta property="og:image" content="image.png" />, come suggerito da qualche parte sopra, non funziona per me (questo in effetti mi ha fatto un ciclo da settimane ormai). Ciò che funziona è un URL assoluto:
<meta property="og:image" content="https://domainname.com/image.png" />

o iniziando con una barra (se l'immagine si trova nella directory principale):
<meta property="og:image" content="/image.png" />

(Avrei aggiunto questo come commento, ma non mi è ancora permesso. I moderatori si sentono liberi di spostarlo se più appropriato.)

Ho provato a farlo anche io e ho aggiunto tutti i meta tag giusti:

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

ma ancora non riesco a vedere l'immagine quando condivido il mio link all'interno di WhatsApp.

Ho scoperto che WhatsApp esegue anche una sorta di memorizzazione nella cache dell'immagine e delle informazioni sull'URL, non so per quanto tempo.

Per verificare di aver inserito i tag corretti, ho appena provato un URL diverso, ad esempio: http://domain.com anziché http://www.domain.com .

speriamo che questo aiuti a qualcun altro.

Dopo aver lavorato in un bugg, ho scoperto che in IOS, elementi in HEAD potrebbero interrompere la ricerca WhatsApp di og: image / og: description / name = description. Quindi prova prima a metterli in cima a tutto il resto.

Questo non funziona

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

Questo lavoro:

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

Consiglio di dare sempre un'occhiata a https://developers.facebook.com/tools/debug/sharing per convalidare le tue proprietà poiché Facebook cambia spesso politiche, conformità e API.

Se lavori con i robot Messenger o altre app FB, potresti aver bisogno della proprietà fb: app_id affinché le immagini dei link funzionino in Whatsapp. Altro sul sito webmaster degli sviluppatori di Facebook. https://developers.facebook.com/docs/sharing/webmasters

Ho avuto lo stesso problema, ecco da risolvere.

Dovrebbe essere mostrato se aggiungi meta og: image

Il problema è che whatsapp non mostra l'immagine se si digita senza http: // e termina con / Ad esempio, mostra l'immagine e la descrizione se si digita http://google.com/ ma non con google.com

Spero che aiuti qualcuno.

Vorrei aggiungere una risposta a questo thread per menzionare specificamente quale dei thread sopra mi ha aiutato a risolvere il problema e l'ordine in cui possono essere seguiti per comprendere correttamente la causa principale e risolverlo una volta per tutte:

Sono stato in grado di ottenere la mia ricca anteprima condividendo il link sui social media con questa soluzione.

Ho seguito varie opzioni in questo thread e di seguito sono le più vicine alla risposta giusta e tutte hanno contribuito al risultato finale:

1. Tag richiesti (tag principale su cui concentrarsi - og: immagine)
2. Parametri dell'immagine
3. Strumento che sicuramente aiuterà
4. Come dare correttamente il percorso dell'immagine
5. Causa principale e soluzione

Si spera che questo risparmierà a qualcuno il tempo necessario per scorrere e trovare il giusto set di risposte e lo sforzo richiesto per tutte le prove ed errori.

Ho provato diversi suggerimenti sotto questo thread e dalle mie ricerche esterne, ma per me è stato un altro problema. Le mie istruzioni specifiche per utilizzare un'immagine indicata dal tag og: image venivano sovrascritte dai tag a grafico aperto forniti dal plug-in Jetpack. puoi trovare la mia risposta dettagliata qui . Tuttavia, ho pensato che valesse la pena aggiungere i passaggi in breve su questo thread più seguito. Spero che questo aiuti qualcuno.

Il Debugger di condivisione di Facebook mi ha aiutato a identificare la causa principale e da lì ho seguito questi passaggi:

1. Eseguire il debug del sito Web utilizzando il debugger sopra. Digita semplicemente l'URL e premi il debug. Questo dovrebbe darti un elenco di avvertimenti e una volta che scorri verso il basso fino alle sezioni dei tag del grafico aperto, sarai in grado di vedere i valori che vengono recuperati per il tuo sito web. Quello su cui concentrarsi è il tag og: image .
2. Scorri più in basso fino al link "Guarda esattamente cosa vede il nostro raschietto per il tuo URL" e cerca il tag og: image per trovare il cattivo nella tua storia.
3. Ora semplicemente, scegli i mezzi per rimuovere una sostituzione che si sta verificando. Nel mio caso, ho trovato utile la seguente funzione. Cambia l'immagine predefinita utilizzata ogni volta che Jetpack non è in grado di determinare un'immagine da utilizzare.

Cambia l'immagine predefinita utilizzata ogni volta che Jetpack non è in grado di determinare un'immagine da utilizzare

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

Vorrei aggiungere che sono raccomandati parametri di immagine come minimo 300 px x 200 px e dimensioni <300 KB. E segui queste istruzioni se tali istruzioni generali non funzionano per te, perché è molto probabile che il tuo problema sia simile al mio. Inoltre, a volte la soluzione più semplice potrebbe essere quella di rimuovere il plug-in (purché tu possa verificare di poterne fare a meno).

Alla fine dovresti essere in grado di vedere qualcosa come -

Spero che questo ti aiuti.

NS

Per ottenere un'anteprima dell'immagine di WhatsApp sono necessari i seguenti tag:

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

Come dicono i documenti di Facebook , se si specifica la dimensione di og: image, verrà recuperata rapidamente anziché in modo asincrono altrimenti.

PNG è raccomandato per il formato immagine. Si consiglia almeno 600x600 pixel.

Se vuoi avere una foto accanto a un URL del tuo sito web che qualcuno ha condiviso su WhatsApp, devi mettere un metatag sulla pagina a cui si collega l'URL, in questo modo:

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

Aveva lo stesso problema, ha aggiunto og: image e non ha funzionato mentre l'URL termina con il segno di barra (/). Dopo aver rimosso la barra dall'URL, l'immagine viene caricata. Bug interessante ...

Le seguenti azioni mi hanno aiutato nel mio caso.

Mettere l'immagine sotto lo stesso host .

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

Passare l'immagine necessaria a WhatsApp specificatamente rilevando il suo agente utente tramite la sottostringa principale, ad esempio

WhatsApp/2.18.380 A

Attendere qualche secondo prima di premere il pulsante di invio, quindi WhatsApp avrà il tempo di recuperare l'immagine e la descrizione dai metadati.

Anche dopo questi tentativi. Le immagini del mio sito Web sono state recuperate alcune volte e talvolta no. Dopo la convalida con https://developers.facebook.com/tools/debug/sharing

ho capito che il mio framework django (python) sta rendendo il percorso dell'immagine relativamente. Ho dovuto apportare modifiche al percorso dell'immagine con l'URL completo. (incluso http: //). poi ha iniziato a funzionare

Ulteriori informazioni utili:

Puoi fornire diverse immagini og: whatsapp utilizzerà l'ultima. Questo aiuterà con il problema che ad esempio Facebook vuole un rapporto di 1,91: 1 e whatsapp 1: 1

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