web-dev-qa-db-fra.com

Facebook Open Graph Pas d'image Première fois

J'essaie de configurer un bouton de partage/envoi avec un lien. J'ai correctement configuré les balises d'image de graphe ouvertes sur une page, mais lorsque vous ouvrez le dialogue de partage/envoi pour la première fois, l'image ne s'affiche pas. Sans actualisation de la page, ouverture de la boîte de dialogue de partage/envoi pour la deuxième fois, l'image s'affichera. L'URL de la page et les images sont tous en HTTP (au lieu de HTTPS).

Je ne peux pas simplement utiliser l'outil de lissage d'URL, car la page aura une URL unique. Le site Web consiste à envoyer des fleurs virtuelles à des personnes. La page à partager est donc fraîchement générée.

J'aurais vraiment apprécié un peu d'aide :)

facebookfacebook-opengraph
17
Freeman Latif

Trouvé le problème. D'une manière ou d'une autre, ce problème se produit si vous ne définissez pas correctement vos balises de graphique ouvertes.

Incorrect:

<meta property="og:image" content="http://asdfg.com/<%= videoId %>/image" />

Correct:

<meta property="og:image" content="http://asdfg.com/<%= videoId %>/image" />
<meta property="og:image:secure_url" content="https://asdfg.com/<%= videoId %>/image" /> 
<meta property="og:image:width" content="640" /> 
<meta property="og:image:height" content="442" />
40
Freeman Latif

METTRE &AGRAVE; JOUR

Cette solution avec iframe ne fonctionne plus ! A travaillé depuis hier 06 février 2017 . Facebook vient de définir X-Frame-Options asDENYafin que vous ne puissiez pas charger l'URL de partage dans un iFrame.

J'ai ajouté og: image: width et og: image: height, j'ai vérifié toutes mes balises de propriété et le problème était toujours là.

J'ai trouvé une solution de contournement à ce bug de facebook qui fonctionnait: j'ai ajouté un iFrame caché avec le lien de partage dans le pied de page; De cette façon, le robot facebook vérifier la page une fois est chargé.

<iframe style="width: 0px; height: 0px; margin: 0px; padding: 0px;" src="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.example.com"></iframe>
3
Dan

Cela pourrait aider quelqu'un.

J'ai trouvé que Facebook n'aimait pas l'image carrée que j'avais utilisée (1000px x 1000px),
Je l'ai donc recadré à 660px x 315x et Facebook l'a accepté. 

Réglage og: largeur et hauteur n’a pas aidé et c’est littéralement à propos des dimensions de l’image.

2
Paulina Simkute

Vous devez fournir le lien d’image correctement dans la propriété og:image. Si vous n'obtenez toujours pas la vignette, ajoutez les images height et width comme ceci:

<meta property="og:image:width" content="450" />
<meta property="og:image:height" content="298" />
1
Mahesh

Une autre réponse possible qui a fonctionné pour moi - assurez-vous que vous avez défini la balise méta og: image avant toutes les autres balises, sinon cela ne fonctionne toujours pas!

1
Jonathan Plackett

Si vous rencontrez toujours des problèmes, vous devrez peut-être aussi ajouter la propriétéMIME type, comme ceci:

<meta property="og:image:type" content="image/jpeg">

NOTE: / image/jpeg pas image/jpg - (vous devez avoir la e dedans)

Le robot d'exploration accepte image/gif, image/jpeg, image/png

0
Rowe Morehouse

Peut-être que ça va aider quelqu'un… __. Je ne sais pas pourquoi, mais après avoir enlevé ça de mon bloc 'tête'

<link rel="image_src" href="{MY_IMAGE_URI_HERE}" />

Le problème a été résolu.

Voici mes balises META

...
<meta property="fb:app_id" content="{APP_ID}"/>
<meta property="og:image" content="https://{IMAGE_THUMB_URI}" /> 
<meta property="og:image:secure_url" content="https://{IMAGE_THUMB_URI}" /> 
<meta property="og:image:width" content="450" /> 
<meta property="og:image:height" content="236" />
<meta property="og:url" content="{PAGE_URI}"/>
<meta property="og:title" content="{PAGE_TITLE}"/>
<meta property="og:description" content="{PAGE_DESC.}"/>
...

J'utilise 'https' dans les deux balises méta ( og: image & og: image: secure_url ), car le site Web utilise ssl.

0
Boris