• Pagina inicial
  • Artigos
  • Em geral
  • Como configurar o WordPress e AMP: páginas móveis aceleradas: configuração do Analytics, AdSense, guia de mídia social anexado

Como configurar o WordPress e AMP: páginas móveis aceleradas: configuração do Analytics, AdSense, guia de mídia social anexado

Publicados: 2016-09-25
setup-amp-and-wordpress-all-in-one-guide

Houve muito burburinho sobre o Google AMP nos últimos dias. O Google anunciou oficialmente o suporte a páginas AMP como parte da página Mobile Search. É realmente interessante. Até agora, evitei implementar o AMP no Crunchify por algum motivo e nunca senti nenhuma importância disso.

Mas depois de ver o tweet de Barry, decidi AMPlify Crunchify também.

Você está procurando dicas de AMP e wordpress? Deseja AMP Up Your WordPress Site com as páginas móveis aceleradas do Google? Ou você deseja instalar o AMP no WordPress? Neste tutorial, abordaremos as etapas sobre como AMPlificar seu site WordPress com todas as etapas detalhadas.

O que é uma página móvel acelerada (AMP)?

O Projeto Accelerated Mobile Pages (AMP) é um projeto de código aberto criado tendo em mente a velocidade, que cria conteúdo otimizado para dispositivos móveis uma vez e carrega instantaneamente em todos os lugares. Não há carregamento de JavaScript na página. Há um carregamento de CSS muito mínimo com restrições rígidas. Uma das observações que notei é que você não pode nem usar !important em CSS.

Tem alguma das perguntas abaixo?

  • Google AMP: O que é e é certo para o seu site WordPress
  • Melhor maneira de configurar o WordPress para AMP
  • Como começar com páginas AMP do Google e WordPress
  • Plugin WordPress acelerado de páginas móveis
  • páginas de amplificadores do WordPress
  • Cola Yoast amp e consultas wordpress

Vamos começar: Habilite AMP para suas postagens do WordPress

Passo 1

Instale o plug-in AMP oficial.

dicas de instalação-oficial-amp-plugin-crunchify
  • Uma vez ativado, está tudo pronto. Você não verá nenhum menu de opções.
  • Você tem que ir para Settings -> menu Permalinks . Clique em Save Changes sem fazer nenhuma alteração.

O plug-in AMP oficial fornece funcionalidades básicas e todas as suas postagens serão AMPlify automaticamente. Você pode visitar a versão AMPlified de suas postagens adicionando /amp/ no final de qualquer URL de postagem.

Dê uma olhada no exemplo:

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

Passo 2

Instale o plugin Glue for Yoast SEO & AMP. A partir da versão 0.4 AMP WordPress version , acredito que você não precise de nenhum outro plug-in relacionado a AMP.

Agora:

  • Vá para Appearance -> AMP .
  • Forneça a cor do Header e do plano de Background e clique em Save .
amp-wordpress-plugin-customization-option

Etapa 3

O único problema que vejo com este plugin é que ele adiciona o link Powered by WordPress na parte inferior da página. Para alterá-lo, você pode alterar a página footer.php com o código abaixo.

  • Vá para Plugins -> Editor
  • Selecione o plug-in AMP
  • Selecione o arquivo 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 >

Modifique o código de linha de direitos autorais conforme sua necessidade

botões de crunchify-amp-footer-and-social-sharing

Passo 4

Adicione ícones de Analytics e Social Media às suas páginas AMP.

  1. A função crunchify_amp_add_analytics_social_ads_js adicionará o código javascript de análise e mídia social necessário à sua página amp.
  2. A função crunchify_amp_add_analytics_social_code adicionará seu código analítico real e ícones de mídia social.
  3. Certifique-se de atualizar seu Google Analytics Universal tracking ID Facebook App ID abaixo.
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 ~~~~~~~~~~~~~~~~~~~

Passo-5

Adicione o código do Google Adsense à sua página AMP. No meu caso, eu queria adicionar o código do Adsense de 300x250 abaixo da imagem em destaque. Não há nenhum gancho oficial disponível para uso, então modifiquei o arquivo single.php localizado em <AMP Plugin directory> amp/templates/single.php .

modifique-amp-plugins-single-php-file
  • Vá para o menu de plug- Plugins
  • Clique Editor
  • Escolha o plug-in AMP
  • Vá para o arquivo single.php
  • Adicione o código Adsense conforme mostrado no snippet de código abaixo. Basta look for line featured-image e adicionar o código Adsense depois disso.
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 você está tudo pronto. Basta limpar o cache do seu site e conferir a página AMP ao vivo. Você verá todos os ícones do Google Analytics, Adsense e Social Media funcionando corretamente

O que agora?

Vamos verificar e verificar se há algum problema na sua página AMP. Acesse https://validator.ampproject.org/ e verifique o resultado.

ampproject-validation-page-crunchify-tips

Como o Google vai rastrear as páginas de postagem AMP?

Agora que você tem versões AMP and non-AMP versions de suas páginas, o AMP Plugin adicionará a metatag de relação abaixo às suas duas páginas automaticamente.

Verifique isso na página não AMP

Você deve ver a referência da versão AMP da página para informar o Google e outras plataformas:

<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

Verifique isso na página AMP

Você deve ver o texto para fazer referência à versão canônica não 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

Agora vamos esperar alguns dias ou pelo menos uma semana e você deverá ver as páginas AMPlify no Google Search Console. Para mim são apenas 4 dias e vejo quase 500 páginas já indexadas para resultado AMP

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

Como verificar o resultado ao vivo?

Basta pesquisar por postagem no Google no navegador móvel e você verá o AMP result da pesquisa.

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

Além disso, continue visitando esta página ou marcado como favorito, pois continuarei atualizando este tutorial ao longo do tempo, conforme meu aprendizado. Bom blog e ajude a acelerar a rede.