Qual a diferença entre Accelerated Mobile Pages (AMP) e páginas responsivas?

Este artigo é uma adaptação do blog post do Search Engine Journal, “The Difference Between Accelerated Mobile Pages (AMP) and Mobile-Friendly Pages” 

Se você trabalha com Marketing Digital, já deve saber da importância de ter um site rápido e responsivo em qualquer dispositivo.

Apesar disso, muitas empresas não acompanharam a mudança de comportamento dos usuários, que estão cada vez mais migrando para o celular quando buscam informações, leem artigos ou compram produtos.

Sua empresa é uma delas? Se sim, saiba que o Google está de olho em você!

Os esforços do buscador para valorizar sites que respondem bem em todas as telas não param, e quem ainda não se adaptou já pode sentir o impacto negativo no ranqueamento.

Mas se você chegou até esse post, talvez já esteja pensando em oferecer uma melhor experiência ao usuário que acessa seu site pelo smartphone e, consequentemente, ganhar pontos com o Google!

Neste post, vamos falar sobre páginas responsivas e Accelerated Mobile Pages (AMP), dois conceitos que estão relacionadas ao acesso por dispositivos móveis.

Você entenderá o que são, suas semelhanças e diferenças e, afinal, qual deles deve usar.

Acompanhe!

O que são páginas responsivas?

Páginas responsivas ou mobile-friendly são “amigáveis” aos dispositivos móveis.

Elas são otimizadas para oferecer ao usuário uma experiência agradável de navegação em qualquer aparelho, sem que ele precise dar zoom para ler os textos ou arrastar a tela para visualizar todo o conteúdo.

Para evitar esses problemas, o Google indica o uso do design responsivo, que visa oferecer uma experiência de visualização ideal das páginas nos mais diversos dispositivos – desktops, notebooks, tablets, smartphones etc. –, independentemente do tamanho da tela.

Com essa abordagem do design, o layout reage corretamente à largura da janela do navegador, tornando o conteúdo fluido.

No início de 2015, o Google anunciou que o critério mobile-friendly passaria a fazer parte do algoritmo de ranqueamento e as páginas responsivas ganhariam destaque, o que causaria um grande impacto nos resultados da busca em smartphones.

O anúncio foi tão bombástico que muitos o chamaram de Mobilegeddon. Era o aviso do buscador: “você precisa se adaptar, ou suas páginas cairão no ranqueamento”.

E era o susto que muitas empresas precisavam para começar a se mexer.

Como um site pode se tornar mobile-friendly

Uma página precisa atender aos seguintes critérios para ser considerada mobile-friendly:

• Evitar softwares incompatíveis com dispositivos móveis, como Flash
• Usar textos legíveis, sem precisar dar zoom com gesto de “pinça”
• Dimensionar conteúdos e imagens corretamente para o tamanho da tela
• Posicionar links e botões de modo que possam ser facilmente clicados

Para criar um site mobile-friendly, siga as orientações do Google em seu guia de dispositivos móveis para webmasters.

Além disso, use o teste de compatibilidade com dispositivos móveis, simples e gratuito, para verificar suas URLs.

O diagnóstico mostra como o robô do Google lê a página e apresenta os erros encontrados. A partir dessas informações, você pode começar a aplicar as melhorias.

O design responsivo é a melhor abordagem para criar layouts compatíveis com dispositivos móveis. Geralmente, plataformas como WordPress, Drupal e Joomla oferecem temas e modelos responsivos – verifique isso antes de adquirir um.

No Google Search Console, você pode conferir relatórios específicos sobre as páginas mobile-friendly, que identificam problemas de usabilidade em dispositivos móveis.

O que são Accelerated Mobile Pages (AMP)

A iniciativa mais recente no sentido de melhorar os resultados da busca e a experiência dos usuários em dispositivos móveis são as Accelerated Mobile Pages (AMP) ou “páginas móveis aceleradas”, em tradução livre.

O AMP Project é uma iniciativa de código aberto para desenvolver páginas de conteúdo estático que carreguem mais rapidamente em dispositivos móveis, melhorando a experiência de busca. Atualmente, elas carregam em menos de 1 segundo e usam 10 vezes menos dados.

O projeto é encabeçado pelo Google, em parceria com empresas de tecnologia e colaboração da comunidade, com o objetivo de construir uma web mobile mais rápida e eficiente.

Nos resultados da busca mobile, as páginas AMP são identificadas com um selo e aparecem atualmente em destaque, acima dos demais links orgânicos.

Experimente, por exemplo, digitar “Hillary Clinton” no seu smartphone. Várias páginas com o selo “AMP” aparecerão em destaque na seção de Notícias Principais.

E se elas forem compartilhadas em redes como Twitter, LinkedIn e Pinterest, quem acessá-las pelo smartphone também verá um carregamento rápido.

Ao clicar no link, o usuário será direcionado instantaneamente para uma página com visual e navegação super simplificados. Então, por natureza, páginas AMP são também mobile-friendly.

Lançado em outubro de 2015, o projeto começou com portais de notícias e já inclui hoje sites de entretenimento, viagens, receitas etc. No Brasil, esse processo ainda está em evolução.

Como configurar páginas AMP

As páginas AMP utilizam diversas técnicas de otimização de código e layout para simplificar o conteúdo e exibi-lo instantaneamente ao usuário.

Mas é preciso desenvolvê-las – o Google não gera uma versão AMP automaticamente.

Para saber como executar sua primeira página, siga o tutorial do próprio site AMP Project, onde você encontrará todas as orientações e especificações técnicas.

Confira os 6 passos para a publicação:

1. Criar o código HTML
2. Incluir imagens
3. Customizar estilos e layout
4. Pré-visualizar e validar a página
5. Preparar a página para ser exibida na busca
6. Publicar a página AMP

Para quem usa WordPress, uma boa notícia: existe um plugin que facilita este trabalho ao criar versões de páginas compatíveis com AMP. Se você já usa Yoast SEO, terá que fazer download do plugin Glue.

Outras plataformas de CMS, como Drupal e Hatena, também participam do projeto AMP e têm uma configuração facilitada.

Após a implementação, você também pode conferir os relatórios no Google Search Console. Ele mostra a lista das páginas AMP indexadas e dos erros específicos encontrados no site.

Diferença entre AMP do Google e Instant Articles do Facebook

Um projeto parecido com o AMP foi adotado pelo Facebook há pouco tempo. São os Instant Articles, que também oferecem um carregamento muito mais rápido para as páginas quando acessadas pelo smartphone.

A principal diferença é que os Instant Articles são hospedados no Facebook e ficam restritos a esta rede social, enquanto as páginas AMP são abertas a qualquer plataforma que possa interpretá-las.

Um propósito em comum: a experiência do usuário

Sempre que uma página demora a carregar ou aparece com problemas após o carregamento no celular, o site perde um usuário, que poderia navegar, converter e comprar lá dentro.

Por exemplo, segundo pesquisa da DoubleClick, 53% das pessoas abandonam um site quando ele demora mais que 3 segundos para carregar no celular.

Isso significa uma má experiência de busca, já que o site não atendeu à expectativa. E o Google não quer isso. Ele quer que os sites entreguem o que o usuário deseja, da melhor forma possível.

É por isso que o buscador se empenha em iniciativas como a valorização de páginas mobile-friendly e, posteriormente, o projeto AMP.

Tanto páginas mobile-friendly quanto AMP, se seguirem as diretrizes do Google, oferecem um uma melhor experiência ao usuário que acessa o site por smartphones.

Assim, ambas as iniciativas tendem a reduzir o abandono do site e a taxa de rejeição e aumentar o tempo de permanência e o número de páginas por visita.

Principais diferenças entre páginas mobile-friendly e AMP

Embora tenham um mesmo propósito, as páginas mobile-friendly e AMP têm algumas importantes diferenças, que você deve conhecer para estabelecer suas estratégias mobile.

Design vs. Velocidade

As duas iniciativas estão focadas em usabilidade via mobile, mas existe uma diferença clara de foco.

As páginas mobile-friendly estão focadas no design, ou seja, em como apresentar o conteúdo de maneira organizada e eficiente em qualquer aparelho.

Já o projeto AMP está focado na velocidade de carregamento, ou seja, em como entregar o conteúdo da forma mais rápida possível para o usuário de dispositivos móveis.

Exibição nos resultados da busca

Em 2014, o Google anunciou que as páginas mobile-friendly ganhariam um selo nos resultados das buscas feitas em smartphones, avisando aos usuários que aquele link levaria a uma página compatível com dispositivos móveis.

Porém, em agosto de 2016, o Google verificou que 85% dos resultados já atendiam a esse padrão. Então, o buscador retirou a exibição do selo. Hoje, elas são apresentadas nos resultados como qualquer outro link.

Esse mesmo tipo de selo passou a ser usado para as páginas AMP. Nos resultados da busca, além de estarem identificadas, elas podem ainda ser exibidas em modo de carrossel, com uma imagem (se a página estiver configurada para isso com dados estruturados).

Layout da página

As páginas AMP são extremamente simplificadas. Elas apresentam o conteúdo em apenas uma coluna, contendo texto, imagens, anúncios e outros poucos elementos. Itens como barras laterais, menus, pop-ups, formulários e comentários não aparecem.

As possibilidades de mexer no layout são limitadas a algumas customizações, como cores, fontes, logotipo e botões de compartilhamento. Mas o foco, aqui, é a leitura do conteúdo.

Já nas páginas mobile-friendly, você tem liberdade para criar o design que quiser. Além de personalizar cada detalhe do layout, você pode inserir menus, caixa de comentários, formulários etc.

Mas a mentalidade para a criação e o desenvolvimento é a mesma: o ideal para dispositivos móveis é simplificar, entendendo as informações prioritárias para o usuário que acessa seu site pelo celular.

Velocidade de carregamento

Como as páginas mobile-friendly têm muitas funcionalidades, como recursos de estilos e fontes específicas, elas se tornam mais pesadas e lentas, embora ofereçam mais opções de navegação e um visual mais rico ao usuário.

Já as páginas AMP buscam a simplificação máxima, com foco total no conteúdo, dispensando qualquer refinamento de layout. Por isso, o AMP tornou o carregamento praticamente instantâneo, muito mais rápido do que as páginas mobile-friendly.

Fator de ranqueamento

Existe uma crença de que o algoritmo do Google tem mais de 200 fatores de ranqueamento, que não são totalmente conhecidos porque o buscador não revela todos os seus segredos.

Porém, o Google fez questão de revelar com clareza um desses fatores: o critério mobile-friendly. Então, se não sabemos exatamente como funciona o algoritmo, de pelo menos uma coisa podemos ter certeza: páginas responsivas têm prioridade no posicionamento.

O mesmo não acontece em relação às páginas AMP. Como esse é um projeto recente, para o qual o Google quer dar visibilidade e conquistar mais adeptos, ele tem colocado as páginas compatíveis com AMP em destaque nos resultados da busca.

Isso não quer dizer, no entanto, que tenha entrado nos critérios do algoritmo. Por isso, o Google explica: AMP não é um fator de ranqueamento (pelo menos AINDA não…).

Ainda assim, como elas terão uma velocidade incrível e uma taxa de rejeição reduzida, é provável que o Google premie essas páginas com um bom posicionamento.

Conteúdo duplicado

Uma página AMP habilitada recebe um /amp ao final da URL original. Por exemplo, um post deste blog com AMP ficaria assim: www.marketingdeconteudo.com/post/amp.

Ou seja, cria-se uma segunda URL e o conteúdo fica duplicado, o que é um problema em SEO.

Para resolver esta questão, você precisa informar qual é a URL original e que existe uma versão AMP dela.

Como fazer isso? Por meio das tags “amphtml” e “canonical”. Veja como ficariam os códigos:

• Na página original: <link rel=”amphtml” href=”https://www.marketingdeconteudo.com/post/amp/” />
• Na página AMP: <link rel=”canonical” href=”https://www. marketingdeconteudo.com/post/” />

Já uma página responsiva utiliza a mesma URL e o mesmo código para ser exibida em um computador, um tablet ou um smartphone.

No momento da exibição, o layout se ajusta à tela. Ou seja, existe apenas uma versão da página e o conteúdo não fica duplicado.

LEIA TAMBÉM
Confira tudo que você precisa para criar o site da sua empresa
 Saiba porque o WordPress é a plataforma adequada para o seu site
Crie um blog para o seu negócio usando o Stage

Afinal, qual devo usar?

As Accelerated Mobile Pages ainda estão em fase inicial. Recursos estão sendo adicionados aos poucos, depois de muitos testes e melhorias. Por isso, talvez você se depare com algumas limitações, que não atendam às suas necessidades.

O uso ideal das páginas AMP ainda é para conteúdos estáticos, como notícias e blogposts, em que a prioridade é a leitura.

Já para formulários e aplicações personalizadas, o projeto AMP ainda não oferece recursos completos, embora esteja evoluindo nesse sentido.

Então, se seu objetivo é converter ou gerar leads, talvez uma página responsiva seja mais adequada nesse momento para atender às necessidades do seu negócio.

Páginas mobile-friendly já são uma realidade. Além da necessidade de se adaptar à mudança de comportamento do consumidor, elas são um fator de ranqueamento do Google.

Então, se você ainda não tem, comece criando um site compatível com dispositivos móveis. Depois, crie as versões AMP dessas páginas.

Assim, você irá sempre oferecer uma experiência positiva ao usuário mobile, alavancando seus conteúdos e o tráfego do seu site.

Desenvolver páginas rápidas e responsivas é só uma das estratégias para quem quer melhorar sua atuação em dispositivos móveis. Agora, conheça todas as possibilidades no nosso artigo sobre mobile marketing!