Guia detalhado para AMP – Páginas móveis aceleradas do Google

Como o AMP funciona? Como criar e personalizar páginas móveis aceleradas? Quais ferramentas os proprietários de sites podem usar em CMS populares, incluindo WordPress, Joomla!, Drupal, OpenCart? Quais armadilhas os webmasters enfrentam ao implementar o AMP e como resolver problemas?

Confira as respostas para essas e outras perguntas no manual a seguir!

O que é AMP e como funciona

AMP significa Accelerated Mobile Pages. O termo significa a tecnologia de exibição de páginas de um site para usuários móveis que fornece a velocidade máxima de carregamento do site.

AMP é uma versão radicalmente truncada de páginas da web convencionais. Nas páginas aceleradas permanece o conteúdo principal. A maioria dos elementos auxiliares, incluindo widgets, formulários de comentários, blocos de conteúdo recomendado, anúncios tradicionais estão ausentes nas páginas aceleradas.

O Accelerated Mobile Pages é uma plataforma de código aberto e um projeto liderado pelo Google. Portanto, qualquer pessoa pode usar essa iniciativa gratuitamente.

O inspirador ideológico e porta-voz do projeto é o Google. O maior mecanismo de pesquisa do mundo usa páginas AMP para exibi-lo nas páginas de resultados de pesquisa (SERP). Além disso, o Google armazena em cache as páginas otimizadas para dispositivos móveis e atua como CDN para isso. Devido a isso, os usuários de dispositivos móveis baixam rapidamente o conteúdo AMP, mesmo em conexões de dados de baixa velocidade.

Este diagrama e explicação, do Whiteboard Friday de Will Critchlow, simplificam o processo:

As páginas aceleradas consistem em marcação HTML com tags especiais e a biblioteca JavaScript dedicada.

• O AMP obriga você a usar uma versão simplificada do CSS;
• Javascript não é permitido;
• Você é forçado a usar uma biblioteca Javascript pronta para uso que o AMP fornece – o que força suas imagens a carregar lentamente.

Na página AMP, você pode usar um conjunto limitado de tags e scripts. Isso reduz a funcionalidade e o apelo externo das páginas, mas aumenta drasticamente a velocidade de carregamento. Além disso, o tempo de carregamento da página foi reduzido pela tecnologia de pré-cache do Google.

Os internautas podem usar o AMP de duas maneiras fundamentalmente diferentes. A primeira envolve a transferência de dados do servidor do proprietário do site para o computador do visitante e a exibição da versão acelerada da página no navegador. Por exemplo, em um site habilitado para AMP, você pode configurar o redirecionamento automático de todos os usuários de dispositivos móveis para páginas aceleradas. O visitante pode acessar o AMP usando um dispositivo móvel ou adicionar o sufixo “/amp” ao URL na barra de endereços do navegador.

O segundo método envolve a visualização da versão em cache do AMP de um servidor do Google.

O maior mecanismo de pesquisa do mundo exibe links para páginas aceleradas no formato carrossel na SERP ou marca o conteúdo AMP com um ícone de logotipo AMP.

Ao visualizar a página, o usuário não acessa o site, mas navega pelo mesmo conteúdo da página do editor.

Infelizmente, o Google não considera necessário exibir carrosséis AMP nas páginas de problemas gerados para esses dispositivos. Portanto, graças ao Search Engine Land por exemplo.

Vale a pena usar as Accelerated Mobile Pages?

Para responder a essa pergunta, você precisa prestar atenção às vantagens, desvantagens e resultados da implementação do AMP.

Vantagens do AMP

A principal vantagem do AMP é a otimização dramática da velocidade de carregamento. A tabela mostra os resultados do teste da versão AMP básica e acelerada de uma página por alguns serviços de métricas populares.

A baixa velocidade de carregamento afeta negativamente a experiência do usuário. Mais da metade dos visitantes não espera que o conteúdo seja exibido por mais de 3 segundos. As páginas aceleradas são carregadas muito mais rapidamente do que as páginas padrão.

Isso é possível devido a uma redução significativa na quantidade de dados transferidos usando a tecnologia AMP.

Além disso, se um site de compras online está ganhando US$ 100.000 por dia, um atraso de 1 segundo na página pode custar US$ 2,5 milhões em vendas perdidas a cada ano.

O carregamento rápido é crucial para usuários de dispositivos móveis. É por isso que o Google faz o pré-cache do AMP e funciona como um CDN para pessoas que usam Internet lenta.

A velocidade de carregamento e a experiência do usuário com o site é um dos principais fatores de classificação do Google. As Accelerated Mobile Pages em si oferecem vantagens adicionais no ranking do Google?

Em meados de 2016, no Search Engine Journal Summit do Google em Chicago, o porta-voz do Google, Harry Illes, disse que as Accelerated Mobile Pages não estão entre os fatores de classificação. Mas o representante do Google não conseguiu dizer inequivocamente que o AMP não será um fator de classificação no futuro.

O que isto significa? A tecnologia AMP por si só não dá aos sites a vantagem de classificação. No entanto, aumenta significativamente a velocidade de carregamento do site que é levado em consideração pelo Rankbrain que analisa fatores comportamentais para o algoritmo de classificação do Google.

Sites de notícias e projetos de conteúdo se beneficiam da implementação de AMP quando entram no carrossel de AMP. Esse elemento é exibido na parte superior da SERP acima dos resultados da pesquisa. Isso fornece aos editores cliques extras e melhora indiretamente a classificação nos mecanismos de pesquisa e SEO.

Assim, a principal vantagem das páginas aceleradas é a alta velocidade de carregamento. Melhora a experiência do usuário e pode influenciar indiretamente as posições dos sites na SERP do Google. Além disso, os recursos podem receber visualizações adicionais graças ao carrossel de AMP.

Desvantagens das páginas móveis aceleradas

AMP tem algumas desvantagens. Aqui estão os principais:

• Os visitantes das páginas AMP não são rastreáveis ​​pelo código padrão do Google Analytics na versão principal do site. Para rastrear as visualizações AMP e os visitantes, você precisa adicionar um código de rastreamento dedicado às páginas AMP. Você pode fazer isso facilmente com o plugin Glue for Yoast SEO & AMP.
• As páginas aceleradas têm funcionalidade reduzida em comparação com as básicas. Todos os módulos clássicos como menu de navegação, bloco de posts relacionados, barra lateral, formulário de comentários devem ser adicionados manualmente ou através de plugins.
• Por uma questão de alta velocidade de carregamento, você sacrifica os efeitos visuais do site.
• Se o Google mostrar as páginas aceleradas do site no carrossel, os usuários poderão lê-las sem sair da SERP.

Pela alta velocidade de carregamento, você tem que pagar o preço da funcionalidade e aparência das páginas. Vale a pena notar que a maioria das deficiências pode ser total ou parcialmente eliminada. No entanto, o AMP sempre será uma versão simplificada da página base do site.

Resultados da implementação de AMP

O Google reconhece rapidamente o AMP em um site. As informações sobre as páginas AMP indexadas aparecem na seção Search Console "Aparência da pesquisa >> Accelerated Mobile Pages" alguns dias após o lançamento do AMP no site.

Quase imediatamente após a indexação, o Google enviará tráfego para a versão AMP do seu site. No final de maio de 2018, aproximadamente 50% dos visitantes acessam o Google diretamente na versão acelerada da página, em vez da básica. Aqui estão algumas estatísticas interessantes:

• Em uma semana, de 20 a 26 de maio, 1.812 visitantes chegaram ao site de teste do Google.
• 1.011 de 1.812 pessoas são usuários móveis.
• 842 usuários do Google desembarcaram em páginas móveis aceleradas.

Usando o exemplo de um recurso específico sem pretender ser representativo, fica claro que o Google voluntariamente envia visitantes para páginas AMP. Nas páginas aceleradas do mecanismo de busca chegaram 46% do número total de usuários ou 83% dos usuários móveis. Os 17% restantes dos proprietários de smartphones e tablets entraram nas páginas básicas com layout adaptável.

Aqui estão os dados aos quais você deve prestar atenção:

• A taxa de rejeição das Accelerated Mobile Pages é significativamente maior do que a das páginas padrão. Segundo o Google Analytics, chegou a 86% contra 55% nas páginas normais. Isso pode ser devido ao rastreamento incorreto do desempenho das páginas aceleradas pelo serviço Google Analytics. Quando um usuário passa de AMP para uma página básica, o sistema de monitoramento conta uma nova visita. Nesse caso, a taxa de rejeição das páginas aceleradas aumenta e a profundidade da sessão diminui.
• A proporção de páginas por sessão para visitantes AMP é menor do que para visitantes de páginas adaptáveis ​​ou páginas normais. Os usuários são muito menos propensos a migrar para outras páginas do site usando uma seção de postagens relacionadas do que os visitantes de páginas comuns.

Após a implementação do AMP, houve um pequeno aumento no tráfego do Google. A dinâmica de crescimento moderado do tráfego de busca permaneceu.

Para avaliar os resultados do uso de AMP apenas um recurso com uma média de atendimento do Google de cerca de 150 visitantes únicos por dia não é suficiente. Portanto, vale a pena recorrer à experiência de outra pessoa. Seguem alguns dados interessantes:

De acordo com os resultados da pesquisa, o Google afirmou a maior eficiência dos anúncios de contexto no AMP em comparação com as páginas básicas. O bloco do AdSense exibido na parte visível da tela cresceu 80% e a CTR dos blocos de anúncios aumentou 90%.

Dados curiosos do Search Engine Watch. A Wired Magazine recebeu um aumento de 25% nos links de CTR nos resultados de pesquisa graças ao AMP. E a clicabilidade dos anúncios em páginas aceleradas cresceu 63%. A frequência mensal do site da revista Slate cresceu 44% após a implantação do AMP.

Representantes da CNN em entrevista ao The Wall Street Journal disseram que AMP e páginas básicas são monetizadas com a ajuda da publicidade de forma igualmente eficaz.

O AMP está carregando muito mais rápido do que as páginas básicas. Mas você tem que sacrificar a funcionalidade e a aparência das páginas. No site de teste, não houve aumento repentino no tráfego após a implementação do AMP. No entanto, o Google direciona cada terceiro visitante em um total de dois em cada três usuários móveis para páginas aceleradas, em vez de padrão, do blog de teste.

Alguns webmasters consideram o AMP um capricho desnecessário do Google, por outro lado, muitos editores na Internet relatam um aumento no número de visitantes dos sites e aumentam a eficácia dos anúncios. Essas informações ajudarão você a decidir por si mesmo se deve usar as páginas móveis aceleradas.

Como instalar AMP no WordPress

Para a sorte dos usuários do WordPress, as Accelerated Mobile Pages podem ser implementadas em um minuto. Para fazer isso, você precisa instalar e ativar o plug-in AMP para WordPress da equipe de desenvolvimento do WordPress. O plugin AMP da Automattic não tem configurações, mas funciona perfeitamente em um post regular de blog e é compatível com quase todos os temas do WordPress.

Você pode testar sua página AMP no validador de AMP.

Para estender a funcionalidade e melhorar a aparência das páginas AMP, recomendamos usar um AMP alternativo para o plug-in WP. Depois de instalar e ativar o plugin, vá para o menu de configuração de página rápida no painel de administração.

Na seção Geral, se necessário, faça o upload do logotipo do site. O tamanho de imagem recomendado é 190×36 px. Usando o botão Redimensionar, você pode especificar um tamanho arbitrário do logotipo. Ao contrário do plugin AMP no WordPress da Automattic, se você precisar de versões AMP de páginas estáticas, mude o botão para a posição On.

Na seção Analytics, ative o rastreamento de visitas AMP usando o Google Analytics. Para fazer isso, insira o ID do Google Analytics. Além disso, aqui você pode ativar o Google Analytics usando o Google Tag Manager.

Na seção Design, você pode alterar o tema e o layout das páginas AMP. Aqui você pode selecionar opções de design prontas. Você também pode criar seu próprio tema personalizado com o AMP Theme Framework.

Na seção SEO, você pode configurar a exibição de metadados do plug-in Yoast SEO em páginas aceleradas, adicionar código HTML arbitrário ao cabeçalho e também configurar a indexação das páginas de arquivos e categorias. Se você não usa o plugin Yoast SEO, deixe as configurações padrão.

Na seção Anúncio, configure a exibição de anúncios do AdSense. O plugin oferece quatro opções de publicidade: acima do cabeçalho em todas as páginas, abaixo do rodapé em todas as páginas e acima e abaixo do conteúdo nas páginas das publicações.

Para colocar um anúncio sob o conteúdo da página de postagem, ative o botão AD # 4. Selecione o tamanho do anúncio. Crie um anúncio em sua conta do Google AdSense e adicione os IDs do usuário e do bloco de anúncios aos campos sugeridos. Pegue os dados do código do anúncio criado.

Você pode exibir um bloco de conteúdo correspondente em páginas aceleradas quando necessário. O conteúdo correspondente é uma ferramenta de recomendação gratuita que oferece uma maneira simples de promover seu conteúdo para os visitantes do site. Ao oferecer a seus leitores mais conteúdo relevante para eles, você pode aumentar as visualizações de página do seu site, o tempo gasto em seu site, a fidelidade do leitor, as impressões de anúncios e, por fim, a receita com anúncios. Para que isso aconteça, especifique o ID do bloco no campo correspondente do plugin.

Na seção Single configure a aparência e os recursos da página de posts. Você pode habilitar ícones sociais anexados na parte inferior da tela, links para a postagem anterior e seguinte e também configurar um bloco de postagens relacionadas.

Na seção Social Share, habilita os botões de compartilhamento social. Na seção Dados Estruturados, carrega a imagem para a micromarcação de página acelerada. O Google pode usá-lo para gerar resultados de pesquisa. Além disso, especifique o tamanho das imagens que serão usadas nos snippets ao publicar links para páginas aceleradas nas redes sociais.

Na seção Notificação, você pode configurar a exibição de notificações. Por exemplo, você pode informar os visitantes sobre as políticas de uso de cookies e mostrar um aviso do GDPR.

Na seção Comentários do Disqus, você pode habilitar o sistema de comentários Disqus nas páginas aceleradas. Para fazer isso, alterne o botão Disqus Comments Support para On, especifique a URL do recurso no sistema Disqus e o caminho para o arquivo de comentários no servidor.

Caso não habilite o sistema de comentários, a página AMP exibirá o texto dos comentários deixados pelos visitantes da página base e o botão “Comentário”. Com o clique do botão, o usuário será redirecionado para a versão básica da página.

Na seção Configurações Avançadas, você pode habilitar a versão acelerada da página principal, bem como as páginas dos títulos e arquivos. Para este recurso, use os botões Home Support e Archive Page Support.

O botão Mobile Redirection permite o redirecionamento automático de todos os usuários móveis da versão adaptável do site para AMP.

Não redirecione todos os usuários para AMP. Nem todos os visitantes precisam de páginas aceleradas para o site. O redirecionamento forçará os proprietários de smartphones e tablets a usar versões abreviadas de páginas com funcionalidade limitada. Isso pode levar a uma queda na taxa de conversão do site.

Além disso, se o Google vê a versão desktop do site e AMP, para o índice mobile-first ele escolhe uma versão para desktops. Isso pode levar à perda de tráfego devido à falta de adaptação do recurso aos dispositivos móveis.

Certifique-se de ativar o link para a versão completa das páginas no rodapé usando o botão Link to Non-AMP no rodapé. Isso ajudará os usuários a navegar para as páginas básicas com funcionalidades extras.

Na seção Extensão, você pode comprar e ativar complementos para o plug-in. Por exemplo, você pode usar uma ferramenta adicional para gerenciar a publicidade em páginas aceleradas ou adicionar a micromarcação “Classificação” ao AMP.

Na seção Corrigir erros de AMP, você pode ativar o suporte pago. Os desenvolvedores do plug-in ajudarão você a entender as configurações e a se livrar das notificações de erro no Search Console.

O bloco Importar/Exportar permite migrar as configurações de páginas aceleradas de um site para outro.

Assim, em sites WordPress, você pode implementar páginas aceleradas em poucos minutos. Você gasta um pouco mais de tempo personalizando o layout e a funcionalidade com o plug-in AMP para WP.

AMP para Drupal

Para implementar Accelerated Mobile Pages em sites Drupal, use as seguintes ferramentas:

• Módulo AMP.
• Tema AMP.
• HTML da biblioteca AMP.

Para trabalhar com o módulo AMP, são necessários os plugins Token e Chaos Tools. Se você planeja exibir anúncios do AdSense em páginas AMP, instale a extensão de integração do Google AdSense.

Na página Configurações de AMP da guia Configuração, ative a exibição de versões aceleradas para publicações e páginas. Selecione o tema que será usado para criar as páginas aceleradas. Insira o ID do Google Analytics para rastrear as visitas à página. Além disso, você pode usar o AMP-pixel para contar visualizações.

Na guia AMP Metadata, insira o nome do site. Se necessário, baixe o logotipo e selecione seu tamanho.

Após a configuração verifica a exibição das versões aceleradas das páginas. Para fazer isso, adicione o valor “?amp” ao URL.

AMP para Joomla!

Para implementar páginas aceleradas no Joomla! sites usam a extensão wbAMP. A versão completa deste plugin custará $ 44 por ano. A versão da comunidade está disponível gratuitamente.

Depois de instalar e ativar o plugin, vá para a página de configurações. A versão gratuita do plug-in tem funcionalidade limitada para que você possa configurar apenas parâmetros básicos para exibir páginas aceleradas.

Deixe o valor de sufixo padrão para o URL de AMP. Nesse caso, você só precisa adicionar o valor de amp para visualizar as páginas aceleradas.

Também na página principal de configurações, forneça informações sobre o site e os dados do editor. Escolha o tipo apropriado de micromarcação: NewsArticle para notas de notícias e BlogPosting para postagens de blog.

Selecione as páginas para as quais você deseja criar versões aceleradas. Para fazer isso, alterne para a guia Selecionar páginas.

Preencha a seção “Regra para com_content”. Se você planeja exibir páginas aceleradas apenas para publicações, no campo “Visualizar”, especifique o valor do Artigo. No campo “Categorias”, selecione as categorias cujas publicações terão versões AMP. Digite os campos ID, ID do material e “Tarefa”, digite o valor “*”. Nesse caso, o AMP será criado para todas as publicações nas categorias selecionadas.

Outras configurações na versão gratuita do plugin não estão disponíveis.

Existe outra ferramenta comercial para criar páginas aceleradas no Joomla! sites: plugin JAmp. Custa 39 euros. No site de teste do plugin, você pode ver como a ferramenta transforma uma página padrão em uma página acelerada.

Ao contrário do WordPress e Drupal, para Joomla! não existe uma ferramenta totalmente gratuita para criar AMP.

AMP para loja online

A tecnologia AMP é projetada principalmente para projetos de conteúdo: recursos de notícias, blogs. Devo criar páginas aceleradas para sites de comércio eletrônico?

Os autores do projeto AMP argumentam que as lojas online podem e devem usar páginas aceleradas. O principal argumento a favor da implementação da tecnologia nos recursos do e-commerce – aumentar a velocidade de carregamento das páginas mobile afeta positivamente a conversão. A propósito, o eBay está experimentando o AMP desde meados de 2016.

AMP para OpenCart

Para criar páginas aceleradas para um OpenCart, use o módulo Accelerated Mobile Pages. Esta é uma solução paga. E tenha sempre a possibilidade de visualizar a partir do link a versão de teste das páginas mobile aceleradas criadas com a ajuda deste módulo.

Você também pode testar o AMP para o módulo Product Pages. Esta é uma solução gratuita. O complemento cria AMP apenas para páginas de produtos. Para o trabalho do AMP for Product Pages, você precisa do módulo SEO Friendly URLS.

Um módulo AMP gratuito para o módulo Product Pages não é recomendado neste momento, pois está sendo testado em uma fonte anterior agora por um dia e meio e não está funcionando. Após a instalação e ativação do programa no OpenCart versão 2.3.0.2, as páginas aceleradas no site não aparecem. O complemento adiciona um link para a versão AMP no cabeçalho da página. Quando você clica no link, aparece um erro 404.

Além disso, como resultado da instalação do módulo, o site periodicamente fica inacessível e na tela do navegador aparecem diferentes tipos de rabiscos e mojibake. A capacidade de manutenção é restaurada após a remoção e reinstalação do módulo.

Talvez o problema esteja relacionado à falta de experiência real na administração de sites OpenCart. Os usuários do fórum do perfil têm feedbacks principalmente positivos sobre o AMP para o módulo de Páginas de produtos.

AMP para Magento

Se sua loja online estiver rodando na plataforma Magento, use o plugin pago Accelerated Mobile Pages. O módulo cria AMP para as páginas principal, categoria e produtos.

AMP para PrestaShop

Páginas aceleradas para a loja PrestaShop podem ser criadas usando o módulo pago PrestaShop AMP. Gera versões aceleradas das páginas principais, de categorias e cartões de produtos.

Os recursos do módulo podem ser avaliados no site de teste.

Implementar ou não AMP, eis a questão!

Se você tiver um projeto de conteúdo executado no WordPress, poderá implementar páginas AMP de maneira rápida e econômica. Você gastará um minuto instalando o plug-in básico e meia hora para instalar e configurar um plug-in AMP alternativo.

Os sites gerenciados pelo Drupal também têm uma solução gratuita que pode ser instalada e configurada rapidamente. Mas para Joomla! e CMS para plugins de lojas online para criar AMP tem que ser comprado.

No entanto, em alguns casos, os resultados do AMP podem não ser tão brilhantes e brilhantes quanto o esperado. No estudo de caso de implementação de AMP, Kinsta compartilha insights muito importantes – para a época em que o AMP foi ativado no blog Kinsta:

• Os leads móveis caíram 59,09%.
• As inscrições por e-mail em newsletters do celular caíram 16,67%.
• As criações de contas a partir de dispositivos móveis caíram 10,53%.

Além disso, quando o AMP removeu totalmente a classificação de Kinsta, na verdade, subiu. Por que está acontecendo? Provavelmente, uma das maiores razões é que o AMP pode aumentar o desempenho da SERP para projetos com muitos anúncios e orientados para notícias; entretanto, se o seu site já é bastante rápido no celular, não há grande impacto positivo do AMP.

De acordo com o Google, 70% das conexões de rede celular globalmente ocorrerão em 3G ou velocidades mais lentas até 2020. Portanto, embora seja super importante otimizar para celular, aqueles que já têm um site bem otimizado provavelmente não notarão grandes diferenças.

Faz sentido usar Accelerated Mobile Pages se sua funcionalidade e aparência forem inferiores às páginas padrão e ainda não houver vantagens óbvias no ranking?

Líder global do mercado de buscas Google comprovadamente só irá mais longe com este projeto e outros terão que jogar pelas suas regras. A lógica é simples: a participação do tráfego móvel está crescendo e crescerá. As pessoas ficarão online não apenas com a ajuda de telefones e relógios. Até cafeteiras e máquinas de lavar estão online agora. Portanto, a tecnologia de exibição de conteúdo nas telas dos dispositivos móveis evoluirá.

A propósito, alguns anos atrás, os proprietários de sites estavam céticos sobre a necessidade de adaptar o site para o tráfego móvel. Hoje, uma versão móvel ou layout adaptável é uma necessidade para a operação eficaz de um recurso online.

É muito provável que a tecnologia AMP se torne uma das condições básicas para a eficácia dos sites no futuro próximo.