facebook token debugger




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

Primo: non credo che questo sia un problema duplice. Ho cercato problemi uguali 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 riesce a cogliere il mio og:image 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 mostrate vuote. Quando facciamo clic sull'immagine (o sulle immagini), tuttavia, ESISTE 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' unica eccezione che stiamo ottenendo è per le immagini che non sono su questo sito.
  • Abbiamo pensato che ci fosse qualche anti-leach sul cpanel o il .htaccess che impediva la visualizzazione delle immagini, quindi abbiamo controllato. Non c'era. Abbiamo persino fatto un rapido < img src="[remote file]" > su un server completamente diverso e l'immagine si presenta bene.
  • Abbiamo pensato che forse era il 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 tirando le immagini perché stiamo usando le stesse pagine di prodotto per più prodotti (cambiandolo in base al valore get, ad esempio "details.php? Id = xxx") ma sta ancora tirando in una 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 og:image problemi di 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 NONSECURE (da cui le immagini sono effettivamente visibili tramite Facebook). Il sottodominio era http: // img. [Nonsecuredite] .com. Abbiamo quindi messo tutte le immagini nella cartella principale del sottodominio e le abbiamo referenziate. Non tirerebbe quelle immagini in FB. Tuttavia, rimuove comunque qualsiasi immagine a cui si fa riferimento nel dominio principale non protetto.

POSTED WORKAROUND ----

Grazie a Keegan, ora sappiamo che questo è un bug su 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. Questo 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 programmazione della loro vita.


Alcune proprietà possono avere metadati aggiuntivi ad esse associati. Questi sono specificati allo stesso modo degli altri metadati con property e content , ma la 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 - Un 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 og:image per i tuoi URL HTTPS su og:image:secure_url

Ex:

TAG META HTTPS PER IMMAGINI:

<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


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 su https://developers.facebook.com/tools/debug/og/object/
  2. Metti il ​​tuo URL
  3. Nella parte inferiore, Facebook mostra la tua "immagine" (trasparente GIF 1x1)
    1. L'immagine è collegata alla tua immagine originale - nessun punto è premuta
    2. Premi a destra e visualizza 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 un'intestazione di risposta x-error-detail con spiegazione

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

Il vero problema nel mio caso era legato 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 usare 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.


Dopo diverse ore di test e prove ...

Ho risolto questo problema il più semplice possibile. Ho notato che usano "pagine di test" nella pagina degli sviluppatori di Facebook che contiene solo i tag "og" e del testo nel tag body che rimanda a questi tag.

Quindi cosa ho fatto?

Ho creato una seconda vista nella mia applicazione, contenente le stesse cose che usano.

E come so che Facebook sta accedendo alla mia pagina in modo da poter cambiare la vista? Hanno un unico User Agent: "facebookexternalhit / 1.1"


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

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

Ho incontrato lo 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


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

Ho controllato le mie immagini e ho scoperto che alcuni dei miei post avevano immagini di anteprima troppo grandi in 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à le seguenti raccomandazioni ad oggi :

Utilizza immagini di almeno 1200 x 630 pixel per la migliore visualizzazione su dispositivi ad alta risoluzione. Come minimo, è necessario utilizzare immagini di dimensioni 600 x 315 pixel per visualizzare i post 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.


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

Una volta ho fatto in modo che il dominio fosse lo stesso per og:url e og:image ha funzionato.

Spero che questo ti aiuti.



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

Ma cambiando og:image to og:image:url funzionato per me. Spero che questo aiuti chiunque altro deve affrontare un problema simile.


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

Sono arrivato 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.


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

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