Comment définir les URL de profils sociaux liés à un site, pour le Knowledge Graph de Google

Spécifier les profils sociaux à Google

C'est pour l'instant seulement pour des sites célèbres (sur google.com en anglais), mais vous devriez vous préparer quand votre tour viendra ;-) Google affiche parfois ce type de page de résultats :

Si jamais Google décide que votre site peut bénéficier de ce type d'affichage, alors il vaut mieux que vous ayez déclaré quelles sont les URL de vos différents comptes de réseaux sociaux. Sinon Google tentera de deviner (il pourra se tromper) ou dans le doute n'affichera rien.

Je préfère insister pour être clair : ce n'est pas parce que vous mettez le bon code dans votre page que vous bénéficierez de cet affichage. Inversement, Google peut afficher des liens de profils sociaux même pour un site qui n'a pas mis le bon code. Mais c'est mieux de le mettre, pour faciliter les choses à Google. C'est le même principe que le code pour le formulaire des sitelinks.

Il suffit d'ajouter des données structurées sous la forme d'un bout de code Javascript au format JSON-LD. Google indique qu'on peut le mettre sur n'importe quelle page donc a priori il suffit de le mettre sur votre page d'accueil. Si vous connaissez assez bien le code, suivez ces instructions, et sinon il vous suffit d'utiliser mon outil (gratuit) ci-dessous :

Outil de configuration des profils sociaux d'un site web

Le contenu du code dépend si votre site est associé à une personne morale (par exemple une entreprise) ou à une personne physique (par exemple un blogueur non pro). Pour certains réseaux sociaux comme Facebook et Google+ (pour n'en citer que 2), il faut indiquer respectivement les URL de vos pages ou de vos profils. Pour d'autres réseaux sociaux comme Twitter, ça ne change rien (sauf si vous avez plusieurs comptes).

Les URL indiquées dans votre code doivent correspondre aux URL des liens affichés sur votre page d'accueil, tels que les internautes peuvent les voir.

Petite astuce pour le cas d'un site lié à une entreprise ou une organisation : dans le même code, vous pouvez aussi indiquer à Google l'URL qu'il doit utiliser pour votre logo (il s'agit de la propriété "logo").

Réseaux sociaux pris en compte

Les réseaux sociaux actuellement pris en compte sont les suivants :

• Facebook
• Twitter
• Instagram
• YouTube
• LinkedIn

Google précise qu'on peut malgré tout en ajouter d'autres, ils seront peut-être pris en compte plus tard... Pinterest (ou Viadeo en France) me semblerait plus utile que Myspace, non ?

Vous remarquerez que Google n'affiche page les réseaux sociaux toujours dans le même ordre... Si vous savez sur quoi il semble se baser, dites-le dans les commentaires !

D'après Google, les profils sociaux sélectionnés peuvent aussi dépendre de la requête de l'internaute.

Un point qui pourrait limiter pas mal de monde : pour les réseaux sociaux qui ont mis en place un processus de vérification des comptes, seuls les comptes vérifiés seront affichés dans cet encadré Google.

Exemples de codes

Voici ce que ça donne pour mon site webrankinfo.com (type Organization) :

<script type="application/ld+json">
{ "@context : "http://schema.org",
 "@type : "Organization",
 "name : "WebRankInfo",
 "url : "https://www.webrankinfo.com",
 "logo : "https://www.webrankinfo.com/images/wri/webrankinfo-avatar2.png",
 "sameAs : [ "https://twitter.com/webrankinfo",
 "http://www.youtube.com/user/webrankinfo",
 "http://fr-fr.facebook.com/WebRankInfo",
 "https://www.linkedin.com/company/2411999",
 "http://instagram.com/webrankinfo",
 "http://pinterest.com/webrankinfo/"] 
}
</script>

Voici ce que ça donne pour mon site olivier-duffez.fr (type Person) :

<script type="application/ld+json">
{ "@context : "http://schema.org",
 "@type : "Person",
 "name : "Olivier Duffez",
 "url : "https://www.olivier-duffez.fr/",
 "sameAs : [ "https://fr-fr.facebook.com/olivier.duffez",
"https://twitter.com/webrankinfo",
"http://www.youtube.com/user/olivierduffez",
"http://www.linkedin.com/in/olivierduffez" ]
}
</script>

Si vous ne souhaitez ou pouvez pas utiliser le format JSON-LD, vous pouvez intégrer les données structurées au sein du code HTML directement, dans le contenu. Voici un exemple avec les microdonnées :

<span itemscope itemtype="https://schema.org/Organization">
 <link itemprop="url" href="http://www.your-company-site.com"> 
  <a itemprop="sameAs" href="http://www.facebook.com/your-company">Facebook</a>
  <a itemprop="sameAs" href="http://www.twitter.com/YourCompany">Twitter</a>
</span>

Pour tester si votre intégration fonctionne bien, testez votre page sur l'outil de test de Google

Si vous avez des questions, n'hésitez pas à les poser dans les commentaires.