Google AMP – Como Fazer Sua Implementação no WordPress

A web está em permanente evolução e para muitos empresários, isso significa a necessidade de estar atualizado em relação a todas as mudanças que o Google apresenta. Se você não se adaptar, pode ficar para trás. O Google AMP, a iniciativa móvel para acelerar a web, está agora prestes a celebrar o seu primeiro aniversário. Como está muito mais estável do que há seis meses, achámos que esse seria um bom momento para compartilhar com você alguns passos sobre como começar usando o Google AMP no WordPress, assim como alguns dos prós e contras dessa nova plataforma.

• O que é o Google AMP?
• Vantagens do Google AMP
• Desvantagens do Google AMP
• Como configurar o Google AMP no WordPress
• Validando Seu código do Google AMP

O que é o Google AMP?

Google AMP (Accelerated Mobile Pages Project) foi lançado pela primeira vez em outubro de 2015. O projeto assenta em AMP HTML, um novo framework open source que foi inteiramente construído com base em tecnologias web já existentes, possibilitando aos websites tornarem suas páginas web mais leves. Explicando de forma básica, ele consegue oferecer uma versão mais simples e menos sobrecarregada da sua página atual.

Desde o primeiro dia, a velocidade tem sido um dos grandes focos do AMP. É indubitavelmente das coisas mais frustrantes na web móvel – algo comprovado por pesquisas recentes do Google que mostram que 53% das pessoas abandonam um site que não consegue carregar em três segundos ou menos. Essa é a pior situação para usuários, empresas, editores, websites e para a web móvel como um todo. – David Besbris, líder do projeto AMP no Google

Com base no mais recente relatório de Desempenho do Retalho Online da Akamai, cada décimo de segundo importa. Mesmo com um ligeiro aumento no tempo de carregamento da página para 2.8 segundos, foi registrada uma queda de 2.4% na taxa de conversão.

Muitas empresas de grandes dimensões adotaram o Google AMP no ano passado, incluindo WordPress, Reddit, eBay, Pinterest, Washington Post, Wired, Gizmodo, etc. Segundo o Google, o Slate aumentou seus visitantes únicos mensais em 44% e houve um aumento de 73% nas visitas mensais por visitante único.

Quando uma página é apresentada via AMP no Google ela mostra o símbolo AMP do lado, como exemplificado na demonstração do New York Times. Vale a pena lembrar que você precisa estar em um dispositivo móvel para testar isso. Também pode usar o emulador de dispositivo nas devtools do Chrome. A marcação de dados estruturados permite que o Google apresente seu conteúdo de forma mais latentes nos resultados de busca. Por exemplo, os artigos AMP que incluam as propriedades corretas de marcação podem obter o desejado lugar no carrossel das SERPs, como mostrado abaixo.

E aqui fica um exemplo de como uma página AMP surge no site do The New York Times. Como pode ver, ela é muito básica e simples, que é exatamente o objetivo do AMP. Isso garante que a página carrega rápido e proporciona melhor usabilidade.

À semelhança de qualquer nova plataforma, você deve pesar os prós e contras e decidir se é a medida correta para sua empresa ou website.

Vantagens do Google AMP

• O AMP é gratuito e open source.
• O AMP consegue melhorar definitivamente os tempos de carregamento do seu site WordPress.E é importante recordar que a velocidade é um fator de classificação.
• Melhores colocações nas SERPs com possibilidade de carrossel para ter um melhor CTR.Em uma implementação com uma editora popular, o Google AMP aumentou as CTRs em 600%!
• O Google AMP aplica muitas práticas recomendadas de desempenho web, como a prevenção de grandes frameworks CSS e JS.
• Pode ter um impacto positivo nas suas conversões.
• Foram aplicadas muitas melhorias no ano passado e as opções de publicidade agora estão imediatamente disponíveis no Google AMP.Isso significa que revistas e novas publicações podem manter ou até aumentar sua receita do Google AdSense.
• Otimização automática de imagem (até mesmo conversão para o formato WebP!)
• O AMP Lite apresenta uma otimização adicional para conexões lentas de rede. O Google testemunhou uma redução combinada de 45% em bytes.

Desvantagens do Google AMP

• O AMP não é atualmente um fator de classificação, mas poderia ser no futuro. Isso pode ser encarado como uma desvantagem ou vantagem.
• O AMP pode ter uma implementação complicada e se revela complexo caso você não seja um desenvolvedor. Felizmente a plataforma WordPress é um pouco mais simples do que outras.
• Apresenta uma nova plataforma independente e funcionalidades com as quais você precisa de se preocupar. O que aconteceu com a simples otimização dos nossos sites móveis?
• Pode prejudicar ou afetar suas conversões.
• Há relatos de que o Google AMP bagunça as estatísticas no Google Analytics.
• Teve gente que ficou com um engajamento ruim e taxas de rejeição mais altas.
• Ainda tem scripts e aplicativos de terceiros que podem não ser suportados.
• Não existe suporte para alguns navegadores mais antigos, como o Internet Explorer 11. Eles assumiram de uma forma geral, suportarão as duas versões mais recentes dos principais navegadores, como o Chrome, Firefox, Edge, Safari e Opera. E suportam versões desktop, celular, tablet e web view dos respetivos navegadores.
• Leia a opinião de Jan Dawson sobre o porquê de o Google AMP estar dificultando e não simplificando a publicação web.
• Leiao artigo de Alex Kras sobre alguns dos problemas do Google AMP, juntamente com uma resposta do líder tecnológico no projeto AMP no Google.
• Tim Kadlec compartilha sua opinião sobre o Google AMP e a necessidade de existir uma melhor alternativa: políticas de desempenho de conteúdo.

Desde fevereiro de 2017, o Google AMP decidiu exibir os URLs diretos do editor. Anteriormente apenas exibia a versão do Google associada ao cache. Isso fez com que as pessoas aumentassem suas preocupações relacionadas com o branding. Felizmente o Google também notou isso e fez uma alteração. Agora, o campo de URL de um navegador continuará mostrando um URL do Google. Contudo, a área do cabeçalho AMP exibirá um ícone de link ou cadeado, designado por botão “âncora”. Ao clicar nele, o URL direto do editor será exibido para que possa ser facilmente copiado e colado. Ainda não é uma solução perfeita, mas é melhor do que nada.

Aqui fica outro exemplo da perda de branding.

Another reason to not use Google AMP –> You lose your brand 🙂 cc @HuffingtonPost you might want to think about it 🙂 pic.twitter.com/n3LEHIOEBZ

— Syed Balkhi (@syedbalkhi) January 19, 2017

Também é importante notar que se a única página mobile existente for uma versão AMP, o Google seguirá usando a versão desktop para indexação, mesmo quando o Google altera seu índice para índice móvel em primeiro lugar.

So @maileohye confirmed that in a situation where there is desktop and AMP, Google will index desktop for mobile first. #StateofSearch

— Jennifer Slegg (@jenstar) November 14, 2016

Como Configurar o Google AMP no WordPress

É atualmente muito mais fácil implementar o Google AMP no WordPress do que há seis meses. Foi feito muito progresso nos plugins WordPress e na plataforma. Contudo, você precisa lembrar de validar seu código no Google para mostrar a versão do AMP do seu site nas SERPs. Um plugin transformará sua postagem em uma versão AMP, mas é o Google quem decide mostrar a versão AMP.

Ou seja, seu artigo WordPress recebe um URL diferente. Tudo isso é feito automaticamente pelo plugin WordPress. Normalmente, é acrescentado /amp ou /?amp à sua postagem atual. Eis um exemplo:

URL Original da Postagem no Blog: https://domain.com/blog-post
URL da Postagem AMP no Blog: https://domain.com/blog-post/amp/

Plugins WordPress do Google AMP

De momento, o repositório tem 2 plugins populares do WordPress que podem ajudar você a configurar o Google AMP. O primeiro é o plugin oficial gratuito AMP, desenvolvido pela equipe Automattic.

No momento em que esse artigo é escrito, possui mais de 200,000 instalações ativas com uma classificação de 3,5 estrelas. Você pode baixá-lo no Repositório WordPress ou procurar por ele no seu painel do WordPress em “Adicionar Novos” plugins. Você pode personalizar ligeiramente o visual no editor “Aparência AMP” (como exibido abaixo). No entanto, suas opções no plugin são bastante limitadas e cabe a você saber como pode implementar filtros adicionais para recursos como o AdSense ou o Google Analytics.

Também vale a pena sublinhar que ele suporta apenas postagens, não páginas, embora já tenham anunciado que estão trabalhando para adicionar esse recurso. Abaixo fica um exemplo do visual da nossa postagem no WordPress, após a instalação do plugin.

Se quer uma forma simples de adicionar recursos adicionais, então chegou a altura de recorrer ao plugin AMP for WP. É basicamente uma versão mais avançada do plugin oficial AMP e oferece recursos e suporte adicionais. É desenvolvido por Ahmed Kaludi e Mohammed Kaludi, que têm também uma loja de temas WordPress bem-sucedida.

No momento em que esse artigo é escrito, tem mais de 70,000 instalações ativas com uma classificação de 4,6 Estrelas. Você pode baixá-lo no Repositório WordPress ou procurar por ele no seu painel do WordPress em “Adicionar Novos” plugins. Esse plugin permite que tenha muito mais opções de personalização para sua configuração do Google AMP. Além disso, suporta páginas. Abaixo veremos no seu painel as personalizações e recursos disponíveis nas configurações do plugin AMP.

Estamos usando esse plugin na Kinsta! Você pode ver o AMP em execução nesse artigo se entrar em https://kinsta.com/blog/google-amp/amp/. . (Atualização: Desde o início de setembro, não estamos mais executando o AMP em nosso site. Confira nosso estudo de caso sobre a razão de termos optado por desativar o Google AMP). E pode ver abaixo um exemplo nas SERPs de uma postagem do blog da Kinsta. Você pode ver o logotipo do AMP.

Geral

Na tela geral, pode adicionar um logotipo, personalizar o tamanho e escolher se deseja ou não que as AMP sejam ativadas nas páginas. Dependendo do seu site e tráfego, pode ativar apenas o AMP no seu blog (tipos de postagem).

Página Inicial

Na página inicial, você pode ativar ou desativar o suporte à página inicial, substituir o tamanho da miniatura da homepage e escolher o que deseja que aconteça quando os usuários clicam no logotipo (entre na versão AMP da versão não-AMP).

Construtor de Páginas

Em Construtor de Páginas, pode ativá-lo para permitir que os widgets do AMP sejam utilizados.

Design

Em Design, pode ativar o construtor de postagens ou selecionar um modelo pré-desenhado. Pode adicionar HTTPS e também um botão para ligar agora. Existe também uma opção para aplicar CSS personalizado. Por exemplo, no nosso site adicionámos o seguinte código a fim de personalizar a cor do cabeçalho:

.amp-wp-header {background-color:#5CC0C0;}

Único

Em Único, pode ativar ícones sociais, desativar links, mostrar a biografia do autor e até mesmo alterar opções para postagens relacionadas.

Publicidade

Na tela de publicidade, pode ativar o AdSense e escolher a localização dos anúncios. Esse plugin é uma das formas mais fáceis de adicionar o AdSense ao Google AMP. Para quem depende de publicidade para alimentar seus sites, isso pode ser um recurso bem útil (leitura sugerida: Como adicionar o Google AdSense ao WordPress).

Menu AMP

Em Menu, pode escolher se deseja ou não adicionar /amp/ no final dos URLs do menu. Talvez queira que seus visitantes permaneçam no seu site habilitado para AMP. Nesse caso, deve ativar essa opção.

Social

No menu Social pode adicionar as redes sociais que deseja exibir no celular para fins de compartilhamento. Para o Facebook, só precisará de registrar um ID de Aplicativo gratuito.

SEO

A tela de SEO é provavelmente uma das mais importantes, já que diz respeito a forma como Google verá e classificará seu conteúdo AMP. Recomendamos ativar a opção “Descrição Meta”. Se estiver usando o plugin Yoast SEO, recomendamos igualmente ativar as opções “Meta Tags do Yoast” e “Descrição Yoast em ld+Jason”.

Analytics

A tela do Google Analytics permite adicione seus scripts de rastreamento ao Google Analytics, assim como Gerenciador de Tags do Google. Você vai querer fazer isso para assegurar que mantém seus dados de relatórios atualizados.

Também suporta Segment Analytics, Piwik Analytics, Quantcast Measurement, comScore, Effective Measure, StatCounter, HitStats Analytics, Yandex Metrika e Chartbeat Analytics.

Dados Estruturados

A tela de dados estruturados permite personalizar o logotipo padrão de dados estruturados e a imagem da postagem.

Formulário de Contato

A tela do formulário de contato permite que você ative o suporte do Contact Form 7.

Notificações

Na tela de notificações, poderá fazer a sua ativação para mostrar um aviso relacionado com os cookies. Isso pode ser útil para quem reside em países com leis de privacidade mais restritivas.

Comentários

Na tela de comentários pode ativar o suporte para sistemas de comentários de terceiros, como comentários do Disqus e Facebook.

Configurações Avançadas

Nas configurações avançadas pode ativar o redirecionamento para dispositivos móveis. Por padrão, o AMP será apenas ativado para usuários móveis que clicarem nas SERPs. Se um usuário de celular navegar diretamente para seu site, ele não conseguirá ver a página ativada para AMP, a menos que você ative o redirecionamento. Você também pode inserir HTML personalizado nessa tela e alterar a ação do link de rodapé.

Extensões

Os desenvolvedores também têm extensões premium que você pode comprar para aumentar ainda mais as potencialidades do AMP. Alguns dos mais populares que poderá considerar são as opções de email, botões CTA e suporte para o tipo personalizado de postagem.

E aqui fica o aspeto da nossa publicação com o plugin AMP for WP em execução no blog da Kinsta.

Os mesmos desenvolvedores do AMP for WP também lançaram recentemente um novo plugin, o AMP WooCommerce, que permite ativar o AMP na sua loja de comércio eletrônico.

Validando Seu Código do Google AMP

Após arrumar a configuração do Google AMP no seu site WordPress, terá de garantir que seu código é validado. Caso contrário, o Google não mostrará a versão AMP nas SERPs. Você pode executar seu site WordPress através da ferramenta Google AMP Validator. O resultado da validação surgirá na parte inferior.

Pode também baixar a extensão AMP do Chrome que validará cada página. Se aparecer a cor vermelha, poderá clicar e ver rapidamente os erros ou avisos na página.

Se não conseguir a validação, poderá encontrar um erro semelhante a esse: “Não é uma página AMP válida”. No exemplo abaixo, isso se deveu à utilização de tags HTML antigas e que já não são mais suportadas. Você pode ver uma lista completa de tags HTML suportadas pelo AMP. As páginas AMP inválidas não terão recursos específicos do AMP nos resultados de pesquisa do Google.

Também pode verificar seu site para encontrar problemas do AMP na Google Search Console, na seção “Aparência de Busca”. É importante frisar que muitos usuários reportarem grandes atrasos nos relatórios de AMP na Google Search Console. Isso provavelmente se deve ao fato de ser uma plataforma relativamente recente e o rastreamento não é tão frequente assim.

Se você encontrar erros, o Google enviará um email informando que é necessário adicionar dados estruturados às suas páginas do AMP.

SEO do Google AMP

Também pode estar se questionando sobre o SEO, porque agora você tem duas cópias da mesma página ou publicação. Você não precisa de se preocupar com conteúdo duplicado, já que os dois plugins acima usam tags canônicas com o AMP. As tags canônicas informam o Google de que o conteúdo original é a sua versão para computador. O Google detetará automaticamente as páginas AMP no seu site à medida que sua página original é veiculada com uma tag de cabeçalho direcionando o Googlebot para sua página AMP.

Exemplo na sua página original:

<link rel="amphtml" href="https://domain.com/amp/">

Exemplo na sua página AMP:

<link rel="canonical" href="https://domain.com/">

O plugin AMP for WP mencionado acima também funciona muito bem com o plugin Yoast SEO, a fim de adicionar suas tags meta e OG para o SEO e finalidades associadas a redes sociais. Veja o exemplo abaixo.

Monitorização New Relic com o Google AMP

Também é importante mencionar, para os clientes que usam o monitoramento New Relic (licença necessária), que o validador do Google AMP pode falhar devido a um erro de script de terceiros:

The tag 'script' is disallowed except in specific forms.

Isso acontece porque as páginas HTML formatadas para o Google AMP não podem conter JavaScript de terceiros. O plugin AMP for WP acima mencionado suporta totalmente o New Relic. Mas se precisar de desativar o navegador New Relic em páginas AMP, siga as instruções em Desative o monitoramento do navegador para páginas específicas. Existe também um plugin gratuito para WordPress, Disabled NewRelic For AMP, que pode instalar.

Ativar o AMP para Links Externos Com o Cloudflare

O Cloudflare tem um novo recurso recentemente lançado, que permite ativar links móveis acelerados para links externos que têm o AMP em execução. Um dos benefícios para o seu site é que o conteúdo AMP é carregado em um visualizador diretamente no site vinculado ao conteúdo. Ou seja, depois de o leitor terminar de consumir o conteúdo, ele fechará o visualizador e retornará ao seu site. De certa forma, isso poderia aumentar o tempo no seu site em geral. Você pode ativar isso no painel de desempenho do Cloudflare.

Resumo

Como viu, existem algumas formas bem simples de instalar o Google AMP e ativá-lo no seu site WordPress. Será que deve apostar no Google AMP imediatamente? Isso depende realmente do seu tipo de site WordPress. Se é uma revista ou um site de notícias, pode fazer sentido implementar isso imediatamente e sair testando as posições do Google AdSense. Se tem um negócio SaaS, pode acabar prejudicando suas conversões se não for cuidadoso. O Google AMP é sem dúvida uma grande mudança, especialmente se já tiver muito tráfego móvel. O nosso conselho é fazer testes, já que essa é a única forma de saber se sua empresa verá resultados positivos ou negativos.

Você tem outras dicas sobre como usar o Google AMP no WordPress? Se sim, gostaríamos que você comentasse! Além disso, dê uma olhada no roteiro AMP oficial.

Brian Jackson

Brian tem uma enorme paixão pelo WordPress, e tem utilizado há mais de uma década e até desenvolve alguns plugins premium. Brian gosta de blogs, filmes e caminhadas. Conecte-se com Brian no Twitter.

• LinkedIn
• Twitter