kutombawewe.net

FB OpenGraph og: immagine che non tira le immagini (probabilmente https?)

Primo - I do not credo che questo sia un problema duplice. Ho cercato problemi identici o simili su SO in modo estensivo e, a causa della natura della risoluzione dei problemi prima di chiedere, credo che questo problema sia unico. 

Facebook non può afferrare i miei file og:image e ho provato ogni soluzione usuale. Sto iniziando a pensare che potrebbe avere qualcosa a che fare con https://...

  • Ho controllato http://developers.facebook.com/tools/debug e ho zero avvisi o errori.
  • Sta trovando le immagini a cui ci siamo collegati in "og:image", ma sono visualizzate vuote. Quando facciamo clic sull'immagine (e), tuttavia, ESISCONO e ci vuole direttamente.
  • Mostra un'immagine: un'immagine ospitata su un server non https.
  • Abbiamo provato immagini quadrate, jpeg, png, dimensioni più grandi e dimensioni più piccole. Abbiamo inserito le immagini nel formato public_html. Zero stanno mostrando.
  • Non è un errore di cache, perché quando aggiungiamo un altro og:image alla meta, il linter di FB lo trova e lo legge. Mostra un'anteprima. L'anteprima è vuota. L'eccezione only che stiamo ottenendo è per le immagini che non sono su questo sito.
  • Abbiamo pensato che ci fosse qualche anti-leach su cpanel o .htaccess che impediva la visualizzazione delle immagini, quindi abbiamo controllato. Non c'era. Abbiamo persino fatto un < img src="[remote file]" > veloce su un server completamente diverso e l'immagine si presenta bene. 
  • Abbiamo pensato che forse og:type o un'altra stranezza con un altro meta tag. Li abbiamo rimossi tutti, uno alla volta e l'abbiamo verificato. Nessun cambiamento. Solo avvertimenti. 
  • Lo stesso codice su un sito Web diverso si presenta senza alcun problema. 
  • Abbiamo pensato che forse non stava tracciando le immagini perché stiamo usando le stesse pagine di prodotto per più prodotti (cambiandolo in base al valore get, ovvero "details.php? Id = xxx") ma sta ancora tirando un'immagine (da un URL diverso).
  • Lasciando spento og:image o image_src, FB non trova alcuna immagine.

Sono alla fine della mia corda. Se dicessi quanto tempo io e altri abbiamo speso per questo, saresti scioccato. Il problema è che questo è un negozio online. Noi NON POSSIAMO assolutamente, positivamente, NON avere immagini. Dobbiamo. Abbiamo una decina di altri siti ... Questo è l'unico con problemi og:image. È anche l'unico su https, quindi abbiamo pensato che forse era questo il problema. Ma non possiamo trovare alcun precedente sul web per quello. 

Questi sono i meta-tag:

<meta property="og:title" content="[The product name]" /> 
<meta property="og:description" content="[the product description]" /> 
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-art-black.png" />
<meta property="og:image" content="http://www.[ADIFFERENTwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/ARShopHeader.png" />
<meta property="og:image" content="http://www.[ourwebsite].com/overdriven-blues-music-tshirt-art-black.JPG" />
<meta property="og:type" content="product"/>
<meta property="og:url" content="https://www.[ourwebsite].com/apparel-details.php?i=10047" />
<meta property="og:site_name" content="[our site name]" />      
<meta property="fb:admins" content="[FB-USER-ID-NUMBER]"/>
<meta name="title" content="[The product name]" />
<meta name="description" content="[The product description]" />
<link rel="image_src" href="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta name="keywords" content="[four typical keywords]">
<meta name="robots" content="noarchive">

Nel caso in cui lo desideri, ecco un link a una delle nostre pagine dei prodotti su cui abbiamo lavorato. [Link abbreviato per cercare di contenere questo risultato nei risultati di ricerca per il nostro sito]: http://rockn.ro/114

MODIFICARE ---- 

Usando lo strumento raschietto "vedi cosa facebook vede", siamo stati in grado di vedere quanto segue: 

"image": [          
      {
         "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-details-safari.png"
      },
      {
         "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-art-safari.png"
      },
      {
         "url": "http://www.[theotherNONSECUREwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png"
      }
   ],

Abbiamo testato tutti i collegamenti trovati per una singola pagina. Tutti erano immagini perfettamente valide. 

MODIFICA 2 ----

Abbiamo provato un test e aggiunto un (sottodominio al sito web di NONSECURE (da cui le immagini sono effettivamente visibili tramite Facebook). Il sottodominio era http: // img. [Nonsecure]]. Abbiamo quindi messo tutte le immagini nella cartella principale del sottodominio e le abbiamo referenziate. Non tirerebbe quelle immagini in FB. Tuttavia, rimuoverà comunque qualsiasi immagine a cui è stato fatto riferimento nel dominio principale non protetto. 

POSTED WORKAROUND ----

Grazie a Keegan, ora sappiamo che questo è un bug in Facebook. Per ovviare al problema, abbiamo inserito un sottodominio in un diverso sito NON-HTTPS e scaricato tutte le immagini al suo interno. Abbiamo fatto riferimento all'immagine coordinata http://img.otherdomain.com/[like-image.jpg] in og:image su ogni pagina del prodotto. Abbiamo quindi dovuto passare attraverso FB Linter ed eseguire OGNI collegamento per aggiornare i dati OG. Ciò ha funzionato, ma la soluzione è una soluzione alternativa all'aiuto di banda e, se il problema https è corretto e torniamo a utilizzare il dominio https naturale, FB avrà memorizzato nella cache le immagini da un sito Web diverso, complicando le cose. Speriamo che questa informazione aiuti a salvare qualcun altro dalla perdita di 32 ore di codifica della loro vita. 

274
Cyprus106

Mi sono imbattuto nello stesso problema e segnalato come un bug sul sito di sviluppatori di Facebook. Sembra abbastanza chiaro che og: gli URI di immagine che usano HTTP funzionano bene e gli URI che usano HTTPS no. Ora hanno riconosciuto che stanno "esaminando questo".

Il bug può essere visto qui: https://developers.facebook.com/bugs/260628274003812

78
Keegan Quinn

Alcune proprietà possono avere metadati aggiuntivi ad esse associati. Questi sono specificati allo stesso modo degli altri metadati con property e content, ma property avrà extra:

La proprietà og:image ha alcune proprietà strutturate opzionali:

  • og:image:url - Identico a og: image. 
  • og:image:secure_url: un URL alternativo da utilizzare se la pagina web richiede HTTPS. 
  • og:image:type - A Tipo MIME per questa immagine. 
  • og:image:width - Il numero di pixel di larghezza.
  • og:image:height - Il numero di pixel alti.

Un esempio di immagine completa:

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> 
<meta property="og:image:type" content="image/jpeg" /> 
<meta property="og:image:width" content="400" /> 
<meta property="og:image:height" content="300" />

Quindi devi modificare la proprietà og:image per gli URL HTTPS su og:image:secure_url

Ex:

HTTPS META TAG PER IMMAGINE:

<meta property="og:image:secure_url" content="https://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

TAG META HTTP PER IMMAGINE:

<meta property="og:image" content="http://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

Fonte: http://ogp.me/#structured <- Puoi visitare questo sito per maggiori informazioni.

Spero che questo ti aiuti.

EDIT: Non dimenticare di eseguire il ping dei server di Facebook dopo aver aggiornato i tuoi codici - URL Linter

121
Syed I.R

Non lo so, se è solo con me, ma per me og:image non funziona e seleziona il mio logo del sito, anche se facebook debugger mostra l'immagine corretta.

Ma cambiare og:image in og:image:url ha funzionato per me. Spero che questo aiuti qualcun altro di fronte a problemi simili.

13
lalit

Siamo arrivati ​​da Google ma questo non è stato di grande aiuto per me. Si è scoperto che esiste un rapporto proporzionale minimo di 3: 1 richiesto per il logo. Il mio era quasi 4: 1. Ho usato Gimp per ritagliarlo esattamente a 3: 1 e voilà - il mio logo è ora mostrato su FB.

8
priiiiit

tl; dr - sii paziente

Sono finito qui perché vedevo immagini vuote pubblicate da un sito https. Il problema era piuttosto diverso:

Quando il contenuto viene condiviso per la prima volta, il crawler di Facebook analizza e memorizza nella cache i metadati dall'URL condiviso. Il crawler deve vedere un'immagine almeno una volta prima di poter essere renderizzata. Ciò significa che la prima persona che condivide un contenuto non vedrà un'immagine renderizzata

[ https://developers.facebook.com/docs/sharing/best-practices/#precaching]

Durante i test, ci sono voluti facebook circa 10 minuti per mostrare finalmente l'immagine renderizzata. Così mentre mi stavo grattando la testa e lanciando tag og a caso su facebook (e sospettando il problema https menzionato qui), tutto quello che dovevo fare era aspettare.

Poiché questo potrebbe davvero impedire alle persone di condividere i tuoi collegamenti per la prima volta, FB suggerisce due modi per aggirare questo comportamento: A) eseguendo l'OG Debugger su tutti i tuoi link: l'immagine sarà memorizzata nella cache e pronta per la condivisione dopo ~ 10 minuti o b) specificando og: image: width e og: image: height. (Leggi di più nel link qui sopra)

Mi chiedo ancora cosa li prenda così tanto tempo ...

6
panepeter

Ho avuto lo stesso errore e nulla dei precedenti mi ha aiutato, quindi ho provato a seguire la documentazione originale di Open Graph Protocol e ho aggiunto l'attributo prefix al mio tag html e tutto è diventato fantastico.

<html prefix="og: http://ogp.me/ns#">
4
VoVaVc

Non dimenticare di aggiornare i server tramite: 

Debugger di Facebook

E clicca su "Raccogli nuove informazioni"

2
Scaraux

Ho avuto problemi simili. Ho rimosso la proprietà = "og: image: secure_url" e ora scrub con solo og: image. A volte, meno è di più

1
HappaGirl

Nel mio caso il problema era nel non fornire certificato di root CA. L'ho capito dopo aver usato: https://www.ssllabs.com/ssltest/analyze.html per analizzare la configurazione SSL.

1
instead

Ho scoperto un altro scenario che può causare questo problema. Ho passato tutti i passaggi descritti nella domanda e le risposte, ancora il problema è rimasto.

Ho controllato le mie immagini e ho scoperto che alcuni dei miei post avevano troppe immagini in miniatura di og:image nel raggio di diverse migliaia di pixel e diversi megabyte. 

Ciò è accaduto a causa della recente migrazione da WP a Jekyll, ho ottimizzato le mie immagini con gulp, ma ho usato le immagini originali in og: image per errore. 

Facebook ci dà i seguenti consigli ad oggi

Usa immagini di almeno 1200 x 630 pixel per la migliore visualizzazione su dispositivi ad alta risoluzione. Come minimo, dovresti usare immagini che sono 600 x 315 pixel per visualizzare i messaggi della pagina di collegamento con immagini più grandi . Le immagini possono avere dimensioni fino a 8 MB.

Quindi c'è un limite superiore di 8 MB.

1
Mark

Mi sono imbattuto nello stesso problema e poi ho notato che avevo un dominio diverso per il og:url

Una volta verificato che il dominio fosse lo stesso per og:url e og:image, ha funzionato.

Spero che questo ti aiuti.

1
Darren Hall

Da quello che ho osservato, vedo che quando il tuo sito web è pubblico e anche se l'URL dell'immagine è https, funziona perfettamente.

0
AK M

Per me questo ha funzionato:

<meta property="og:url" content="http://yoursiteurl" />
    <meta property="og:image" content="link_to_first_image_if_you_want" />
    <meta property="og:image" content="link_to_second_image_if_you_want" />
    <meta property="og:image:type" content="image/jpeg" /> 
    <meta property="og:image:width" content="400" /> 
    <meta property="og:image:height" content="300" />
    <meta property="og:title" content="your title" />
    <meta property="og:description"  content="your text about homepage"/> 
0
Dr.MTR

Inoltre, questo problema si verifica anche quando aggiungi una storia generata dall'utente (dove non usi og: image). Per esempio:

POST /me/cookbook:eat?
  recipe=http://www.example.com/recipes/pizza/&
  image[0][url]=http://www.example.com/recipes/pizza/pizza.jpg&
  image[0][user_generated]=true&
  access_token=VALID_ACCESS_TOKEN

Quanto sopra funzionerà solo con http e non con https. Se usi https, riceverai un errore che dice: L'immagine allegata () non è stata caricata

0
Aamir Quraishi

Vedo che Debugger sta recuperando 4 tag og:image dal tuo URL.

La prima immagine è la più grande e quindi richiede più tempo per caricare. Provare a ridurre la prima immagine verso il basso o modificare l'ordine per mostrare prima un'immagine più piccola.

0
Lix

Come ho scoperto per caso, l'immagine vuota viene fornita con l'intestazione di risposta che indica la possibile causa del problema.

  1. Vai al debugger in https://developers.facebook.com/tools/debug/og/object/
  2. Metti il ​​tuo URL
  3. In basso, facebook mostra la tua "immagine" (trasparente 1x1 GIF)
    1. L'immagine è collegata alla tua immagine originale - nessun punto è premuta
    2. Premi a destra e guarda l'immagine (otterrai qualcosa come https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=...)
  4. Attiva la scheda Rete sugli strumenti firebug/developer, aggiorna la pagina se necessario
  5. Otterrai l'header di risposta x-error-detail con la spiegazione

Ad esempio, nel mio caso è stato Invalid image extension for URL: https://[mydomain]/[myfilename].jpg

Il vero problema nel mio caso era relativo a prerender.io .

A quanto pare, se l'immagine viene richiesta tramite prerender, viene convertita in HTML. Qualcosa come questo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
<body style="margin: 0px;"><img style="-webkit-user-select: none; cursor: -webkit-zoom-in; " src="https://[yourdomain].com/[yourfilename].jpg" width="1078" height="718"></body>
</html>

È un bug nel prerender stesso, o dovrebbe essere configurato nel proxy per non utilizzare il prerender per le richieste *.jpg (anche se sono richieste dal bot di Facebook).

È davvero difficile notarlo, poiché il prerender viene utilizzato solo su determinati header degli user-agent.

0
Marius Balčytis

Ho preso http:// dal mio og:image e l'ho sostituito con un semplice www. vecchio, quindi ha iniziato a funzionare correttamente.

Puoi usare questo strumento, da Facebook per resettare la tua cache di scansione delle immagini e testare quale URL sta tirando per l'immagine demo.

0
Albert Renshaw

Aveva un problema simile oggi, che il Sharing Debugger mi ha aiutato a risolvere. Sembra che Facebook non possa (al momento) comprendere le immagini con i metadati XMP incorporati. Quando ho sostituito le immagini sui nostri articoli con versioni senza metadati XMP e ho raschiato di nuovo la pagina (utilizzando il Condivisione condivisione), il problema è andato via. Un editor esadecimale ti aiuterà a vedere se l'immagine contiene o meno metadati XMP.

0
Brett Donald

Una volta aggiornato il meta tag assicurati che il link contenuto (immagine) sia assoluto e vai su quihttps://developers.facebook.com/tools/debug/sharing inserisci il link al sito e clicca su scrape again nella prossima pagina

0
Thyagu

Sintomi simili (Facebook e altri non recuperano correttamente og: image e altre risorse tramite https) possono verificarsi quando il certificato https del sito non è pienamente conforme. 

Il cert https del tuo sito può sembrare valido (chiave verde nel browser e tutto), ma non verrà visualizzato correttamente se manca un certificato intermedio o di catena. Questo può portare a molte ore sprecate a controllare e ricontrollare tutte le varie cache e meta tag. 

Potrebbe non essere stato il tuo problema, ma potrebbe essere l'altro con sintomi simili (come il mio). Ci sono molti modi per controllare il tuo certificato - quello che ho usato per caso: https://www.sslshopper.com/ssl-checker.html

0
Lance