Como implementar AMP (Accelerated Mobile Pages)

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 <!doctype html>;
No primeiro nível conter <html ⚡> ou <html amp>;
Conter as tags <head> e <body>;
O primeiro filho da tag <head> deve ser <meta charset=”utf-8″>;
O segundo deve ser a inclusão do script <script async src=”https://cdn.ampproject.org/v0.js”></script>;
Inserir a tag canonical <link rel=”canonical” href=”HTTP://ALGUMA_URL.COM.BR”>;
Utilizar a meta-tag <meta name=”viewport” content=”width=device-width,minimum-scale=1″> com a recomendação de uso do initial-scale=1.

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

<!doctype html>
<html amp lang="pt-BR">
   <head>
      <meta charset="utf-8">
      <script async src="https://cdn.ampproject.org/v0.js"></script>
      <title>Minha primeira página AMP</title>
      <link rel="canonical" href="http://endereco-da-pagina.html">
      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   </head>
   <body>
      <h1>Minha primeira página com o Accelerated Mobile Page</h1>
   </body>
</html>

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.

<amp-img src=”https://imagem-xxx.jpg” alt=”Um gatinho” height=”800″ width=”600″></amp-img>

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:

<link rel=”amphtml” href=”https://dominio.com.br/pagina-amp.html“>

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

<link rel=”canonical” href=”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:

<link rel="canonical" href="https://dominio.com.br/pagina-amp.html">

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 <head> devemos considerar a tag style do AMP:

<style amp-custom>
  body {
    background-color: #fff;
    color: #f90;
  }
  amp-img {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
  }
</style>

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:

https://dominio.com.br/pagina-amp.html#development=1

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.

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by: