Page d'accueil » Codage » Comment valider les pages mobiles accélérées (AMP)

    Comment valider les pages mobiles accélérées (AMP)

    Dans notre dernier didacticiel AMP, nous vous avons montré comment adopter AMP (Accelerated Mobile Pages) pour obtenir un gain de vitesse significatif et une meilleure visibilité des résultats de recherche pour mobile de Google sur votre site Web dans l'environnement mobile..

    Avoir vu AMPLe potentiel de, je suppose que vous pourriez avoir commencé ou avez l'intention de commencer à modifier vos sites Web pour se conformer AMP. Suivez attentivement les instructions sur les documents et composez votre code CSS pour personnaliser les pages AMP en fonction de votre appétit visuel..

    Maintenant, il reste une dernière chose à faire: valider ces pages.

    Validateurs AMP

    Il existe plusieurs façons de valider vos pages AMP:

    1. Ajouter dans le # développement = 1 trace à la fin de l'URL de la page AMP. Le rapport sera projeté dans le Console onglet sous DevTools.
    2. Sinon, vous pouvez utiliser le validateur AMP en ligne.
    3. Vous pouvez également utiliser l'extension Chrome AMP.

    Ces outils produiront un rapport répertoriant les erreurs ou les avertissements dans les pages. Sur cette base, vous pouvez choisir quoi réparer..

    Rapport d'erreur AMP dans la console DevTools.

    La validation AMP régit principalement l'utilisation d'éléments HTML, la s, et le déclarations de style. Assurez-vous que tous les éléments de la page sont conformes à la norme AMP et que rien ne viole les consignes AMP. Sinon, votre page AMP n'apparaîtra nulle part.

    Structure de données

    AMP nécessite également la structure de données Schema. Ces données sont présentées dans le tête balise de la page au format JSON. Il contient des informations contextuelles sur la page, notamment le titre, le logo et le nom de l'éditeur, la date de publication et de modification, etc..

    Selon le but de la page, les données à inclure peuvent varier: articles, critiques, recettes, vidéos, etc. Vous pouvez vous reporter à la documentation de Google Data Types pour plus de détails sur le type de données..

    Certaines données sont nécessaires pour générer des erreurs si elles ne sont pas fournies. quelques autres types de données sont facultatifs et ne produiront que des avertissements. Ce type d'erreur n'apparaîtra cependant pas dans les validateurs AMP susmentionnés..

    Au lieu de cela, ils apparaîtront dans l'outil de test de données structurées Google ainsi que dans votre compte Google Webmasters..

    Les consommateurs AMP ou un client prenant en charge AMP, tel que Google Search et Twitter Moments, peuvent utiliser cet ensemble de données pour présenter le contenu AMP dans leur page de résultats..

    Carrousel AMP dans Google SERP

    Donc, en plus de suivre les directives AMP avec leurs éléments HTML personnalisés, les données de schéma requises doivent également être en place..

    Erreurs négligées

    La plupart des erreurs sont notées explicitement dans la documentation et peuvent être facilement détectées en un clin d'œil. Quelques erreurs cependant sont contextualisées avec des variables que nous pourrions ne pas remarquer, telles que “Valeur d'attribut invalide”, qui dit "L'attribut '% 1' de la balise '% 2' est défini sur la valeur non valide '% 3'.".

    Ce rapport d'erreur ne mentionne pas ou ne liste pas avec précision quelle valeur est invalide . Mais ce que je sais, c'est que nous ne pouvons pas définir la largeur et le la taille de élément à 100% ou auto. Ces valeurs d'attribut doivent correspondre à la taille exacte de l'image pour préserver le rapport d'image..

    Ceci n'est qu'un exemple. Il y a un certain nombre d'éléments personnalisés - amp-img, amp-iframe, et amp-annonces - avec leurs propres ensembles de règles de validation contre l'utilisation d'un attribut et sa valeur.

    Cela pourrait rendre la validation de AMP Page une tâche ardue, surtout si nous prenons en compte des centaines voire des milliers de contenus existants publiés il y a plusieurs années..

    Pensée finale

    L'AMP en est encore à ses débuts. Il est en développement très actif grâce aux efforts communs de Google et de la communauté de développement Web. Mais AMP va certainement évoluer. Semblable à HTML5, il peut y avoir des éléments, des attributs et des pratiques qui seront obsolètes à l’avenir. Alors assurez-vous que vos pages AMP sont constamment validées de temps en temps sur la base des dernières modifications apportées aux directives.