Comment configurer WordPress et AMP : Pages mobiles accélérées : Configurer Analytics, AdSense, Guide des médias sociaux en pièce jointe

Publié: 2016-09-25
guide-de-configuration-amp-et-wordpress-tout-en-un

Il y a eu beaucoup de buzz autour de Google AMP ces derniers jours. Google a officiellement annoncé la prise en charge des pages AMP dans le cadre de la page de recherche mobile. C'est vraiment intéressant. Jusqu'à présent, j'ai évité d'implémenter AMP sur Crunchify pour une raison quelconque et je n'en ai jamais ressenti l'importance.

Mais après avoir regardé le tweet de Barry, j'ai aussi décidé AMPlify Crunchify.

Vous cherchez des astuces AMP et wordpress ? Voulez-vous AMP Up votre site WordPress avec les pages mobiles accélérées de Google ? Ou voulez-vous installer AMP dans WordPress ? Dans ce tutoriel, nous passerons en revue les étapes sur la façon d'AMPlifier votre site WordPress avec toutes les étapes détaillées.

Qu'est-ce qu'une page mobile accélérée (AMP) ?

Le projet Accelerated Mobile Pages (AMP) est un projet open source créé en gardant à l'esprit la vitesse qui crée un contenu optimisé pour les mobiles une fois et le charge instantanément partout. Il n'y a aucun chargement de JavaScript sur la page. Il y a un chargement CSS très minime avec des restrictions strictes. Une des observations que j'ai remarquées est que vous ne pouvez même pas utiliser !important en CSS.

Vous avez l'une des questions ci-dessous ?

  • Google AMP : qu'est-ce que c'est et convient-il à votre site Web WordPress ?
  • Meilleure façon de configurer WordPress pour AMP
  • Comment démarrer avec les pages Google AMP et WordPress
  • Plugin wordpress accéléré pour les pages mobiles
  • Pages d'amplis WordPress
  • Yoast amp colle et requêtes wordpress

Commençons : activez AMP pour vos publications WordPress

Étape 1

Installez le plugin AMP officiel.

installer-official-amp-plugin-crunchify-tips
  • Une fois activé, vous êtes prêt. Vous ne verrez aucun menu d'options.
  • Vous devez aller dans le menu Settings -> Permalinks . Cliquez sur Save Changes sans apporter de modifications.

Le plugin AMP officiel fournit des fonctionnalités de base et tous vos messages seront automatiquement AMPlify. Vous pouvez visiter la version AMPlifiée de vos publications en ajoutant /amp/ à la fin de n'importe quelle URL de publication.

Jetez un oeil à l'exemple:

  • URL du message d' Original : https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/
  • URL de la publication AMPlify : https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/

Étape 2

Installez le plug-in Glue for Yoast SEO & AMP. À partir de la version 0.4 AMP WordPress version je crois que vous n'avez besoin d'aucun autre plugin lié à AMP.

À présent:

  • Allez dans Appearance -> AMP .
  • Indiquez la couleur de l'en- Header et de l' Background -plan et cliquez sur Save .
amp-wordpress-plugin-option-de-personnalisation

Étape 3

Le seul problème que je vois avec ce plugin est qu'il ajoute le lien Powered by WordPress en bas de la page. Pour le changer, vous pouvez modifier la page footer.php avec le code ci-dessous.

  • Allez dans Plugins -> Editor
  • Sélectionnez le plug-in AMP
  • Sélectionnez le fichier amp/templates/ footer.php
1
2
3
4
5
6
7
8
9
< footer class = "amp-wp-footer" >
< div >
< h2 > <?php echo esc_html ( $this - > get ( 'blog_name' ) ) ; ?> < / h2 >
< p >
Copyright < i class = "fa fa-copyright" aria - hidden = "true" > < / i > 2012 - 16 < a href = "https://crunchify.com" > Crunchify , LLC . < / a > &nbsp; • &nbsp; < a href = "https://crunchify.com/sitemap/" target = "_blank" > Archives < / a > &nbsp; • &nbsp; < a href = "https://crunchify.com/advertise/" target = "_blank" > Advertise < / a >
< / p >
< a href = "#top" class = "back-to-top" > <?php _e ( 'Back to top' , 'amp' ) ; ?> < / a >
< / div >
< / footer >

Modifiez le code de ligne de copyright selon vos besoins

crunchify-amp-footer-et-boutons-de-partage-social

Étape 4

Ajoutez des icônes Analytics et Social Media à vos pages AMP.

  1. La fonction crunchify_amp_add_analytics_social_ads_js ajoutera les analyses requises et le code javascript des médias sociaux à votre page amp.
  2. La fonction crunchify_amp_add_analytics_social_code ajoutera votre code d'analyse et vos icônes de médias sociaux.
  3. Assurez-vous de mettre à jour votre Google Analytics Universal tracking ID Facebook App ID ci-dessous.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// ~~~~~~~~~~~~~~~~~~~~~ AMP Changes Start ~~~~~~~~~~~~~~~~~~~
add_action ( 'amp_post_template_head' , 'crunchify_amp_add_analytics_social_ads_js' ) ;
function crunchify_amp_add_analytics_social_ads_js ( $ amp_template ) {
$ post_id = $ amp_template - > get ( 'post_id' ) ;
? >
<script async custom-element = "amp-analytics" src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js" > </script>
<script async custom-element = "amp-social-share" src = "https://cdn.ampproject.org/v0/amp-social-share-0.1.js" > </script>
<?php
}
add_action ( 'amp_post_template_footer' , 'crunchify_amp_add_analytics_social_code' ) ;
function crunchify_amp_add_analytics_social_code ( $amp_template ) {
     $post_id = $amp_template - > get ( 'post_id' ) ;
     ?>
< amp - analytics type = "googleanalytics" id = "analytics1" >
<script type = "application/json" >
{
   "vars" : {
"account" : "UA-43876549-1"      // Modify universal tracking ID
   } ,
   "triggers" : {
"trackPageview" : {
   "on" : "visible" ,
   "request" : "pageview"
}
   }
}
</script>
< / amp - analytics >
 
   // Social Media Code
   < div align = "center" >
     < amp - social - share type = "twitter"
         width = "30"
         height = "30" > < / amp - social - share >
     < amp - social - share type = "gplus"
         width = "30"
         height = "30" > < / amp - social - share >
     < amp - social - share type = "facebook"
         width = "30"
         height = "30"
         data - param - app_id = "509582389234904" > < / amp - social - share >    // Modify your App ID
   < / div >
     < ? php
}
// ~~~~~~~~~~~~~~~~~~~~~ AMP Changes End ~~~~~~~~~~~~~~~~~~~

Étape-5

Ajoutez le code Google Adsense à votre page AMP. Dans mon cas, je voulais ajouter un code Adsense 300x250 sous l'image en vedette. Il n'y a pas de crochet officiel disponible à utiliser, j'ai donc modifié le fichier single.php situé dans <AMP Plugin directory>/ amp/templates/single.php .

modifier-amp-plugins-single-php-file
  • Allez dans le menu des Plugins
  • Cliquez sur Editor
  • Choisissez le plug-in AMP
  • Aller au fichier single.php
  • Ajoutez le code Adsense comme indiqué dans l'extrait de code ci-dessous. Recherchez simplement look for line featured-image et ajoutez ensuite le code Adsense.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php $this - > load_parts ( array ( 'featured-image' ) ) ; ?>
 
// Adsense code START
< br > < div align = "center" >
< amp - ad width = 300 height = 250
type = "adsense"
data - ad - client = "ca-pub-xxxxxxxxxxxxxxxx"
data - ad - slot = "0110036438" >
< div placeholder > < / div >
< div fallback > < / div >
< / amp - ad >
< / div >
// Adsense code END
 
< div class = "amp-wp-article-content" >

Et vous êtes prêt. Nettoyez simplement le cache de votre site et consultez la page AMP en direct. Vous verrez toutes les icônes Google Analytics, Adsense et Social Media fonctionner correctement

Maintenant quoi?

Vérifions et vérifions votre page AMP pour tout problème. Allez sur https://validator.ampproject.org/ et vérifiez le résultat.

ampproject-validation-page-crunchify-conseils

Comment Google va-t-il explorer les pages de publication AMP ?

Maintenant que vous avez à la fois des versions AMP and non-AMP versions de vos pages, le plug-in AMP ajoutera automatiquement la balise méta de relation ci-dessous à vos deux pages.

Vérifiez ceci sur la page non-AMP

Vous devriez voir la référence de la version AMP de la page pour en informer Google et les autres plates-formes :

<link rel="amphtml" href="https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/">

rel-amphtml-html-tage-for-non-amp-page-crunchify-tips

Vérifiez ceci sur la page AMP

Vous devriez voir un texte faisant référence à sa version canonique non AMP :

<link rel="canonical" href="https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/">

rel-canonical-html-meta-tag-in-amp-page-crunchify-tips

Attendons maintenant quelques jours ou au moins une semaine et vous devriez voir les pages AMPlify dans Google Search Console. Pour moi, c'est juste 4 jours et je vois presque 500 pages déjà indexées pour le résultat AMP

guide-de-configuration-de-wordpress-et-amp-par-crunchify-stats

Comment vérifier le résultat en direct ?

Recherchez simplement une publication dans Google sur un navigateur mobile et vous devriez voir le AMP result dans la page de résultats de recherche.

crunchifys-amp-result-in-google-mobile-search-page

Continuez également à visiter cette page ou à la mettre en signet car je continuerai à mettre à jour ce didacticiel au fil du temps en fonction de mon apprentissage. Bon blog et aidez à accélérer le net.