Recentemente o Google vem utilizando um novo projeto Open Source chamado Accelerated Mobiles Pages (AMP).

O objetivo do Google com o projeto é garantir que as páginas web carreguem quase que instantaneamente quando o usuário clicar em algum link, criando uma experiência tão rápida e responsiva quanto os aplicativos nativos de celular.

O que são Accelerated Mobile Pages?

Como você já viu o objetivo principal do projeto é aumentar a velocidade de acesso para os visitantes em páginas da web. A internet é lenta para muitas pessoas, na verdade, a maioria das pessoas usando a internet acessam utilizando um telefone móvel, normalmente em uma conexão 2G, 3G, 4G e etc. Para tornar as páginas rápidas de serem carregadas (instantaneamente), AMP restringe o que você pode fazer com o HTML, CSS e JS nessas páginas. Design, cores e estrutura são removidos em favor de velocidade. O AMP parece mais com uma função do que um projeto.

Como vocês podem ver no vídeo acima, os “Snippets” do AMP são bem simples e intuitivos com todas as informações importantes que você deseja saber antes de clicar em um link. Até o momento, nem todos os dados serão capturados pelo Google Analytics e plataformas similares. Os links “Leia Mais” do seu blog também serão removidos.

O Google está apoiando esse projeto de uma forma tão forte que até existe uma opção nas Ferramentas para Webmasters (Webmasters Tool)  em Aspecto da Pesquisa > Páginas Aceleradas para Dispositivos Móveis. As chances de você ter um gráfico nessa página provavelmente são muito poucas. Para que suas páginas e posts sejam elegíveis para o Google AMP é necessário adicionar uma formatação diferenciada do que você deve ter em seu blog agora.

Aqui no CanalWP eu levo muito a sério os posts com relação a Search Engine Optimization. A verdade é que seu blog sem uma estratégia ou técnica SEO só tem alguma chance de receber visitas se você estiver disposto a pagar por isso.

Nós queremos que nossos visitantes distribuam conteúdo de qualidade para seus visitantes sem precisar quebrar a cabeça com a parte técnica. Você sempre pode começar a otimizar o SEO do seu WordPress Instalando e Configurando o Yoast SEO Plugin. Se você ainda não fez a configuração desse plugin é recomendável que você o faça antes de configurar o Google AMP.

Como Adicionar o Google AMP no WordPress

Nós vamos utilizar o plugin AMP da Automattic.

BAIXAR 

Alternativamente você pode ir no Painel WordPress em Plugins > Adicionar Novo e Pesquisar por “AMP“. Instale e Ative o Plugin.

Quando você ativa esse plugin, todos os posts do seu site terão uma versão /amp/. Você pode ir em qualquer post e adicionar /amp/ no final da URL e você poderá ver a versão AMP. O plugin adiciona uma meta tag padrão no cabelhaço das suas páginas que torna possível o Google e outros reconhecerem que estas páginas existem.

O Plugin AMP utiliza a logo do seu site que você pode definir em Aparência > Personalizar > Identidade do Site > Ícone do Site. Mas, fora isso, ele não adiciona nenhum estilo.

Se você tem um site, mas não tem um blog onde posta conteúdo novo e constante você está pronto e todas as suas páginas já estão preparadas para o Google AMP e você deve ver os resultados nas ferramentas para Webmaster em até 48 horas.

Não é necessário fazer mais nenhuma alteração, o plugin não adiciona nenhuma opção para configuração. É automático! Para ter certeza que está funcionando adicione /amp/ no final de qualquer página ou post do seu site para ver a versão AMP.

Se você tem um blog, que posta conteúdo frequente e atualizado, então você vai querer continuar este tutorial.

Configurando o Glue For Yoast SEO & AMP

Felizmente o grande Joost de Valk (criador do Yoast SEO), também criou o plugin Glue for Yoast SEO & AMP (Cola para o Yoast SEO e AMP). É obrigatório o uso do plugin Yoast SEO, e ele deve estar Instalado e Configurado antes de você usar o Glue For Yoast SEO & AMP.

BAIXAR 

Alternativamente você pode ir no Painel WordPress em Plugins > Adicionar Novo e Pesquisar por “Glue for Yoast SEO & AMP“. Instale e Ative o Plugin.

Com esse plugin você pode definir o estilo das páginas AMP do seu site e ter certeza que essas páginas tenham o código do Google Analytics nelas também.

Com o plugin instalado e ativado, vá no painel do seu WordPress em SEO > AMP.

AMP | Post Types

Na tab Post Types (Tipos de Posts) você deve definir quais os tipos de posts (posts, páginas, media, outros que você tenha em seu tema) devem receber suporte para páginas AMP. Aqui no CanalWP nós escolhemos suporte apenas para nossos Posts, mas para você pode ser interessante ter suporte em suas páginas também.

AMP | Design

Images

• AMP Icon, defina o ícone (logomarca) que representa seu blog. A imagem deve ter no mínimo 32px x 32px, é importante subir uma imagem que tenha a mesma proporção (90×90, 120×120, 32×32) para não ficar manchada ou desajustada.
• Default Image, defina a imagem de destaque padrão para os seus posts. Caso algum de seus posts não tenha uma imagem destacada definida o plugin irá utilizar a imagem definida aqui em seu lugar. No CanalWP nós utilizamos imagens em todos os posts, por isso, não adicionamos nenhuma imagem padrão.

Content Colors

• AMP Header Color, defina a cor do cabeçalho da sua página AMP.
• Title Color, defina a cor do título do seu post ou página AMP.
• Text Color, defina a cor do texto do seu post ou página AMP.
• Post Meta Info Color, defina a cor das informações como autor, data, categoria, tags das páginas AMP.

Links

• Text Color, defina a cor padrão para os links em seus posts e páginas AMP.
• Hover Color, defina a cor quando o usuário passar o mouse sobre o link.
• Underline, defina se os links devem estar sublinhados ou não. Nós definimos que não (no underline).

Blockquotes

• Text Color, defina a cor do texto para os quotes do seu post ou página AMP.
• Background Color, defina a cor de fundo para os quotes do seu post ou página AMP.
• Border Color, defina a cor da borda para os quotes do seu post ou página AMP.

Extra CSS & Extra Code in Head

Essas opções servem para quem tem conhecimento em CSS para modificar o estilo ou tem conhecimento para adicionar meta tags de acordo com a necessidade. Na maioria das vezes você não precisa configurar essa opção.

AMP | Analytics

Se você estiver utilizando o plugin Google Analytics do Yoast (recentemente renomeado para Google Analytics by MonsterInsights) você não precisa fazer nenhuma configuração adicional nessa página. Se você não utiliza, então copie o código disponibilizado em sua conta do Google Analytics e cole na área indicada e salve as alterações.

Você configurou o Google AMP e Glue For Yoast SEO & AMP com sucesso.

• Em até 48 horas você poderá ver um gráfico nas Ferramentas para Webmasters semelhante a esse:

Não se preocupe, nem todas as páginas serão indexadas inicialmente.

Se você não estiver vendo o gráfico mesmo após 48 horas, você pode tentar acelerar o processo de indexação indo nas Ferramentas para Webmasters em Rastreamento > Buscar Como o Google > Clique em “Buscar ou Buscar e Renderizar” > Aguarde o Processamento > Clique em “Enviar ao Índice” > Rastrear este URL e seus links diretos > Avançar.

Você estará forçando o bot do Google a verificar sua página novamente, e consequentemente, verificar o seu novo suporte ao Google AMP.

Como Adicionar Anúncios no AMP

Desde que eu escrevi este artigo muitos visitantes tem entrado em contato para saber como adicionar anúncios nas páginas AMP. Como esse não é objetivo principal das páginas AMP eu não cobri este tópico, mas já que nossos visitantes estão querendo muito adicionar anúncios eu resolvi complementar este tutorial com essa dica. Vamos lá?

Para adicionar Anúncios em paginas AMP é muito fácil. Você vai precisar acessar o diretório do seu servidor utilizando FTP. Assim que você já tiver acesso ao servidor siga os seguintes passos:

1. Encontre o diretório do plugin AMP que fica em /wp-content/plugins/amp/
2. Na pasta AMP, selecione a pasta TEMPLATES.
3. Encontre o arquivo single.php, clique com o botão direito no arquivo e selecione a opção Ver/Editar. Você vai precisar de um editor de texto, eu recomendo Sublime Text, mas você pode usar apenas o bloco de notas ou notepad.

Código Necessário

Para adicionar um banner de afiliado (por exemplo) você precisa utilizar tags AMP especificas. Utilize o código abaixo como exemplo:

123456789

<a href=”https://www.seudominio.com/link-da-pagina-de-afiliado” target=”_blank”><amp-iframe width=300 height=250sandbox=”allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox”layout=”responsive” frameborder=”0″src=”https://seudominio.com/wp-content/uploads/endereco-da-imagem.png”></amp-iframe></a>

Adicione o link do seu anúncio em:

123	<a href=”https://www.seudominio.com/link-da-pagina-de-afiliado” target=”_blank”>

Ajuste o tamanho do anúncio em:

123	<amp-iframe width=300 height=250

Adicione a Imagem do anúncio em:

123	src=”https://seudominio.com/wp-content/uploads/endereco-da-imagem.png”>

Agora que você abriu o arquivo single.php com o editor de texto de sua escolha você deve estar vendo algo semelhante a isto:

Anúncios no Cabeçalho

Para adicionar seu anúncio no cabeçalho da sua página AMP adicione o código do anúncio exatamente como na imagem:

Anúncios no Rodapé

Para adicionar seu anúncio no rodapé da sua página AMP adicione o código do anúncio exatamente como na imagem:

Após ter feito as alterações salve o arquivo e o envie de volta ao servidor. Se você estiver utilizando um plugin de cache é necessário limpar o cache antes de poder visualizar o anúncio em seus posts AMP. Pode ser necessário criar uma div para controlar a posição do anúncio na página e posicioná-lo como desejar.

Lembre-se que quando o plugin AMP for atualizado essas alterações serão perdidas e será preciso adicionar o código novamente.

Conclusão

Tentar otimizar seu site para SEO é sempre uma opção que não pode faltar. Agora os posts do seu blog já podem ser indexados pela nova experiência do Google e receber pontos a mais por essa rapidez na implementação antes de outros blogs.