Tutoriais WordPress

AMP WordPress – O Que É e Como Configurar Corretamente

tutorial sobre o que é amp wordpress e como configurar

De acordo com um estudo conduzido pelo Google, mais de 50% das pesquisas realizadas no mundo são feitas por dispositivos móveis. É por isso que sua prioridade deve ser fazer seu site WordPress carregar rapidamente (e com uma boa aparência) nestes dispositivos. Felizmente o Google Accelerated Mobile Pages (AMP) torna essa tarefa muito mais fácil. Por isso você precisa saber o que é AMP WordPress e como configurá-lo corretamente no seu site WordPress.

Neste artigo, iremos explicar o que é AMP WordPress e como configurar de duas maneiras:

  1. Usando o plugin AMP for WordPress.
  2. Através do plugin AMP for WP – Accelerated Mobile Pages.

Também explicaremos o que é AMP WordPress, e como realizar a sua validação depois de o processo de configuração ser completado. Então vamos lá!

O que é AMP WordPress (E Como Pode Beneficiar seu Site)

print da homepage da AMP

O Google Accelerated Mobile Pages (AMP) é uma biblioteca de código-aberto que ajuda você a criar versões móveis rápidas, de deslizamento suave, e com aparência limpa para seu site. O AMP é extremamente amigável ao usuário e trabalha com plataformas e frameworks já existentes. Além disso, é totalmente compatível com WordPress.

Em poucas palavras, o Google AMP funciona permitindo que você crie uma cópia do seu site usando o AMP HTML. Esse processo elimina a maior parte dos elementos que causam o carregamento lento do seu website (JavaScript, scripts de terceiros, etc). O Google então faz a redução do seu site, aumentando a velocidade de carregamento. O resultado será algo parecido com isso:

exemplo de um post na ampDentre as vantagens de conhecer e saber o que é AMP WordPress, estão os muitos benefícios que pode encontrar, apesar de possuir algumas possíveis desvantagens. Vamos explorar ambos os lados. Primeiro, vamos começar com os prós:

  • Melhorias de SEO. O benefício mais óbvio do Google AMP é o aumento de velocidade. Uma vez que a velocidade da página é um dos fatores chaves no que se trata de ranqueamento em Páginas de Resultados de Motores de Busca (SERPs), isso pode ajudar a tornar o seu site mais visível. O Google AMP também irá garantir que as páginas de seu site apareçam no Google Carrossel.
  • Uma experiência otimizada para o usuário. É estimado que 33% de potenciais vendas são canceladas quando um site não é otimizado para dispositivos móveis. Um estudo ainda mais preocupante afirma que 57% dos usuários não recomendam um site com um design ruim para celulares e tablets. O Google AMP torna fácil a tarefa de criar um site responsivo para dispositivos móveis ajudando a evitar esses problemas.
  • Melhoria de performance do servidor. O Google AMP se beneficia com algumas das ferramentas chaves de otimização do Google. Reduz o uso da largura de banda para imagens em 50% (sem afetar a qualidade da imagem) e melhora o rendimento por parte do servidor. Ao reduzir o carregamento no servidor, o AMP ajuda a melhorar a performance do site..

Em contrapartida, estes são alguns dos possíveis contras de usar o Google AMP:

  • Limitações no CSS e JavaScript. Mesmo que o Google AMP torne o carregamento do seu site muito mais rápido, isso vem com um preço. O AMP irá remover gráficos de alta-definição, animações elaboradas, e outros elementos que utilizam CSS e JavaScript.
  • Apenas páginas com cache serão mostradas. A velocidade do Google AMP pode ser parcialmente atribuída ao fato de que o Google mostra apenas versões em cache de seu website. Por esse motivo, seus usuários nem sempre irão ver a versão mais recente de seu conteúdo.
  • Restrições com propagandas. Mesmo que o Google AMP tenha suporte à propagandas, o processo de implementação é complicado. Também possui limitações de integração com plataformas de propaganda externas.

Se essas desvantagens foram suficientes para fazer você repensar em usar o AMP, considere investir em um design de site responsivo. Porém, se você procura uma maneira rápida e fácil de tornar seu site funcional em dispositivos móveis, o Google AMP pode ser ideal para você.

Na próxima seção iremos ensinar duas maneiras de configurar o AMP WordPress, com a ajuda de alguns plugins.

Como Configurar o AMP WordPress com 2 Plugins

Para configurar o AMP em seu site você precisará de um WordPress AMP plugin. Antes de prosseguir com a instalação recomendamos que você tenha um backup de seu site. Com o backup preparado, você está pronto para começar.

Opção 1: Utilizando o Plugin AMP for WordPress

plugin amp para wordpress

O plugin AMP for WordPress é uma excelente ferramenta para configurar o AMP no seu WordPress de forma rápida e fácil. Mesmo sua versão padrão tendo poucas ferramentas para customização de suas configurações AMP, suas opções podem ser extendidas com a ajuda de plugins adicionais. Iremos mostrar isso mais tarde. Por ora, vamos ver como configurar o plugin em si.

Primeiro, acesse Plugins › Adicionar novo em seu painel do WordPress. Pesquise por ‘AMP for WordPress‘. Então, instale e ative:

instalando o plugin amp

Então, navegue até a aba Aparência > AMP em seu painel. Em seguida, à página de personalização do AMP será mostrada. Selecione a aba Design:

configurando o plugin amp

Aqui você poderá customizar como o AMP WordPress irá mostrar seu site e visualizar quaisquer mudanças antes de colocar seu site no ar. Você poderá ajustar os textos, links e cor de fundo. E mais, você poderá selecionar se deseja um tema claro ou escuro para seu site. Quando estiver satisfeito com as alterações, clique em Publicar na parte superior da tela.

Você também pode configurar se deseja que postagens, páginas, templates próprios ou todos sejam mostrados no AMP WordPress. Para isso, retorne ao painel do WordPress e acesse AMP > General:

configurando paginas e posts através do plugin amp

Marque as opções que você deseja incluir no AMP WordPress, então clique em Salvar alterações.

Você deve ter notado que não existem muitas opções de customização aqui. Felizmente, existem diversos plugins que podem expandir suas opções. Por exemplo, você pode usar o Glue for Yoast SEO & AMP para integrar com o famoso plugin Yoast SEO na configuração do seu AMP.

Acesse Plugins Adicionar novo, então, instale e ative o plugin Yoast SEO:

instalando o plugin Yoast SEO

Após isso, faça a mesma coisa com o plugin Glue for Yoast SEO & AMP. Depois, navegue até SEO AMP em seu painel. Aqui você poderá habilitar o suporte de postagens e tipos de mídia ao AMP.

configurando os plugins AMP e Yoast SEO

Então, clique em Salvar alterações. Você poderá também realizar outras configurações na aba Design. Nessa página você poderá definir um ícone para seu site AMP WordPress, ajustar a sua cor tema, e até adicionar CSS personalizados:

alterando as configurações no plugin AMP - Yoast SEO

Novamente, não esqueça de salvar as alterações ao terminar as configurações de seu site.

O AMP for WordPress é um ótimo plugin se você deseja adicionar funcionalidades básicas do AMP ao seu site. Porém, se você deseja ter mais controle na aparência de seu AMP WordPress (e o potencial de expandir ainda mais sua funcionalidade) o próximo plugin atenderá ainda mais suas necessidades.

Opção 2: Instale o Plugin AMP for WP – Accelerated Mobile Pages

print da página do plugin accelerated mobile pages

Além de possuir uma interface amigável e refinada, este plugin do WordPress pode ser integrado com diversas ferramentas adicionais. Incluindo WooCommerce (o maior plugin de e-commerce do WordPress), Alexa metrics, OneSignal push button notifications, e mais.

Para usar esse WordPress AMP Plugin, primeiro você precisa acessar Plugins > Adicionar novo em seu painel. Pesquise por ‘AMP for WP‘, e instale o plugin:

instalando o plugin amp for wordpress

Agora navegue até a aba AMP em seu painel do WordPress. Você verá um menu com as seções Settings, Design, Extensions, etc. Vamos dar uma olhada na opção Settings:

configurando o plugin amp for wordpress

Uma boa ideia é começar com a seção Getting Started. Ela irá te ajudar na configuração inicial do seu AMP WordPress. Então, você poderá navegar entre as diversas opções que o AMP for WP oferece, incluindo:

  • SEO: Inclui a configuração de descrição do meta, integração com plugins de SEO, etc.
  • Performance: Existe uma única função para habilitar e desabilitar a minificação de arquivos. Minificação pode melhorar a velocidade do seu site.
  • Analytics: Aqui você poderá configurar a integração com o Google Tag Manager, assim como opções do analytics.
  • Comentários: Permite que você configure a inclusão ou não de comentários do WordPress, Disqus, e/ou Facebook no seu AMP WordPress.
  • Configurações Avançadas: Você pode inserir HTML personalizado para cabeçalhos e rodapés, configurar o redirecionamento para celular, e habilitar ou desabilitar imagens de retina.

Certifique de clicar em  Save Changes para cada uma das configurações acima que você tenha alterado. Após, selecione a aba Design:

configurando o design do plugin amp for wp

Basicamente, aqui é onde você pode customizar a aparência de seu site AMP WordPress. Para isso, você pode escolher um dentre os vários temas dedicados do AMP listados no menu Theme Selector.

Depois de escolher o tema, você pode personalizar seu visual. Você encontrará opções de cores e tipografia (listados na aba Global), configurações de visualização de cabeçalho e rodapé, opções para a barra lateral da página principal, e mais. Na seção Social você pode selecionar quais botões de redes sociais você quer que sejam mostrados no seu site AMP WordPress.

A versão gratuita do AMP for WordPress contém uma ampla variedade de ferramentas. Porém, você pode melhorar a aparência e funcionalidade de seu site significativamente com extensões pagas. Existem extensões para implementar avaliações com estrela (que são perfeitas para produtos ou perfis imobiliários), integrar com AMP WooCommerce Pro, usar tipos de postagens personalizados, e mais:

implementando outras extensões no plugin amp for wordpress

Os temas Premium do AMP também estão disponíveis para compra. Você pode visualizá-los em Design > Themes no seu painel. Existem opções que são ideais principalmente para sites específicos, como sites de notícias, revistas, e assim por diante. E mais, vários temas para diversos propósitos também estão disponíveis:

temas premium do plugin amp for wordpress

Se você quer aproveitar ferramentas ainda mais avançadas, há uma variedade de planos Pro disponíveis para este plugin. Esses planos variam desde o plano Personal (para um site a partir de $149 por ano) até o plano Agency (para sites ilimitados por $499 por ano).

Como Validar seu Site AMP WordPress

Após configurar um desses plugins AMP para WordPress, há mais uma etapa a ser feita. Você precisará validar seu AMP WordPress para garantir que possa ser acessado pelas plataformas suportadas. A validação também é uma maneira útil de obter uma leitura de erros do AMP para fins de solução de problemas.

Um método rápido e fácil de realizar a validação do AMP envolve a utilização das ferramentas para desenvolvedores de seu navegador. Para isso, você precisará abrir uma página AMP em seu navegador de preferência (neste exemplo usaremos o Google Chrome). Então você precisará adicionar o seguinte no final da URL:

#development=1

Depois de ter feito isso, abra o console de ferramentas para desenvolvedores do navegador. No Google Chrome é o Chrome DevTools console. Se algum erro for apresentado estará destacado em vermelho, juntamente com uma análise da causa do erro..

Tipicamente, erros de validação são causados por prefixos inválidos, formatação incorreta e entradas de código, e/ou tags não autorizadas. Na maioria dos casos, uma opção para a resolução do erro será apresentada no relatório. Entretanto, o projeto Google AMP também lista métodos para corrigir erros de validação comum caso uma alternativa de reparação automática não for apresentada.

Outro método de validação efetivo é a utilização da extensão AMP Validator para Google Chrome e Opera:

extensão amp validator

Essa ferramenta fornece uma listagem simples de erros (ícones vermelhos), assim como suas causas. Além, se você estiver testando o AMP validator em uma página que não seja AMP, um ícone de extensão azul aparecerá linkando você à versão AMP desta página. Essa ferramenta apresenta uma maneira útil de acessar elementos do tema de seu site que podem estar impedindo o AMP WordPress de aparecer apropriadamente.

Conclusão

Mesmo alguns segundos a mais no tempo de carregamento pode diminuir significativamente o ranqueamento de seu site em mecanismos de pesquisa (e suas taxas de conversão). Felizmente, como vimos, utilizando o Google AMP poderá ajudar você a garantir que seu site carregue na velocidade da luz em dispositivos móveis. E mais, configurar e personalizar o AMP para WordPress é simples e direto, desde que você utilize os plugins corretos.

Ficou com dúvidas sobre como configurar algum dos plugins AMP WordPress? Nos avise comentando na seção logo abaixo!

José D

José é um jornalista com muita experiência em redação. Na Hostinger, ele foca em otimizar o SEO dos conteúdos e a deixar a experiência do usuário agradável ao lê-los.

Deixe um Comentário

Deixe seu comentário!

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Comece a Economizar Agora!

Hospedagem com tudo incluso e nome de domínio
R$3
12
/mês*

Cadastre-se

Receba nossos conteúdos e novidades direto no seu e-mail!

 

Estamos cadastrando...

Pronto! Obrigado por se inscrever!

[href]
[href]