Como configurar o AMP no WordPress

  1. 1. Introdução ao Google AMP para WordPress
  2. 2. Lendo atualmente: Como configurar o AMP no WordPress

Bem-vindo à segunda parte do AMP Guide for WordPress. Em nosso último artigo, aprendemos sobre a importância de uma estratégia da Web para dispositivos móveis e como o AMP pode ser um fator de virada em potencial. No guia de hoje, vamos aprender sobre:


  • Como integrar o AMP ao WordPress
  • Melhores plugins do WordPress para personalizar o AMP
  • Realmente precisamos implementar o AMP em nosso site WordPress?

Vamos começar.

Guia de Vídeo do AMP para WordPress

Pegando onde parou a última postagem de nossa série, você pode acompanhar o vídeo do WPCrafter sobre como configurar facilmente o AMP com seu site WordPress. O vídeo de Adam orienta você em cada etapa do nosso guia – aproveite!

Como configurar o AMP para WordPress

amp-plugin-wordpress-hero

Configurando AMP para WordPress é um processo muito simples. Tudo o que você precisa fazer é instalar o plugin WordPress AMP desenvolvido pela Automattic e o restante seguirá.

  • Acesse o Painel do WordPress> Plugins> Adicionar novo
  • Procurar por “AMP”

Selecione o plugin e clique em instale agora

como instalar-amp-wordpress-plugin

Ao ativar o plug-in, todos os URLs de postagem no seu site terão uma versão AMP. Você pode acessar o link de qualquer postagem, anexar / amp / até o final do URL e você verá a versão AMP.

Vamos dar uma olhada na versão normal da página da web.

test-site-no-amp_rz

E esta é a versão AMP da mesma página:

test-site-amp_rz

É isso aí: você configurou o AMP com sucesso no WordPress. Difícil de acreditar que é assim tão simples, não é??

No entanto, se você não tiver permalinks bonitos ativado, você pode obter a versão do amplificador anexando ?amp = 1 para o link da postagem. Por exemplo, o link da postagem seria:

  • Versão Normal: http://example.com/2016/01/01/hello-mobile-web/
  • Versão AMP: http://example.com/2016/01/01/hello-mobile-web/amp/
  • Versão AMP (com Pretty Permalinks desativado): http://example.com/2016/01/01/hello-mobile-web/?amp=1

O plug-in AMP adiciona uma meta tag padrão no cabeçalho das suas páginas HTML “normais” que possibilitam ao Google e a outros mecanismos de pesquisa reconhecer a versão AMP das páginas. Ele usa o logotipo do site que você pode definir no WordPress Theme Customizer.

É importante observar que o plugin suporta apenas a conversão de postagens em versões AMP. De acordo com a descrição do plugin acessada em 1st Novembro de 2016, o suporte para a versão AMP das páginas do WordPress está em desenvolvimento e em breve.

Medindo o impacto no desempenho do AMP

Decidimos medir o impacto no desempenho da versão AMP da página em Pingdom. Os resultados foram dramaticamente diferentes. Lembre-se de que nossa configuração do WordPress estava em um ambiente de hospedagem compartilhada usando o tema padrão Twenty Fourteen sem plug-ins de cache ou otimização instalados.

A captura de tela a seguir mostra a referência de desempenho da versão básica da página:

test-site-no-amp-pingdom

E este é o resultado da versão AMP da página:

test-site-amp-pingdom

Os resultados são surpreendentemente separados.

Cada um dos componentes experimentou uma tremenda melhoria:

  • Tamanho da página reduzido em 70%
  • O tempo de carregamento diminuiu 35% para menos de 900 milissegundos
  • Nenhum pedido foi reduzido em quase 60% de 17 para apenas 7!

Tudo isso foi alcançado pela AMP, mantendo o conteúdo da página. A tabela a seguir captura os detalhes do teste para sua referência:

Fator NormalAMPMelhoria
Tamanho da página (KB)563,816770%
Tempo de carregamento (s)1,420,92935%
No. de solicitações17759%

Olhando para esses números, é evidente que obter AMP é um acéfalo. Além de ajudar a melhorar sua pontuação de SEO, também oferece uma experiência bonita e organizada ao usuário.

Além disso, você também pode incluir mecanismos de rastreamento na versão AMP da página. Abordaremos isso na seção a seguir.

Ampliando os recursos do AMP

Embora otimizar seu conteúdo para os leitores seja uma boa prática, também é importante manter a consistência da marca. Isso significa que mesmo as versões AMP do seu conteúdo existente devem seguir o esquema de cores, as fontes e a interface geral do usuário da sua marca..

O plugin AMP WordPress não tem as opções para fazer essas alterações. Seu objetivo era fornecer uma maneira rápida e fácil de tornar todo o conteúdo existente do WordPress compatível com o AMP – um trabalho que se sai muito bem.

Introduzir o AMP para WP – páginas móveis aceleradas plugar.

amp-para-wp-plugin-2-hero

Este plug-in gratuito amplia os recursos do AMP no WordPress, oferecendo funcionalidades adicionais, como:

  • Integração com o Google Analytics
  • Suporte para páginas AMP WooCommerce
  • Posts relacionados abaixo da postagem
  • Lista de Comentários Recentes
  • Upload de logotipo personalizado
  • Barra de compartilhamento social
  • Suporte para incorporação de conteúdo sofisticado, incluindo vídeos e conteúdo de plataformas de conteúdo como YouTube, Instagram, Twitter, Vine, etc..

Como pré-requisito, o plug-in requer que você instale e ative o plug-in AMP para funcionar corretamente. Como de costume, você pode instalar este plug-in semelhante à maneira como instalamos o plug-in AMP no início desta postagem.

amp-for-wp-plugin-2-install-enable

Uma vez ativado, você está pronto para configurar as várias opções que o plug-in tem a oferecer. Vá para Painel do WordPress> AMP para acessar as configurações.

Das muitas configurações que o plug-in oferece, tentamos:

  • Ativando Comentários
  • Adicionando Postagens Relacionadas
  • Adicionando uma navegação às postagens seguintes / anteriores

Aqui está uma captura de tela de como era a versão do AMP após salvar as alterações:

amp-for-wp-plugin-2-hero-test-page-500-px

E aqui está o desempenho:

amp-for-wp-plugin-2-speed-test

Aqui está a captura de tela da página AMP de baunilha para comparação:

test-site-amp-pingdom

O tempo de carregamento diminuiu ainda mais 7,4%. É interessante notar que, embora o tamanho da página e o número de solicitações tenham aumentado um pouco, houve uma melhoria no desempenho geral (aumento de 3 pontos).

Em suma, este plug-in é excelente se você leva a sério o AMP e faz com que seu conteúdo, anúncios e análises funcionem bem com a plataforma.

Conclusão

Dado o crescimento explosivo do uso de telefones celulares nos últimos anos, não é mais um opção para empresas on-line usarem o celular primeiro. É um necessidade absoluta. O projeto Accelerated Mobile Pages é um esforço ambicioso em direção a esse objetivo, e cada vez mais agências de mídia o estão adaptando rapidamente.

Embora seja mais simples para os blogs mais novos incorporar o AMP, blogs com milhares de páginas de conteúdo certamente podem ser particularmente desafiadoras. O motivo é simples – nem todos seguem os padrões adequados ao publicar online. As organizações evoluem. Até as tecnologias da Web que estavam “quentes” há cinco anos estão obsoletas hoje. Enquanto o AMP tenta criar o melhor possível das tecnologias da Web existentes, pode haver vários casos em que existem alguma incompatibilidade / erros. E esses erros podem afetar adversamente suas pontuações de SEO.

Idealmente, as empresas devem medir suas fontes de tráfego de entrada – qual porcentagem disso é proveniente de um dispositivo móvel? Quantos deles vêm da pesquisa para celular? Qual é a taxa de rejeição de visitantes móveis? Estas são as perguntas que você deve fazer antes de considerar o AMP.

Se você está convencido de que o conteúdo do seu site está tecnicamente estruturado de acordo com os padrões mais recentes, então, por todos os meios – vá em frente com o AMP! Você só aumentará seu SEO.

No entanto, se você souber que existem muitas configurações internas incorretas, links e erros corrompidos, seria melhor resolver (e possivelmente resolver) esses problemas antes de prosseguir com o AMP.

O que você achou do AMP? Você o usa para consumir conteúdo? Você o implementou em seu site? Gostaríamos muito de ouvir de você!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map