25/01/2018

Eu sou um usuário da plataforma Blogger e acho um lugar realmente incrível para um novato começar. Muitos dos meus blogs usam o Blogspot. Todo mundo está falando sobre o AMP e realmente é brilhante no sentido de velocidade de carregamento das páginas mobile. Levou o padrão de carregamento da página para um novo nível.

Configurar AMP no Blogger

O que é o Google AMP?

Basicamente é "Accelerated Mobile Pages", ou seja, páginas aceleradas para acesso móvel. É um  projeto do Google que visa criar páginas móveis com conteúdo estático que seja mais rápida. As páginas da AMP usam AMP HTML, AMP JS e AMP CDN para processar e entregar páginas com muita mais rapidez. O Google introduziu a AMP com a visão de que os editores possam criar conteúdos otimizados para acesso móvel ´para carregá-los instantaneamente em todos os lugares.

Como configurar o AMP no Blogger?

Passo 1 - Criar o html AMP
Antes de tudo save o seu templante para se caso ocorra algo de errado é só você voltar de onde começou.

Agora vá em Configurações > Editar html e substitua todo código <html>, que fica no começo do templante por:
<html amp='amp' lang='pt-br'>

Passo 2 - Adicione as meta tags Charset e Viewport logo após <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

Passo 3 - Adicione a tag Canonical
Confira se no seu html já existe essa tag. Se não estiver presente, adicione dessa maneira abaixo logo após o código anterior:
<link expr:href='data:blog.url' rel='canonical'/>

Passo 4 - Configurando o CND AMP
Cole este código logo acima da tag </ head>:
<style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>

Passo 5 - Código AMP das imagens
Se você já possui imagens em seus posts altere pelo seguinte código:
<amp-img alt="Texto da imagem" height="560" layout="responsive" src="link da imagem" title="Título da imagem" width="840"></amp-img>
Agora é só substituir conforme indicado e colocar conforme o tamanho de sua imagem.

Conclusão

Espero que isso te ajude. o AMP é um projeto apoiado pelo Google e o Blogspot é a plataforma de blogs do Google, mas ainda assim o Blogger atualmente não suporta AMP. Então, não podemos esperar por eles e nem sabemos quando eles começarão a suportar. Então, use essas dicas e ajustes para adicionar suporte AMP no seu blogger. Se você tem muitas postagens terá que ajustar todas as imagens para que todo o blog seja válido para AMP, ou você pode ajustar só os principais e os novos.

Dica: Veja como configurar o compartilhamento AMP no Blogger.

Esse Post tem 13 Comentários

avatar
João Victor Oliveira delete Este comentário foi removido pelo autor. Resp.
avatar
Paulo Ricardo delete

Realmente tem alguns bugs, mas com uma gambiarrazinha é fácil de resolver, o principal é o das imagens. Mas basta colocar uma imagem normal com a tag img dentro da tag noscript e pronto, problema 1 resolvido

Resp.
avatar
Lucas Tech delete

Bom mesmo é já começar com um templante todo configurado para AMP, depois vou ver se disponibilizo um aqui pra download.

Resp.
avatar
Matheus Vinicius delete

Deu erro nas meta mano, fica falando pra fechar < meta / > eu fechei elas e da erro no < / html >

Resp.
avatar
Daniel Vinhas delete

Quanta ansiedade #MeuDeusdoCéu

segui o passo a passo deu erro pedindo para fechar (meta /> fechei e deu erro na última metatag /html

Erro ao analisar XML, linha 2131, coluna 138: XML document structures must start and end within the same entity.
(Google Translate) Estruturas de documentos XML devem começar e terminar dentro da mesma entidade.

que faço agora?

Resp.
avatar
Henrique Sphera delete

Para quem está tendo problemas com o erro que pede para fechar a "meta". Basta acrescentar "/" no final das seguintes linhas, ficando deste jeito:

meta charset="utf-8"/>
meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/>

Resp.
avatar
Gospel delete

Oi Lucas! Eu sou o Mário de Angola tenho me beneficiando muito com as tuas postagem, sou um blogueiro iniciante e gostaria de aprender muito com você sobre blog, já tentei disistir mais quando leio as suas postagens ganho coragem para continuar, estou comessando com o meu primeiro blog www.criandoblog1001.com. muito obrigado pela dica.

Resp.
avatar
Lucas Tech delete

Fico muito feliz por isso amigo e tudo de bom no seu blogger.

Resp.
avatar
Camilla Kleemann delete

Faço tudo direitinho mas aparece isso: Ocorreu um erro. (bX-x555lj)

Já limpei o cache e até tentei em navegador diferente mas não adianta.

Poderia me ajudar? Desde já, obrigada.

Abraço!

Resp.
avatar
Lucas Tech delete

Camilla, posso sim. Me manda o link do blog onde ta fazendo a configuração pra eu olhar, assim posso ver onde é o erro.

Resp.
avatar
Kenyo Carvalho delete

Infelizmente no tema que eu uso não funcionou, mas muito top a dica, parabéns.

Resp.
avatar
FELIPE DE SÁ delete

mais se eu qui
ser usar eu vou ter que reneover o meu tempalte ataul ?

Resp.
avatar
Flávio Mendonça delete

apareceu varios erros, como faço para arrumar?

Resp.


Seu comentário é muito importante e você é totalmente responsável por ele. Ao comentar você concorda com as nossas políticas.

Próx Post Próx Post
Post anterior Post anterior