AMP, sigla em ingles: Accelerated Mobile Pages, tradução: páginas aceleradas para dispositivos móveis, são páginas que carregam de forma extremamente rápida quase instantâneo quando acessadas via dispositivos móveis celular, tablets.
O projeto é uma iniciativa das empresas como Google, LinkedIn, Pinterest e Twitter, lançada em Outubro de 2015.
Para que uma página AMP seja válida, ela precisa seguir à risca todos os critérios e requerimentos de código e otimização.
Neste tutorial, você aprenderá a criar uma página HTML básica utilizando AMP, desde do início até a validação.
Vamos ao que interessa, Mão a obra:
O código abaixo é um modelo padrão.
Copie e salve-o com a extensão .html ou php.
<!DOCTYPE html>
<html amp lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="https://www.seusite.com.br/primeira-pagina-amp.html">
<title>Minha primeira página AMP.</title>
<!-- carrega a biblioteca JavaScript AMP -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Dados estruturados -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": "https://www.seusite.com.br/primeira-pagina-amp.html",
"headline": "TITULO DA PAGINA",
"datePublished": "2023-10-24T09:20:00+08:00",
"dateModified": "2023-10-24T09:20:00+08:00",
"description": "Aqui a descrição de sua página, não exagere no tamanho",
"author": {
"@type": "Person",
"name": "NOME DO AUTOR"
},
"publisher": {
"@type": "Organization",
"name": "ORGANIZAÇÃO",
"logo": {
"@type": "ImageObject",
"url": "https://www.seusite.com.br/imagens/imagem.jpg",
"width": 600,
"height": 60
}
},
"image": {
"@type": "ImageObject",
"url": "https://www.seusite.com.br/imagens/imagem-da-materia.jpg",
"height": 1200,
"width": 800
}
}
</script>
<style 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>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
/* estilo personalizado vai aqui */
<style amp-custom>
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Bem vindo a minha primeira página AMP.</h1>
<amp-img src="minha-imagem.jpg" alt="bem vindo" height="400px" width="800px"></amp-img>
</body>
</html>
Este é o conteúdo do corpo até agora, é bastante simples, mas há muitos códigos adicionais no cabeçalho da página que podem causar dor de cabeça.
Vamos desconstruir a marcação necessária.
Use HTTPS: ao criar páginas e conteúdo AMP, considere o uso do protocolo HTTPS.
Embora o HTTPS não seja obrigatório para o documento AMP, imagens e fontes, há muitos recursos AMP que requerem HTTPS (por exemplo, vídeo, iframes e outros).
Para garantir que suas páginas AMP aproveitem ao máximo todos os recursos, use o protocolo HTTPS.
Marcação necessária:
Regra
Comece com o<!DOCTYPE html> Padrão para HTML.
Tag de nível superior<html amp lang="pt-BR">Identifica a página com conteúdo AMP.
Coloque script: <script async src="https://cdn.ampproject.org/v0.js"></script>Carrega a biblioteca JS do AMP.
dentro das tags<head> </head>.
Recomendado que inclua o script no inicio do <head>.
Agora canonical: <link rel="canonical" href="https://www.seusite.com.br/primeira-pagina-amp.html"> dentro do <head>
Aponta para a versão HTML comum do documento HTML AMP ou para si própria
Viewport:<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">Especifica uma viewport responsiva.
Código padrão do AMP:
<style 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>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> Boilerplate CSS para ocultar inicialmente o conteúdo até o carregamento do AMP JS
Metadados opcionais:
Este exemplo também inclui uma definição do Schema.org no inicio, que não é um requisito obrigatório para o AMP, mas é um requisito para que seu conteúdo seja distribuído em determinados locais (por exemplo: no Carrossel do Google e em destaques).
Simles não é? isso é tudo o que precisamos para criar nossa primeira página AMP, mas é claro, ainda falta muita coisa vamos por partes.
Proximo bloco, abordaremos como adicionar noções básicas, como imagens, elementos AMP personalizados, como estilizar sua página e elaborar um layout responsivo formulários e outros.
Vamo começar a inserir uma imagem:
A maioria das tags HTML pode ser usada diretamente no HTML AMP, mas determinadas, como a <img> tag, são substituídas por tags HTML AMP personalizadas equivalentes ou levemente aprimoradas.
Para demonstrar como seria a marcação adicional, segue o código necessário para incorporar uma imagem em sua página:
<amp-img src="minha-imagem.jpg" alt="bem vindo" height="400px" width="800px"></amp-img>
Vamos para apresentação e layout:
Estilize elementos usando seletores de classe ou elemento em uma folha de estilo incorporada na <head> , chamada <style amp-custom>:
<style amp-custom>
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
Lembre-se todas páginas AMP pode ter apenas uma única folha de estilo incorporada e estilos embutidos
Vinculando páginas com <link>:
Em alguns casos, convém ter uma versão não AMP e uma AMP da mesma página, por exemplo, um artigo de notícias.
Considere o seguinte: se a Pesquisa do Google encontrar a versão não AMP dessa página, como ela sabe que existe uma versão AMP "emparelhada" ?
Adicione o seguinte à página que NÃO é AMP:
<link rel="amphtml" href="https://www.seusite.com.br/primeira-pagina-amp.html">
Este para página AMP:
<link rel="canonical" href="https://www.seusite.com.br/primeira-pagina-amp.html">
Validação:
Vamos ver se esta tudo OK, verifique se a sua página AMP é realmente válida , ou não será descoberta e distribuída por plataformas de terceiros como a Pesquisa Google.
Para validar:
1 - Publique sua página em seu provedor de hospedagem
2 - Cole o link dá página neste validador Google Teste AMP
Parabéns!
Você testou sua página e corrigiu todos os erros de validação, o que significa que sua primeira página AMP está pronta para envio, agora é só colocar seu conteúdo, capriche e boa sorte
Comente esta Matéria: