Back-End

Back-End

Como implementar AMP (Accelerated Mobile Pages)

11 abr, 2018
Publicidade

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.

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:

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

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:

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.