Immagine collegamento post Facebook

95

Quando qualcuno pubblica un collegamento su Facebook, uno script di solito esegue la scansione di quel collegamento per eventuali immagini e visualizza una rapida miniatura accanto al post. Per alcuni URL però (incluso il mio), FB non sembra rilevare nulla, nonostante siano un numero di immagini su quella pagina.

Ho letto che FB preferisce il tag rel "image_src" per l'immagine che l'utente desidera specificare, ma questo non genera quella miniatura neanche per il mio sito.

Il mio URL va direttamente al DNS e non viene inoltrato, quindi non immagino nemmeno questo potrebbe essere il problema.

Qualcuno ha un'idea del motivo per cui FB non può generare miniature dal mio sito?

facebook  thumbnails 
— GEOCHET
fonte
Sarebbe utile se ci fornissi un link al tuo sito (o un altro che non funziona) - potrebbe provocare alcune idee.
— Nick Fortescue
Qui puoi vedere come funziona! Lo costruisco usando PHP + jQuery. Il codice sorgente è disponibile per il download. Spero ti diverta! lab.leocardz.com/facebook-link-preview-php--jquery
— Leonardo Cardoso
e se si vuole fare lo stesso su Google Plus, ecco il miglior collegamento si fa riferimento sono riuscito a trovare: stackoverflow.com/questions/7985398/...
— cregox
possibile duplicato di In che modo Facebook Sharer seleziona le immagini?
— dcorking

Risposte:

119

Il modo più semplice è solo un tag di collegamento:

<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />

Ma ci sono altre cose che puoi aggiungere al tuo sito per renderlo più adatto ai social media:

Apri i tag del grafico

I tag Open Graph sono tag che aggiungi al <head>tuo sito web per descrivere l'entità rappresentata dalla tua pagina, che si tratti di una band, di un ristorante, di un blog o di qualcos'altro.

Un tag Open Graph ha questo aspetto:

<meta property="og:tag name" content="tag value"/>

Se utilizzi i tag Open Graph, sono necessari i seguenti sei:

  • og:title - Il titolo dell'entità.
  • og:type- Il tipo di entità. È necessario selezionare un tipo dall'elenco dei tipi di Open Graph.
  • og:image- L'URL di un'immagine che rappresenta l'entità. Le immagini devono essere di almeno 50 pixel per 50 pixel. Le immagini quadrate funzionano meglio, ma puoi utilizzare immagini fino a tre volte più larghe rispetto all'altezza.
  • og:url- L'URL canonico e permanente della pagina che rappresenta l'entità. Quando si utilizzano i tag Open Graph, il pulsante Mi piace pubblica un collegamento al og:urlinvece dell'URL nel codice del pulsante Mi piace.
  • og:site_name - Un nome leggibile per il tuo sito, ad esempio "IMDb".
  • fb:adminsoppure fb:app_id- Un elenco separato da virgole degli ID Facebook degli amministratori della pagina o un ID dell'applicazione della piattaforma Facebook. Come minimo, includi solo il tuo ID Facebook.

Ulteriori informazioni sui tag Open Graph e dettagli sull'amministrazione della pagina sono disponibili nella documentazione del protocollo Open Graph.

http://developers.facebook.com/docs/reference/plugins/like

— WyrdNEXUS
fonte
5
Ho ricevuto questo errore dallo strumento lanugine. All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.. Solo un fyi
— Trevor
ho aggiunto tag og nel mio codice e quando l'ho testato con lo strumento debugger di oggetti og di facebook, mi mostra le informazioni corrette come ho salvato nei tag og, ma quando provo a collegare la pagina sul mio account fb, mostra il solo copia cache. Per quanto tempo fb conserva la copia cache? C'è un altro modo per svuotare la copia cache?
— KAsh
Solo per farti sapere, l'unico modo per aggiungere un'immagine a un post quando usi AppLinks ( applinks.org ) all'interno dell'app di Facebook è usare il tag <link>, usando un tag <meta> con og: image NON funzionerà .
— emerino
Questo ha un elenco di tipi ecc. E ha alcune altre informazioni utili.
— Wilf
61

So che questa domanda è vecchia, ma di recente ho affrontato lo stesso identico problema e ci sono andato avanti e indietro per un paio di settimane. Ricerche multiple su Google hanno fornito molte informazioni utili, ma la maggior parte di esse era incentrata sui tag Open Graph, che non mi interessava utilizzare. Risulta che il mio sito ha avuto più problemi, ma qui ci sono alcune delle basi.

  1. Come ha detto EightyEight, assicurati che il tuo HTML sia valido - e lo stesso vale per il tuo javascript e il codice lato server (PHP, ASP, ecc.). Ho avuto un piccolo errore PHP in un pezzo di codice che veniva eseguito come una chiamata separata al server dalla pagina principale. A causa di una serie di bizzarre coincidenze, quel codice generava un errore 500, ma SOLO per IE6 e motori di analisi rigorosi come il validatore W3C e il crawler della pagina Facebook. Il problema non si presentava nei browser moderni (Chrome 4, FF 3.5, IE 8, ecc.) Quindi non l'ho visto subito, ma i client più vecchi / più severi mostravano 500 ogni volta e questo era il motivo principale per cui FB non lo era sto eseguendo la scansione della nostra pagina (quando tutto il resto sembrava essere corretto).

  2. Per quanto riguarda la risposta di Randy, ha ragione sul fatto che Facebook manterrà una vecchia copia cache della tua pagina molto tempo dopo che l'hai aggiornata. FB afferma che è tenuto solo per 24 ore, ma ho vissuto tempi molto più lunghi di così. FORTUNATAMENTE, FB ha rilasciato il suo strumento "URL Linter" che ti mostrerà un'anteprima di come apparirà la tua pagina quando sarà condivisa su FB, e costringerà FB ad aggiornare istantaneamente la cache della tua pagina. Questo è stato uno strumento salvavita. Puoi trovarlo su http://developers.facebook.com/tools/lint/

  3. Per quanto riguarda lo strumento URL Linter, tieni presente che ogni variante di un URL viene memorizzata nella cache separatamente su Facebook, quindi "www.example.com" non è uguale a "example.com". Inoltre, vengono memorizzate anche le maiuscole univoche , quindi "ExampleOne.com" non è uguale a "exampleone.com". (Ciò ha portato a molta confusione tra me e il mio cliente quando mi è sembrato che la cache fosse stata aggiornata correttamente e il client ha affermato di non vedere gli aggiornamenti. È venuto fuori che stavo guardando exampleone.com e avevo usato Linter per aggiornare la cache, ma stavano guardando exampleOne.com che non avevo inviato a Linter. Di conseguenza, ho finito per inviare alcune variazioni dell'URL a Linter solo per coprire le basi.)

  4. Il consiglio di WyrdNEXUS di utilizzare il tag di collegamento image_src è perfetto. Ciò ti consente di essere sicuro che FB stia raschiando la migliore immagine possibile per la tua pagina. Esistono alcune linee guida diverse su quali specifiche dovrebbe avere il file immagine, ma ho utilizzato con successo un'immagine quadrata di 128 px e ho visto anche un'immagine 130x97. Ecco la documentazione ufficiale di Facebook da http://developers.facebook.com/docs/reference/plugins/like/ :

    Le immagini devono essere di almeno 50 pixel per 50 pixel. Le immagini quadrate funzionano meglio, ma puoi utilizzare immagini fino a tre volte più larghe rispetto all'altezza.

    Ovviamente, FB ridimensionerà un'immagine grande per te, ma otterrai quasi sempre risultati migliori se ridimensionerai tu stesso in anticipo.

  5. Per quanto riguarda il collegamento di Mike Cooper all'articolo eHow, evitare di utilizzare il passaggio n. 1 in quell'articolo. Era un consiglio valido quando l'articolo è stato scritto e quando Mike ha pubblicato il collegamento, ma ora è meglio usare lo strumento URL Linter per visualizzare in anteprima come apparirà la tua pagina quando viene condivisa. Usando Linter, non farai in modo che FB memorizzi nella cache una (potenzialmente) brutta copia della pagina prima che tu abbia la possibilità di modificarla.

— OneRuler
fonte
Ho lottato per giorni e la mia miniatura non veniva aggiornata correttamente. Lo strumento Facebook Linter ha risolto immediatamente il mio problema: ha fatto aggiornare la cache a Facebook! Evviva!
— Hady
Grazie mille per quello strumento di linter. Alcuni post sul mio blog mostravano immagini, altri no nonostante fosse un sito basato su database. Inserendo l'URL della pagina incriminata nell'URL Linter lo ha costretto a memorizzare nella cache l'immagine! Woo-HOO!
— kristina childs
4
lo strumento lint ha cambiato nome. ora è solo il debug : developers.facebook.com/tools/debug - da quello che posso dire, questa è la versione tl; dr di tutto questo: usa lo strumento!
— cregox
11

Per cambiare titolo, descrizione e immagine, dobbiamo aggiungere alcuni meta tag sotto il tag head.

PASSAGGIO 1: Aggiungi meta tag sotto il tag head

<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />

PASSAGGIO SUCCESSIVO: fare clic sul collegamento sottostante https://developers.facebook.com/tools/debug

Aggiungi il tuo URL nella casella di testo (ad esempio http://www.test.com/ ) dove hai menzionato i tag. Fare clic sul pulsante DEBUG.

E 'fatto.

Puoi verificare qui https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

Nell'URL sopra, u = il link del tuo sito web

GODERE !!!!

— Gaurav123
fonte
Si prega di non pubblicare la stessa identica risposta a più domande: o non è adatta a tutte o le domande sono duplicati che dovrebbero essere contrassegnati / chiusi come tali.
— kleopatra
Ciao Kleopatra, stavo pensando di pubblicare la risposta per aiutare gli altri. Penso che il tuo punto sia totalmente valido. Mi prenderò cura di questo. Grazie amico
— Gaurav123
@ Gaurav123 il collegamento di prova è morto. Tuttavia, l'ho verificato inviando un messaggio a me stesso su Facebook. Grazie mille per la risposta molto utile!
— gsamaras
2

In realtà, se hai già provato a collegare quella pagina su Facebook PRIMA di aggiungere il link "image_src", Facebook continuerà a utilizzare la vecchia copia cache e non vedrà nemmeno le tue modifiche. Prova a modificare l'URL rimuovendo o aggiungendo "www" oppure duplica la tua pagina per testarla.

— Randy
fonte
1

Ho notato che Facebook non prende le miniature dai siti web se iniziano con https, è forse il tuo caso?

— raRaRa
fonte
1

ho avuto lo stesso problema e ho capito che la mia etichetta di chiusura della testa era nel posto sbagliato

— Diego
fonte
0

Vecchia domanda, ma recentemente mi è sembrato di incontrare lo stesso problema con le immagini in miniatura dal mio collegamento che non vengono visualizzate negli aggiornamenti di stato su Facebook. Pubblico per molti clienti e questo è relativamente nuovo.

A FB sembra che gli URL lunghi non piacciano più: se utilizzi un accorciatore di URL come goo.gl o bitly.com, la miniatura del tuo link / post apparirà nel tuo aggiornamento FB.

— karen kouf
fonte
0

Prova a usare qualcosa di simile:

<link rel="image_src" href="http://yoursite.com/graphics/yourimage.jpg" /link>`

Sembra funzionare bene su Firefox purché utilizzi un percorso completo alla tua immagine.

Il problema è che per qualche motivo viene spostato verticalmente verso il basso. L'immagine è 200 x 200 come consigliato da qualche parte che ho letto.

— user2494810
fonte
Ho intenzione di inserire il codice per un link tag che non è stato pubblicato perché sono stupido. Scusate.
— user2494810
-1

Se hai utilizzato un plug-in per seo, controlla prima le impostazioni del plug-in seo, quindi scopri l'impostazione Noindex se Abilita Media per Noindex e disabilitalo.

— Milon Patowary
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.