Facebook : Meta OpenGraph et validation w3c

Facebook vous propose d'ajouter des balises META sur votre site afin de mieux l'identifier dans l'OpenGraph : id de l'admin, titre, description, type de site, etc. Ces balises sont de la forme:
[sourcecode language="html"][/sourcecode]

Vous trouverez ainsi tout un tas de balises à ajouter sur la page des plugins sociaux de facebook ("step 2"). Si l'intention me semble louable et le concept plutôt pratique, il n'en reste pas moins que Facebook a tendance à se croire le maître du monde, et pourrit votre validation w3c avec ces balises. Car la w3c ne reconnaît pas ces balises OpenGraph.

Comment donc, rester valide w3c avec ces balises ?

Deux solutions.

 

1) Mettre ces balises en commentaire HTML.

Vous pouvez encadrer vos meta tags OpenGraph par des commentaires HTML.

Du type :
[sourcecode language="html"]

[/sourcecode]

Vos balises META seront ignorées par le navigateur, et par le validateur w3C. En revanche, elles seront lues par le parseur FB. Néanmoins, les maniaques de l'optimisation peuvent se dire qu'il est dommage d'afficher (et donc de faire charger) du code qui ne sert à rien. D'où la deuxième solution ..

 

2) Checker l'USER_AGENT

Facebook, lorsqu'il "lit" les META de votre site, spécifie un user_agent un peu particulier, vous permettant de l'identifier.

Une fonction pourrait alors détecter si l'user_agent est celui de facebook, et afficher les META opengraph le cas échéant.

Par exemple :
[sourcecode language="php"]
< ?php
function is_facebook(){
if(stristr($_SERVER["HTTP_USER_AGENT"],'facebook'))
return true;
} ?>
[/sourcecode]


Il suffirait alors, dans votre header, de faire quelque chose du genre :
[sourcecode language="php"]
< ?php

if(is_facebook()){

echo '

';

}

?>
[/sourcecode]
 

 

Grâce à ces deux solutions, votre site restera (comment, il ne l'est pas ?? ) valide w3c tout en étant optimisé pour l'OpenGraph facebook. :)
Gpenverne

Gpenverne

Dév back, symfonien, adore bidouiller des machins pour faire des bidules, sans se poser la question de leur utilité...

Read More