Como instalar AMP e Facebook Instant Articles no WordPress [Guia Completo]

Neste tutorial eu vou mostrar como é fácil instalar a nova tecnologia AMP e Facebook Instant Articles no seu site WordPress. O processo tem várias etapas, mas todas são simples de se fazer.

Foque em aprender esses 2 novos tópicos. Em breve, eles serão padrão obrigatório para todos os blogs. Você não pode ficar de fora dessa tendências em sites WordPress.

O plugin recomendado é o AMP for WP. Ele integra automaticamente a funcionalidade do Google AMP para WordPress e oferece uma navegação mais rápida das páginas do site para os visitantes de celular e tablet.

Esse plugin é distribuído como software de código aberto (open source) e tem uma versão paga. Porém, você pode utilizar apenas a versão grátis e ter todos os benefícios importantes do plugin.

Pelo nome AMP for WP você já percebe que o foco deles é a nova tecnologia do Google. Porém, eles perceberam que havia uma outra necessidades dos usuários WordPress quanto a encontrar um plugin que auxilia também na configuração do Facebook Instant Articles.

Então, para que as pessoas não precisem ter 2 plugins instalados – eles se prontificaram a adicionar essa funcionalidade de forma gratuita.

Há alguns meses – depois de muitas tentativas, erros e chamados abertos no suporte do plugin – consegui dominar as técnicas necessárias para instalar essas novas tecnologias no meu blog.

No começo foi difícil, mas não desisti de aprender a configurar o AMP no meu site. Quanto a integração do Facebook Instant Articles, foi um pouco mais complicado e precisei de ajuda no fórum de suporte do plugin no wordpress.org.

O autor do plugin Ahmed Kaludi consertou um bug que mencionei no fórum de suporte e já me disse a data da atualização que corrigiria o problema.

Plugins com uma equipe forte de suporte e desenvolvedores competentes vão ter sucesso sempre. Tive satisfação em abrir chamados de suporte e ajudar a encontrar possíveis bugs no plugin.

Siga este guia completo para instalar o AMP e o Instant Articles sem precisar esquentar tanto a cabeça em quais configurações você deve mexer ou não.

Eu vou ensinar o que eu fiz e deu certo – etapa por etapa – e também vou fornecer o CSS customizado que utilizo no meu blog.

Antes disso, entenda quais são os benefícios de aderir à essas novas tecnologias.

Quais as vantagens de usar o Google AMP?

A concorrência na internet está mais acirrada. Sites que não atendem o desejo dos usuários estão ficando para trás. E se você busca melhorar experiência do usuário de seu site – o Google AMP é a escolha certa.

Utilize a tecnologia AMP no seu site WordPress:

• Aumente o tráfego de acessos;
• Melhore a experiência do usuário;
• Carregue a página instantaneamente;
• Ganhe mais dinheiro com propagandas Adsense;
• Potencialize o seu SEO;
• Retenha 10% – 30% mais atenção do usuário.

Segundo o site da Kissmetrics, 47% dos consumidores esperam que a página do site carregue em menos de 2 segundos. Além disso, 40% das pessoas abandonam o site se demorar mais de 3 segundos para carregar.

Percebe como é importante que o seu site faça parte dessa nova tecnologia?

Depois, eu vou mostrar para você como testar se a página está habilitada para o AMP e também como solicitar que o Google indexe ela na ferramenta de pesquisa.

Quando você tiver instalado e configurado corretamente, o site deve carregar via mobile em menos de 2 segundos.

Mas, tem um ponto ainda mais importante que eu ainda não comentei.

Ao ser indexada pelo Google, sua postagem AMP será pré-renderizada pelos servidores da Google e terá o seu acesso liberado na hora – carregando instantaneamente para quem pesquisou por sua matéria assim que efetuar o clique.

É por isso e outros motivos que mais de 850.000 domínios já aderiram ao formato AMP.

Para finalizar sobre as vantagens de usar o Google AMP, veja os números da gigante The Washington Post a respeito de sua experiência com a nova tecnologia:

• 23% de aumento em usuários mobile que voltam em até 7 dias;
• 88% de melhora no tempo de carregamento versus formato mobile tradicional;
• Mais de 1000 artigos publicados todos os dias usando o AMP.

Se nosso site levar muito tempo para ser carregado, independente da qualidade do nosso jornalismo, algumas pessoas sairão da página antes mesmo de ver o conteúdo.

The Washington Post

E qual é a fórmula mágica para conseguir um acesso tão rápido ao site? Corte tudo o que não é necessário para a experiência do usuário e deixe a página o mais leve possível. Isso é o que o projeto Google AMP faz em seu site.

Ao ativar essa tecnologia você pode vir a perder algumas funcionalidade ou animações no seu site. Mas, pode ficar tranquilo que elas provavelmente são de prioridade secundária no mobile.

Quem acessa via dispositivos mobile quer consumir o conteúdo o mais rápido possível. Quer poder compartilhar novas informações com outras pessoas e poder interagir com o autor. Tudo isso, na verdade, é a prioridade do Google AMP.

Ao ativar o Google AMP em seu site WordPress você terá algumas limitações no mobile:

• Permite apenas scripts assíncronos;
• Dimensionar todos os recursos estaticamente;
• Não permite que mecanismos de extensões bloqueiem a renderização;
• Remove qualquer JavaScript de terceiros do caminho essencial;
• Qualquer CSS deve ser inline e de tamanho limitado;
• O acionamento de fontes deve ser eficiente;
• Minimiza os recálculos de estilo;
• Executa apenas animações aceleradas por GPU.

Saiba mais na página oficial do projeto.

Eu, como web designer, adiciono CSS e jQuery customizado em meus sites. Mas, também não entendo completamente a lista de limitações citadas acima.

O que eu sei é que reduzir o número de solicitações ao servidor agiliza a visualização do conteúdo pelo usuário e melhora sua experiência de navegação.

E como fazer isso? O aplicativo AMP for WP derrubou barreiras de entrada para desenvolvedores de site que ainda não entendem completamente como criar sites otimizados com a ajuda do projeto AMP.

Graças aos desenvolvedores do plugin AMP for WP e toda a comunidade global do projeto open source, a integração ao novo formato está simples e fácil.

Agora, analise quais as vantagens de configurar o seu site WordPress também para o formato do Facebook Instant Articles quando for compartilhar suas postagens na rede social mais utilizada do mundo.

Quais as vantagens de usar o Facebook Instant Articles?

Você já deve ter reparado em postagens no Facebook que abrem instantaneamente ao serem clicadas. Repare no ícone de raio semelhante ao Google AMP.

Perceba também que a maioria das páginas que estão usando deste formato são de grandes blogs ou marcas globais. A Exame destacada na foto acima é um exemplo disso.

Ative o Facebook Instant Articles em sua página para ter as seguintes vantagens:

• 10x mais rápido que artigos mobile tradicionais;
• 20% maior índice médio de leitura dos artigos;
• Chance 70% menor do usuário abandonar o artigo;
• Usar o formato de publicação que as grandes marcas utilizam.

Semelhante à outra tecnologia, existem algumas exigências da plataforma Facebook para aprovar sua página. Depois de aprovado, todas as suas futuras postagens serão automaticamente transformadas para o formato Instant Article quando compartilhadas via plataforma do Facebook.

Vou explicar melhor quando mostrar para você como configurar o Facebook Instant Articles via plugin AMP for WP e integrar com sua página da rede social.

Acesse este link para saber mais sobre o projeto.

Instalando e Configurando o Google AMP no WordPress

Em primeiro lugar, instale o AMP for WP – Accelerated Mobile Pages. É o plugin da categoria com maior número de avaliações positivas e tem mais de 100.000 instalações ativas.

Depois de ativado, clique em AMP > Settings.

Você vai observar o grande número de opções disponíveis para edição a partir do painel de configuração do plugin.

Analisarei as seções de Settings e Design com você e recomendarei quais opções ativar (que são as que eu uso no meu blog). Caso você encontre uma nova opção não abordada no tutorial, por gentileza avise no comentários.

Observação: não esqueça de clicar em Save Changes para salvar suas configurações.

Settings

General

• Logo: faça o upload de uma imagem (de preferência em PNG) para aparecer no menu do site mobile versão AMP.

Eu não coloquei imagem, porque é escrito o nome do site no lugar do logo caso não tenha imagem escolhida e eu gostei assim.

• AMP Support: ative apenas as opções de Posts e Archives [Category & Tags].

Eu não gostei do layout das páginas institucionais em AMP. Eu só uso esse formato para postagens. Mas, fique a vontade para ativar a opção Pages também.

Page Builder

Eu não uso AMP nas páginas mobile do meu site, apenas em postagens do meu blog. Venha nessa seção caso queira alterar as configurações do criador de páginas em AMP.

Advertisement

Aqui você pode selecionar até 6 áreas do site para mostrar seus anúncios AdSense.

• AD #1: abaixo do Header em todo o site;
• AD #2: abaixo do Footer em todo o site;
• AD #3: acima da postagem;
• AD #4: abaixo da postagem;
• AD #5: abaixo do título;
• AD #6: acima das postagens relacionadas.

Eu ativei as opções #1 e #2. Isso é subjetivo baseado em sua estratégia de uso das propagandas AdSense.

SEO

Aqui eu deixo a configuração padrão. O plugin tem integração com o Yoast, o que facilita o SEO das páginas AMP.

Performance

Eu ativo a opção Minify AMP Page, porque acredito que ela não terá qualquer incompatibilidade no site. Esta opção aumenta a velocidade de acesso ao site mobile AMP pela redução do tamanho dos arquivos que compõe a página.

Analytics

Configure qual ferramenta de análise você quer integrar os dados de acesso das páginas AMP.

• Analytics Type: selecione o Google Analytics;

• Google Analytics: cole o ID do seu site. Ele possui este formado: UA-XXXXX-Y.

Structured Data

Esta área é mais técnica e eu aconselho deixar no padrão.

• Default Post Image: selecione uma imagem genérica para mostrar caso sua página / postagem não tenha imagem de destaque.

Notice Bar

Os desenvolvedores desse plugin gostam de ajudar seus usuários mesmo.

Existem alguns países que obrigam os sites a notificarem as pessoas que cookies (arquivos de texto que armazenam preferências do usuário) estão sendo usados pelo site.

Para reduzir o número de plugins, eles agregaram mais essa funcionalidade no plugin deles.

Você pode usar esse campo para mostrar alguma mensagem importante, dicas ou cupons promocionais.

Push Notifications

Ative essa opção caso você utilize o aplicativo One Signal.

Contact Form

Para adicionar formulários de contato em suas páginas AMP, você precisa comprar a extensão deles por $40. As opções terceirizadas são: Contact Form 7 e Gravity Forms Support.

Eu não utilizo nenhuma extensão do AMP for WP, apenas a versão gratuita mesmo.

Comments

Quanto aos comentários – eu ativo apenas os comentários nativos do WordPress e configuro para 10 o número de comentários. Caso esteja acostumado, você pode selecionar os comentários do Disqus e do Facebook.

Instant Articles

Aqui é a área de configuração do Facebook Instant Articles no site WordPress. Abordarei o tema detalhadamente mais pra frente.

Hide AMP Bulk Tools

Aqui você pode escolher quais categorias você não quer ativar o formato AMP.

Eu recomendo deixar ativado em todas as categorias do seu site.

Advance Settings

Uma das configurações mais importantes está nessa seção do painel.

“Ative a opção Mobile Redirection para que os usuários que navegam pelo site na versão sem AMP sejam redirecionados para a versão AMP quando clicarem em uma postagem que utiliza esse formato.”

Como eu não habilito a página principal do site ou qualquer outra página para o formato AMP – essa opção é fundamental para que o plugin funcione corretamente.

O AMP cria uma segunda página contendo as informações da original. É adicionado um /amp do final da URL de uma página AMP.

Exemplo de página normal: site.com/tutorial-sobre-design.

Exemplo página com AMP: site.com/tutorial-sobre-design/amp.

Portanto, o redirecionamento não será feito se você não habilitar essa opção. Não haverá caminho direto para o acesso do formato AMP no mobile.

Quanto as outras configurações, eu deixo todas como padrão (desabilitadas) e desligo a opção Plugin Update Notification Bar – que gera notificações constantes sobre as atualizações recentes do plugin.

Translation Panel

Esta etapa é importantíssima. Adicione o conteúdo do Footer e traduza os principais textos utilizados pela versão AMP do site.

Segue abaixo a minha lista traduzida:

• Breadcrumbs Homepage Title – Homepage
• Show more Posts – Próximo
• Show previous Posts – Anterior
• Top – Topo
• View Non-AMP Version – Versão sem AMP
• Related Post – Matérias Relacionadas
• Navigate – Menu
• On – Em
• Next – Próximo
• Previous – Anterior
• Footer – Artneo – Todos os direitos reservados.
• Categories – Categorias:
• Tags – Tags:
• By – Por
• Published by – Publicado por
• in – em
• View Comments – Ver Comentários
• Leave a Comment – Escrever um Comentário
• at – em
• says – disse
• Edit – Editar
• ago – atrás
• This post was last modified on – Essa postagem foi modificada em
• Category (archive title) – Categoria:
• Tag (archive title) – Tag:
• View More Posts (Widget Button) – Ver Mais Postagens
• Next Read – Próximo
• via – via
• You searched for: – Você procurou por:
• It seems we can’t find what you’re looking for. – Nenhum resultado encontrado.

Terminado a etapa de configuração do plugin, edite as opções de design também.

Design

Themes

Existem 3 opções de temas / layouts prontos para serem usados como padrão de design no AMP for WP na versão 0.9.71. Os desenvolvedores disseram que terão outras opções em breve. Por enquanto, utilizo a opção descrita abaixo:

• Themes Selector: Design Three.

Global

Sem dúvida, a parte mais importante das configurações de design.

• Color Scheme: utilize sua cor principal;

• Color Scheme Font Color: deixe a cor branca como padrão;

• Anchor Link Color: selecione a cor dos links;

• Date Format: Ago;

• Text for the Date Format: % dias atrás;

• Custom CSS.

Aqui você pode adicionar o código CSS para customização do tema escolhido. Eu adicionei algumas linhas de CSS para melhorar o espaçamento, as cores e os outros aspectos de design do tema #3.

Segue abaixo – conforme citado no começo do tutorial – o código CSS que utilizo no meu blog:

/* -- Blockquote -- */
 .amp-wp-content blockquote {
 border-color: #4FACFE;
 margin-bottom: 30px;
 background-color: #f0f0f0;
 }

/* -- Category -- */
 h1.amp-wp-content.page-title {
 margin-left: 15px;
 }

/* -- breadcrumbs -- */
 .breadcrumb {
 margin-top: 15px;
 }

/* -- ul -- */
 ul {
 position: relative;
 top: -5px;
 padding-left: 20px;
 }

/* -- Body -- */
 #designthree, body {
 background-color: #f0f0f0;
 background:url(/wp-content/themes/artneo/bg/1.png) 0 0 repeat;
 }

/* -- Links -- */
 .amp-wp-content p a {
 text-decoration: underline;
 }

.ampforwp-tax-category a {
 color: #1d2129;
 }

/* -- Single -- */
 .single-post main {
 margin: 0px 17px 17px 17px;
 }

/* -- Menu -- */
 #header, #footer, amp-sidebar {
 background-color: #f0f0f0;
 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }

.headerlogo a {
 background: transparent;
 }

/* -- Hamburguer menu -- */
 .navigation_heading, #sidebar a {
 color: #1d2129;
 }

.toggle-navigationv2 section[expanded] h6, amp-accordion>section[expanded]>:nth-child(n), .toggle-navigationv2 ul h6, .toggle-navigationv2 ul h6:hover, .toggle-navigationv2 ul li a:hover {
 transition: .3s all;
 background: #e5e5e5;
 }

/* -- Fonts -- */
 h1.amp-wp-title {
 color: #1d2129;
 }

/* -- wp-caption -- */
 div.wp-caption {
 text-align: center;
 margin: 0 auto;
 }

p.wp-caption-text {
 text-align: left;
 }

/* -- Author -- */
 .amp-wp-author {
 color: #1d2129;
 }

/* -- Category -- */
 .amp-wp-meta {
 color: #1d2129;
 }

/* -- Footer -- */
 #footer .rightslink a, #footer .rightslink {
 color: #1d2129;
 }
Code language: CSS (css)

Header

• Navigation Menu: ative essa opção e clique em Aparência > Menus para escolher qual será o menu utilizado em suas páginas AMP.

Selecione a caixa AMP Menu e clique em Salvar menu.

• Search: habilite para mostrar uma caixa de pesquisa. Eu não utilizo essa opção;

• Call Now Button: habilite e adicione seu número de telefone. Eu não utilizo essa opção também;

• Header Background Color: selecione a cor de fundo do Header;

• Header Elements Color: adicione sua cor primária nos elementos do Header;

• Non-AMP HomePage link in Header and Logo: essa opção redireciona os usuários na versão AMP para a versão normal do site ao clicar no menu. Eu recomendo deixar essa opção desativada;

• Make Header UnSticky: caso esta opção seja ativada, o menu ficará apenas na parte de cima do site. Por padrão, o menu acompanha o scroll do usuário até o Footer da página. Eu recomendo também que mantenha essa opção desativada.

HomePage

Aqui você pode configurar os sliders e configurações da sua página inicial. Porém, ela só funcionará se você ativar a sua página inicial na versão AMP em Settings > General > Homepage.

Single

Edite aqui o layout das postagens.

Eu recomendo que ative as seguintes opções:

• Breadcrumb;
• Categories;
• Categories and Tags Links;
• Next-Previous Links;
• Author Bio;
• Related Post by: Categories.

Essas opções também são subjetivas. Por exemplo, caso você utilize Tags em suas postagens WordPress, habilite a configuração Tags para que apareçam também nas postagens versão AMP.

Footer

• Link to Non-AMP page in Footer: habilite um botão no Footer das páginas AMP que redireciona o usuário para a página mobile normal do site. O texto do link pode ser traduzido em Settings > Translation Panel;

• Back to Top link: ative um botão fixo que faz scroll até o topo da página se for clicado;

• Credit link: adiciona uma propaganda do plugin AMP for WP para divulgação aos outros desenvolvedores WordPress.

Eu deixo todas as opções desativadas – mas, são subjetivas essas escolhas.

Page

Na versão 0.9.71 só aparece a opção Meta Information e eu deixo por padrão desabilitado.

Social

Aqui você pode habilitar quais formas de compartilhamento você prefere mostrar.

Eu configurei meu blog para ter o Facebook, o Email e o WhatsApp. Para ativar o Facebook, você precisa ter um App ID.

Para mostrar seus perfis nas redes sociais escolhidas, ative a opção que desejar em Social Media Profiles (Design #3) e cole a URL de sua página.

Misc

Agora, pra finalizar a etapa de design do processo: clique em Launch Post Builder > AMP e selecione a ordem do conteúdo a ser mostrado para o usuário na postagem versão AMP.

Segue abaixo o modo que configurei meu blog. Caso queira alterar a imagem em destaque acima do título, basta segurar e arrastar a opção para o local desejado.

Existem também outras opções secundárias como habilitar sub-categorias ou ativar escrita da direita para esquerda (comum em algumas línguas estrangeiras).

Solicite a indexação de suas páginas / postagens versão AMP no Google

Parabéns! Você configurou seu site WordPress com sucesso para utilizar a nova tendência mobile.

Agora, após selecionar suas preferências dentro das seções de Settings e Design, ainda falta uma última etapa: avisar o Google que sua nova versão mobile do site está pronta para ser indexada.

Essa etapa não é obrigatória, mas acredito que ajudará a indexar suas páginas e postagens rapidamente no Google.

Clique aqui e verifique se sua página AMP é válida.

Clique em Realizar teste.

Depois que aparecer o aviso de que foi detectado um link de AMP no URL enviado clique em Testar a AMP vinculada.

Caso a mensagem mostre que esta é uma página AMP válida, meus parabéns! Está comprovado que você configurou corretamente o formato AMP no seu site WordPress!

Agora é só clicar em Enviar ao Google para solicitar a indexação da página.

Pode-se dizer que o seu site já está otimizado para mobile. Mas, recomendo que continue mais um pouco com o tutorial e ative também o Facebook Instant Articles em seu site WordPress. É o mesmo plugin AMP for WP e simples de configurar.

Configurando o Facebook Instant Articles no WordPress

Para ativar o Facebook Instant Articles no seu site você precisa voltar às configurações em AMP > Settings > Instant Articles.

• Facebook Instant Articles Support: ative essa opção para começar;

• Number of Posts: o valor padrão dessa opção é 50, mas eu recomendo que você apague esse número para que todas as postagens atuais e futuras sejam utilizadas na versão Instant Articles;

Para configurar as propagandas ative a opção Advertisement.

Coloque o seu ID do Audience Network. Saiba mais informações acessando a documentação do Facebook for developers.

A monetização das postagens ainda não está liberada para o Brasil, mas a previsão é que seja ativada em breve.

• How often should ads show in Instant Article pages: essa opção é para selecionar o intervalo de palavras na postagem até aparecer uma propaganda. Selecione 250 para uma maior incidência de propagandas em sua postagem. Você também pode escolher a cada 350 ou 500 palavras.

Vincule sua propriedade do Google Analytics às páginas AMP. Primeiro, ative a opção Analytics.

Clique aqui e acesse o painel do Google Analytics.

Clique em Administrador e nas informações de acompanhamento da sua propriedade.

Pronto! A configuração do Facebook Instant Articles no WordPress está concluída.

Agora, configure a página do Facebook que irá receber o conteúdo do seu site.

Configurando o Instant Articles no Facebook

Primeiro, acesse sua página do Facebook, clique em configurações e depois em Instant Articles.

Caso essa opção não esteja liberada para sua página, faça o seu cadastro neste link.

Depois, dentro de Ferramentas faça os seguintes passos:

1. Clique em Conecte seu site;
2. Copie o código HTML e cole no head de seu site;
3. Escreva o seu domínio com e sem www e clique Reivindicar URL.

Para adicionar código manualmente no head do seu site WordPress eu recomendo que você copie o header.php do seu tema para a pasta do seu child theme e cole o código logo em seguida que abrir a tag head.

Para garantir que todas as meta tags solicitadas estão no site, cole a URL do site no depurador de compartilhamento do Facebook. Caso nenhum alerta tenha aparecido na tela – você conseguiu configurar essa etapa corretamente no WordPress.

Em seguida, clique em Feed RSS de produção e cole a URL de integração do seu site.

Agora, edite o estilo do Facebook Instant Articles. Um dos requisitos para ativação é que suas postagens tenham o logo de sua empresa / projeto.

Clique em Estilos e depois em default.

Dica: utilize o Canva – ferramenta gratuita de design – para criar um logo otimizado para Instant Articles.

Eu aconselho que você crie um layout de 690×132 pixels (como é recomendado pelo Facebook). Mas, a dica é que você coloque o logo com apenas 200px no canto esquerdo inferior da tela.

Assim, na pré-visualização o logo ficará com uma boa proporção.

Em seguida, faça os seguintes passos para adicionar o logo:

1. Clique em Logotipo;
2. Faça o upload do logo;
3. Analise a pré-visualização antes de salvar.

Para finalizar, envie exemplos de publicações para que o Facebook avalie e aprove o seu site.

1. Clique em Enviar para análise;
2. Selecione Ok.

Provavelmente, aparecerá o seguinte aviso:

A análise está pendente. As análises dos artigos costumam ser feitas em 3 a 5 dias úteis.

Há um tempo atrás eles pediam apenas 5 postagens. Hoje são 10. Acredito que estão subindo o número de postagens mínimas necessárias para não perder tempo de análise com blogs muito pequenos ou sem administração.

Sua parte está feita. Agora é só aguardar em média uma semana a aprovação de seu site no Facebook Instant Articles.

Conclusão

Ufa, mais de 3.500 palavras. Esse tutorial é para começar bem o ano de 2018.

Espero ter te ajudado em alguma parte do processo de instalação do Google AMP e do Facebook Instant Articles em seu site WordPress.

Passar por todas as etapas demanda sim estudo e dedicação, mas depois que você estiver acostumado a publicar conteúdo de forma rápida e moderna – você não vai querer voltar ao modo tradicional.

O que você achou desse guia completo sobre como instalar AMP e Facebook Instant Articles no WordPress? Deixe um comentário abaixo. Seu feedback é importante para mim.

Muito obrigado por sua companhia até aqui!

Grande abraço e até a próxima!