Ho provato a seguire questa domanda: fornire un'immagine per la condivisione del collegamento WhatsApp

Ho creato una semplice pagina web HTML con i metatag di base di Facebook:

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

La linter di Facebook si convalida correttamente e in Facebook si mostra perfetta, ma quando provo a condividere tramite WhatsApp l'immagine non viene visualizzata.

Lo sto provando su WhatsApp su Android

→ Questo è l'URL della pagina Web di esempio

I belive è necessario aggiungere itempropalla og:imagemeta tag, hanno il set di dimensioni dell'immagine 256x256e anche che non avrebbe danneggiato per aggiungere la site_name, typee updated_time le proprietà sia :)

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

Puoi vedere questi meta tag in azione, ad esempio su Google Maps .
Dopo aver modificato i metatag, potrebbe essere necessario attendere un po 'per l'aggiornamento delle possibili cache.

Puoi eseguire il debug / verificare i meta tag Open Graph dal debugger di Facebook
Se puoi vedere tutti i tuoi tag lì, i siti / app in cui i tuoi tag non vengono visualizzati correttamente potrebbero avere requisiti diversi per i tag Open Graph.

MODIFICA:
se hai intenzione di specificare un'immagine tramite un HTTP-Securelink, devi usare al og:image:secure_urlposto di og:image.

EDIT2:
è inoltre necessario specificare og:typein quanto è uno dei quattro parametri richiesti di base.
<meta property="og:type" content="website" />dovrebbe portarti nella giusta direzione.

Ho avuto lo stesso problema e il problema era la dimensione dell'immagine. Whatsapp non supporta immagini con una dimensione superiore 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

Affronto anche questo problema Alla fine, l'ho risolto

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

La mia proprietà dell'immagine

1. Dimensioni: 300X200
2. Dimensioni: <300 KB
3. URL: http://yourdomain.com/yourfolder/imagename.png

Assicurati che nel nome dell'immagine non ci sia spazio, se hai due parole usa il segno di sottolineatura

Dopo aver passato mesi a cercare di capirlo, ho finalmente risolto il problema. Ecco la mia soluzione:

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

Copia quanto sopra, incollalo nell'area principale del sito web. CHIUDI la tua app Whatsapp, riapri, POI prova. Non è necessario svuotare la cache e NON È NECESSARIO CANCELLARE I DATI.

Benedizioni a tutti!

Ho trovato la soluzione qui il link di anteprima di Whatsapp pubblicato il 2 marzo 16

E dovresti vedere il lavoro

Esistono due tipi di codice. Primo meta og: immagine all'interno di <head>

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

Schema di anteprima da schema.org all'interno di <body>

<link itemprop="thumbnailUrl" href="url_image"> 
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> 
  <link itemprop="url" href="url_image"> 
</span>

Spero che questo aiuto. Grazie.

Cancella i dati e la cache di whatsapp (o usa un altro whatsapp)!

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

Stai attento ! Esegui il backup dei tuoi messaggi prima di questa azione.

Quindi il risultato: prima e dopo la cancellazione dei dati e la cache di WhatsApp

Non conosco il numero minimo di meta tag necessari per lavorare su whatsapp, l'ho trovato da qualche parte e per me ha funzionato perfettamente. Nota: la risoluzione dell'immagine è 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>

Ulteriori informazioni utili:

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

https://stackoverflow.com/a/61078968/8486854

In risposta a https://stackoverflow.com/a/35785393/1518500

Prova la versione aggiornata per 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>

o utilizzando il formato json-ld di google

<script type="application/ld+json">
 {
"@context": "http://schema.org/",
"@type": "ImageObject",
 "url": "ImgURLhere",
    "height": 800,
    "width": 1200

 }
 </script>

Per tutti che hanno ancora questo problema e per quanto mi riguarda nessuna delle soluzioni pubblicate ha funzionato.

Ho avuto un problema simile. L'immagine veniva visualizzata correttamente in tutte le altre finestre di dialogo di condivisione. Solo WhatsApp non può visualizzare l'immagine, anche se il debugger di Facebook ha correttamente il tag og: image.

La soluzione che ha funzionato per me: sto usando Firebase. Per i contenuti caricati nella loro memoria, ottieni un URL di download univoco con un token multimediale. Qualcosa di simile a:

https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/ ? alt = media & token = YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY

Ho usato questo URL nel meta tag og: image. Ha funzionato per Facebook, ecc., Ma sembra che WhatsApp non sia riuscita a scaricare l'immagine da questo URL. Invece è necessario includere l'immagine nella directory del progetto e utilizzare questo collegamento per il tag og: image. Ora funziona correttamente anche su WhatsApp.

Prima (non funzionava su WhatsApp, ma su Facebook ecc.)

<meta property="og:image" itemprop="image" content="https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/your_image?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY">

Dopo (ora funziona in tutte le finestre di dialogo condivise testate, incluso WhatsApp)

<meta property="og:image" itemprop="image" content="https://domain_name/path_to_image">

Spero che possa aiutare qualcuno di voi :)

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

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

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

3. og: title: massimo 35 caratteri.

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

5. og: descrizione: massimo 65 caratteri.

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

7. 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. Esegui un voto positivo una volta che lo trovi soddisfacente.

Spero che questo aiuto:

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

Prendi nota di imgURL che dovrebbe essere ospitato dallo stesso dominio, altrimenti non verrà visualizzato su whatsapp. Ho provato a caricare un URL da Amazon, l'anteprima dell'immagine non funziona.

Nel mio caso, l'aggiunta del meta tag sottostante ha risolto il problema. Stavo usando contenuti in arabo e ho dovuto aggiungerlo per far apparire l'immagine su WhatsApp:

<meta property='og:locale' content='ar_AR' />

Nota: se utilizzi contenuti in inglese, non è necessario aggiungere questo metatag poiché l'inglese è il valore predefinito.

Hai solo bisogno di digitare il messaggio con "http: //" all'inizio. Ad esempio: http://www.google.com mostra l'immagine in miniatura, ma www.google.com no.

Apri i dati del grafico:

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

Solo questi 3 tag sembrano essere richiesto ( 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" />

Sperimentare / giocare

Il modo più semplice per sperimentare per me è stato con CodeSandbox seguendo questi passaggi:

• Crea un'app Vanilla con https://codesandbox.io/s/
• Modifica i tuoi meta tag di conseguenza nel index.htmlfile
• Salvare il file ( ctrl+s) che eseguirà il fork dell'app e genererà il proprio URL univoco
• Incolla l'URL in WhatsApp per vedere l'anteprima (non è nemmeno necessario inviare un messaggio)
• Apporta modifiche ai meta tag
• Modifica l'URL: aggiungi un singolo carattere alla fine dell'URL. Questa operazione elimina la "precedente anteprima memorizzata nella cache"

Quotazioni richieste

Assicurati solo di avere SEMPRE virgolette e virgolette di chiusura perché WhatsApp è sensibile a questo. Il tuo esempio sopra non ha una citazione di chiusura per il tuo og:description.

Per chiunque abbia ancora riscontrato questo problema, ho scoperto che le immagini pubblicate su Amazon S3 non funzionano per l'app mobile WhatsApp (sia Android che iOS, ma l'app desktop Mac andava bene). È molto probabile che le nostre impostazioni AWS causino questo, ma ho notato il modello anche in altri siti (ad esempio questo con un og:imagedominio simile a quello https://s3.amazonaws.com).

Non ci sono stati problemi su qualsiasi altra piattaforma che ho provato, solo app mobili WhatsApp. Non appena ho indicato il mio<meta property="og:image" content="https://some-non-aws-location" /> a un altro URL pubblico come un file di Google Drive (condiviso pubblicamente ovviamente), ha funzionato bene.

Ho anche provato a salvare l'immagine nel nostro repository, che è ospitato e distribuito su AWS con un dominio personalizzato, e neanche questo ha funzionato. Quindi AWS sembra ancora essere il colpevole. Spero che questo aiuti qualcuno!

Se dopo tutti questi suggerimenti, la miniatura non viene ancora visualizzata, prova questo:

Il mio problema era che le virgolette doppie dagli attributi og venivano rimosse durante la compilazione per la produzione (npm run build). Il modulo Minify lo stava facendo.

Quindi la soluzione era annullare questa rimozione, impostando l'attributo removeAttributeQuotes su false:

minify: {
    ...
    removeAttributeQuotes: false,
    ...
}

Nel mio ambiente di sviluppo, l'ho impostato sul file "webpack.prod.conf.js". Impostalo sul tuo file equivalente.

Ricostruiscilo e ora funziona.

Ho seguito tutte le istruzioni nelle risposte qui, e ancora non riuscivo a farlo funzionare. Sembra che anche WhatsApp richieda l'estensione per visualizzare l'immagine.

Quindi per un tag che punta a un jpeg:

<meta property="og:image" itemprop="image" content="https://example.com/someimageid"/>

Modificare l'API per consentire l'estensione e utilizzare:

<meta property="og:image" itemprop="image" content="https://example.com/someimageid.jpeg"/>

e poi sembra funzionare ...

Ho avuto lo stesso problema, finalmente l'ho fatto funzionare dopo alcuni tentativi. Ecco gli 8 tag html che ho usato sulla mia pagina web per far funzionare l'anteprima:

Nel <head>tag:

<meta property="og:title" content="ABC Blabla 2020 Friday" />
<meta property="og:url" content="https://bla123.neocities.org/mp/friday.html" />
<meta property="og:description" content="Photo Album">
<meta property="og:image" itemprop="image" content="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG"/>
<meta property="og:type" content="article" />
<meta property="og:locale" content="en_GB" />

Nel <body>tag:

<link itemprop="thumbnailUrl" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">

<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">
</span>

Questi 8 tag (6 nella testa, 2 nel corpo) hanno funzionato perfettamente.

Suggerimenti:

1.Utilizzare l'URL della posizione dell'immagine esatta invece del formato della directory, ovvero non utilizzare images / OG_thumb.jpg

2.Estensione file sensibile al caso: se il nome dell'estensione dell'immagine sul tuo provider di hosting è ".JPG", non utilizzare ".jpg" o ".jpeg". Ho notato che in base al provider di hosting e all'errore di combinazione del browser può o meno , quindi per sicurezza è più facile abbinare solo il caso dell'estensione del file.

3.Dopo aver eseguito i passaggi precedenti se l'anteprima della miniatura non viene ancora visualizzata nel messaggio di WhatsApp, quindi:

un. Forza l'arresto dell'app mobile (ho provato su Android) e riprova

b.Utilizza lo strumento online per visualizzare in anteprima il tag OG, ad esempio ho usato: https://searchenginereports.net/open-graph-checker

c. Nel browser mobile, incolla il collegamento diretto alla miniatura OG e aggiorna il browser 4-5 volte. ad es. https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG

Novembre 2020: come ho sperimentato, questi meta tag sono obbligatori e hanno effetto su ciò che vedi sul collegamento condiviso in Whatsapp e WhatsApp-thumbnail:

<head>
 <meta content='myTitle' property='og:title'/>
  <meta content="myDescription" property="og:Description"/>
  <meta property="og:type" content= "website" />
  <meta property="og:image" itemprop="image primaryImageOfPage" content="https://i.ibb.co/1GRpwND/600px-Approve-icon-svg.png" />
</head>

e all'interno <body> :

<a href="https://wa.me/?text=https://myaddress.blogspot.com/2020/11/try-16.html" target="_blank" rel="nofollow">Hello whatsApp</a>

Ulteriori spiegazioni:

1- Supponi di avere <meta content='example.com/page1' property='og:url'/>e all'interno del corpo a cui ti riferisci <a href="https://wa.me/?text=example.com/page2" >Hello whatsApp</a>, il og:imagee og:descriptiondi paginaexample.com/page2 verrà visualizzato su whatsApp come hai fatto riferimento al tuo link nel corpo (forse ovvio).

2-Quando si add/changenessun tag grafico aperti come og:description, e ancora una volta si sceglie il tuo <a></a>tag nella tua pagina / corpo, ciò che si vede su WhatsApp non cambia se non si cambia il href="I am a new URL"del vostro <a></a>tag o cancellare la cache di WhatsApp !!

3-Ho provato Png/jpgimmagini, tutte di dimensioni inferiori a 300 kb e tutte più grandi di 300 * 300 in pixel, e il contenuto dell'immagine era un https o un httpURL, il codice sopra le supporta entrambe (non è necessario og:image:secure_url).

4-Ogni volta che aggiungi / modifichi dei ogcontenuti, per avere una miniatura su WhatsApp, le modifiche non influiscono al primo tentativo !! e successo al secondo tentativo. Molto strano !

Questa soluzione funziona per me:

    <meta property="og:title" content="Testing Title" />
    <meta
      property="og:description"
      content="This is best way to view your Time Table & Join Meetings"
    />
    <meta
      property="og:image"
      itemprop="image"
      content="//upload.wikimedia.org/wikipedia/commons/d/d4/JPEG_example_image_decompressed.jpg"
    />
    <meta property="og:url" content="https://google.com/" />
    <meta property="og:type" content="website" />
    <meta property="og:image:type" content="image/jpeg" />

testato su codesandbox.io

ecco il link: https://l8ogr.csb.app/

una piccola cosa sciocca ha fatto quella magia, rimuovendo " http" o "https " dall'URL dell'immagine

se l'URL dell'immagine è ex: https://test.com/img.jpega//test.com/img.jpeg

<meta property="og:image" itemprop="image" content="//test.com/img.jpg"/>