• Homepage
  • Articoli
  • Generale
  • Come configurare WordPress e AMP: pagine mobili accelerate: analisi di configurazione, AdSense, guida ai social media in allegato

Come configurare WordPress e AMP: pagine mobili accelerate: analisi di configurazione, AdSense, guida ai social media in allegato

Pubblicato: 2016-09-25
setup-amp-e-wordpress-tutto-in-uno-guida

C'è stato un sacco di buzz su Google AMP negli ultimi giorni. Google ha annunciato ufficialmente il supporto delle pagine AMP come parte della pagina Ricerca mobile. È davvero interessante. Finora ho evitato di implementare AMP su Crunchify per qualche motivo e non ne ho mai sentito alcuna importanza.

Ma dopo aver visto il tweet di Barry ho deciso anche di AMPlify Crunchify.

Stai cercando suggerimenti AMP e wordpress? Vuoi ampliare il tuo sito WordPress con le pagine mobili accelerate di Google? O vuoi installare AMP in WordPress? In questo tutorial esamineremo i passaggi su come AMPlificare il tuo sito WordPress con tutti i passaggi dettagliati.

Che cos'è un AMP (Accelerated Mobile Pages)?

Il progetto Accelerated Mobile Pages (AMP) è un progetto open source creato tenendo presente la velocità che crea contenuti ottimizzati per dispositivi mobili una volta e li carica istantaneamente ovunque. Non c'è alcun caricamento JavaScript nella pagina. C'è un caricamento CSS molto minimo con restrizioni rigorose. Una delle osservazioni che ho notato che non puoi nemmeno usare !important nei CSS.

Hai una delle seguenti domande?

  • Google AMP: cos'è ed è giusto per il tuo sito Web WordPress
  • Il modo migliore per configurare WordPress per AMP
  • Come iniziare con le pagine AMP di Google e WordPress
  • Plugin WordPress accelerato per pagine mobili
  • Pagine di amplificazione di WordPress
  • Yoast amp glue e query wordpress

Iniziamo: abilita AMP per i tuoi post di WordPress

Passo 1

Installa il plugin AMP ufficiale.

install-official-amp-plugin-crunchify-tips
  • Una volta attivato sei pronto. Non vedrai alcun menu di opzioni.
  • Devi andare su Settings -> Menu Permalinks . Fare clic su Save Changes senza apportare modifiche.

Il plug-in AMP ufficiale fornisce funzionalità di base e tutti i tuoi post verranno AMPlify automaticamente. Puoi visitare la versione AMPlificata dei tuoi post aggiungendo /amp/ alla fine di qualsiasi URL del post.

Dai un'occhiata all'esempio:

  • URL del post Original : https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/
  • AMPlify Post URL: https://crunchify.com/how-to-sort-hashmap-by-key-and-value-in-java8-complete-tutorial/amp/

Passo 2

Installa il plug-in Glue for Yoast SEO e AMP. A partire dalla versione 0.4 AMP WordPress version Credo che non sia necessario alcun altro plug-in relativo ad AMP.

Adesso:

  • Vai su Appearance -> AMP .
  • Fornisci il colore Header e dello Background e fai clic su Save .
opzione di personalizzazione del plug-in amp-wordpress

Passaggio 3

L'unico problema che vedo con questo plugin è che aggiunge il collegamento Powered by WordPress in fondo alla pagina. Per cambiarlo potresti voler cambiare la pagina footer.php con il codice sottostante.

  • Vai su Plugins -> Editor
  • Seleziona Plugin AMP
  • Seleziona il file 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 >

Modifica il codice della riga del copyright secondo le tue necessità

Pulsanti crunchify-amp-footer-e-social-sharing

Passaggio 4

Aggiungi le icone di Analytics e Social Media alle tue pagine AMP.

  1. La funzione crunchify_amp_add_analytics_social_ads_js aggiungerà l'analisi richiesta e il codice javascript dei social media alla tua pagina amp.
  2. La funzione crunchify_amp_add_analytics_social_code aggiungerà il tuo codice analitico e le icone dei social media.
  3. Assicurati di aggiornare il tuo Google Analytics Universal tracking ID Facebook App ID di seguito.
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 ~~~~~~~~~~~~~~~~~~~

Passaggio 5

Aggiungi il codice Google Adsense alla tua pagina AMP. Nel mio caso, volevo aggiungere il codice Adsense 300x250 sotto l'immagine in primo piano. Non è disponibile alcun hook ufficiale da utilizzare, quindi ho modificato il file single.php situato in <AMP Plugin directory> amp/templates/single.php .

modifica-amp-plugins-single-php-file
  • Vai al menu Plugins
  • Fare clic su Editor
  • Scegli Plugin AMP
  • Vai al file single.php
  • Aggiungi il codice Adsense come mostrato nello snippet di codice di seguito. Cerca look for line featured-image e aggiungi il codice Adsense dopo.
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" >

E sei a posto. Pulisci la cache del tuo sito e controlla la pagina AMP live. Vedrai tutte le icone di Google Analytics, Adsense e Social Media che funzionano correttamente

E adesso?

Verifichiamo e controlliamo la tua pagina AMP per qualsiasi problema. Vai su https://validator.ampproject.org/ e controlla il risultato.

ampproject-validation-page-crunchify-tips

In che modo Google eseguirà la scansione delle pagine dei post AMP?

Ora che hai entrambe AMP and non-AMP versions delle tue pagine, il plug-in AMP aggiungerà automaticamente il meta tag di relazione di seguito a entrambe le pagine.

Controlla questo su una pagina non AMP

Dovresti vedere il riferimento della versione AMP della pagina per farlo sapere a Google e ad altre piattaforme:

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

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

Controlla questo sulla pagina AMP

Dovresti vedere il testo per fare riferimento alla sua versione canonica 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

Ora aspettiamo un paio di giorni o almeno una settimana e dovresti vedere le pagine AMPlify in Google Search Console. Per me sono solo 4 giorni e vedo quasi 500 pagine già indicizzate per il risultato AMP

wordpress-and-amp-setup-guide-by-crunchify-stats

Come controllare il risultato in tempo reale?

Basta cercare il post in Google sul browser mobile e dovresti vedere il AMP result nella pagina dei risultati di ricerca.

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

Inoltre, continua a visitare questa pagina o aggiungi un segnalibro poiché continuerò ad aggiornare questo tutorial nel tempo secondo il mio apprendimento. Buon blogging e aiuta a velocizzare la rete.