Google AMP o que é e como usar no meu site?

Tempo de leitura: 13 minutos

O significado da sigla AMP é Accelerated Mobile Pages. E tem o propósito de otimizar/acelerar o desempenho na navegação da internet móvel aberta.

Seguindo a filosofia “open source” do Google, todo o código será disponibilizado no Github para que qualquer publicação consiga integrar o seu conteúdo ao AMP.

Já podemos ver formato similiar no Facebook Instant Articles, ao Apple News e ao Twitter Moments. Onde o intuito do Google é que as páginas mobile suportem diversos formatos de conteúdo, como vídeo, animações e gráficos, rodando junto com anúncios e que carreguem rapidamente(e, consequentemente, a experiência do usuário) para os seus leitores móvel sem sacrificar qualquer receita publicitária que eles podem confiar.

Embora desenvolvedores experientes muitas vezes podem obter resultados semelhantes através de otimizações de desempenho intensivo, muitas vezes isso é negligenciado devido a limitações de recursos. AMP permite que essas otimizações podem ser facilmente alcançado sem alterar a experiência primária web móvel.

Como começar com as Aceleradas Mobile Páginas(AMP)?
Essencialmente uma estrutura para a criação de páginas da web móvel, AMP consiste em três partes básicas:
1. AMP HTML: Um subconjunto de HTML, esta linguagem de marcação tem algumas marcas personalizadas e propriedades e muitas restrições. Mas se você estiver familiarizado com HTML regular, você não deve ter dificuldade em adaptar as páginas existentes para AMP HTML. Para mais detalhes sobre como ele difere do HTML básico, consulte a lista de marcação necessária da AMP Projeto que sua página HTML AMP “deve” ter.
2. AMP JS: Um framework JavaScript para páginas móveis. Para a maior parte, que gere o processamento de recursos e carregamento assíncrono. Deve notar-se que de terceiros JavaScript não é permitido com AMP.
3. AMP CDN: Um Content Delivery Network opcional, ele terá suas páginas permitiu-AMP, cache-los e automaticamente fazer algumas otimizações de desempenho.

Como você vai inserir o AMP em seu site?
Para começar, você terá que manter pelo menos duas versões de qualquer página do artigo: A versão original da página do artigo que os usuários normalmente ver, e a versão AMP dessa página.

AMP não permite coisas como elementos de formulário e de terceiros JavaScript, onde você provavelmente não vai ser capaz de ter comentários na página e alguns outros elementos que podem ser utilizados para ter em sua página em uma implementação padrão. (Embora não haja atualmente um hack usando iframe que fornece uma solução para isso. Graças a Conrad O’Connell por me ajudar a verificar o hack.)

Também é provável que você vai ter que reescrever o seu modelo de site para acomodar as restrições. Por exemplo, todas as CSS em AMP deve ser em linha e pode ser inferior a 50 KB. Devido à carga e intensidade das fontes de costume, eles devem ser carregados usando uma extensão amp-fonte especial, a fim de controlar melhor esse carregamento.

Multimedia devem ser tratados de forma especial. Por exemplo, as imagens precisam utilizar o costume amp-img elemento e deve incluir uma largura explícita e altura. (Ao converter um site legado para um modelo AMP, isso pode ser uma grande dor se a largura e altura atributos já não estão sendo usados). Além disso, se as imagens são GIFs animados, você precisa usar o separada componente estendido amp-anim .

Como imagens, há uma tag personalizada que deve ser utilizado para incorporar hospedado localmente vídeos via HTML5, chamado de amp-video. Para a incorporação de vídeo YouTube, no entanto – que a maioria dos vídeos da web são – há um componente prolongado separado, amp-youtube .

Também há suporte para coisas como slideshows através amp-carrossel e de luz de imagem via amp-image-favoritos, como meios de bem-estar social incorpora no Twitter, Instagram, Facebook, Pinterest e Vine através dos seus próprios componentes estendidos .

Estes componentes de tag e estendidos não são difíceis de usar; eles só exigem um planejamento em seu design do site.

Para que o Google (e outras tecnologias de apoio do Projeto AMP) para detectar a versão AMP de seu artigo, você precisará modificar a versão original da página do artigo. A página do artigo original deve incluir o seguinte tag, essencialmente, um tag canônico para páginas AMP:

<link rel=”amphtml” href=”http://www.example.com/blog-post/amp/”>

A página AMP Descoberta também menciona que algumas plataformas que suportam AMP vai exigir metadados schema.org para especificar o tipo de conteúdo da página. (Atualmente, “artigo”, “receita”, “avaliação” e “vídeo” são listados como exemplos tipo de página no GitHub.)

Além disso, também indica que Schema.org dados meta “é um requisito para fazer o seu conteúdo elegível para ser apresentado na demonstração do Google Search carrossel de notícias.” Então, se você está tentando obter um benefício futuro do Google através da implementação de AMP, certifique-se de obter o seu direito de esquema!

Como posso rentabilizar com anúncios na AMP?
O aumento da ascensão de bloqueadores de anúncios tornou difícil para os editores monetizar seus sites. Para alguns usuários, melhorando o tempo de carregamento do site tem sido um incentivo para usar bloqueadores de anúncios, que podem ajudar a melhorar a velocidade de navegação. AMP pode ser visto como uma resposta a esta questão, com o projeto afirmando:

Um dos objetivos do projeto Páginas móvel acelerada é garantir monetização anúncio eficaz na web móvel, enquanto abraçando uma abordagem centrada no usuário. Com esse contexto, o objetivo é fornecer suporte para uma ampla variedade de formatos de anúncios, redes de anúncios e tecnologias em páginas móveis acelerado.

Como resultado, uma série de redes de anúncios mais populares está usando o componente estendido amp-ad (com maior compatibilidade provável no caminho):
– Amazon A9
– AdReactor
– Anúncios do Google
– AOL AdTech
– Google Doubleclick
– Flite
– Taboola
– Adform
– DotAndAds
– plista
– inteligente AdServer
– Yieldmo

Se você quiser ver o que estes parecem, exemplos para cada rede de anúncios são fornecidos dentro dos arquivos .MD na página GitHub da AMP.

Se a sua monetização é mais complexo – utilizando paywalls ou assinaturas – existe documentação disponível para implementá-la dentro AMP , assim, usando a extensão “AMP Access”.

Existe Analytics para AMP?
Sim. Na verdade, o Google Analytics em AMP é muito inteligente. Para evitar que várias análises de rastreamento de abrandar um site, eles implementaram a filosofia de “medida de uma vez, o relatório para muitos.” Há dois caminhos para ativar a funcionalidade de análise com a AMP para o seu site:

– O elemento Amp-Pixel: Esta é uma tag simples que pode ser usado para contar visualizações de página como um pixel de rastreamento típico, usando uma solicitação GET. Há uma série de variáveis ??que podem ser passados ??através dele, como DOCUMENT_REFERRER e Título.
– O componente estendido Amp-Analytics: Este é um pouco mais avançado do que o amp-pixel. É provável que você vai usar para implementar analytics em seu site, pois permite um maior nível de configuração para análise de interações.

Se você não quiser usar o Google Analytics, amp-analytics é o caminho a percorrer. Você vai precisar adicionar a biblioteca JavaScript necessário noe, em seguida, configurá-lo através de alguma marcação JSON na seção da sua página.

Se você está interessado no Google Analytics em AMP, vá para o Google seção AMP Analytics em sua página do desenvolvedor. Ele tem vários exemplos de implementações.

O que vai AMP Look Like no Google?
Google forneceu uma demonstração do que uma característica AMP ficaria como na SERP. Você pode experimentá-lo navegando para Demonstração no seu celular (ou imitá-la dentro do Chrome Developer Tools). Em seguida, buscar algo como “Marte.” Você verá um carrossel em direção ao topo com artigos AMP.

Clique em um resultado para uma experiência de leitura embutido na SERP. Você pode deslizar para a direita ou para a esquerda para ler outro artigo permitiu-AMP. É uma experiência diferente de simplesmente navegar para página AMP de um editor.

Como faço para começar Com AMP Em WordPress?
Uma das maneiras mais fáceis de sujar as mãos com AMP agora é para implementá-lo em um site WordPress. Um plug-in oficial está sendo desenvolvido pela Automattic / WordPress, e é freqüentemente sendo atualizado no GitHub.

Passo 1: Instalar o oficial WordPress Plugin

Para começar, acesse a página GitHub amp-wp e clique no botão “Download ZIP”.
Baixando o wordpress amp plugin do github. Você pode instalar em seu site WordPress, tal como faria qualquer outro WordPress plugin.

Uma vez instalado, basta acrescentar “/ amp /” para uma página artigo (ou, se você não tem nice permalinks, você pode, alternativamente, acrescentar “? Amp = 1” ).

Etapa 2: Validar & Tweak

Eventualmente, o Google Search Console deve estar na versão AMP dos seus artigos através do tag rel = “amphtml” anexado pelo plug-in, permitindo fácil validação de artigos em massa. O único problema com isto, mencionado até agora, é que ele não detecta alterações muito rapidamente. Se você corrigir alguma coisa, a correção demorará alguns dias para aparecer.

Eu recomendo usar uma combinação do processo de validação Search Console e Chrome. Para usar o processo de validação Chrome, vá para uma de suas páginas AMP em Chrome e acrescentar “# desenvolvimento = 1” ao final da URL. Hit Control + Shift + I para abrir Chrome Developer Tools e de cabeça para Console.

Você pode precisar atualizar a página, mas quando o fizer, ele retornará “validação AMP bem-sucedido” ou dar-lhe uma lista de problemas para corrigir.

Pode ser que não baste apenas  instalar o plugin WordPress, e você vai ter que validar todas as páginas que gostaria de inserir em AMP.

Dependendo de como seus artigos são formatados, pode ser necessário fazer algumas mudanças, a fim de obter as páginas AMP para validar. Os problemas mais comuns que foram relatados, é que estava especificando atributos de altura e largura para imagens e corrigir códigos incorporados do YouTube antigos que não estavam usando https.

Etapa 3: Obter esquema de marcação para validar

Como mencionado anteriormente, é também importante ter marcação esquema válido em suas páginas AMP. Para testar suas páginas para marcação válida, você pode usar ferramenta de teste de dados estruturados do Google . Alguns do problemas com o WordPress foi não exibir um logotipo de edição e precisava fazer a seguinte modificação para o plugin.

Editar a classe-amp-post-template.php arquivo, seja via FTP ou dentro do seu WordPress Dashboard (ir para Plugins> Editor e, em seguida, selecione “AMP”) e mudança:

if ( $site_icon_url ) {
$metadata[‘publisher’][‘logo’] = array(
‘@type’ => ‘ImageObject’,
‘url’ => $site_icon_url,
‘height’ => self::SITE_ICON_SIZE,
‘width’ => self::SITE_ICON_SIZE,
);
}

para:

$metadata[‘publisher’][‘logo’] = array(
‘@type’ => ‘ImageObject’,
‘url’ => ‘http://domain.com/wp-content/uploads/logo-60.png’,
‘height’ => 60,
‘width’ => 170,
);

Certifique-se de substituir a URL com um caminho para o seu próprio logotipo editável e para especificar a altura ea largura em pixels. Você pode encontrar informações sobre a causa de marcação aqui , que especifica que “idealmente, logos são exatamente 60px de altura com largura <= 600px”.

Passo 4: Obtendo o Google Analytics trabalhando com a AMP WordPress Plugin
Qual a utilidade de um site, se você não pode inseri-lo no Google Analytics? O plugin AMP WordPress não permite amp-analytics fora da caixa, mas é bastante simples para ativar. Para ativar o plugin AMP WordPress para trabalhar com o Google Analytics, edite o amp-post-template-actions.php (arquivo diferente daquele mencionado anteriormente) arquivo, ou via FTP ou dentro do seu WordPress Dashboard (ir para Plugins> Editor e, em seguida, selecione “AMP”), e adicione o seguinte ao final do mesmo:

add_action ( ‘amp_post_template_head’, ‘amp_post_template_add_analytics_js’);
amp_post_template_add_analytics_js função ($ amp_template) {
$ Post_id = $ amp_template-> get ( ‘post_id’);
?>
< Roteiro assíncrono custom-elemento = ” ampère-analytics ” src = ” https://cdn.ampproject.org/v0/amp-analytics-0.1.js ” >
<? Php } add_action ( ‘ amp_post_template_footer ‘ , ‘ xyz_amp_add_analytics ‘ ); função xyz_amp_add_analytics ( $ amp_template ) { $ post_id = $ amp_template -> get ( ‘ post_id ‘ );
? >
< Amp -analytics tipo = ” googleanalytics ” id = ” analytics1 ” >
< Script de tipo = ” application / json ” >
{
” Vars ” : {
” Conta ” : ” UA-XXXXX-Y “
},
” Gatilhos ” : {
” TrackPageview ” : {
” On ” : ” visível ” ,
” Pedido ” : ” page view “
}
}
}
</ Roteiro >
</ Amp -analytics >
<? Php
}

Certifique-se de mudar UA-XXXXX-Y para representar do seu site Google Analytics propriedade ID.

Agora, re-validar suas páginas AMP, e você deve ter uma configuração básica AMP com rastreamento habilitado para o seu site WordPress.

Conclusão
AMP fornece uma maneira relativamente fácil de melhorar a velocidade de sites móveis.
Você tem um negócio on-line(landing-page, site, loja-virtual)? Se sim, você precisa começar a pensar em páginas móveis aceleradas.

Um nova tecnologia está chegando. Você está preparado?

Mais informações no site do projeto: AMP Projects
ou em Search Engine Land