Validation graphique ouverte pour HTML5
Est - il possible d'obtenir les balises meta Open Graph de Facebook pour valider si mon doctype est <!DOCTYPE html> (HTML5)?
Autre que les balises meta Open Graph de facebook, 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"> car cela crée un nouvel ensemble de problèmes.
Voici un exemple d'une des erreurs de validation en question...
Ligne D'erreur 11, colonne 47: propriété D'attribut non autorisée sur l'élément meta à ce stade.
<meta property="og:type" content="website" />
Toute aide serait appréciée... J'ai cherché pendant des jours, en vain.
12 réponses
Pour HTML5, ajoutez ceci à votre html Élément comme décrit sur ogp.me et conservez vos propriétés préfixées og::
<!doctype html>
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:type" content="website" />
...
Pour XHTML (comme la question D'OP), utilisez l'attribut name au lieu de l'attribut property. Facebook lint lancera un avertissement, mais la valeur meta sera toujours reconnue et analysée.
<meta name="og:title" content="Hello Facebook" />
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 fous. La seule solution à long terme est que Facebook a besoin de créer une syntaxe alternative qui est valide HTML5.
Facebook facebookPour ceux qui recommandent de cibler Facebook par L'Agent utilisateur "facebookexternalhit", vous devez vous rappeler que D'autres entreprises suivent L'exemple de Facebook avec ces balises. Par exemple, Google + retombera sur les balises OpenGraph si leur préférence Schema.org balisage n'est pas présent. Puisque la plupart des sites n'utilisent pas Schema.org attributs (surtout s'ils passent le temps d'utiliser OpenGraph correctement), vous pouvez facilement manquer d'améliorer vos extraits 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 rappelez-vous qu'il peut y avoir des conséquences imprévues à ces méthodes.
Pour nos sites principaux, Nous avons collé avec XHTML + RDFa pour des raisons de validation, et cela a assez bien fonctionné. J'espère qu'à mesure que l'utilisation de HTML5 augmentera, L'équipe Facebook commencera à accepter un format valide pour ces métadonnées.
Quant à la raison pour laquelle 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. Puisque nous utilisons tous 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 étudier s'il est possible de l'éliminer (ce qui est 99+% du temps). Cela nous fait gagner du temps face à des implémentations restrictives des spécifications, en particulier sur les plates-formes mobiles et mobiles de nos jours. Nous avons vu une énorme réduction des bogues impairs parce que nous sommesconscients de la validité de nos pages et savons que ce qui se passe dans le navigateur n'a pas à voir avec balisage non valide qu'un UA particulier pourrait ne pas interpréter comme prévu.
Oui. Pour valider en tant que HTML5, ajoutez l'attribut prefix à partir 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 W3 validator pour vérifier.
, Il est prêt pour la production – Apple utilise cette méthode sur apple.com.
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.
Plus d'un an s'est écoulé et la meilleure solution que nous ayons est d'envelopper 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!
Beaucoup de réponses ici sont devenues obsolètes. Veuillez ne pas rechercher les en-têtes ou écrire via JavaScript (car les processeurs peuvent ne pas évaluer le JS).
Les recommandations du W3C (Extensions de 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" property " valide et conforme. En attendant (puisque les réponses plus anciennes ici) le validateur http://validator.w3.org/check reconnaît l'attribut comme valide. En outre, la documentation du protocole Open Graph, http://ogp.me/, a été mis à jour pour refléter RDFa 1.1 (il utilise l'attribut "prefix").
Le travail du W3C a été fait avec L'entrée D'OpenGraph et schema.org entre autres pour résoudre le genre de problème soulevé par cette question.
En bref, assurez-vous que vos balises OG sont conformes à RDFa et que vous êtes en or.
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...
Mauvaise solution pour les balises meta. Si vous les enveloppez en Javascript, le Linter Facebook ne les trouvera pas. C'est la même chose que de ne pas les mettre du tout.
Envelopper comme des boutons et autres dans le script fonctionne pour aider à valider contre XHTML 1.0 mais pas HTML5.
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>
Eh bien, Visual Studio 2011 me dit que l'attribut "property" est invalide. 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é.
Consulter la spécification officielle W3C HTML5 pour la balise meta , c'est Effacer que l'utilisation de l'attribut "property" (au lieu des attributs" name"," http-equiv"," charset "ou" itemprop") n'est pas valide. Cependant, leur validateur le valide (???). Je n'ai aucune explication à cet écart.
Je serais enclin à dire ne vous inquiétez pas de la validation, Je ne crois pas avoir une marque invalide nuira à votre classement des moteurs de recherche. par exemple, les recommandations techniques de googles ne mentionnent pas de normes. http://www.google.com/support/webmasters/bin/answer.py?answer=35769#2 . Html5 vous permet de fournir plus d'informations aux moteurs de recherche qu'ils peuvent ensuite utiliser, mais je ne peux pas les voir en bas du classement basé sur la non validation.
Cependant, si vous pensez que cela vous aide à valider, vous pouvez utiliser
<script>document.write('<meta property="og:type" content="website" />')</script>
Pour avoir ces balises présentes et avoir un fichier html qui transmettra les validateurs.
Bien qu'il coupera les utilisateurs non-Javascript, j'ai utilisé ceci
<script type="text/javascript">
//<![CDATA[
document.write('<fb:like href="" send="false" layout="button_count" width="100" show_faces="true" font=""></fb:like>')
//]]>
</script>
Et il a parfaitement validé. Il montre et fonctionne très bien avec Firefox, Opera, IE, Chrome, Safari sur Windows, et avec Firefox, Opera, Safari sur Mac.