Comment poster sur Google+ depuis votre blog WordPress grace au bouton +1

Google continue d’améliorer son bouton +1 afin de partir à la conquête du bouton Like, qui est déjà très (trop) présent sur le web.

Jusqu’à aujourd’hui, le bouton Like possédait un avantage de taille : en utilisant la version FBML du bouton, les utilisateurs peuvent “aimer” un article, mais aussi ajouter un commentaire à celui-ci. Mais Google rattrape son retard, puisque le bouton +1 intègrera désormais une option pour pouvoir partager l’article directement sur Google+. Cette option inclut bien sûr le choix des cerles avec lesquels vous souhaitez partager.

Cependant, afin d’optimiser les informations qui seront partagées, vous pouvez ajouter un markup spécifique à vos articles. Vous pourrez ainsi choisir le titre, la description et l’image que vos utilisateurs partageront.

Dans son article de présentation, Google nous explique que trois méthodes de collecte d’information peuvent être utilisées :

1. Par défaut, les balises meta title and meta description sont utilisées, et l’image est la première trouvée dans la page.
2. Si vous avez renseigné des meta og tags pour Facebook, Google peut utiliser ceux-ci pour collecter les infos.
3. Vous pouvez utiliser le markup suivant les standards de schemas.org

J’ai personnellement choisi d’utiliser la troisième solution, pour plusieurs raisons : d’une part, c’est celle qui est recommandée par Google; d’autre part, ce markup a été adopté par Bing, Yahoo et Google pour l’affichage des “rich snippets”, c’est-à-dire ces images, vidéos et autres informations qui peuvent être affichées directement dans les résultats des moteurs de recherche et qui les aident à faire le tri et à classifier votre contenu. C’est donc un choix qui pourrait s’avérer bénéfique pour votre SEO sur le long-terme.

Si comme moi vous choisissez cette méthode, vous allez devoir effectuer quelques changements sur votre site. Il faut en effet ajouter le markup suivant :

<div itemscope itemtype="http://schema.org/Article">
    <h1 itemprop="name">Votre titre</h1>
    <img itemprop="image" src="image-url"></img>
    <p itemprop="description">A petite description.</p>
</div>

Ajouter le markup nécessaire à votre blog sous WordPress

Suivant la façon dont vous gérez les images sous WordPress, votre sera peut-être différent de celui-ci dessous. J’assume ici que vous utilisez the_post_thumbnail pour ajouter une image à la une à chacun de vos articles, et que vous coupez toujours votre texte grâce à la balise more. Vous pouvez en savoir plus sur cette balise dans l’un de mes articles précédents.

Voici donc les quelques changements à effectuer dans votre fichier single.php. J’ai rajouté chacune des nouvelles valeurs itemprop aux tags associés, et j’ai ensuite séparé le contenu de mon article situé avant la balise more dans une div séparée.

	<div itemscope itemtype="http://schema.org/Article" class="content">

	<h1 itemprop="name"><?php the_title(); ?></h1>

		<div class="entry-content">
		  <?php the_post_thumbnail( 'single-post-thumbnail', array( 'itemprop' => 'image' ) ); ?>
		  
		  <?php if( strpos(get_the_content(), '<span id="more-') ) : ?>
			<div class="postintro" itemprop="description">
			<?php global $more; $more=0; the_content(''); $more=1; ?>
			</div>
		  <?php endif; ?>
		  
		  <?php the_content('', true); ?>

		</div><!-- .entry-content -->
		
	</div><!-- .content -->

Et voilà ! Pour mon exemple, j’ai choisi d’utiliser le schéma Article, puisque cela correspond au type de contenu que je produis. Cependant, si vous produisez un autre type de contenu (des produits à vendre, des listes de films, …), vous pouvez choisir un autre schéma parmi ceux proposés sur schemas.org.

Ajouter le bouton +1 à votre site

Pour rappel, si vous souhaitez ajouter le bouton sur votre site, voici le code à insérer dans le footer de votre site :

<script type="text/javascript">
		(function() {
			var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
			po.src = 'https://apis.google.com/js/plusone.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
		})();
</script>

Vous pouvez ensuite ajouter le bouton +1 n’importe où sur votre page, grâce au code suivant :

<g:plusone></g:plusone>

Bien sûr, si vous souhaitez changer le look du bouton, vous pouvez utiliser plusieurs paramètres, disponibles sur le site du bouton.

C’est tout pour ce petit tutoriel. Si vous l’avez aimé, n’hésitez pas à la partager sur Google+ grâce au bouton ci-dessous ! ;)

Sources:

• Annonce officielle de Google
• Documentation pour l’usage du bouton +1
• Schemas.org