Optimisez vos sites pour Open graph de Facebook et Microdata de Google Plus

Publié le 31 août 2011

Brèves

plus1blue1 Optimisez vos sites pour Open graph de Facebook et Microdata de Google PlusOn s’était habitués depuis des années à optimiser les metatags de nos pages Facebook pour améliorer le référencement de nos sites. Ensuite est venu Facebook et son protocole OpenGraph que l’ont a dû utiliser pour optimiser la présentation de nos pages sur Facebook.

Globalement, c’est une bonne chose de pouvoir définir un titre et description diffèrent pour la version SEO et SMO de la même page.

Mais aujourd’hui, il faut intégrer une nouvelle norme pour Google+. Il s’agit des attributs HTML5 itemscope. Ceux-ci sont utilisés par Google lorsque vous partagez une page web à l’intérieur du réseau social ou en cliquant sur le bouton +1 (qui gère maintenant le partage).

plus1btn Optimisez vos sites pour Open graph de Facebook et Microdata de Google Plus

Côté positif, ça fonctionne, coté négatif, c’est un brol de plus à intégrer dans la source de nos sites. Pour peu que vous ne soyez pas vous même développeur, vous risquez de devoir payer cette intégration plus ou moins cher.

Mais si vous disposez déjà d’une intégration de Opengraph, il suffit de l’adapter.

Ce n’est pas forcément difficile, mais il faut des notions de base en développement. Commencez par adapter la balise <html> pour qu’elle supporte à la fois Facebook et Google+

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml"
itemscope itemtype="http://schema.org/Article">

Ensuite, retrouvez les fonctions qui écrivent l’Opengraph. Ainsi, sur Techtrends, les OG sont gérés par un un plug-in «Open Graph WP implementation» et j’ai ajouté facilement la création des «meta itemprop» sur la fonction qui écrit les graphs. 

public function echo_meta( $meta_array )
{
foreach( $meta_array as $key=> $value ) {
echo '<meta property="',$key,'" content="',$value,'">',"\n";
if ($key=='og:image') echo '<meta itemprop="image" content="',$value,'">',"\n";
if ($key=='og:title') echo '<meta itemprop="name" content="',$value,'">',"\n";
if ($key=='og:description') echo '<meta itemprop="desription" content="',$value,'">',"\n";
}
}

Note : Inutile de me demander le plug-in modifié, il est customisé pour prendre en compte certaines spécificités de mon blog comme la gestion des vignettes YouTube.

Plus d’infos : http://www.google.com/webmasters/+1/button/

la diffusion d’annonces sur ce site relève de ma responsabilité et ne représente pas les positions d'une entreprise pour laquelle je travaille

Rédigé par

Christophe Lefevre, spécialiste du SEO et des réseaux sociaux pour les nouveaux médias.

Sur Techtrends, je partage le fruit de ma veille numérique et mes réflexions autour des tendances du web, des médias et nouvelles technologies.

Egalement sur Brèves (11 sur 64 articles)