Réparation et maintenance informatique PME et particulier
Professionnel depuis plus de dix ans à Brignoles
06.28.07.77.83 ou par E-mail
Après avoir fait le tri entre les plugins, les barbus qui souhaitent que l’on modifie le code source de WordPress et autre bidouilles qui fonctionnent seulement par vent d’est les soirs de pleine lune, voici mon retour pratique et succinct sur la mise en œuvre de pages AMP au travers de PCSoleil.fr. Mais avant quelques remarques.
AMP à quoi ça sert ?
Google and Co veulent rendre le Web mobile plus rapide, hors les sites sont devenus de véritables applications complexes avec menus animé, affichage conditionnel etc. Non seulement c’est trop lourd pour nos connexions « 3G « mobiles mais en plus une page web classique contient des encarts et menus trop grands pour être affichés sur un petit écran.
Le projet AMP pour WordPress créé une version light des articles:
Supprime les scripts JS non autorisés (script google Analytics, script de formulaire, etc.) et qui ne sont pas codés pour être chargé en mode différé
Modifie le code qui permet d’afficher les éléments multimédias (image, vidéo, audio) pour les charger là aussi en différé (lazy loading)
Image et cadres chargeant un ressource extérieure (Iframes): Une dimension fixe leur est imposée, ainsi le navigateur peut commencer à composer l’affichage textuel de l’article, en plaçant là où devra s’afficher les images des cadres vides, en attendant leur chargement complet
Supprime le CSS du thème WordPress au profit d’une feuille de style AMP très légère, intégrée directement à la page et non pas chargée via une URL. Cette méthode s’appel le CSS inline et permet de ne pas bloquer la composition de l’affichage provoquée par l’attente d’un script CSS externe. On élimine par là même la latence incompressible d’une la requête HTTP externe
Change la police d’affichage par défaut par une police Google Font très light à charger et non bloquante, c.-à-d. que le texte est affiché sans attendre le chargement de Google Font, utilisant pendant quelques millisecondes le style de police par défaut de votre ordinateur
D’autres mécanismes plus pointus sont mis en œuvre; mais en résumé, tout est fait pour donner priorité à l’affichage textuel et différer ou rendre non bloquant les autres ressources.
AMP quel bénéfice pour le Webmaster ?
Exemple avec mon site de réparation informatique PCsoleil.fr : Si un internaute surfant sur mobile cherche par exemple « changer connecteur électrique ASUS » la liste de résultat de recherche Google affichera en bonne place (sinon en 1er) une image miniature de mon article sur le sujet + un court descriptif, alors que les autres sites non compatibles AMP n’aurons droit qu’au lien textuel classique, soit le lien en bleu, descriptif en gris, URL en vert et.. en bas de la liste de recherche.
Cela dit mes articles n’apparaissent pas encore au format AMP dans les résultats de Google, il faut vraiment créer très régulièrement des articles, être un site de référence, être patient le temps que Google référence les articles au format AMP, et finalement décide ou pas d’après une alchimie algorithmique obscure de vous placer ainsi dans les résultats de recherche…
Remarque : Si vous ne créez pas d’article régulièrement pas la peine de rendre votre site compatible AMP ; google search ne listera pas vos pages en version AMP.
Sous WordPress comment on fait ?
Depuis l’interface d’administration de WordPress on va sur Extension, puis clic sur Ajouter et taper AMP. On installe l’extension AMP créé par Automattic. Rien à faire d’autre. Tous mes articles ont désormais leur version AMP.
Pour l’exemple je prends mon article https://www.pcsoleil.fr/reparation-du-connecteur-electrique-sur-acer-aspire-7738/
Voici sa version format AMP : https://www.pcsoleil.fr/reparation-du-connecteur-electrique-sur-acer-aspire-7738/amp/
Deux pages avec le même contenu ? Google ne va pas apprécier.. (Duplicate content)
En fait non car vous verrez dans le code source de la page en version AMP le script :
<link rel= »canonical » href= »https://www.pcsoleil.fr/reparation-du-connecteur-electrique-sur-acer-aspire-7738/ » />
Le terme canonical dit à Google que la page de référence (originelle) est : https://www.pcsoleil.fr/reparation-du-connecteur-electrique-sur-acer-aspire-7738/
Comment savoir si l’extension AMP a créé les pages avec la bonne structure HTML ?
En fait AMP-HTML, qui est dérivé du HTML5 car ce n’est pas du pure HTML.. Mais ce n’est pas la question. Comme je l’ai dit plus haut le plugin est censé avoir « mouliné » les pages classiques pour générer leur version AMP… Seulement nombre d’extensions WordPress interfèrent avec la bonne exécution de la chose. Je dois être certain que mes articles AMP sont conformes; le cas contraire Google n’indexera pas mes articles.
Je ne teste qu’un seul post au format AMP car je ne vois pas pourquoi les autres seraient invalides, il suffit que j’ouvre Google Chrome en mode Development Tool (CTRL+MAJ+I sous Google Chrome) et que dans la barre d’adresse je tape : https://www.pcsoleil.fr/reparation-du-connecteur-electrique-sur-acer-aspire-7738/amp/#development=1
Donc vous l’aurez compris ; l’URL de ma page AMP suivi de #development=1
Un tour dans le panneau latéral Development Tool; onglet Console, j’actualise la page (F5) : c’est bon ! le message AMP validation successful apparait (Par contre quelques erreurs sont listées plus bas mais sans rapport avec la validation AMP):
Me voilà avec mes articles au format AMP, pff.. Comment je les référence? j'installe extension Sitemap vu que WordPress n’en a pas par défaut?
Du tout car les pages classiques contiennent désormais un nouveau script visible dans leur code source qui indique aux moteurs d’indexation la page Web correspondante au format AMP ; pour mon exemple c’est : <link rel= »amphtml » href= »https://www.pcsoleil.fr/reparation-du-connecteur-electrique-sur-acer-aspire-7738/amp/ » />
Les pages AMP sont trop simplistes, comme les enrichir et les personnaliser?
Un tel format est hyper-rapide à charger ; mais quand même un peu vide ! Pas de logo de site, pas de menu principal, par de lien « articles similaires », exit le script JS de Google Analytics. C’est exactement ce que je vais rajouter avec l’extension Custom AMP de Lavmt :
Dans l’administration de WordPress > Extensions > Ajouter et chercher Custom AMP. Installer et activer l’extension en question. Là par contre il y a quelques réglages à effectuer depuis le panneau latéral de Wordpress > Custom AMP Panel :
Logo : de 32 pixels par 32 pixels. En fait le logo AMP sera vaguement circulaire, hors le logo de mon site est carré donc je modifie mon logo pour qui puisse tenir dans un cercle de 32 pixels de diamètre. Faites de même si vous ne voulez pas que votre logo soit rogné.
Metadata logo : Je dois créer une image censée représenter PCsoleil de 600 Pixels de large par 60 pixels de hauteur. Pas de soucis avec photofiltre version gratuite. J’y intègre mon logo, et le slogan de mon site Web, etc…
Do You Want to show related Post ? : Je coche oui; ainsi l’internaute verra en bas des articles au format AMP la liste des articles similaires ; comme pour mes articles au format « classique ». Comment Custom AMP sait que tel ou tel article est similaire ? En vérifiant quelles étiquettes (Tag) sont liées à l’article en cours de lecture. EDIT : J’avais peur que les liens des articles similaires mènent à leur version classique mais non..
Show Menu : Les pages de type AMP sont vraiment épurées… Par défaut il n’y a pas de menu principal, j’aimerais quand même qu’il y en ait un mais pour ne pas dévoyer à la nature du format AMP je ne mettrais qu’un seul élément dans ce menu : Ma page contact. Un visiteur sur mobile pourra ainsi me contacter plus facilement s’il souhaite un devis ou poser des questions via mon formulaire.
Je créé un menu de pied de page depuis l’interface de WordPress > Apparence > Menus: C’est une bidouille car même s’il s’agit d’un menu Footer, il sera affiché en haut de page sur les articles au format AMP et dans le pied de page sur les pages classiques (donc pas trop gênant).
A noter que ce menu apparaîtra sur les pages AMP au format dit « sandwich » avec 3 barres horizontales superposées en haut à droite des pages:
Google Analytic Code : De temps en temps je vais sur mon compte Google Analytics pour vérifier l’audience Web de PCsoleil.fr, l’extension Custom AMP me permet dans cette section de renseigner mon ID de suivi que je retrouve dans mon compte Google Analytics > Admin > Paramètre de la propriété:
La (mauvaise) surprise : Il manque les Structured Data ! Comment y remédier ?
Les pages au format AMP sont prêtes, et j’apprends alors que Google ne les considérera que si elles contiennent les Structured Data requises. Pour Google les Structured Data sont des infos utiles et précisément formatées, incluses dans le code source (date de création de l’article, site référent, nom de l’auteur, image principale d’illustration etc..). Plus de détail ici: https://developers.google.com/structured-data/carousels/top-stories?hl=fr#specification_du_balisage.
OK : je me dis que ces données sont sûrement présentent dans mes articles format AMP, je lance dont la vérification d’un article, ici encore https://www.pcsoleil.fr/reparation-du-connecteur-electrique-sur-acer-aspire-7738/amp/ depuis la page de validation des données structurées de Google : https://developers.google.com/structured-data/testing-tool/ .
Et surprise : 40 erreurs de structure empêchent Google de lister mon sujet à la sauce AMP ! Donc pas de joli lien article/imagette bien placée dans les résultats de Google n’est à espérer:
Me voici à la recherche d’un énième plugin WordPress qui puisse ajouter automatiquement à tous mes articles les Structured Data. Après moult forums et avis je choisis l’extension Schéma App Structured Data. Là aussi RDV Dans l’interface WordPress, puis Extension>Ajouter et taper Schéma App Structured Data.
(NB: Je m’inquiète aussi du poids des pages car mine de rien j’ai rajouté 3 plugins spécial AMP ; mais un coup d’œil dans le code source de mes pages me prouve qu’il n’y a pas d’impact).
Les réglages de l’extension, depuis l’interface WordPress > Réglages >Schema App ; Seulement 3 paramétrages :
- Publisher Type : Je mets Organization car PCsoleil Informatique est une micro-entreprise
- Publisher Name : Mon pseudo d’auteur, donc stepmond
- Publisher Logo : Alors ici le réglage fait doublon avec celui du plugin Custom AMP Panel qui permet de choisir le « Metadata Logo » ; un nom différent pour la même chose ! Pas le choix, je renseigne la même image que celle choisie pour le Metadata Logo de Custom AMP Panel
3 Structured Data à renseigner manuellement.. Comment le plugin Schema App Structured fait pour trouver les autres Data et les intégrer aux articles ? (date de publication, titre, etc…) Il va les chercher dans la base de données. La preuve ici après installation du plugin lorsque je réexamine la page:
D’ailleurs par curiosité voici la portion de code que ce plugin rajoute à ma page AMP d’exemple (visible dans le code source) :
<script type= »application/ld+json »>{« @context »: »http:\/\/schema.org », »@type »: »NewsArticle », »mainEntityOfPage »: »http:\/\/www.pcsoleil.fr\/reparation-du-connecteur-electrique-sur-acer-aspire-7738\/ », »publisher »:{« @type »: »Organization », »name »: »PCsoleil Informatique », »logo »:{« @type »: »ImageObject », »url »: »http:\/\/www.pcsoleil.fr\/wp-content\/uploads\/2016\/05\/publisher-logo-AMP-600X60.png », »height »:60, »width »:600}}, »headline »: »R\u00e9paration du connecteur \u00e9lectrique sur ACER Aspire 7738″, »datePublished »: »2015-06-21T18:50:38+00:00″, »dateModified »: »2015-06-21T18:54:03+00:00″, »author »:{« @type »: »Person », »name »: »stepmond »}, »image »:{« @type »: »ImageObject », »url »: »http:\/\/www.pcsoleil.fr\/wp-content\/uploads\/2015\/06\/13.jpg », »width »:1024, »height »:708}}</script>
Est-ce que Google a bel et bien référencé mes pages AMP ?
Deux jours après la mise en place, 40 pages de mon site ont été référencées par google et au jour d’aujourd’hui le 13 MAi 2016; toutes. Je peut vérifier sur mon compte Google Search Console (anciennement Google Webmaster Tools) Menu Apparence dans les résultats de recherche> Accelerated Mobile Page. L’interface liste aussi toutes les pages non conformes:
