Como implementar AMP (Accelerated Mobile Pages)

Você conhece as duas maneiras de implementar o Accelerated Mobile Pages no WordPress? Implementar o AMP se faz cada vez mais necessário.

Como implementar AMP
Seus amigos merecem saber desse conteúdo?

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.

Como implementar 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.

Ilustração representativa do plugin AMP

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.

Ilustração do plugin Glue for Yoast

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:

  1. Conhecer a implementação e seus elementos requeridos;
  2. Tratar corretamente os elementos de mídia, como as imagens;
  3. Fazer uso da tag canonical;
  4. Aplicar o layout e estilos desejados e
  5. Validar a implementação.

Quais são 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.