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