web-dev-qa-db-fra.com

Validation Open Graph pour HTML5

Existe-t-il un moyen d'obtenir les méta balises Open Graph de Facebook pour valider si mon doctype est <!DOCTYPE html> (HTML5)?

Outre les balises META Open Graph de Facebook, mon document est parfaitement valide.

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"> car cela crée un tout nouvel ensemble de problèmes.

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

Erreur ligne 11, colonne 47: propriété d'attribut non autorisée sur la méta-élément à ce stade.

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

N'importe quelle aide serait appréciée… J'ai recherché de temps en temps pendant des jours en vain.

facebookvalidationhtml5opengraph
58
Scott Greenfield

Pour HTML5, ajoutez ceci à votre élément htmlcomme décrit sur ogp.me et conservez votre og: propriétés préfixées:

<!doctype html>
<html prefix="og: http://ogp.me/ns#">
<head>
     <meta property="og:type" content="website" />
     ...

Pour XHTML (comme la question OP), utilisez l'attribut name au lieu de l'attribut property. Facebook Lint lancera un avertissement, mais la méta-valeur sera toujours reconnue et analysée.

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

Oui . Pour valider en HTML5, ajoutez l'attribut prefix à partir de Open Graph docs :

<!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 w pour vérifier.

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

12
Justin

La réponse courte est non, pas pour le moment. Toutes les autres réponses sont des solutions de contournement, des hacks ou tout simplement folles. La seule solution à long terme est que Facebook doit créer une syntaxe alternative valide HTML5.

À ceux qui recommandent de cibler Facebook par l'agent utilisateur "facebookexternalhit", vous devez vous rappeler que d'autres sociétés suivent l'exemple de Facebook avec ces balises. Par exemple, Google+ reviendra aux balises OpenGraph si leur balisage Schema.org préféré n'est pas présent. Étant donné que la plupart des sites n'utilisent pas les attributs Schema.org (surtout s'ils passent le temps d'utiliser correctement OpenGraph), vous pouvez facilement passer à côté de 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 d'implémentation est problématique pour les développeurs. Lorsque vous recherchez des solutions sur un site comme Stack Overflow, vous devez toujours vous rappeler qu'il peut y avoir des conséquences imprévues à ces méthodes.

Pour nos sites principaux, nous sommes restés avec XHTML + RDFa pour des raisons de validation, et cela a fonctionné assez bien. J'espère qu'à mesure que l'utilisation de HTML5 se développera, l'équipe Facebook commencera à accepter un format valide pour ces métadonnées.

Quant à savoir pourquoi nous nous soucions de la validation: Nous avons constaté que la validation, lorsque cela est possible, aide à nous alerter des erreurs dans nos pages en ne nous apprenant pas à les ignorer. Étant donné que nous utilisons tous des extensions de validation dans nos navigateurs, nous savons instantanément s'il y a une erreur de validation (ou un avertissement) sur une page, et pouvons rechercher s'il est possible de l'éliminer (ce qui est 99 +% du temps). Cela nous fait gagner du temps face aux implémentations restrictives des spécifications, en particulier sur les plateformes marginales et mobiles de nos jours. Nous avons vu une énorme réduction des bogues impairs parce que nous sommes conscients de la validité de nos pages et savons que ce qui se passe dans le navigateur ne fonctionne pas ont à voir avec un balisage invalide qu'un UA particulier pourrait ne pas interpréter comme prévu.

11
justbeez

Ces balises META ne sont nécessaires que lorsque Facebook scanne la page pour 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.

5
thejudge

Beaucoup de réponses ici sont devenues obsolètes. Veuillez ne pas espionner les en-têtes ou écrire via JavaScript (car les processeurs peuvent ne pas évaluer le JS).

Les recommandations du W3C (extensions à HTML5) appelées RDFa 1.1 et RDFa Lite 1.1 (voir http://www.w3.org/TR/rdfa-lite/ et http: // www .w3.org/TR/rdfa-primer / ) ont rendu l'attribut "propriété" valide et conforme. En attendant (depuis les réponses plus anciennes ici), le validateur http://validator.w3.org/check reconnaît l'attribut comme valide. De plus, la documentation du protocole Open Graph, http://ogp.me/ , a été mise à jour pour refléter RDFa 1.1 (elle utilise l'attribut "prefix").

Le travail du W3C a été effectué avec la contribution d'OpenGraph et de schema.org, entre autres, pour résoudre le type de problème soulevé par cette question.

En bref, assurez-vous que vos balises OG sont conformes à RDFa et que vous êtes en or.

4
WraithKenny

Plus d'un an s'est écoulé et la meilleure solution que nous avons consiste à encapsuler les balises META 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!

4
Leonel

Une solution récente consiste à enregistrer un préfixe dans la balise html ou head:

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

ou

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

extrait de ici - désolé, la page est en allemand ...

4
Kjell

Mauvaise solution pour les balises META. Si vous les enveloppez dans Javascript, Facebook Linter ne les trouvera pas. C'est la même chose que de ne pas les mettre du tout.

L'encapsulation comme des boutons et autres dans le script fonctionne pour aider à valider contre XHTML 1.0 mais pas HTML5.

2
Kenneth Benjamin

Dans JSP:

<%
  String ua=request.getHeader("user-agent").toLowerCase();
  if(ua.matches(".*facebookexternalhit.*")){
  }
%>
<meta property="og:image" content="images/facebook.jpg" />
...
<%
  }
%>

Ou:

<c:set var="ua" value="${header['User-Agent']}" scope="page"/>
<c:if test="${ua.matches('.*facebookexternalhit.*')}">
  <meta property="og:image" content="images/facebook.jpg" />
  ...
</c:if>
1
cupto

Eh bien, Visual Studio 2011 me dit que l'attribut "propriété" n'est pas valide. Cependant, le W3C semble être un peu plus indulgent:

http://validator.w3.org/check?uri=http%3A%2F%2Fpacificfoods.com%2F

Vous remarquerez que j'ai ajouté des balises Open Graph selon la recommandation de Facebook à ce site, et cela ne casse pas le validateur W3C, que je considère comme faisant autorité.

En consultant l'officiel spécification W3C HTML5 pour la balise META , il est clair que l'utilisation de l'attribut "propriété" (au lieu du "nom", "http-equiv", "charset", ou "itemprop") n'est pas valide. Cependant, leur validateur le valide (???). Je n'ai aucune explication à cet écart.

0
Ethan Brown