AMP no Blogger: Configuração básica
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.
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.
*Meu Blogger
Alsorsa.News é um site de notícias
Nenhum comentário
Postar um comentário
Obrigado por comentar! 😉✌