C’est aussi dans cette optique que Google a actualisé son Guide pour le balisage des données structurées qui inclut désormais de nouvelles propriétés exigées pour éviter les erreurs de métadonnées qui empêcheront leur prise en compte.
Rappelons que les résultats comprenant des pages AMP s’afficheront au début de la page des résultats de Google dans un carrousel avec une image, le titre et la description du contenu. Sur mobile, ces résultats AMP se consulteront en les faisant défiler de la gauche vers la droite, et vice versa, dans le carrousel "A la une" dédié aux résultats AMP.
Par conséquent, si votre code source n’a pas le codage AMP pour créer la page AMP avec ses nouvelles exigences correctement installées et renseignées, vos pages mobiles ne s’afficheront jamais dans ce Carrousel "A la une".
Toutefois, après le lancement du projet Google AMP, il y aura deux types de contenus mobiles :
- Ceux provenant de sites web en responsive design qui sont hébergés sur une plateforme (WordPress.com, Blogger, Joomla, etc…)
- Et ceux provenant de sites web en responsive design qui sont hébergés chez des prestataires indépendants.
Les premiers bénéficieront automatiquement de la participation de leur plateforme d'hébergement au projet AMP et les seconds auront à bien configurer eux-mêmes leurs pages web pour bénéficier de l’affichage rapide de leurs pages sur mobile et intégrer le carrousel des liens AMP dans Google Mobile.
C’est à ces derniers que s’adresse ce codage AMP.
Le codage AMP en JSON-LD (existe aussi en microdata) se fait en deux parties : l’une dans la partie HEAD et l’autre dans la partie BODY.
Code pour créer la partie Head de la page AMP
Le code AMP de la partie Head ci-dessous devra être personnalisé avec vos propres données et variables en dehors desquelles vous ne devez rien toucher au reste.
<!doctype html>
<!-- This sample AMP HTML file aims to be a minimalist document thatfollows best practices and guidances for publishers to mark up content for inclusion in various platforms.-->
<html AMP lang="fr">
<!-- vous pouvez utiliser "amp" ou "AMP" ou "?" -->
<head>
<meta charset="utf-8">
<title>Titre de l’Article</title>
<!-- Les 2 liens canonical ci-dessous doivent figurer dans le code source et les URLs doivent être absolues -->
<link itemprop="mainEntityOfPage" rel="canonical" href="URL-normale-de-votre-Article" />
<link rel="amphtml" href="URL-normale-de-votre-Article" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<!-- only one style tag is allowed, and it must have an "amp-custom" attribute -->
<style amp-custom>
<!-- any custom style goes here; and remember, body margin can not be declared -->
body {
background-color: white;
}
amp-img {
background-color: gray;
}
</style>
<script type="application/ld+json">
//L’URL de la propriété mainEntityOfPage doit être la même que celle de
// l’attribut canonical.
//* L’image principale balisée ci-dessous doit apparaître dans la page elle-même.
//* L’URL de cette “image” doit correspondre à la source indiquée dans
// le tag “amp-img”.
// * Toutes les URLs balisées doivent être absolues.
// * Les dimensions du “logo” ne doivent pas dépasser 600x60.
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage":{
"@type":"WebPage",
"@id": "URL de la Page"
},
"headline": "Titre de l’Article",
"datePublished": "1907-05-05T12:02:41Z",// à modifier avec votre variable
"author": {
"@type": "Person",
"name": "Nom de l’Auteur"},
"publisher": {
"@type": "Organization",
"name": "Nom entreprise ou Editeur",
"logo": {
"@type": "ImageObject",
"url": "URL absolue du Logo",
"width": 600,
"height": 60
}
},
"image": {
"@type": "ImageObject",
"url": "URL image principale",
"height": Indiquer Hauteur,
"width": Indiquer Largeur //(sans virgule ni point à la fin)
}
},
"description": "Description Article"
}
</script&>
<!-- Le script ci-dessous est exigé et ne peut être ni supprimé, ni modifié -->
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
Code AMP pour créer la partie BODY
Le codage AMP de la partie BODY qui permet d’afficher votre contenu mobile au format AMP intègre aussi le balisage de données structurées avec les nouvelles propriétés exigées désormais par Google.
A vous de le personnaliser et de l’adapter à votre code source en y intégrant vos propres variables.
<body>
<h1 itemprop="headline">Titre Article</h1>
<h2 itemprop="author" itemscope itemtype="https://schema.org/Person">
<span itemprop="name">Nom Auteur</span>
</h2>
<time itemprop="datePublished" datetime="1907-05-05T12:02:41Z">Date Publication</time>
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<amp-img width="600" height="60" src="URL Logo mentionnée dans le HEAD"></amp-img>
<meta itemprop="url" content="URL Logo mentionnée dans le HEAD"></meta>
<meta itemprop="width" content="600"></meta>
<meta itemprop="height" content="60"></meta>
</div>
<meta itemprop="name" content="Nom Société ou Editeur ou Marque"></meta></div>
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<amp-img src="URL image principale mentionnée dans le HEAD avec les bonnes tailles après" alt="texte alternatif" height="2000" width="800"></amp-img>
<meta itemprop="url" content="URL image principale mentionnée dans le HEAD avec les bonnes tailles après"></meta>
<meta itemprop="width" content="2000"></meta>
<meta itemprop="height" content="800"></meta>
</div>
<p>Votre contenu ici.</p>
</body>
</html>
Précisons que ces deux bouts de codes sont plus que nécessaires pour les sites web qui ne sont pas hébergés sur des plateformes telles que WordPress.com, Blogger, Joomla, etc.
De plus, ces 2 codes correctement intégrés dans votre code source sont valables tant pour vos résultats dans Google via desktop que dans Google Mobile avec le projet AMP.
Donc, vous pouvez commencer vos modifications dès maintenant après avoir fait une sauvegarde de votre code source actuel.
