Blog de Marketing Digital de Resultados

Google AMP HTML: o que é e como configurar seu site para ser mais rápido em dispositivos móveis

A velocidade melhora a experiência do usuário e é um dos fatores de rankeamento do Google, neste sentido a configuração de AMPs pode ser muito vantajosa para seu site!

AMP, sigla para Accelerated Mobile Pages (páginas aceleradas para dispositivos móveis, em português), são páginas de sites otimizadas para um carregamento simplificado e quase instantâneo quando acessadas via dispositivos móveis. O projeto é uma iniciativa de empresas como Google, LinkedIn, Pinterest e Twitter.


“Today Apple is going to reinvent the phone”.

Usando essas palavras, há mais de 10 anos, Steve Jobs apresentava o iPhone ao mundo, que nunca mais foi o mesmo. Não era só um iPod e um telefone com acesso à internet, mas o dispositivo que revolucionou o mercado, quebrou empresas e criou um novo mundo, na palma da mão.

No ano seguinte a Apple lançou a App Store, revolucionando novamente com todas as possibilidades que os aplicativos traziam ao usuário. Em 2008, o Google também lançou o Android e sua loja de aplicativos, que, por aceitar diferentes marcas e modelos de dispositivos, democratizou o acesso à tecnologia. Com isso, o uso dos smartphones foi entrando no cotidiano das pessoas, até que se tornaram indispensáveis – surgiu até a frase que diz que sair de casa sem o celular é como sair sem roupas.

Em 2012, a parcela de brasileiros com smartphones era de 14%, de acordo com o Google. Já em 2016, esse número foi de 62%. A projeção feita em uma pesquisa da agência de mídia Zenith é de que, em 2017, 75% do uso da internet em todo o mundo será por meio de dispositivos móveis.

O celular virou nosso computador pessoal, onde atualizamos as redes sociais, conversamos com os amigos, checamos o email, jogamos online e consumimos conteúdo. Segundo o Google, 44% dos usuários de smartphones usam buscadores pelo menos uma vez por semana, ficando somente atrás das redes sociais e vídeos online.

Enquanto o uso de dispositivos móveis para acessar a internet crescia a passos largos, a qualidade e a velocidade da internet móvel muitas vezes deixava a desejar, seja pelo pacote de dados contratado, região do usuário ou por problemas na rede. Esse problema transformava a experiência do usuário em algo lento e frustrante, incluindo as buscas no Google.

Como sempre levantou a bandeira “mobile first”, o Google apresentou no final de 2015 o AMP Project, em conjunto com outras empresas de tecnologia como LinkedIn, Pinterest e Twitter.

Índice

O que é AMP?

AMP é a sigla para Accelerated Mobile Pages (páginas aceleradas para dispositivos móveis, em português), que são páginas de sites otimizadas para um carregamento simplificado e quase instantâneo quando acessadas via dispositivos móveis.

O projeto é uma iniciativa em código aberto de grandes editores de conteúdo e empresas de tecnologia, com o objetivo de melhorar todo o ecossistema de conteúdo para dispositivos móveis.

Basicamente, uma página AMP possui uma arquitetura que prioriza a velocidade de carregamento da página. Essa arquitetura é dividida em 3 configurações diferentes:

  • AMP HTML: um código HTML diferente, com restrições e extensões, indo além do HTML básico. A maioria da suas tags são normais de HTML, mas algumas são substituídas por tags específicas do AMP;
  • AMP JS: responsável por assegurar a renderização rápida de páginas AMP. Sua principal função é tornar assíncrono tudo o que é externo, para que nenhum elemento da página possa bloquear a renderização de outro;
  • Google AMP Cache: é opcional, mas armazena todas as páginas em AMP HTML em cache nos servidores do Google e melhora o seu desempenho automaticamente. Outras empresas também podem desenvolver seu próprio cache de AMP.

Ao realizar uma busca no Google usando o celular, as páginas com AMP configurado ficam marcadas com a sua sigla. Ao clicar em um resultado marcado como AMP, a versão simplificada da página é carregada quase instantaneamente.

Além disso, páginas muito lentas estão recebendo uma marcação de alerta para esse problema, mostrando cada vez mais a importância de ter um site rápido (você também pode conferir e aplicar algumas dicas para melhorar a velocidade de carregamento do seu site e evitar esse alerta negativo no seu site).

exemplo de AMP em gif

 

Ao ser configurada, uma página AMP acaba se tornando uma segunda versão da página, com o mesmo conteúdo da versão original, sendo identificada geralmente com “/amp” no final do link, o que facilita identificar seu desempenho de forma isolada em relatórios de web analytics. Isso também acaba levantando outra questão que pode se tornar um problema – o conteúdo duplicado.

Para evitá-lo, é necessário incluir uma canonical tag na versão da página AMP, indicando ao Google qual é a versão original do conteúdo. E, para que o Google identifique que determinada página possui uma versão AMP, é preciso incluir uma marcação no código da página original, como no exemplo abaixo:

<link rel=”amphtml” href=”http://www.example.com/post-example/amp/”>

Que tipos de sites podem utilizar AMP?

Os primeiros sites a utilizarem esta tecnologia foram grandes portais de notícias americanos, como Washington Post e Gizmodo. Porém, na atualidade, vários sites em todo o mundo já a implementaram, principalmente em páginas de conteúdo como postagem de blogs, receitas e notícias. Mas é possível aplicar a tecnologia até em páginas de ecommerce.

Segundo o site do projeto, a tecnologia está aberta a todos os envolvidos no ecossistema: editores, plataformas de consumidores e criadores. O objetivo é que todo o conteúdo publicado (de notícias a vídeos, passando por blogs, fotos e GIFs) funcione. Como é uma iniciativa open source, qualquer um pode acessar e aplicar as configurações. Inclusive é possível fazer parte do projeto e promover melhorias.

Segundo o Google e a documentação do projeto, é possível aplicá-la na home, páginas de produtos e até nas páginas de busca. Testamos algumas buscas usando o celular e, ao buscar por algum produto do eBay no Google, as páginas exibidas utilizavam AMP. E o resultado? Páginas de ecommerce com um carregamento extremamente rápido.

Como configurar AMP no seu site

Várias plataformas de Content Management System (CMS) também já possuem plugins e integrações para facilitar a configuração, incluindo o WordPress (você pode conferir a lista completa e atualizada aqui). Mas sites que utilizam plataformas que ainda não possuem essa integração ou que não utilizam nenhum tipo também podem aplicar.

Confira o passo a passo para configurar AMP no WordPress

1. Entre no painel WordPress do seu site, acesse o menu de plugins e clique em “adicionar novo”;

2. Para ter mais opções de configuração e melhorias, como acompanhar os dados no Google Analytics, inserir dados estruturados e usar o Google Tag Manager, instale e ative o plugin AMP for WP – Accelerated Mobile Pages;

3. Para configurar o Google Analytics, no painel do WordPress acesse AMP, clique em Analytics e insira o código de acompanhamento da sua conta do Analytics;

4. Para configurar o visual das suas páginas aceleradas, dentro da área AMP clique em “Design” e em “Launch Post Builder”;

5. Na nova tela aberta, clique em “AMP”, “Aparência”, selecione as informações que você quer manter nas páginas aceleradas, edite as cores de acordo com a identidade da sua marca e seu site e salve as alterações;

6. Agora que você já possui o básico de AMP configurado, recomendamos voltar ao painel do WordPress, acessar o menu AMP, visualizar cada item disponibilizado para configuração e editar de acordo com o seu site e suas necessidades;

7. Você pode ver como ficou a versão final AMP de uma publicação, mesmo pelo computador, acessando ela e acrescentando “/amp” no final da URL (como seusite.com.br/exemplo-de-publicacao/amp).

Se você precisa configurar AMP HTML sem usar WordPress ou outro CMS, o site oficial do projeto possui um passo a passo completo com tudo o que é preciso para aplicar com sucesso, que você pode acessar aqui.

Como validar o AMP HTML

Após fazer todas as configurações e criar as versões AMP das páginas, é necessário realizar a validação para ver se o código está correto. Para isso, a equipe do projeto disponibiliza uma ferramenta gratuita de validação.

Para validar se e o AMP HTML está correto, é só acessar a ferramenta The AMP Validator, inserir o link de uma página AMP (acrescentando “/amp” no final da URL) e clicar em “Validate”. Se o Validation Status apresentado for PASS, as configurações do código estão ok.

Caso o Validation Status exibido seja FAIL, o código AMP possui erros que precisam ser corrigidos para a execução correta da página e para sua indexação nos buscadores. Para facilitar a correção, a ferramenta apresenta, logo abaixo do status, a listagem com os erros encontrados.

Conseguiu validar o código da página? Agora é necessário acompanhar a indexação no Google e avaliar seu desempenho.

Como acompanhar a indexação e acessos às páginas AMP

Depois de todo o trabalho para desenvolver a versão das páginas em AMP, chegou a hora de acompanhar a indexação das páginas nos resultados de busca do Google e seus resultados no Analytics.

Para acompanhar se as páginas estão sendo indexadas, é necessário ter uma conta no Google Search Console. Caso você não conheça a ferramenta ou ainda não tem uma conta configurada para o seu site, leia o artigo Google Search Console: O guia completo de como usá-lo na prática e saiba mais sobre ela.

Ao acessar a conta, basta selecionar seu site, clicar em “Aspecto da pesquisa” e em “Páginas aceleradas para dispositivos móveis” em seguida. Nesta página você pode acompanhar frequentemente a evolução no número de páginas indexadas no Google e se possuem algum erro (se tiverem erros, na própria tela você terá mais informações sobre ele).

Se você fez a configuração para acompanhamento no Google Analytics, você pode acompanhar por lá também o desempenho das páginas, visto que elas possuem um /amp na URL para você diferenciar.

A forma mais simples de se avaliar o desempenho isolado das páginas na versão AMP ao acessar o Analytics é no menu com os relatórios de comportamento, clicando em “Conteúdo do site” e em “Todas as páginas”. Em seguida, digite “/amp” no campo de busca, para exibir apenas esse tipo de página, conforme apresentado na imagem abaixo. Selecione o período desejado e compare o desempenho de cada página AMP.

Assim você consegue visualizar dados como sessões, tempo médio na página e taxa de rejeição de cada uma das páginas, além de avaliar o desempenho e promover melhorias.

Conclusão

A velocidade de carregamento do site é extremamente importante para a experiência do usuário e para sua estratégia de SEO.

Sites mais rápidos contribuem para uma experiência de qualidade e vendem mais. Segundo pesquisa realizada pelo Google, uma página que demora até 10 segundos para carregar pode ter um aumento na taxa de rejeição de até 123%. Ao reduzir o tempo de carregamento médio das páginas para 2,2 segundos, a Firefox teve um aumento de 15,4% nos downloads.

Mas AMP é um fator de ranqueamento do Google? Não. Apesar das inúmeras vantagens, atualmente AMP não é um fator de ranqueamento para dispositivos móveis, de acordo com o webmaster trends analyst do Google, Gary Illyes, quando questionado sobre isso em um evento. Mas lembre-se de que tempos atrás ter um site mobile ou responsivo também não era um fator de ranqueamento.

Agora que você já sabe o que é AMP, como instalá-lo e quais as suas vantagens, é só colocá-lo para rodar e, depois, comentar aqui sobre a sua experiência!

eBook: 27 dicas de SEO acionáveis para impulsionar seu site no Google

Veja algumas estratégias que você pode adotar em seu site para melhorar seu posicionamento e atrair mais tráfego

Marcadores:

Deixe seu comentário

Comentários

41 comentários

  1. Desentupidora WL

    Consigo usar esses recursos do WordPress e usar em meu site sendo que ele foi feito pelo WebAcappela? Vi que o WordPress tem muitos recursos e plugins mais tenho esta duvida se está limitado só para quem criou o site pelo WordPress . Obrigado

    1. Ewerton Silva

      Bom dia! Esses recursos estão disponíveis apenas para quem possui WordPress, porém muitos outros CMSs possuem plugins que podem auxiliar. Verifique com o pessoal da WebAcappela se eles já possuem alguma solução para usar AMP. Grande abraço!

  2. Eduarda Sander

    Muito bom o artigo! valeu

    1. Ewerton Silva

      Valeu Eduarda :)

  3. Ezequiel Alves

    com o plugin amp for wp só do visitante acessar o site pelo celular ele vai ser redirecionado para a versao amp da pagina?

    1. Ewerton Silva

      @ezek_1922:disqus no plugin tem essa opção, para as páginas que possuem a versão AMP sejam carregadas dessa forma no celular, mesmo que o usuário não tenha vindo do Google ou de outro lugar que suporte esse formato.

  4. Eliezer Cutalo

    Bom dia, O teria como adiciona-lo em uma página que não está em WP?

    1. Ewerton Silva

      @eliezercutalo:disqus com o plugin você pode optar por converter também páginas para AMP (que não são blog posts). Outra alternativa é o “AMP Creator” que o plugin possui. Dessa forma você pode montar todo o conteúdo da versão AMP da página, porém é algo limitado.

  5. Ana Paula

    Olá, fui baixar os 2 plugins e ao tentar ativar o AMP apareceu esta mensagem:

    AMP is already bundled with AMPforWP. Please do not install this plugin with AMPforWP to avoid conflicts.

    O que eu faço? Ela avisa que um já está incluído no outro… Deixo só o AMP for WP ou só o AMP? Obrigada!

    1. Ewerton Silva

      Oi Ana, tudo bem? Em uma atualização recente o plugin AMPforWP já inclui as configurações do outro, então só é necessário instalar ele. O AMP só servia para as configurações básicas. Abraço!

  6. MaisVitaminas Suplementos

    Parabéns pelo texto

    A minha indagação é:
    Será que esseAMP vingará?
    Esta semana fiz um investimento em um modulo para transformar minha loja em formato AMP, validei na ferramenta do google e já solicitei a indexação, agora é só aguardar.
    Tudo quanto é coisa já coloquei: Certificado de segurança, Rich Snippets, otimizei meu site todo, meu site chega carregar em menos de 2 segundos, meu esforço está sendo para melhorar na classificação das buscas, e pensando nos clientes é claro
    Sei que são vários fatores como SEO, conteúdo relevante, segurança etc
    Ainda não estou vendo se utilizar o AMP em massa

    1. Ewerton Silva

      @disqus_Xmo322f6E8:disqus até nesse contexto de ecommerce é legal acompanhar o eBay, que já está usando AMP e é um case do assunto. Sobre a velocidade, lembre-se que isso impacta também diretamente na sua taxa de conversão, não só no posicionamento orgânico.

      Abraço e sucesso!

    2. Johnnata Guilherme

      Parabéns pelo esforço, os resultados virão.
      Não se esqueça do principal para um incremento em seu trafego, conteúdo de qualidade nas palavras chaves certas!

      Boa sorte!

  7. BODYSAVER

    Ola, estou procurando profissionais que realizem a transformação AMP de meu site, teria alguma indicação?

    1. Ewerton Silva

      @bodysaver:disqus no Marketplace do RD Station você vai encontrar várias empresas e profissionais. Dá uma olhada: http://marketplace.rdstation.com

  8. Vinícius

    Ei, Ewerton, tudo bom? Grande artigo, mas eu tenho uma dúvida: consigo colar um formulário da RD em uma página amp do wordpress?

    1. Ewerton Silva

      Oi @disqus_vrV5ZzmWZ3:disqus, tudo certo e com você? Infelizmente as AMPs não aceitam Javascript e exigem que os formulários também trabalhem com códigos específicos para AMPs. O que você pode fazer é comprar uma extensão do plugin que citei no artigo, que permite a criação de formulários (e possui integração com o RD Station Marketing o/). Grande abraço!

  9. Nilton

    Boa tarde

  10. Gustavo Guerra

    Olá!

    Eu tenho já um blog WordPress com um template responsivo, uso o YOAST SEO, e ativando o AMP meus posts/páginas ganham “/amp”, ficando o conteúdo original e AMP rodando simultaneamente.

    Gostaria de saber se a ativação e uso do AMP pode provocar problemas de SEO relacionados a conteúdo duplicado no Google. E se sim, qual procedimento fazer?

    1. Ewerton Silva

      Boa tarde Gustavo, beleza? No caso, o plugin já inclui no código do conteúdo original uma tag indicando que possui uma versão AMP, com o /amp na URL, e a versão AMP recebe canonical tag apontando para o post original. Isso evita problemas de conteúdo duplicado :)

    2. Johnnata Guilherme

      A resposta simples é: pode!
      Esse problema você resolve com canonical

      Lá fora quase ninguém usa AMP, destrói o design do site tbm.

      Caso você necessite tem que tomar uma série de cuidados! E é muito questionável se te trás vantagens de SEO.

  11. Vital

    MUito boa dica. Apliquei o amp em meu site como mostras o seu tutorial. Nas configuração avançada deste plugin, tem a opção de redirecionar as páginas mobile para AMP. Ativei essa opção, mas na horas de buscar com o google na área de sitemap do search console, diz página redirecionada com um íccone amarelo. Desta forma não dá a opção de indexar. Então desativei a opção de redirecionar as visitas de dispositivos móveis para o AMP. Ou seja agora só as pessoas das buscam vão para o AMP. A pergunta é: terei problema de indexação ativando o redirecionamento das pessoas para o AMP se acessarem do celular? Ou devo deixar o google decidir quem vai visualizar o AMP?

  12. Luiz Ramalho

    Cliente tem um site em AMP e não estamos conseguindo realizar a integração com o RD Station via Código de Monitoramento, já que não aceita js. Como proceder? A Resultados Digitais oferece suporte para isso?

  13. M3u Online

    tenho um template 100% AMP para o blogger 2019, porem quando uso ele em um blogger adulto e ativo a função ADULTA o blogger não fica AMP no teste. Teria um jeito para ficar AMP ?

  14. Gabriel Vince

    Muito obrigado pelo conteúdo. Será muito útil no meu trabalho.

  15. Flavio Mendes

    Ótimo texto

    Consegui fazer tudo certinho e até agora não apareceram erros em páginas indexadas.

    Gostaria de saber se o tráfego pode cair nos primeiros dias de uso? Os meus caíram um pouco, mas agora não sei se foi coincidência ou não…

    Obrigado

    1. Ewerton Silva

      @viajeleve:disqus vale avaliar se essa queda foi só em dispositivos móveis ou foi geral e também se tem relação o período que as AMPs realmente indexaram com a queda. Pode ter sido apenas uma sazonalidade. De qualquer forma, mudanças no site como essa podem afetar o tráfego no início sim.

  16. Flavio Mendes

    Ótimo artigo

    Vc comenta no início que precisa ter cuidado para não haver conteúdo duplicado. Utilizando plugin do wordpress esse problema é resolvido automaticamente ou preciso fazer mais algo?

  17. Bruno Costa

    Não acho ninguém mostrando como resolver quando dá erro. Muitas páginas indexaram outras deram erros que infelizmente não sei como resolver.

    1. Ewerton Silva

      @disqus_TCcoSHHQIr:disqus o problema é que existem vários tipos de erros. Já tive erro de javascript que não pode constar na versão AMP por exemplo. O que fiz para resolver na determinada página foi incluir o conteúdo específico dela na versão AMP, editando manualmente no WordPress. Vale a pena usar o https://validator.ampproject.org/ para entender o problema e depois corrigí-lo.

  18. Rafael Pessi

    Obrigado pelo artigo, muito relevante! Iremos considerar esse fator para o redesign do nosso site, que se aproxima do modelo portal, com centenas de páginas.

    1. Ewerton Silva

      Obrigado pelo feedback, Rafa!

  19. Anima Educação

    Boa tarde.
    Para acompanha a performance no GA não poderia criar uma dimensão customizada?

  20. Rafa Pimenta

    Para quem não é desenvolvedor como posso conseguir alguém para ajudar as validações do meu blog ?
    OBrigado pelas dicas!

    1. Ewerton Silva

      Oi Rafa, beleza?

      O seu blog é em WordPress? Se for, basta realizar o passo a passo e validar no Google Search Console se as configurações foram aplicadas corretamente. Se o relatório apresentar erros, você vai precisar de um desenvolvedor para aplicar as correções (os erros apresentados geralmente são de rich snippets ou tecnologia obsoleta). Caso você não use WordPress ou outra plataforma CMS que tenha esse suporte, terá que aplicar com um desenvolvedor mesmo. Respondi sua dúvida?

      Abração!

      1. Lucas Jardim

        Ewerton mas é só desenvolver mesmo pra resolver os fails? Você recomenda contratar um in house ou freela?

  21. Enio F.

    Ótimo artigo, obrigado! Uma dúvida, a aplicação é válida também para sites institucionais onde o conteúdo é mais estático?

    1. Ewerton Silva

      Oi Enio, como vai? As AMPs podem ser aplicadas em conteúdos estáticos sim, inclusive o plugin para WordPress permite configurar para esse tipo de página. Abraço!

  22. Vinícius

    Legal! Reparei que no novo layout mobile o site da RD é todo AMP, mesmo para quem acessar diretamente. Boa sacada. Só fico com dúvidas em relação à geração de leads. Qual foi o sentimento de vocês?

  23. Olavo Zapata

    Muito bom Ewerton

    1. Ewerton Silva

      Valeu Olavo!