Publié le 5 juin 2023 par Lucie Blanchard

Les deux ont permis aux éditeurs de créer du contenu qui se chargeait rapidement et était facile à consommer. Google a diffusé pour la première fois des pages AMP dans les résultats de recherche mobile en 2016. Et elles étaient limitées à une section « Top Stories » en haut des SERP. Comme ceci  : Il a été conçu à l’origine pour les éditeurs d’actualités. Mais s’est depuis élargi pour inclure tous les types de pages Web.

Comment fonctionne l’AMP ?

Le framework AMP se compose de trois composants de base  :

  • AMP HTML
  • JavaScript AMP
  • Cache AMP
  • AMP HTML

    AMP HTML est du HTML avec certaines restrictions pour garantir que les pages se chargent rapidement. Il supprime ou modifie certains éléments et attributs qui peuvent ralentir les pages Web. Un simple fichier HTML peut ressembler à ceci  : Fondamentalement, les documents AMP HTML doivent  :

  • Commencez par (pour envoyer des informations au navigateur sur le type de document à attendre)
  • Incluez une balise ou de niveau supérieur (pour indiquer qu’il s’agit d’une page HTML AMP)
  • Inclure les balises et (pour définir le contenu du document, c’est-à-dire les titres, les paragraphes, les images, les hyperliens, les tableaux, etc.)
  • Inclure un (pour indiquer la version HTML standard de la page ou pour créer un lien vers elle-même si aucune page standard n’existe)
  • Inclure une balise (pour spécifier l’encodage des caractères)
  • Inclure une balise (pour donner au navigateur des instructions sur la façon de contrôler les dimensions de la page)
  • Inclure une balise (pour ajouter des extensions à la bibliothèque de base)
  • Inclure le code passe-partout AMP (head > style[amp-boilerplate] et noscript > style[amp-boilerplate]) dans la balise head
  • JavaScript AMP

    JavaScript est délicat car trop de JS peut rendre les pages Web lentes et insensibles. Cependant, la bibliothèque JavaScript d’AMP contient des frameworks et des composants qui vous permettent de créer des pages rapidement sans écrire de JS ni importer de bibliothèques tierces. Tous ces éléments sont cruciaux pour l’expérience du lecteur.

    Cache AMP

    Par exemple « Ensuite, dirigez-vous vers le »Statistiques » dans votre tableau de bord et vous verrez une ligne indiquant « Liens AMP ». Comme ça :

    Quels sont les avantages et les limites des pages AMP ?

    Bien que AMP puisse améliorer les performances et l’expérience utilisateur de votre page, il présente également certains inconvénients. Examinons les avantages et les inconvénients des pages AMP  :

    Avantages CHA

  • Le chargement de la page est presque instantané
  • Les pages sont faciles à créer
  • Améliore l’expérience utilisateur sur mobile
  • Permet des conceptions personnalisées
  • Plusieurs plates-formes, y compris Google et Bing, le prennent en charge
  • Limites de l’AMP

  • Google n’affiche plus l’icône du badge AMP pour indiquer le contenu AMP
  • Les éléments de conception sont très limités
  • Les pages AMP n’autorisent qu’une seule balise publicitaire par page
  • Comment configurer AMP sur votre site Web

    Vous pouvez créer des pages AMP en suivant le balisage HTML ou en utilisant un CMS (via un plugin ou une fonctionnalité personnalisée).

    Créez votre page HTML AMP

    Code de basePour commencer, voici le balisage d’une page AMP de base  :

    Bonjour, les CHA

    pas (1, fin) 0s 1 normal les deux;-moz-animation :-amp-start 8s

  • /li>/li>/li>moz-animation :none;-ms-
  • Bonjour le monde AMP HTML  !

    Ajout d’images Si vous souhaitez ajouter une image, vous devez remplacer la balise HTML standard par l’équivalent AMP. Dans ce cas, la balise au lieu de Pour le tester, copiez et collez le code suivant dans le de votre page. Ajout de styleLa prochaine étape consiste à ajouter du style. Tout style doit être fait en utilisant les propriétés CSS. Mais, AMP stipule que tous les CSS doivent être inclus dans une balise personnalisée, appelée dans le du document. Par exemple, essayez d’ajouter le style suivant à votre page  :

    marge : 1rem ;

    couleur de fond  : vert ;

    Examiner et valider Une page AMP valide signifie qu’elle suit des directives strictes qui garantissent qu’elle est éligible pour la mise en cache et qu’elle crée une excellente expérience utilisateurPour un guide plus détaillé Et si vous débutez dans le développement Web

    Créez votre page AMP avec un CMS

    Si vous gérez votre contenu via un CMS, vous pouvez utiliser Drupal, Joomla ou WordPress. Par exemple, voyons à quoi cela ressemble en utilisant AMP pour WP. Après avoir activé le plugin sur WordPress, vous pouvez commencer à créer vos pages mobiles accélérées. Commencez par ajouter une nouvelle page ou un nouveau message. Cliquez ensuite sur « Démarrer le générateur de pages AMP. « Vous pouvez choisir d’utiliser des mises en page prédéfinies ou de créer les vôtres à l’aide d’éléments glisser-déposer. Cliquez ensuite sur l’icône d’engrenage pour modifier les éléments de votre page.Et enregistrez chaque module au fur et à mesure.Une fois la page publiée, vous verrez la version AMP de la page en ajoutant « amp » à la fin de l’URL de votre page.

    Surveillez et améliorez vos pages AMP

    L’un des meilleurs moyens de surveiller et d’améliorer vos pages AMP consiste à auditer périodiquement votre site. Cela vous aidera à garder une trace de tous les problèmes de HTML, de modèles, de style et de mise en page. Commencez par gérer votre site via notre outil d’audit de site. Conseil : Créez un compte Semrush gratuit et explorez jusqu’à 100 URL de n’importe quel domaine, sous-domaine ou sous-dossier.Statistiquesonglet « . Vous verrez des problèmes dans la ligne intitulée « Liens AMP ». L’outil vérifie plus de 40 des erreurs les plus courantes liées aux pages AMP. Et vous explique comment les réparer. Résolvez tout problème dès que possible. Ils peuvent affecter la manière dont les moteurs de recherche proposent votre contenu aux internautes.

    Categories: SEO

    Lucie Blanchard

    Lucie Blanchard

    S’abonner
    Notification pour
    guest

    Commentaires
    Commentaires en ligne
    Afficher tous les commentaires
    0
    Nous aimerions avoir votre avis, veuillez laisser un commentaire.x