{"id":45,"date":"2017-01-09T15:32:44","date_gmt":"2017-01-09T17:32:44","guid":{"rendered":"http:\/\/www.alanpereira.com\/blog\/?p=45"},"modified":"2024-12-11T16:35:19","modified_gmt":"2024-12-11T19:35:19","slug":"google-amp-o-que-e-e-como-usar-no-meu-site","status":"publish","type":"post","link":"https:\/\/www.alanpereira.com\/blog\/google-amp-o-que-e-e-como-usar-no-meu-site\/","title":{"rendered":"Google AMP o que \u00e9 e como usar no meu site?"},"content":{"rendered":"

O significado da sigla AMP<\/strong> \u00e9 Accelerated Mobile Pages<\/strong>. E tem o prop\u00f3sito de otimizar\/acelerar o desempenho na navega\u00e7\u00e3o da internet m\u00f3vel aberta.<\/p>\n

Seguindo a filosofia \u201copen source\u201d do Google, todo o c\u00f3digo ser\u00e1 disponibilizado no Github<\/a> para que qualquer publica\u00e7\u00e3o consiga integrar o seu conte\u00fado ao AMP.<\/p>\n

\"google-blog-amp-example<\/a>J\u00e1 podemos ver formato similiar no Facebook Instant Articles, ao Apple News e ao Twitter Moments. Onde o intuito do Google<\/strong> \u00e9 que as p\u00e1ginas mobile suportem diversos\u00a0formatos de conte\u00fado, como v\u00eddeo, anima\u00e7\u00f5es e gr\u00e1ficos, rodando junto com an\u00fancios e que carreguem rapidamente(e, consequentemente, a experi\u00eancia do usu\u00e1rio) para os seus leitores m\u00f3vel sem sacrificar qualquer receita publicit\u00e1ria que eles podem confiar.<\/p>\n

Embora desenvolvedores experientes muitas vezes podem obter resultados semelhantes atrav\u00e9s de otimiza\u00e7\u00f5es de desempenho intensivo, muitas vezes isso \u00e9 negligenciado devido a limita\u00e7\u00f5es de recursos. AMP permite que essas otimiza\u00e7\u00f5es podem ser facilmente alcan\u00e7ado sem alterar a experi\u00eancia prim\u00e1ria web m\u00f3vel.<\/p>\n

Como come\u00e7ar com as Aceleradas Mobile P\u00e1ginas(AMP)?
\n<\/strong>Essencialmente uma estrutura para a cria\u00e7\u00e3o de p\u00e1ginas da web m\u00f3vel, AMP consiste em tr\u00eas partes b\u00e1sicas:
\n1. AMP HTML:<\/strong> Um subconjunto de HTML, esta linguagem de marca\u00e7\u00e3o tem algumas marcas personalizadas e propriedades e muitas restri\u00e7\u00f5es. Mas se voc\u00ea estiver familiarizado com HTML regular, voc\u00ea n\u00e3o deve ter dificuldade em adaptar as p\u00e1ginas existentes para AMP HTML. Para mais detalhes sobre como ele difere do HTML b\u00e1sico, consulte a lista de marca\u00e7\u00e3o necess\u00e1ria da AMP Projeto que sua p\u00e1gina HTML AMP “deve” ter.
\n2. AMP JS:<\/strong> Um framework JavaScript para p\u00e1ginas m\u00f3veis. Para a maior parte, que gere o processamento de recursos e carregamento ass\u00edncrono. Deve notar-se que de terceiros JavaScript n\u00e3o \u00e9 permitido com AMP.
\n3. AMP CDN:<\/strong> Um Content Delivery Network opcional, ele ter\u00e1 suas p\u00e1ginas permitiu-AMP, cache-los e automaticamente fazer algumas otimiza\u00e7\u00f5es de desempenho.<\/p>\n

Como voc\u00ea vai inserir o AMP em seu site?
\n<\/strong>Para come\u00e7ar, voc\u00ea ter\u00e1 que manter pelo menos duas vers\u00f5es de qualquer p\u00e1gina do artigo: A vers\u00e3o original da p\u00e1gina do artigo que os usu\u00e1rios normalmente ver, e a vers\u00e3o AMP dessa p\u00e1gina.<\/p>\n

AMP n\u00e3o permite coisas como elementos de formul\u00e1rio e de terceiros JavaScript, onde voc\u00ea provavelmente n\u00e3o vai ser capaz de ter\u00a0coment\u00e1rios na p\u00e1gina e alguns outros elementos que podem ser utilizados para ter em sua p\u00e1gina em uma implementa\u00e7\u00e3o padr\u00e3o. (Embora n\u00e3o haja atualmente um hack usando iframe que fornece uma solu\u00e7\u00e3o para isso. Gra\u00e7as a Conrad O’Connell<\/em> por me ajudar a verificar o hack.)<\/p>\n

Tamb\u00e9m \u00e9 prov\u00e1vel que voc\u00ea vai ter que reescrever o seu modelo de site para acomodar as restri\u00e7\u00f5es. Por exemplo, todas as CSS em AMP deve ser em linha e pode ser inferior a 50 KB. Devido \u00e0 carga e intensidade das fontes de costume, eles devem ser carregados usando uma extens\u00e3o amp-fonte especial, a fim de controlar melhor esse carregamento.<\/p>\n

Multimedia devem ser tratados de forma especial. Por exemplo, as imagens precisam utilizar o costume amp-img elemento e deve incluir uma largura expl\u00edcita e altura. (Ao converter um site legado para um modelo AMP, isso pode ser uma grande dor se a largura e altura atributos j\u00e1 n\u00e3o est\u00e3o sendo usados). Al\u00e9m disso, se as imagens s\u00e3o GIFs animados, voc\u00ea precisa usar o separada componente estendido amp-anim .<\/p>\n

Como imagens, h\u00e1 uma tag personalizada que deve ser utilizado para incorporar hospedado localmente v\u00eddeos via HTML5, chamado de amp-video. Para a incorpora\u00e7\u00e3o de v\u00eddeo YouTube, no entanto – que a maioria dos v\u00eddeos da web s\u00e3o – h\u00e1 um componente prolongado separado, amp-youtube .<\/p>\n

Tamb\u00e9m h\u00e1 suporte para coisas como slideshows atrav\u00e9s 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\u00e9s dos seus pr\u00f3prios componentes estendidos .<\/p>\n

Estes componentes de tag e estendidos n\u00e3o s\u00e3o dif\u00edceis de usar; eles s\u00f3 exigem um planejamento<\/a> em seu design do site.<\/p>\n

Para que o Google (e outras tecnologias de apoio do Projeto AMP) para detectar a vers\u00e3o AMP de seu artigo, voc\u00ea precisar\u00e1 modificar a vers\u00e3o original da p\u00e1gina do artigo. A p\u00e1gina do artigo original deve incluir o seguinte tag, essencialmente, um tag can\u00f4nico para p\u00e1ginas AMP:<\/p>\n

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

A p\u00e1gina AMP Descoberta tamb\u00e9m menciona que algumas plataformas que suportam AMP vai exigir metadados schema.org para especificar o tipo de conte\u00fado da p\u00e1gina. (Atualmente, “artigo”, “receita”, “avalia\u00e7\u00e3o” e “v\u00eddeo” s\u00e3o listados como exemplos tipo de p\u00e1gina no GitHub.)<\/p>\n

Al\u00e9m disso, tamb\u00e9m indica que Schema.org dados meta “\u00e9 um requisito para fazer o seu conte\u00fado eleg\u00edvel para ser apresentado na demonstra\u00e7\u00e3o do Google Search carrossel de not\u00edcias.” Ent\u00e3o, se voc\u00ea est\u00e1 tentando obter um benef\u00edcio futuro do Google atrav\u00e9s da implementa\u00e7\u00e3o de AMP, certifique-se de obter o seu direito de esquema!<\/p>\n

Como posso rentabilizar com an\u00fancios na AMP?<\/strong>
\nO aumento da ascens\u00e3o de bloqueadores de an\u00fancios tornou dif\u00edcil para os editores monetizar seus sites. Para alguns usu\u00e1rios, melhorando o tempo de carregamento do site tem sido um incentivo para usar bloqueadores de an\u00fancios, que podem ajudar a melhorar a velocidade de navega\u00e7\u00e3o. AMP pode ser visto como uma resposta a esta quest\u00e3o, com o projeto afirmando:<\/p>\n

Um dos objetivos do projeto P\u00e1ginas m\u00f3vel acelerada \u00e9 garantir monetiza\u00e7\u00e3o an\u00fancio eficaz na web m\u00f3vel, enquanto abra\u00e7ando uma abordagem centrada no usu\u00e1rio. Com esse contexto, o objetivo \u00e9 fornecer suporte para uma ampla variedade de formatos de an\u00fancios, redes de an\u00fancios e tecnologias em p\u00e1ginas m\u00f3veis acelerado.<\/p><\/blockquote>\n

Como resultado, uma s\u00e9rie de redes de an\u00fancios mais populares est\u00e1 usando o componente estendido amp-ad (com maior compatibilidade prov\u00e1vel no caminho):
\n– Amazon A9
\n– AdReactor
\n– An\u00fancios do Google
\n– AOL AdTech
\n– Google Doubleclick
\n– Flite
\n– Taboola
\n– Adform
\n– DotAndAds
\n– plista
\n– inteligente AdServer
\n– Yieldmo<\/p>\n

Se voc\u00ea quiser ver o que estes parecem, exemplos para cada rede de an\u00fancios s\u00e3o fornecidos dentro dos arquivos .MD na p\u00e1gina GitHub da AMP.<\/p>\n

Se a sua monetiza\u00e7\u00e3o \u00e9 mais complexo – utilizando paywalls ou assinaturas – existe documenta\u00e7\u00e3o dispon\u00edvel para implement\u00e1-la dentro AMP , assim, usando a extens\u00e3o “AMP Access”.<\/p>\n

Existe Analytics para AMP?<\/strong>
\nSim. Na verdade, o Google Analytics em AMP \u00e9 muito inteligente. Para evitar que v\u00e1rias an\u00e1lises de rastreamento de abrandar um site, eles implementaram a filosofia de “medida de uma vez, o relat\u00f3rio para muitos.” H\u00e1 dois caminhos para ativar a funcionalidade de an\u00e1lise com a AMP para o seu site:<\/p>\n

– O elemento Amp-Pixel:<\/strong> Esta \u00e9 uma tag simples que pode ser usado para contar visualiza\u00e7\u00f5es de p\u00e1gina como um pixel de rastreamento t\u00edpico, usando uma solicita\u00e7\u00e3o GET. H\u00e1 uma s\u00e9rie de vari\u00e1veis ??que podem ser passados ??atrav\u00e9s dele, como DOCUMENT_REFERRER e T\u00edtulo.
\n– O componente estendido Amp-Analytics:<\/strong> Este \u00e9 um pouco mais avan\u00e7ado do que o amp-pixel. \u00c9 prov\u00e1vel que voc\u00ea vai usar para implementar analytics em seu site, pois permite um maior n\u00edvel de configura\u00e7\u00e3o para an\u00e1lise de intera\u00e7\u00f5es.<\/p>\n

Se voc\u00ea n\u00e3o quiser usar o Google Analytics<\/a>, amp-analytics \u00e9 o caminho a percorrer. Voc\u00ea vai precisar adicionar a biblioteca JavaScript necess\u00e1rio noe, em seguida, configur\u00e1-lo atrav\u00e9s de alguma marca\u00e7\u00e3o JSON na se\u00e7\u00e3o da sua p\u00e1gina.<\/p>\n

Se voc\u00ea est\u00e1 interessado no Google Analytics em AMP, v\u00e1 para o Google se\u00e7\u00e3o AMP Analytics em sua p\u00e1gina do desenvolvedor. Ele tem v\u00e1rios exemplos de implementa\u00e7\u00f5es.<\/p>\n

[mc4wp_form id=”353″]<\/p>\n

O que vai AMP Look Like no Google?<\/strong>
\nGoogle forneceu uma demonstra\u00e7\u00e3o do que uma caracter\u00edstica AMP ficaria como na SERP. Voc\u00ea pode experiment\u00e1-lo navegando para Demonstra\u00e7\u00e3o<\/a> no seu celular (ou imit\u00e1-la dentro do Chrome Developer Tools). Em seguida, buscar algo como “Marte.” Voc\u00ea ver\u00e1 um carrossel em dire\u00e7\u00e3o ao topo com artigos AMP.<\/p>\n

Clique em um resultado para uma experi\u00eancia de leitura embutido na SERP. Voc\u00ea pode deslizar para a direita ou para a esquerda para ler outro artigo permitiu-AMP. \u00c9 uma experi\u00eancia diferente de simplesmente navegar para p\u00e1gina AMP de um editor.<\/p>\n

Como fa\u00e7o para come\u00e7ar Com AMP Em WordPress?<\/strong>
\nUma das maneiras mais f\u00e1ceis de sujar as m\u00e3os com AMP agora \u00e9 para implement\u00e1-lo em um site WordPress. Um plug-in oficial est\u00e1 sendo desenvolvido pela Automattic \/ WordPress, e \u00e9 freq\u00fcentemente sendo atualizado no GitHub.<\/p>\n

Passo 1: Instalar o oficial WordPress Plugin<\/strong><\/p>\n

Para come\u00e7ar, acesse a p\u00e1gina GitHub amp-wp<\/a> <\/span>e clique no bot\u00e3o “Download ZIP”.
\n\"github-download-zipBaixando o wordpress amp plugin do github.\u00a0Voc\u00ea pode instalar em seu site WordPress, tal como faria qualquer outro WordPress plugin.<\/p>\n

Uma vez instalado, basta acrescentar “\/ amp \/” para uma p\u00e1gina artigo (ou, se voc\u00ea n\u00e3o tem nice permalinks, voc\u00ea pode, alternativamente, acrescentar “? Amp = 1” ).<\/p>\n

Etapa 2: Validar & Tweak<\/strong><\/p>\n

Eventualmente, o Google Search Console<\/strong> deve estar\u00a0na vers\u00e3o AMP dos seus artigos atrav\u00e9s do tag rel = “amphtml” anexado pelo plug-in, permitindo f\u00e1cil valida\u00e7\u00e3o de artigos em massa. O \u00fanico problema com isto, mencionado\u00a0at\u00e9 agora, \u00e9 que ele n\u00e3o detecta altera\u00e7\u00f5es muito rapidamente. Se voc\u00ea corrigir alguma coisa, a corre\u00e7\u00e3o demorar\u00e1 alguns dias para aparecer.<\/p>\n

\"amp-validation-search-console-webmaster-tools-800x339-1
Exemplo de validar AMP – acelerada p\u00e1ginas m\u00f3veis usando o Google Search Console<\/figcaption><\/figure>\n

Eu recomendo usar uma combina\u00e7\u00e3o do processo de valida\u00e7\u00e3o Search Console e Chrome. Para usar o processo de valida\u00e7\u00e3o Chrome, v\u00e1 para uma de suas p\u00e1ginas AMP em Chrome e acrescentar “# desenvolvimento = 1” ao final da URL. Hit Control + Shift + I para abrir Chrome Developer Tools e de cabe\u00e7a para Console.<\/p>\n

Voc\u00ea pode precisar atualizar a p\u00e1gina, mas quando o fizer, ele retornar\u00e1\u00a0“valida\u00e7\u00e3o AMP bem-sucedido” ou dar-lhe uma lista de problemas para corrigir.<\/p>\n

\"validating-amp-pages-in-chrome
usando ferramentas de desenvolvimento de cromo para validar p\u00e1ginas m\u00f3veis aceleradas<\/figcaption><\/figure>\n

Pode ser que n\u00e3o\u00a0baste apenas \u00a0instalar o plugin WordPress, e voc\u00ea vai ter que validar todas as p\u00e1ginas que gostaria de inserir em\u00a0AMP.<\/p>\n

Dependendo de como seus artigos s\u00e3o formatados, pode ser necess\u00e1rio fazer algumas mudan\u00e7as, a fim de obter as p\u00e1ginas AMP para validar. Os problemas mais comuns que foram relatados, \u00e9 que\u00a0estava especificando atributos de altura e largura para imagens e corrigir c\u00f3digos incorporados do YouTube antigos que n\u00e3o estavam usando https.<\/p>\n

Etapa 3: Obter esquema de marca\u00e7\u00e3o para validar<\/strong><\/p>\n

Como mencionado anteriormente, \u00e9 tamb\u00e9m importante ter marca\u00e7\u00e3o esquema v\u00e1lido em suas p\u00e1ginas AMP. Para testar suas p\u00e1ginas para marca\u00e7\u00e3o v\u00e1lida, voc\u00ea pode usar ferramenta de teste de dados estruturados do Google <\/a>. Alguns do problemas com o WordPress foi n\u00e3o exibir um logotipo de edi\u00e7\u00e3o e precisava fazer a seguinte modifica\u00e7\u00e3o para o plugin.<\/p>\n

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\u00e7a:<\/p>\n

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

para:<\/strong><\/p>\n

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

Certifique-se de substituir a URL com um caminho para o seu pr\u00f3prio logotipo edit\u00e1vel e para especificar a altura ea largura em pixels. Voc\u00ea pode encontrar informa\u00e7\u00f5es sobre a causa de marca\u00e7\u00e3o aqui<\/a> , que especifica que “idealmente, logos s\u00e3o exatamente 60px de altura com largura <= 600px”.<\/p>\n

Passo 4: Obtendo o Google Analytics trabalhando com a AMP WordPress Plugin<\/strong>
\nQual a utilidade de\u00a0um site, se voc\u00ea n\u00e3o pode inseri-lo no\u00a0Google Analytics? O plugin AMP WordPress n\u00e3o permite amp-analytics fora da caixa, mas \u00e9 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:<\/p>\n

add_action ( ‘amp_post_template_head’, ‘amp_post_template_add_analytics_js’);<\/em>
\n amp_post_template_add_analytics_js fun\u00e7\u00e3o ($ amp_template) {<\/em>
\n $ Post_id = $ amp_template-> get ( ‘post_id’);<\/em>
\n ?><\/em>
\n < Roteiro ass\u00edncrono custom-elemento = ” amp\u00e8re-analytics ” src = ” https:\/\/cdn.ampproject.org\/v0\/amp-analytics-0.1.js ” ><\/em>
\n <? Php } add_action ( ‘ amp_post_template_footer ‘ , ‘ xyz_amp_add_analytics ‘ ); fun\u00e7\u00e3o xyz_amp_add_analytics ( $ amp_template ) { $ post_id = $ amp_template -> get ( ‘ post_id ‘ );<\/em>
\n ? ><\/em>
\n < Amp -analytics tipo = ” googleanalytics ” id = ” analytics1 ” ><\/em>
\n < Script de tipo = ” application \/ json ” ><\/em>
\n {<\/em>
\n ” Vars ” : {<\/em>
\n ” Conta ” : ” UA-XXXXX-Y “<\/em>
\n },<\/em>
\n ” Gatilhos ” : {<\/em>
\n ” TrackPageview ” : {<\/em>
\n ” On ” : ” vis\u00edvel ” ,<\/em>
\n ” Pedido ” : ” page view “<\/em>
\n}<\/em>
\n }<\/em>
\n }<\/em>
\n <\/ Roteiro ><\/em>
\n <\/ Amp -analytics ><\/em>
\n <? Php<\/em>
\n}<\/em><\/p>\n

Certifique-se de mudar UA-XXXXX-Y para representar do seu site Google Analytics propriedade ID.<\/p>\n

Agora, re-validar suas p\u00e1ginas AMP, e voc\u00ea deve ter uma configura\u00e7\u00e3o b\u00e1sica AMP com rastreamento habilitado para o seu site WordPress.<\/p>\n

Conclus\u00e3o<\/strong>
\nAMP fornece uma maneira relativamente f\u00e1cil de melhorar a velocidade de sites m\u00f3veis.
\nVoc\u00ea tem um neg\u00f3cio on-line<\/a>(landing-page, site<\/a>, loja-virtual)? Se sim, voc\u00ea precisa come\u00e7ar a pensar em p\u00e1ginas m\u00f3veis aceleradas.<\/p>\n

Um nova tecnologia est\u00e1 chegando. Voc\u00ea est\u00e1 preparado?<\/p>\n

Mais informa\u00e7\u00f5es no site do projeto: AMP Projects<\/a>
\nou em Search Engine Land<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

O significado da sigla AMP \u00e9 Accelerated Mobile Pages. E tem o prop\u00f3sito de otimizar\/acelerar o desempenho na navega\u00e7\u00e3o da internet m\u00f3vel aberta. Seguindo a filosofia \u201copen source\u201d do Google,…<\/p>\n","protected":false},"author":1,"featured_media":1512,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[91],"tags":[74,21,75,76,77,73],"class_list":["post-45","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-otimizacao-de-sites","tag-accelerated-mobile-pages","tag-criacao-de-sites","tag-google-amp","tag-mobile","tag-site-responsivo","tag-website"],"_links":{"self":[{"href":"https:\/\/www.alanpereira.com\/blog\/wp-json\/wp\/v2\/posts\/45","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.alanpereira.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.alanpereira.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.alanpereira.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.alanpereira.com\/blog\/wp-json\/wp\/v2\/comments?post=45"}],"version-history":[{"count":5,"href":"https:\/\/www.alanpereira.com\/blog\/wp-json\/wp\/v2\/posts\/45\/revisions"}],"predecessor-version":[{"id":1222,"href":"https:\/\/www.alanpereira.com\/blog\/wp-json\/wp\/v2\/posts\/45\/revisions\/1222"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.alanpereira.com\/blog\/wp-json\/wp\/v2\/media\/1512"}],"wp:attachment":[{"href":"https:\/\/www.alanpereira.com\/blog\/wp-json\/wp\/v2\/media?parent=45"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.alanpereira.com\/blog\/wp-json\/wp\/v2\/categories?post=45"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.alanpereira.com\/blog\/wp-json\/wp\/v2\/tags?post=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}