59 votes

Validation Open Graph pour HTML5

Est-il possible de l'facebook de merde de balises meta Open Graph pour valider si mon doctype est - <!DOCTYPE html> (HTML5)?

Autres que facebook Open Graph meta tags, mon document valide parfaitement.

Je ne veux vraiment pas utiliser <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> comme qui crée une toute nouvelle série de problèmes.

Voici un exemple de l'une des erreurs de validation en question...

Erreur à la Ligne 11, Colonne 47: propriété d'Attribut non admis sur l'élément meta à ce point.

<meta property="og:type" content="website" />

Toute aide serait appréciée... j'ai cherché pendant des jours, en vain.

14voto

Blaise Points 1979

Vous pouvez utiliser l' name attribut au lieu de property d'attribut. Facebook peluches va lancer un avertissement, mais la méta valeur sera toujours reconnue et analysée.

Exemple: <meta name="og:title" content="Hello Facebook" />

La preuve: Cet exemple sur pastebinet analysé par Facebook de la Charpie.

Edit: exemple a un doctype HTML5 afin de ne pas valider, car og:* noms de métadonnées ne sont pas enregistrés. Cependant, avec OP doctype XHTML, il n'valider.

13voto

Justin Points 2493

Pour valider en tant que HTML5, ajoutez simplement l'attribut prefix des documents Open Graph :

 <!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>Valid HTML5!</title>
<meta charset="utf-8"/>
<meta property="og:title" content="">
</head>
<body></body>
</html>
 

Copiez et collez ce qui précède dans le validateur w3 pour le vérifier.

Il est prêt pour la production - Apple utilise cette méthode sur apple.com .

11voto

justbeez Points 339

La réponse courte est non, non, pas cette fois. Toutes les autres réponses sont des solutions de contournement, hacks, ou tout simplement fou. La seule solution à long terme est que Facebook a besoin de créer une autre syntaxe est valide HTML5.

Pour ceux qui en proposent de ciblage de Facebook par les "facebookexternalhit" de l'Agent Utilisateur, vous devez vous rappeler que d'autres entreprises sont les suivantes Facebook de la tête avec ces balises. Par exemple, Google+ va retomber les balises OpenGraph si leur choix Schema.org le balisage n'est pas présent. Car la plupart des sites ne sont pas à l'aide de Schema.org attributs (surtout si ils sont passé du temps à utiliser OpenGraph correctement), vous pouvez facilement manquer sur l'amélioration de vos extraits de code sur des sites comme Google+ en suivant ces conseils.

Avec l'omniprésence de Facebook, ce n'est vraiment pas une bonne solution pour les cibler directement, même si leur choix de mise en œuvre est problématique pour les développeurs. Lors de la recherche de solutions sur un site comme le Débordement de la Pile, vous devez toujours vous souvenir qu'il peut y avoir des conséquences imprévues de ces méthodes.

Pour nos sites principaux, nous avons collé avec XHTML+RDFa pour la validation de saké, et cela a fonctionné assez bien. J'espère que comme HTML5 utilisation grandit, le Facebook de l'équipe va commencer à accepter un format valide pour ces métadonnées.

Quant à savoir pourquoi nous nous soucions de validation: Nous avons trouvé que la validation, lorsque cela est possible, permet de signaler les erreurs dans les pages de notre catalogue en n'enseignant pas de nous ignorer. Depuis que nous utilisons tous la validation des extensions dans nos navigateurs, nous savons immédiatement si il y a une erreur de validation (ou d'avertissement) sur une page, et peut enquêter pour savoir s'il est possible de l'éliminer (99+% du temps, c'est). Cela nous fait gagner du temps en traitant avec restrictive implémentations des spécifications, en particulier sur la frange et les plates-formes mobiles de nos jours. Nous avons vu une énorme réduction dans d'étranges bugs parce que nous sommes conscients de nos pages sont valides et savoir que ce qui se passe dans le navigateur n'a pas à faire avec des mauvais balisage d'un UA pourrait ne pas interpréter comme prévu.

5voto

thejudge Points 347

Ces balises META ne sont nécessaires que lorsque Facebook scanne la page pour rechercher ces balises.

     <? 
    if(eregi("facebookexternalhit", $_SERVER['HTTP_USER_AGENT'])){

      echo '<meta property="og:type" content=xxxxxxxxxxxxx';
      // continue with the other open graph tags
    }
   ?>
 

Lesdites balises ne seront présentes que lorsque Facebook en aura besoin - cette méthode avec PHP les supprime complètement pour toutes les autres instances, y compris la validation W3C.

4voto

Leonel Points 686

Plus d'un an s'est écoulé et la meilleure solution que nous avons consiste à envelopper les balises méta dans une sorte de vérification côté serveur.

En PHP j'ai fait:

 <?php if (stristr($_SERVER["HTTP_USER_AGENT"],'facebook') !== false) { ?>
  <meta property="og:title" content="Title of the page" />
  <meta property="og:url" content="http://www.example.com/" />
  <meta property="og:type" content="website" />
  <meta property="fb:admins" content="123456789" />
  <meta property="og:image" content="http://www.example.com/images/thumb.jpg" />
<?php } ?>
 

Cela fonctionne vraiment pour Facebook. Mais je n'aime vraiment pas cette idée!

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X