Comment créer sa page AMP ?

Posted by

A partir du 1er Février 2016, Google déploiera sa technologie AMP dans ses résultats de recherche sur mobile. Avec pour objectif d’afficher rapidement les contenus mobiles lorsque les utilisateurs cliqueront sur les liens.

Voici le code AMP pour afficher votre contenu dans le carrousel de Google Mobile

C’est aussi dans cette optique que a actualisé son Guide pour le balisage des 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 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 , il y aura deux types de contenus mobiles :

  • Ceux provenant de sites web en responsive design qui sont hébergés sur une plateforme (.com, , Joomla, etc…)
  • Et ceux provenant de sites web en responsive design qui sont hébergés chez des prestataires indépendants.

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.

Titre de l’Article



body {
 background-color: white;
}
amp-img {
background-color: gray;
}

//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 600×60.

{
\ »@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\ »
}

 

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 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.

Titre Article

Nom Auteur

\ »URL Logo mentionnée dans le HEAD\ »>
\ »URL Logo mentionnée dans le HEAD\ »>

\ »Nom Société ou Editeur ou Marque\ »>

\ »URL image principale mentionnée dans le HEAD avec les bonnes tailles après\ » alt=\ »texte alternatif\ » height=\ »2000\ » width=\ »800\ »>
\ »URL image principale mentionnée dans le HEAD avec les bonnes tailles après\ »>

Votre contenu ici.