O que é Google AMP? Como faço para usá-lo no meu site?

O que é AMP?

Se você já abriu um artigo de notícias dos resultados de pesquisa do Google em seu telefone, provavelmente já encontrou um site AMP antes. Ele é armazenado em cache pelo Google, então a barra de URL começa com “www.google.com/amp” . Além disso, há um cabeçalho com o nome real do site e um link para a página não AMP:

Você também deve ter notado que a página carregou instantaneamente (ou quase isso). Isso é AMP e está impulsionando a tecnologia de ponta dos sites para celular.

O que AMP realmente é é um estrutura de componentes da web, igual a React, Angular ou Vue. Mas, embora essas estruturas se concentrem em aplicativos da web altamente personalizáveis, o AMP foi projetado para ser uma estrutura leve para páginas móveis. Há muita coisa reduzida para que isso aconteça e vem com suas próprias restrições. Ele é de código aberto, e você pode usá-lo sem envolver o Google, mas as integrações do AMP com o Chrome e a Pesquisa Google o tornam muito mais rápido do que qualquer outra estrutura.

O AMP é comum o suficiente para que o arquivo de script usado para carregá-lo provavelmente já esteja armazenado em cache. O Google faz um pré-processamento no conteúdo AMP antes mesmo de você clicar nele, o que pode fazer as páginas carregarem quase instantaneamente. Há também integrações com a Pesquisa Google que exibirá sua página em uma caixa especial em forma de carrousel, em vez de apenas na lista de resultados, e qualquer página habilitada para AMP será exibida com um símbolo de raio ao lado do nome.

E para coisas como artigos de notícias, eles podem ser exibidos em um carrossel de resultados habilitados para AMP, como mostra a imagem abaixo.

O raio está novamente no canto de cada caixa de artigo. Este carrossel é alimentado por dados estruturados, que é realmente necessário para que suas páginas AMP sejam listadas no Google.

Como funciona o AMP?

O AMP implementa seus próprios elementos HTML otimizados e força você a usá-los. Por exemplo, as imagens tradicionais apresentam dois problemas principais: carregar uma imagem altera o layout da página (exigindo um recálculo que sacrifica o carregamento). Em vez de usar um normal <img /> tag, você precisará usar no seu código AMP a tag <amp-img />:

<amp-img src="https://tekimobile.com/wp-content/uploads/2020/07/limpador-android.jpg" alt="Turbinar o Android" height="400" width="800"></amp-img>

Além disso, o AMP tem muitos componentes semelhantes a este para todos os tipos de coisas, incluindo vídeo, anúncios e conteúdo dinâmico. Os navegadores não sabem como processar esses componentes, então, para fazer isso funcionar, você precisará carregar o script do AMP no cabeçalho do seu site:

<script async src="https://cdn.ampproject.org/v0.js"></script>

Há um pouco mais de clichê, como definir uma janela de visualização responsiva e vincular à versão HTML normal da página, que você pode ver na documentação de AMP. Você deve incluir tudo isso ou sua página AMP para atender aos padrões do Google.

O Google armazena em cache seu site AMP e o pré-carrega para melhorar os tempos de carregamento, o que é ótimo, mas por causa disso a barra de URL exibirá google.com como o domínio, em vez do nome do seu site onde a página está realmente hospedada.

Por padrão, seu site será exibido no visualizador de AMP, mas você também pode usar troca Assinada, que é um método de evitar URLs extras. Com a troca assinada, você assina o conteúdo com um certificado TLS que verifica se ele vem do seu domínio. Assim que você puder verificar isso, o navegador poderá exibir o URL do seu site, embora ele ainda esteja sendo armazenado em cache e servido a partir do CDN do Google. Por exemplo, se você colocar na frente do endereço desse artigo nosso que está lendo o sufixo /amp verá a versão AMP da nossa página, sem o prefixo do Google.

Limitações do AMP

Embora seja certamente rápido, também há muitas restrições. O AMP limita severamente o uso de JavaScript; todo o JavaScript é executado de forma assíncrona e você pode usar qualquer JavaScript personalizado (fora do <amp-script>, embora essa funcionalidade ainda seja experimental). Você precisará usar seus componentes para tornar seu site interativo. O AMP pode fazer muito; amp-list que busca conteúdo de um endpoint JSON e o renderiza em um modelo, algo que não é comum fazer com o JS padrão.

O objetivo do AMP é evitar recálculos de estilo e layout em favor de um pipeline de renderização otimizado, de modo que isso apresenta algumas restrições. Todos os recursos devem ser dimensionados estaticamente, ou seja, sem alteração de tamanho com CSS. Todo o CSS deve ser embutido (no cabeçalho, em vez de um arquivo externo) e está limitado a um tamanho máximo de 50 KB. Você também não pode usar o !important modificador em CSS, porque pode substituir o estilo obrigatório de AMP.

Isso torna o AMP muito focado em dispositivos móveis, pois não é viável criar um aplicativo da web complexo com ele. Mas para o tipo de conteúdo para o qual é direcionado (notícias, artigos, qualquer coisa para o qual você executaria o WordPress), ele funciona muito bem.

Como faço para “AMP” em meu site?

Você não substituirá seu site normal totalmente, então precisará refazer seu site em AMP, mantendo o site antigo intacto. O AMP requer que você vincule à página não AMP com um link canônico, que é como você o torna visível para o Google.

O AMP fornece muitos modelos para você começar. Por ser destinado apenas para dispositivos móveis (embora não se limitando a isso), seu design será muito mais simples em geral. Você pode navegar por seus catálogo de componentes para ter uma ideia do tipo de conteúdo compatível com AMP e como você pode fazer a transição de seu site para ele.

Se você estiver usando o WordPress, tudo é mais fácil, muito mais fácil. Você pode fazer a implementação com um plug-in, dos quais existem dois populares – o plugin oficial, e um plugin de terceiros com mais recursos – esse último é o que nós usamos no Tekimobile. Isso criará versões simplificadas de cada artigo, prontas para serem indexadas pelo Google.

Uma coisa extra que é exigida de você é fornecer dados estruturados sobre sua página AMP. Este é essencialmente algum JSON no cabeçalho da sua página que informa ao Google sobre a página.

Você pode usar a ferramenta de teste de dados estruturados para garantir que o seu seja válido, o que também lhe dará uma boa prévia de como o Google interpreta o seu conteúdo. Verifique se o tipo, o título, a descrição e a imagem correspondem e levam aos lugares corretos.

Você deve usar o Google Ferramenta de validação de AMP para verificar sua sintaxe, que dirá se sua página AMP é válida e também mostrará uma visualização de como seu site aparecerá nos resultados de pesquisa com base no tipo de resultado:

Então, quando você estiver pronto para ir ao ar com AMP, coloque o link para a versão AMP de cada página no head do seu site normal, usando rel="amphtml":

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

Você também deseja colocar um link de volta do documento AMP para o site normal:

<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

Assim, suas páginas AMP serão detectáveis ​​e exibidas nos resultados da pesquisa (embora possa demorar um pouco para o Google atualizá-las). Seria uma boa ideia enviar um mapa do site atualizado por meio do Search Console, para informar ao Google diretamente que você ativou as AMP e criou versões AMP de todas as suas páginas.