web-dev-qa-db-fra.com

Erreur Facebook Open Graph - Propriété inférée

J'essaie d'implémenter le protocole OpenGRaph de Facebook sur les pages de mes produits.

Sur chaque page, j'ai ceci au-dessus de la section head:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

Ensuite, dans la section principale, j'ai:

<meta property="og:title" content="This Page Title"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://www.mywebaddress.com"/>
<meta property="og:image" content="http://www.myimage.jpg"/>
<meta property="og:site_name" content="My Site Name"/>
<meta property="fb:admins" content="10101010101"/>
<meta property="og:email" content="[email protected]"/>
<meta property="og:description" content="Description of my product."/>

J'ai alors un bouton 'J'aime' avec ce code:

        <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
        <div class="fb-like" data-href="http://thispagesurl" data-send="true" data-width="350" data-show-faces="false"></div>

À mes yeux, tout semble reproduire ce que l'on peut trouver sur la page Développeurs de Facebook mais quand j'aime, Facebook ne semble apparemment que se reporter au titre de la page et aux informations générales.

J'ai essayé de 'déboguer' la page en utilisant leur débogueur Object, et j'obtiens ces avertissements: 

Inferred Property   The og:url property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property   The og:title property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property   The og:image property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property   The og:locale property should be explicitly provided, even if a value can be inferred from other tags.

Autant que je sache, j'ai suivi à la lettre les instructions de Facebook, mais je n'ai aucune joie. Quelqu'un peut-il indiquer si je fais quelque chose de mal?

Merci d'avance, Dan

38
Dan

Ces balises sont-elles sur "http://www.mywebaddress.com"? 

N'oubliez pas que linter suivra la balise og: url car cette balise doit pointer sur l'URL canonique de l'élément de contenu - par conséquent, si vous avez une page, par exemple. "http://mywebaddress.com/article1" avec une balise og:url pointant vers "http://mywebaddress.com", Facebook y ira et lira également les balises.

En cas d'échec, la raison la plus courante selon laquelle des balises apparemment correctes ne sont pas détectées par le linter est la détection d'agent utilisateur qui renvoie au crawler de Facebook un contenu différent de celui que vous voyez en vérifiant manuellement

51
Igy

Vous avez besoin d'un espace après la dernière série de guillemets

<meta property="og:url" content="http://www.mywebaddress.com"/>

Devrait être..aime celui-ci

<meta property="og:url" content="http://www.mywebaddress.com" />
22
hetster

Il existe une certaine confusion à propos des tonnes d'outils et de documentation Facebook. Tant de gens utilisent probablement l’outil Sharing Debugger pour vérifier leur code OpenGraph: https://developers.facebook.com/tools/debug/sharing/

Mais il ne récupère que les informations sur votre site à partir du cache Facebook. Cela signifie qu'après avoir modifié le balisage ogp sur votre site, le débogueur Sharing Debugger utilisera toujours les anciennes données mises en cache. De plus, s'il n'y a pas de données en cache sur le serveur Facebook, le débogueur de partage vous montrera l'erreur: This URL hasn't been shared on Facebook before.

La solution consiste donc à utiliser un autre outil - Débogueur d’objets graphiques ouverts: https://developers.facebook.com/tools/debug/og/object/

Il vous permet de (extraire de nouvelles informations de grattage} et d'actualiser le cache Facebook:

 Open Graph Object Debugger

Honnêtement, je ne sais pas comment trouver cet outil en explorant la section Outils & Support de developers.facebook.com - Je ne trouve aucun lien ni aucune mention. Je n'ai que cet outil dans mes favoris. C'est Facebook :)


Utilisez 'property'-attrs

J'ai également noté que certains développeurs utilisent l'attribut name au lieu de property. De nombreux analyseurs analyseront probablement ces balises correctement, mais selon Le protocole Open Graph , nous devrions utiliser property, pas name:

<meta property="og:url" content="http://www.mywebaddress.com"/>

Utiliser des URL complètes

La dernière recommandation consiste à spécifier des URL complètes. Par exemple, Facebook se plaint lorsque vous utilisez une URL relative dans og:image. Alors utilisez le plein:

<meta property="og:image" content="http://www.mywebaddress.com/myimage.jpg"/>
11
Oleg Cherr

Au cas où cela aiderait quelqu'un, j'ai eu la même erreur. Il s'est avéré que ma page n'avait pas été supprimée par Facebook depuis un moment et que c'était une vieille erreur. Il y avait un bouton gratter à nouveau sur la page qui l'a corrigé.

4
Anthony Taylor

Cela pourrait aider certaines personnes qui luttent pour que Facebook lise bien Open Graph ... 

Examinez le code source généré par le navigateur à l'aide de Firefox, Chrome ou un autre navigateur de bureau (de nombreux mobiles ne verront pas la source) et assurez-vous qu'il n'y a pas de lignes vides avant la ligne doctype ou la balise head ... Si il y a Est-ce que Facebook va avoir une crise complète et jette ses jouets hors du landau! (Meilleure description!) Remove Blank Line - Heureux Facebook ... m'a pris environ 1,5 à 2 heures pour repérer cela!

0
Elliott Rodgers