Elena L. de Google a indiqué dans le forum Webmaster Central quelle procédure suivre pour s'assurer que les logos d'entreprise ne soient pas erronés au sein des pages AMP HTML. En effet, Google impose un balisage sémantique via des microdonnées Schema.org ou leurs équivalents en JSON (conseillé), et il faut s'assurer que le logo des business est fourni correctement.
Elena L. commence son discours par cette longue tirade :
Voici quelques conseils utiles pour tirer le meilleur parti de vos pages AMP. Nous avons remarqué que certains éditeurs n'ont pas inclus un logo AMP valide dans leurs pages d'AMP, ou l'ont mis en œuvre de manière incorrecte dans leur balisage de données structurées. En conséquence, il ne s'affiche pas ou dévoile seulement un logo de faible qualité dans le carousel de Google Search sur mobile. Cela a un impact négatif sur la marque d'un éditeur ainsi que l'expérience utilisateur sur Google Search. Méfiez-vous des erreurs de logo communs énumérés ci-dessous et découvrez comment les corriger.
En effet, le carousel AMP affiche toujours le nom de l'entreprise ou le logo au-dessus des informations dans le carousel AMP comme le montre la capture ci-dessous. Il serait dommage qu'un simple titre voir rien du tout ne s'affiche (il y a de fortes chances que la page ne soit pas montrée du tout dans ce cas...).
Pour rappel, les logos sont fournis au sein des données structurées de la section "Publisher", comme dans l'exemple ci-dessous en JSON :
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage":{
"@type":"WebPage",
"@id":"https://site.com/titre-article"
},
"headline": "Article headline",
"image": {
"@type": "ImageObject",
"url": "https://site.com/image.jpg",
"height": 800,
"width": 800
},
"datePublished": "2015-02-05T08:00:00+08:00",
"dateModified": "2015-02-05T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "Mathieu Chartier"
},
"publisher": {
"@type": "Organization",
"name": "Internet-Formation",
"logo": {
"@type": "ImageObject",
"url": "https://site.com/logo.jpg",
"width": 600,
"height": 60
}
},
"description": "Description de l'article AMP"
}
</script>
Voici donc les 4 conseils fournis par Elena L. et Google :
- Cible du logo manquante : n'oubliez pas de spécifier une valeur dans le champ logo.url des données structurées des pages AMP.
- Lien du logo cassé : vérifiez que l'URL vers le logo est absolue et fonctionne bien au sein des microdonnées ou JSON.
- Format d'un logo carré : suivez les guidelines de Google au sujet des logos dans les pages AMP (tout en bas de la page). Google impose un logo d'une taille maximale de 600x60, il faut donc créer un ratio si votre logo est carré, ou trouver un moyen de proposer un logo alternatif pour le carousel de Google mobile notamment.
-
Logo invalide : utilisez un logo avec un texte sombre ou tout du moins avec un contraste suffisant (avec un fond blanc). Cependant, évitez d'inclure un fond sombre dans le logo lui-même pour faire ressortir des éléments clairs. Au vu du format du logo, il faut s'assurer de la lisibilité du texte du logo ou des images qu'il contient, en évitant une forte densité d'information.
Si vous vous retrouvez confronter à ce problème, c'est déjà une chance car cela signifie que vous êtes indexés par Google dans le carousel. Vous assurer que votre logo est valide et fonctionnel ne devrait donc être qu'une formalité. :D
N'oubliez pas de tester vos pages AMP avec l'outil de test de données structurées : https://search.google.com/structured-data/testing-tool.