Installer AMP dans WordPress

Ce que vous allez créer

Qu'est-ce que c'est AMP??

En octobre dernier, Google a annoncé qu'AMP était une initiative à code source ouvert visant à permettre une navigation plus rapide sur le Web mobile. Comme décrit par TechCrunch, nombreux sont ceux qui voient AMP comme une tentative de Google de mieux concurrencer les articles instantanés et les applications mobiles de Facebook, qui offrent de plus en plus une navigation plus rapide et plus rationnelle. J'ai tendance à être d'accord.

Les pages optimisées avec AMP apparaîtront dans un carrousel de navigation mobile en haut des résultats de recherche Google, reléguant les articles HTML classiques au bas de la page. Et ils vont charger presque instantanément.

Honnêtement, je suis sceptique quant à AMP pour les blogueurs et les petits éditeurs. Nous écrivons souvent un excellent contenu qui peine à atteindre le sommet des résultats de recherche Google. Nous devons maintenant mettre en œuvre une autre technologie sur nos ressources limitées dans l’espoir que notre contenu apparaisse au sommet. Fait intéressant, bien que de grands éditeurs de médias apparaissent, je ne vois pas de messages de blog dans les résultats de recherche AMP, pas plus que les autres blogueurs de WordPress: 

Je soupçonne également que l'expérience utilisateur d'enterrer d'autres résultats de recherche sous le carrousel fonctionnera bien pour Google..

Lorsque je travaillais chez Microsoft, j’ai participé au lancement de MSN News en 1995 dans le cadre du réseau MSN Online, lancé avec Windows 95, la réponse de Microsoft à AOL. MSN News nécessitait un visualiseur d’applications personnalisé fonctionnant sous une version de la plate-forme Media Viewer de Microsoft, le framework qui avait permis leurs efforts de contenu de CD précédents. Mais en un an, nous avons dû nous préparer pour le Web et notre fusion avec NBC est devenue plus tard MSNBC.com. Nous avons dû personnaliser notre structure de publication pour générer simultanément Media View et HTML. Cela a créé un certain nombre de nouvelles complexités. 

AMP me rappelle tous ces efforts. Il s’agit d’une version extrêmement différente et extrêmement contrainte du code HTML, qui nécessite d’importants changements à votre site et à toutes les publicités que vous utilisez..

Le plugin WordPress AMP gratuit

La bonne nouvelle est que WordPress a lancé un plugin gratuit AMP qui vous aide à implémenter AMP sans beaucoup de développement supplémentaire. Cependant, il a beaucoup de limitations. La conception de votre site est fortement contrainte et il existe des conflits avec d'autres plugins WordPress, des techniques d'optimisation communes, etc. AMP deviendra également un fardeau supplémentaire pour les développeurs de thèmes WordPress.

AMP en est à ses balbutiements et je suis déçu que Google ait choisi de créer un cadre entièrement nouveau plutôt que de travailler avec les éditeurs pour optimiser HTML5 afin de configurer plus rapidement le chargement des pages, le chargement initial et la mise en forme rapide du texte. Cela aurait été une approche plus éclairée. Mais alors, les équipes de Google sont des génies.

Malgré mes inquiétudes, dans ce tutoriel, je vous expliquerai comment installer le plug-in AMP pour WordPress et le plug-in Yoast SEO Glue for AMP, ce qui vous donne un peu plus de contrôle sur l'apparence finale de votre site..

Qu'est-ce que AMP ressemble sur WordPress?

Voici un exemple de page AMP comparée à la page HTML d'origine. Vous pouvez les parcourir dynamiquement, ici pour l'original et ici pour la version AMP. Certes, le chargement de page est beaucoup plus rapide avec AMP.

Image de la page originale HTML5 à JeffReifman.com:

La balise de lien suivante est ajoutée à chaque page du block, indiquant aux moteurs de recherche qu'une version AMP de la page est disponible.

 

Mais il existe également un lien canonique définissant l'URL de la page source pour la liaison:

Image de la page AMP à JeffReifman.com:

Les menus et la navigation ont disparu et la stratégie de marque a en grande partie disparu (bien qu'il existe certaines options), mais la page se charge rapidement..

Laissez-moi vous expliquer comment activer AMP avec WordPress.

Le plugin WordPress AMP

Vous pouvez étudier et télécharger le plugin AMP WordPress à partir du répertoire du plugin WordPress. Ou, vous pouvez rechercher et installer directement à partir de votre tableau de bord WordPress.

Il suffit d'aller à Plugins> Ajouter un nouveau et rechercher AMP. Puis clique Installer maintenant:

Une fois installé, cliquez sur Activer:

Une fois activé, il suffit de visiter n’importe quel article de votre blog WordPress avec le / amp / extension. Par exemple, la publication Fraude Made Easy d'Amazon Marketplace est l'un de mes résultats de recherche Google les plus populaires. Voici à quoi cela ressemble quand vous visitez la version AMP à l'adresse http://jeffreifman.com/2014/03/25/amazon-makes-fraud-easy-in-marketplace/amp/:

La colle pour Yoast SEO & AMP Plugin

Le plugin AMP générique de WordPress offre peu de personnalisations. Les gens de Yoast SEO ont créé un add-on pour leur plugin populaire qui améliore encore le support AMP..

Vous pouvez consulter le plug-in Glue for Yoast SEO & AMP ou l'installer via le tableau de bord WordPress, comme nous l'avons fait précédemment pour le plug-in AMP. Une fois activé, il devrait ressembler à ceci:

Remarque: Assurez-vous d'avoir le Yoast WordPress SEO plugin installé en premier.

Vous pouvez modifier vos paramètres AMP via la barre de menus de la barre latérale Yoast SEO. AMP au bas du menu:

Vous verrez les différentes manières dont le plugin Glue vous permet d’améliorer votre implémentation AMP..

Tout d'abord, Yoast vous permet d'étendre la fonctionnalité AMP aux pages et aux autres types de page WordPress. Par défaut, AMP ne modifie que les messages urgents. Il est principalement conçu pour les articles de presse:

Remarque: Si vous voyez des pages vierges sous les onglets, veillez à mettre à jour le plug-in Yoast SEO d'origine, ce qui devrait résoudre le problème..

Deuxièmement, Yoast offre quelques moyens utiles pour personnaliser la stratégie de marque, le design et les couleurs:

Enfin, ils offrent un moyen de placer du code analytique de type AMP personnalisé. Ce n'est pas aussi simple qu'il y paraît. Notez le code que j'ai dû coller ci-dessous pour le faire fonctionner:

J'ai trouvé la version AMP pour implémenter Google Analytics ici; personnalisez simplement votre code de compte pour votre site Web:

   

Je suis sûr que Yoast continuera à mettre à jour son plugin Glue au fur et à mesure du développement de la fonctionnalité du plugin AMP..

Dans l’ensemble, c’est assez simple de commencer. Mais ce n'est pas.

Débogage des erreurs AMP

Quelques jours après avoir installé AMP, j'ai reçu un email amical de la part de la console de recherche Google, qui signalait 10 pages d'erreur. Mais en réalité, chaque post AMP sur mon site était cassé.

Je me suis connecté à Google Search Console pour parcourir les pages contenant des erreurs et j'ai constaté ceci:

J'ai cliqué sur l'une des pages:

Ensuite, j'ai cliqué Ouvrir la page et regardé les erreurs plus en détail. Essentiellement, vous pouvez le faire manuellement en ajoutant / amp # development = 1 à l'URL, par exemple: http://jeffreifman.com/2014/02/24/how-to-secure-your-mac-from-potential-theft/amp/#development=1. Ensuite, ouvrez la console JavaScript dans votre navigateur:

Il s'avère que toutes les pages de mon site Web activées pour AMP sur JeffReifman.com se sont rompues à cause de l'erreur: La balise 'script' est interdite sauf dans des formes spécifiques. Cependant, sur PublishingwithWordPress.com, il n'y avait pas d'erreur:

Dans une série à venir chez Envato Tuts +, je décris comment j'ai réussi à personnaliser JeffReifman.com pour atteindre un Google PageSpeed ​​de 100. Cela nécessitait l'utilisation des fonctionnalités personnalisées de W3 Total Cache pour placer certaines fonctionnalités JavaScript réduites au bas de la page avant. . AMP ne le permet pas et le plugin WordPress AMP ne parvient pas à le filtrer..

J'ai besoin de faire plus de recherches pour déterminer si W3 Total Cache l'éteindra pour moi pour certains chemins tels que / amp / (peu probable) ou si je dois trouver une autre solution. Placer ces scripts dans va casser ma vitesse de page Google. Fait intéressant, j'ai aussi récemment découvert que l'utilisation de la publicité Google DFP sur mon site constituait un frein à Google Page Speed. Google est un moteur de recherche ambitieux, qui ne facilite pas l’utilisation simultanée de toutes ses technologies..

Je me demande ce qui est le plus important: le classement Google Page Speed, le support AMP, ou mon temps de développement et de débogage.

En clôture

Franchement, je ne suis pas sûr que les pages AMP de votre blog voient le jour au début de la recherche, pas plus que je ne suis sûr que vous gagnerez beaucoup de revenus avec elles sans personnalisation supplémentaire. Google semble personnaliser AMP pour les principaux éditeurs de médias avec les ressources nécessaires pour optimiser les affichages en termes de marque, d'esthétique et de revenus.. 

AMP est essentiellement le chemin d'un site Web optimisé d'une valeur discutable pour la communauté des logiciels libres, alors que les Instant Articles de Facebook sont destinés à l'élite choisie du "grand" jardin muré. Je préférerais de loin avoir vu Google créer un modèle de chargement hiérarchisé dans HTML5 avec les scripts correspondants.

Pour moi, le format AMP rend tout simplement plus difficile la pertinence des petits éditeurs. Je suis heureux que WordPress poursuive ses efforts pour aider, et je suis sûr que les concepteurs de thèmes le feront aussi, mais de nombreuses lacunes subsistent. Je pense que Google a manqué le but d'aider vraiment tout le monde, sauf les plus grands éditeurs Web, ici..

Liens connexes

  • FAQ de la documentation de projet AMP
  • Le plugin WordPress AMP
  • La colle pour le plugin Yoast SEO AMP
  • Présentation du projet de pages mobiles accélérées, pour un site Web mobile plus ouvert et plus ouvert (Google Blog)
  • Google annonce un projet de pages mobiles accélérées pour vous permettre de charger rapidement des articles (TechCrunch)
  • Facebook démarre l'hébergement des «articles instantanés» des éditeurs (TechCrunch)