Como implementar AMP (Accelerated Mobile Pages)

Facebook
VKontakte
share_fav

O questionamento “como implementar AMP” cresce a cada dia. A relevância do assunto para o usuário e para os mecanismos de busca explica o crescimento. O AMP (Accelerated Mobile Pages) é a tecnologia que deixa suas páginas com carregamento extremamente rápido no mobile.

Sobre a implementação do AMP no WordPress

As implementações no WordPress, antes de tudo, giram em torno do seguinte questionamento:

Deve-se implementar o Accelerated Mobile Pages com ou sem plugin?

Compreenda. Ambos os cenários são válidos, pois cumprem seu papel e possuem vantagens e desvantagens. Neste momento há centenas de plugins que mencionam o termo “AMP” no diretório do WordPress.org. No entanto, dois deles são mais relevantes.

Plugin AMP

O plugin AMP está ativo em mais de 200k instalações e implementa a tecnologia sem intervenção por códigos. Ele tem por trás duas grandes empresas: Automattic e Google.

Plugin Glue for Yoast SEO & AMP

O plugin Glue for Yoast SEO & AMP integra as funcionalidades do plugin Yoast SEO às páginas AMP. É um grande aliado e garante a correta implementação das meta-tags em páginas AMP.

Sobre a implementação sem plugins

A implementação do AMP sem plugins tem ganhado adeptos que querem ir para o próximo nível. Reduzir a quantidade de códigos (logo, de kilobytes também) resultará em ainda mais velocidade. Esse é o segundo passo, algo mais avançado que você poderá pensar futuramente.

No entanto, ao implementar o Accelerated Mobile Pages é preciso ficar atento aos seguintes tópicos:

  • Conhecer a implementação e seus elementos requeridos;
  • Tratar corretamente os elementos de mídia, como as imagens;
  • Fazer uso da tag canonical;
  • Aplicar o layout e estilos desejados
  • Validar a implementação.
  • A implementação do AMP e os elementos requeridos
  • A implementação básica do Accelerated Mobile Page requer, no mínimo, o uso dos elementos obrigatórios.

Os itens são:

  • Começar a marcação com ;
  • No primeiro nível conter
  • > ou ;
  • Conter as tags e ;
  • O primeiro filho da tag deve ser ;
  • O segundo deve ser a inclusão do script ;
  • Inserir a tag canonical HTTP://ALGUMA_URL.COM.BR”>;
  • Utilizar a meta-tag com a recomendação de uso do initial-scale=1.

O resultado da marcação resultaria nos seguintes códigos:

   
      
      
      Minha primeira página AMP
      
      
   
   
      
   

Sobre as tratativas dos elementos de mídia

Nem todas as tags HTML são mantidas no AMP. Algumas são banidas e outras substituídas por equivalentes. A inserção de imagens em páginas com o Accelerated Mobile Pages implementado requer uma marcação HTML específica.

  • https://imagem-xxx.jpg” alt=”Um gatinho” height=”800″ width=”600″>

A tag tag canonical e o AMP

Na maioria das vezes suas páginas web terão duas versões: uma com e outra sem a tecnologia implementada. Através do uso da tag canonical conseguimos controlar e informar a versão da página em uso. Haverá situações também em que somente páginas com o AMP existirão.

Páginas com e sem AMP implementada

Para a página sem o AMP considerar esta tag canonical:

  • https://dominio.com.br/pagina-amp.html“>

Para a página com o AMP considerar essa outra:

  • https://dominio.com.br/pagina-sem-amp.html“>

Páginas somente em versão AMP

Mesmo quando não há duas versões da mesma página, devemos considerar o uso da tag canonical. Ele deve apontar para a própria página com o AMP implementado. Assim:


A estilização

Páginas AMP nada mais são do que páginas HTML. O único ponto diferente é que temos algumas tags especiais. Portanto, o bom e parceiro CSS pode ser utilizado para estilizar e personalizar o layout. Outro ponto de atenção é que as declarações de estilo devem ser implementas inline na página. Dentro da tag

devemos considerar a tag style do AMP:

O processo de validação

Para garantir a distribuição das suas páginas AMP nas plataformas que o suportam, é preciso certificar-se que ela esteja válida. Um página inválida será desconsiderada pelas plataformas, como o mecanismo de busca do Google. O navegador de internet pode ser utilizado para esse processo. É necessário, ainda, acrescentar o hash #development=1 a URL da página AMP e, em seguida, observar o Console do navegador.

A URL final ficaria assim:

Conclusão

Implementar o AMP é um caminho sem volta porque os usuários querem navegar por páginas que carregam mais rápido. Se suas páginas estiverem lentas, terá perdas de conversão e negócios. Implementar o Accelerated Mobile Pages com ou sem plugins é o próximo passo. O primeiro – e obrigatório – deve ser implementá-lo.

ver iMasters
#amp
#wordpress
#mobile