Comment utiliser AMP avec WordPress

Points de base

• Les pages mobiles accélérées Google (AMP) sont un outil clé pour améliorer la vitesse du site Web et l'expérience utilisateur sur les appareils mobiles sans affecter les revenus publicitaires.
• AMP peut améliorer les classements SEO car Google considère le chargement de la vitesse lors du classement des sites Web. Si les pages AMP ont des taux de clics plus élevés et des taux de rebond plus élevés en raison d'une charge plus rapide, ils se classeront plus.
• Pour implémenter AMP, les développeurs doivent créer deux versions de la page Web: une version originale pour les utilisateurs de bureau et une version AMP pour les utilisateurs mobiles. L'AMP n'autorise pas les éléments de formulaire et JavaScript tiers, de sorte que certaines fonctionnalités peuvent ne pas être disponibles pour les versions AMP, telles que les formulaires de contact ou les commentaires en page.
• Google Analytics peut être intégré à AMP pour suivre les performances du site Web. Pour empêcher plusieurs trackers d'analyse de provoquer des baisses de vitesse, Google utilise le principe de "une mesure, plusieurs rapports".
• Le plugin AMP officiel développé à l'aide de Automatic / WordPress peut facilement intégrer AMP dans les sites Web WordPress. Cependant, assurez-vous de vérifier chaque page et de modifier le plugin pour garantir le schéma correct et l'intégration Google Analytics.

Le projet Google Accelerated Mobile Pages (AMP) a été lancé le 24 février 2016. Avec ce lancement, des milliers de développeurs sont devenus des participants actifs au projet. D'innombrables sites Web ont désormais des pages de version AMP, et de nombreux développeurs apprennent à utiliser AMP - dans ce cas, apprenez à utiliser AMP dans WordPress.

Google attache une grande importance à l'ampli. C'est également l'un de leurs critères de classement des moteurs de recherche. De cette façon, Google fait de l'ampli une nécessité pour de nombreux sites Web. Dans cet article, je vous fournirai des informations détaillées sur le projet de page mobile accéléré de Google. Cela comprend les étapes pour l'appeler dans votre site WordPress.

Qu'est-ce que l'ampli?

Certains développeurs peuvent ne pas être familiers avec AMP. Il s'agit d'un framework adapté aux mobiles qui charge rapidement vos pages Web sur un navigateur mobile. Il s'agit d'une technologie open source conçue pour permettre aux éditeurs de sites Web d'améliorer efficacement la vitesse et l'expérience utilisateur du chargement des pages de contenu sur les appareils mobiles. Toutes ces améliorations n'affecteront pas les revenus publicitaires.

Si vous êtes un développeur expérimenté, vous pouvez obtenir des améliorations similaires avec des optimisations complètes de chargement de pages. Cependant, l'accélération des pages mobiles rend ces optimisations très faciles à effectuer sans dépenser trop de temps et d'efforts sur les dispositions mobiles.

Pour les sites qui ont redoublé leur classement SEO, cela ajoutera certainement plus de tâches sur leur liste de tâches, car la page AMP peut également améliorer les classements SEO de votre site Web. Cela peut être la principale raison pour laquelle les grandes entreprises adoptent également l'ampli.

Projet AMP

AMP contient trois composants principaux:

• ampli html
• ampli js
• AMP CACHE

ampli html

Il s'agit d'un sous-ensemble de HTML avec de nombreuses limitations, des balises personnalisées et des propriétés personnalisées. Si vous connaissez déjà HTML, il n'est pas compliqué de s'y adapter. Cependant, si vous trouvez des difficultés, je vous recommande de visiter ce lien pour en savoir plus sur la façon de créer votre page HTML AMP.

ampli js

AMP fournit un nombre limité de JavaScript pour les pages Web mobiles. Maintenant, une chose importante à retenir sur JS dans AMP est que l'AMP ne permet pas JavaScript tiers.

AMP CACHE

Google AMP Cache est un CDN utilisé pour fournir des pages AMP. Vous connaissez tous les principales fonctionnalités du réseau de livraison de contenu - ils distribuent des ressources aux serveurs plus proches des téléspectateurs de votre site Web. Pour les pages AMP, ce CDN permettra un temps de chargement minimum en raison de retards de distance possibles.

La corrélation du logo AMP sur le référencement

En 2016, lorsque Google a lancé AMP, Adage.com a publié une interview avec Richard Gingras, directrice principale de Google News and Social Products. Dans cette interview, il a déclaré que l'utilisation de l'AMP ne sera pas directement liée à votre classement de recherche car ce n'est pas un facteur direct. Il a ensuite ajouté: "Tous les autres signaux de classement des moteurs de recherche doivent également être satisfaits."

Cependant, après cette clarification, tout est devenu plus clair. Il a dit: "Si nous avons deux articles, d'un point de vue du signal, le même score sur toutes les autres caractéristiques (sauf la vitesse), alors oui, nous allons nous concentrer sur le plus rapide, car c'est l'utilisateur de découvrir quelque chose d'œil -crassement.

Même Google ne nie pas la pertinence des sites Web AMP pour le référencement. La vitesse est toujours un facteur d'influence dans l'optimisation des moteurs de recherche. Si les pages AMP obtiennent plus de clics et des taux de rebond plus bas en raison d'un chargement plus rapide, Google classera sûrement le site Web plus haut pour une meilleure expérience utilisateur.

Comment amplifier votre site Web?

Vous devez maintenir deux versions de la page de l'article sur le site Web. Page d'article d'origine, pour les utilisateurs Web par défaut et la version AMP, pour les utilisateurs mobiles potentiels.

Notez également que l'AMP n'autorise pas les éléments de forme et JavaScript tiers. Cela signifie que vous ne pouvez pas mettre des formulaires de contact ou des commentaires en page dans l'implémentation standard, car AMP est principalement utilisé pour la livraison de contenu.

• Je recommande de réécrire l'intégralité du modèle de site Web pour gérer ces limitations. Par exemple, le CSS d'une page AMP doit être incliné avec une taille de page inférieure à 50 Ko. De plus, en raison du chargement rapide des polices, ils doivent être chargés à l'aide de l'extension AMP-FONT afin de charger la page efficacement.
• Il est recommandé que le multimédia soit manipulé avec prudence. Pour les images, vous devez utiliser cet élément avec la largeur et la hauteur exactes. De plus, si votre image est un GIF, vous devez utiliser un composant d'extension AMP-ANIM distinct.
• Pour les vidéos, il existe deux options. Il existe une balise personnalisée pour intégrer des vidéos, appelé AMP-video. Cependant, si vous souhaitez intégrer des vidéos YouTube, vous avez une balise spécifique appelée amp-youtube.
• Pour les lames intégrées, vous pouvez utiliser un carrousel AMP. En dehors de cela, si vous souhaitez ajouter une image Lightbox, vous pouvez utiliser Amp-Image-Lightbox.
• Pour les plateformes de médias sociaux intégrées telles que Twitter, Facebook, Instagram, Pinterest et Vine, vous pouvez utiliser chaque composant correspondant.
• C'est très important. Maintenant, une fois que tout est configuré, vous pouvez utiliser votre page AMP et vous devez informer Google de votre site Web AMP. Vous devez ajouter une balise sur votre page AMP à votre page principale et une balise canonique sur votre page principale sur la page AMP.
Vous pouvez en savoir plus sur les balises AMP et les métadonnées Schema.org ici. Les métadonnées Schema.org "sont une exigence pour qualifier votre contenu pour apparaître dans Google Search News Carousel Demos". Donc, si vous voulez réussir avec Google AMP, vous devez configurer correctement votre schéma.

Google Analytics est-il adapté à AMP?

Oui, bien sûr, l'analyse fonctionne pour AMP. En fait, l'analyse sur AMP est également intelligente. Pour empêcher les sites Web de ralentir en raison de plusieurs trackers d'analyse, ils sont basés sur la philosophie principale de «une mesure, plusieurs rapports». Généralement, il existe deux façons d'activer l'analyse pour AMP sur votre site Web.

Élément AMP-Pixel: il s'agit d'une balise simple qui peut utiliser les demandes Get pour calculer les vues de pages (similaire au suivi des pixels).

• Composant d'extension AMP-ANAYLTICS: Ce composant est plus avancé que AMP-Pixel. Vous pouvez l'utiliser pour mesurer toute activité sur votre page AMP. Il vous permet de spécifier une configuration JSON qui fournit des informations détaillées sur ce qu'il faut mesurer et où le rapport est envoyé.

Comment utiliser AMP sur un site Web WordPress?

En fait, l'une des façons les plus simples d'utiliser AMP est de la mettre en œuvre sur votre site Web WordPress. Vous pouvez utiliser le plug-in officiel développé par Automattic / WordPress.

Étape 1: Installez le plugin WordPress

Commençons à installer! Téléchargez le plugin à partir du lien ci-dessus et installez le plugin sur votre site Web WordPress. Après l'installation, il vous suffit de joindre "/ amp /" à la page de l'article. Si vous n'activez pas un joli permalien, vous pouvez essayer? AMP = 1.

Étape 2: Vérifiez et ajustez

La console de recherche Google obtiendra la version AMP de la page de l'article de la balise Meta, qui sera jointe par le plugin. Cependant, le problème est qu'il faut généralement plusieurs jours pour détecter de tels changements.

Alors, que dois-je faire maintenant? Pour gérer ces situations délicates, je recommande d'utiliser une combinaison de processus de vérification chromée et de console de recherche. Pour utiliser le processus de vérification Chrome, veuillez visiter l'une de vos pages d'ampli dans Chrome. Puis appelez # Development = 1 à la fin de l'URL. Maintenant, appuyez sur Control Shift I pour ouvrir les outils de développeur Chrome.

Actualiser la page et il affichera "la vérification de l'ampli réussie" ou fournira une liste détaillée de problèmes qui doivent être résolus.

Vous pouvez voir que l'installation de plugins ne suffit pas. Vous devez vérifier chaque données en accédant à la page et en répétant les étapes ci-dessus pour bénéficier de l'accélération des pages mobiles.

Étape 3: Vérifiez la balise de schéma

Vous avez appris que la vérification des balises de schéma est essentielle pour votre page AMP. Je recommande d'utiliser l'outil de test de données structuré de Google pour tester si votre page a une balise de schéma valide. Cependant, j'ai constaté que WordPress a des problèmes avec l'affichage du logo. J'ai donc apporté quelques modifications pour surmonter cela.

Accédez au plug-in, cliquez sur l'éditeur et sélectionnez AMP. Modifiez ces lignes dans l'éditeur pour modifier le plugin.

<code>if ( $site_icon_url ) {
  $metadata['publisher']['logo'] = array(
    '@type' => 'ImageObject',
    'url' => $site_icon_url,
    'height' => self::SITE_ICON_SIZE,
    'width' => self::SITE_ICON_SIZE,
  );
}</code>

à:

<code>$metadata['publisher']['logo'] = array(
  '@type' => 'ImageObject',
  'url' => 'http://yourdomain.com/wp-content/uploads/logo-company.png',
  'height' => 60,
  'width' => 170,
);</code>

Assurez-vous de spécifier l'emplacement du logo dans l'URL et spécifiez la hauteur et la largeur en conséquence.

Étape 4: Intégrez Google Analytics au plugin WordPress AMP.

Maintenant, vous avez presque terminé. Cependant, je préfère utiliser Google Analytics pour suivre les statistiques. Le plugin AMP WordPress n'active pas activement AMP-Analytics, mais il est très facile à exécuter.

pour permettre au plugin WordPress AMP de travailler avec Google Analytics, accédez aux plugins - & gt; éditeur - & gt; sélectionnez "amp" et ajoutez le code suivant à la fin.

<code>add_action( 'amp_post_template_head', 'amp_post_template_add_analytics_js' );
function amp_post_template_add_analytics_js( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    ?>
     async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">>
    <?php }

add_action( 'amp_post_template_footer', 'xyz_amp_add_analytics' );

function xyz_amp_add_analytics( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    ?>
    <amp-analytics> type="googleanalytics" id="analytics1"></amp-analytics>
     type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y"  ←(YOUR GOOGLE ANALYTICS PROPERTY ID)
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
    >
    >
    <?php }
</code>

Assurez-vous de modifier la valeur ua-xxxxx-y sur votre propre ID de propriété Google Analytics!

Après avoir effectué ce changement, vénérifiez votre page AMP et votre page AMP sera tracassable.

Conclusion sur Google AMP Project

Google espère que le projet AMP offrira aux utilisateurs une bonne expérience. Pourtant, la question est de savoir si AMP peut tout rendre très rapide. La réponse à cette question est assez ouverte. Si vous n'optimisez pas bien votre site Web, AMP apportera des améliorations significatives.

Cependant, accélérer les pages mobiles n'est pas une solutionnaire magique. La technologie pour améliorer la vitesse du site Web est fournie dès le départ. AMP essaie simplement de combiner et d'éliminer tous les principaux facteurs de chargement lents et de fournir aux utilisateurs de meilleures solutions.

Que pensez-vous des projets AMP? Veuillez partager vos opinions dans la section des commentaires ci-dessous!

FAQ sur l'utilisation de l'AMP dans WordPress (FAQ)

Quels sont les principaux avantages de l'utilisation de l'AMP et du WordPress?

Le principal avantage de l'utilisation de l'AMP (pages mobiles accélérés) avec WordPress est l'amélioration de l'expérience de navigation mobile. AMP est un projet soutenu par Google conçu pour faciliter le chargement des pages Web sur les appareils mobiles. Il le fait en rationalisant HTML et en utilisant une version mince de CSS. Il en résulte une augmentation significative de la vitesse de chargement des pages, ce qui peut augmenter l'engagement des utilisateurs, la rétention et améliorer le référencement mobile.

Comment AMP affecte-t-il le SEO?

AMP peut considérablement améliorer votre référencement car la vitesse de chargement des pages est un facteur de classement dans l'algorithme de Google. En facilitant le chargement de vos pages Web, AMP peut vous aider à améliorer votre visibilité dans les résultats des moteurs de recherche, en particulier parmi les utilisateurs mobiles. De plus, Google met généralement en évidence les pages AMP dans les carrousels mis en évidence dans les résultats de la recherche, offrant une visibilité supplémentaire.

Puis-je utiliser AMP sur mon site Web WordPress existant?

Oui, vous pouvez utiliser AMP sur votre site Web WordPress existant. Il existe plusieurs plugins disponibles qui peuvent vous aider à implémenter AMP sur votre site Web WordPress. Ces plugins aident à convertir vos messages et pages existants en versions compatibles AMP.

AMP affectera-t-il la fonctionnalité de mon site Web WordPress?

AMP limite certains éléments HTML, CSS et JavaScript pour assurer des temps de chargement de page rapides. Cela signifie que certaines fonctionnalités de votre site Web WordPress peuvent ne pas fonctionner comme prévu sur la version AMP de votre site Web. Cependant, la plupart des plugins AMP proposent des options qui peuvent être ajoutées aux fonctionnalités en se conformant toujours aux normes AMP.

Comment personnaliser l'apparence d'une page AMP?

CSS peut être utilisé pour personnaliser l'apparence des pages AMP. Cependant, puisque AMP restreint l'utilisation de certaines propriétés CSS pour garantir des temps de chargement de page rapides, vous voudrez peut-être utiliser une approche plus rationalisée pour le coiffer. Certains plugins AMP WordPress offrent des options de personnalisation intégrées.

Comment vérifier si mon implémentation AMP réussit?

Vous pouvez utiliser l'outil de test AMP fourni par Google pour vérifier si votre implémentation AMP est réussie. Cet outil analysera votre page AMP et rapportera toutes les erreurs qui pourraient l'empêcher d'être fournie en tant que page AMP dans les résultats de recherche Google.

Puis-je utiliser AMP sans utiliser de plugins dans WordPress?

Oui, vous pouvez implémenter AMP sans utiliser de plugins dans WordPress, mais cela nécessite une bonne compréhension du développement Web et des normes AMP. Vous devez créer manuellement une version compatible AMP distincte de vos messages et pages et ajouter manuellement les balises HTML AMP nécessaires.

AMP prend-il en charge la publicité et l'analyse?

Oui, AMP prend en charge la publicité et l'analyse. Cependant, comme AMP restreint certains éléments HTML, CSS et JavaScript, vous devrez peut-être utiliser des balises et des scripts spécifiques à l'AMP pour la publicité et l'analyse.

Puis-je désactiver l'ampli pour un message ou une page spécifique?

Oui, la plupart des plugins AMP WordPress proposent des options pour désactiver l'ampli pour un article ou une page spécifique. Ceci est très utile si vous avez quelque chose qui ne fonctionne pas bien avec les restrictions AMP.

AMP remplace-t-il la conception réactive?

Non, l'ampli ne remplace pas la conception réactive. Bien que l'AMP puisse améliorer l'expérience de navigation mobile en facilitant le chargement des pages, il ne remplace pas la nécessité de s'adapter aux conceptions de sites Web de différentes tailles d'écran. Il est préférable d'utiliser AMP en conjonction avec une conception réactive pour la meilleure expérience utilisateur mobile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!