12abr
guia para aprender tudo sobre amp wordpress e como configurar

O Que é AMP WordPress e Como Configurar no Seu Site (Usando Plugins)

Por: Andrei L. abril 12, 2019

AMP WordPress é uma tecnologia de aceleramento que faz com que as páginas de um site feito no WordPress sejam carregadas mais rapidamente em dispositivos móveis.

Sabia que mais de 50% das pesquisas na internet são feitas através destes aparelhos?

Por isso, garantir que seu site WordPress carregue com maior velocidade neles deve ser uma das suas maiores prioridades.

Neste conteúdo, vamos explorar o que é AMP WordPress, como funciona e quais os benefícios de ter a tecnologia no seu projeto. Também vamos detalhar um tutorial para instalar e configurar AMP WordPress usando 2 plugins no CMS.

O Que é AMP WordPress e Como Seu Site se Beneficia da Tecnologia

O AMP WordPress faz parte do Google Accelerated Mobile Pages (AMP), uma tecnologia de código aberto que ajuda os usuários a criarem versões otimizadas dos seus sites para que eles carreguem mais rapidamente em dispositivos móveis.

O que acontece é o Google AMP permite que o usuário crie uma versão duplicada de um site usando a linguagem AMP HTML. Esse mecanismo simplesmente elimina qualquer elemento que possa comprometer o desempenho de uma página na web.

O resultado disso é mais velocidade, estabilidade e menos tempo de carregamento de uma página acessada em smartphones, tablets ou outros aparelhos portáteis conectados à internet.

tecnologia amp wordpress de aceleração de páginas

3 Benefícios de Usar o Google AMP

Usar a tecnologia Google AMP no seu site WordPress garante alguns benefícios instantâneos. Os três principais deles são:

  • Melhora o SEO
    Esse é o benefício mais óbvio e significativo de usar Google AMP. Considerando que a velocidade de carregamento de um site é um dos fatores mais importantes de ranqueamento no Google, a tecnologia pode fazer com que seu site receba muito mais tráfego. Além disso, ela também garante que seu site apareça no Google Notícias.  
  • Aprimora a Experiência do Usuário
    O Google AMP otimiza um site para que ele seja bem mais amigável à experiência do usuário com uma página em um dispositivo móvel. Isso recebe uma importância ainda maior levando em conta que 57% dos usuários da web não recomendam sites de negócios que são mal otimizados para mobile.  
  • Melhora o Desempenho do Servidor
    O Google AMP se benificia de alguns recursos de otimização do próprio Google. Sendo assim, ele reduz o uso de banda em imagens em 50% sem afetar a qualidade delas. Enquanto isso, o desempenho do servidor não é afetado, o que garante também a performance geral do seu site, que mantém a velocidade lá em cima.   

3 Contras de Usar o Google AMP

Usar o Google AMP também tem seus pontos negativos. Os três principais deles são:

  • Limitações com CSS e JavaScript
    Ainda que o Google AMP melhore o tempo de carregamento das páginas de um site, ele também traz limitações com CSS e JavaScript. Por conta disso, animações elaboradas, gráficos complexos e objetos em flash serão removidos ou nem carregados.
  • Mostra Somente Páginas em Cache
    O aumento na velocidade do carregamento de sites pelo Google AMP se deve ao fato de que ele também só mostra páginas e conteúdos já armazenados em cache. Isso quer dizer que pode ser que os visitantes ou leitores de um site não tenham acesso aos conteúdos mais recentes.
  • Restrições em Publicidade
    O Google AMP tem suporte a anúncios. Ainda assim, as opções são restritas. Fora que o processo de implementação é consideravelmente complicado. E não existe integração com plataformas externas de publicidade na internet. Isso pode limitar o alcance das suas páginas e posts patrocinados.    

Não se deixe intimidar por esses contras. Só o fato da melhora no carregamento de páginas resultar em mais desempenho do seu site já faz o Google AMP valer a pena.

Na próxima etapa, vamos mostrar como você pode conseguir adicionar esse valioso recurso no seu site WordPress. E você vai fazer isso usando plugins.

Como Instalar AMP WordPress Usando 2 Plugins

Para instalar e configurar AMP WordPress no seu site, você vai precisar da ajuda de plugins. Afinal, esse recurso não vem como padrão no CMS.  

Método 1 – Usar o Plugin AMP

plugin amp

O AMP é uma ferramenta muito útil se você procurar por instalação e configuração simples e rápida. E é por ele que vamos começar o nosso tutorial.

Para instalar e configurar o plugin AMP no seu site, siga os passos abaixo.

  1. No painel de controle do WordPress, encontre a seção Plugins > Adicionar Novo.
    adicionar novo plugin no wordpress

  2. No campo de buscas, procure pelo plugin AMP. Instale e ative o plugin.
    instalar plugin amp

  3. De volta ao painel de controle, encontre a seção Aparência > AMP. Clique nela para ir à aba de customização do AMP.
    seção amp na aba aparência do wordpress

  4. Na próxima tela, escolha Aparência.personalizar aparência do amp
  5. Aqui você pode ajustar a forma como seu site AMP WordPress será mostrado. É possível editar as cores do texto, de link e do plano de fundo do seu site. Você também pode configurar a combinação de cores entre Claro e Escuro.
    editar aparência das páginas do plugin amp

  6. Quando tiver escolhido as opções da sua preferência, basta clicar no botão Publicar no topo da página.
    publicar edição de aparência do plugin amp

Sabia que também é possível configurar AMP WordPress para os posts as páginas do seu site? Para tanto, siga as instruções abaixo.

  1. No painel de controle do WordPress, encontre a seção AMP e clique nela.
    seção amp no painel de controle do wordpress

  2. Agora, apenas marque as opções de Posts e Páginas para disponibilizá-los em AMP. Depois, clique em salvar no botão azul logo abaixo.
    configurar amp para posts e páginas

Essas são as configurações mais básicas que você pode fazer para otimizar seu site, páginas e posts com o AMP WordPress.

Mas, se você quiser estender as funções do recurso, existem outros plugins que você pode usar para trabalhar em conjunto com o AMP WordPress.

Um deles é o Glue for Yoast SEO & AMP.  Ele nada mais faz do que uma integração do AMP com o popular Yoast SEO. E combina as funções de melhoramento de carregamento de página sem prejudicar o ranqueamento do seu seu site.

Siga os passos abaixo para realizar a integração.

  1. No painel de controle, vá na seção Plugins > Adicionar Novo. Instale e ative o plugin Yoast SEO.
    instalar yoast seo no wordpress

  2. Agora, faça o mesmo procedimento e instale e ative o plugin Glue for Yoast SEO & AMP.
    instalar plugin glue for yoast seo & amp

  3. Agora, encontre a seção SEO > AMP no painel de controle do WordPress.
    seção seo e amp no painel de controle do wordpress

  4. Na nova tela, você pode selecionar se quer liberar o suporte do AMP WordPress para posts e tipos de mídias. Depois, é só clicar em Salvar Alterações para confirmar.
    liberar suporte amp para páginas e mídias no yoast seo

  5. Na aba Design do plugin, você encontra mais opções de configuração. Isso inclui poder adicionar um ícone para seu site AMP, além de definir as cores do conteúdo (texto, título e links). Também é possível colocar CSS personalizado. Para confirmar, basta clicar em Salvar Alterações.
    configurações de design para amp no yoast seo 

Método 2 – Usar o Plugin AMP for WP

plugin amp for wp

O AMP for WP é uma ferramenta que dá ao usuário um pouco mais de controle sobre a aparência de um site AMP WordPress.

Ele também pode ser integrado com vários outros plugins para WordPress. Entre eles o WooCommerce, um plugin para você criar sua própria loja virtual.

Para instalar e configurar o AMP for WP, siga as instruções a seguir.

  1. No painel de controle do WordPress, ache a seção Plugins > Adicionar Novo. Procure pelo plugin AMP for WP no campo de busca. Faça a instalação e a ativação dele.
    instalar plugin amp for wp

  2. Uma seção AMP vai aparecer no painel de controle do WordPress. Clique nela. Na nova tela, você verá subseções como Settings (Configurações), Design e Extensions (Extensões).
    configurações amp for wp

Como uma primeira recomendação, sugerimos acessar as opções da parte Getting Started (Primeiros Passos) para configurar o seu AMP WordPress. Lembramos que este trecho está em inglês.

primeiros passos do plugin amp for wp

Depois, basta explorar algumas das opções do plugin AMP for WP. As principais são:

  • SEO – Integração com plugins de SEO e configurações de metadados, como a meta descrição.
    seo no plugin amp for wp

  • Performance – Minimiza o consumo de dados e ajuda a aumentar o desempenho do site como um todo.
    configurações de performance no plugin amp for wp

  • Análises – Permite integrar com serviços como O Google Analytics e o Google Tag Manager. O primeiro é para análise e checagem de dados. O segundo é para implementar tags de mensuração de dados pelo seu site.
    seção análises no plugin amp for wp

  • Comments – Decida se você quer permitir que os visitantes deixem comentários no seu site. Permite adicionar ferramentas como o sistema Disqus e o Facebook.
    seção comments no amp for wp

  • Advanced Settings – Permite adicionar HTML customizado nas nos cabeçalhos e rodapés das páginas. Além de redirecionamentos mobile e scrolling permanente.
    opção de configurações avançadas no plugin amp for wp

Ao final de tudo o que tiver configurado, só se lembre de clicar em Save Changes (Salvar Alterações) no final da página.

Fora estas configurações básicas, também é possível trabalhar na configuração do design do seu site AMP WordPress. Para isso, encontre e clique na aba Design do plugin.  

configurações de design no plugin amp for wp

A opção mais importante do Design é a aba Themes (Temas). Com ela, você pode escolher o layout para personalizar as páginas do seu site com AMP WordPress instalado. Basta usar o menu suspenso para encontrar diversos tipos de temas.

Assim que escolher o tema, você pode ir em Global para definir as opções de cores e tipografia do seu site. Já a opção Social permite que você adiciona botões de redes sociais (Facebook, Twitter, WhatsApp, LinkedIN, entre outras) nas páginas.

configuração global do plugin amp for wp

Quando estiver satisfeito com as opções escolhidas, clique em Save Changes (Salvar Alterações) ao final da página.

Já a aba de Extensions é para você adicionar funcionalidades extras ao seu site AMP WordPress. A versão grátis do AMP for WordPress possui uma certa variedade de extensões.

Mas é com as extensões pagas que seu site pode se destacar na internet. Inclusive, a extensão AMP WooCommerce Pro é uma das mais poderosas ferramentas para lojas virtuais.

extensão amp woocommerce pro

Como Validar Seu Site AMP WordPress

Agora que você já configurou todo o seu site AMP WordPress, você precisa garantir que ele seja validado e indexado para ser acessado corretamente em qualquer plataforma compatível.

Para fazer isso de forma bem rápida, siga os passos abaixo.

  1. Abra uma página AMP em um navegador da sua escolha (o Google Chrome, por exemplo).
  2. Ao final da URL desta página, adicione o trecho #development=1.
  3. Abra o console do Chrome DevTools usando a combinação CTRL + Shift + J (Windows e Linux). Se algum erro aparecer, ele será mostrado em vermelho. E, junto, vai aparecer uma análise da causa do possível erro.

Esses erros são normalmente causados por prefixos incorretos ou formatações erradas nos códigos ou tags HTML das páginas.

O legal é que a forma de correção será normalmente sugerida pelo console. Assim, você só precisa implementar a correção.

Além disso, o Google AMP também informa métodos de corrigir erros de validação caso nenhuma sugestão de reparo apareça na sua tela.

Conclusão

O AMP WordPress é algo que você precisa considerar ter no seu site. Afinal, uma ferramenta de aceleração no carregamento de páginas deixa seus visitantes satisfeitos e pode aumentar o tráfego que seu projeto online recebe diariamente.

Ainda bem que no conteúdo você conferiu dois métodos de instalar e configurar AMP WordPress no seu site. Assim, você já pode começar a fazer as implementações e perceber as primeiras melhorias de acessos por dispositivos móveis o quanto antes.

Sucesso aí! 😉

Trackback URL: https://www.weblink.com.br/blog/amp-wordpress-como-configurar/trackback/

Deixar resposta:

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *