Blog ComercialWeb - São Paulo - SP
E-mail: comercial2@comercialweb.com.br
Atualizado: 03/11/2019

O que é páginas AMP?

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.

<!doctype html>
<html amp lang="pt-br">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Minha primeira página AMP.</title>
    <link rel="canonical" href="https://www.seusite.com.br/primeira-pagina-amp.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

<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": "2018-10-24T09:20:00+08:00",
"dateModified": "2018-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>
  </head>
  <body>
    <h1>Bem vindo a minha primeira página AMP</h1>
  </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> Identifica a página com conteúdo AMP.


Coloque script: <script async src="https://cdn.ampproject.org/v0.js"></script>
dentro das tags <head> </head>.
Recomendado que inclua o script no inicio do <head>.
Carrega a biblioteca JS do AMP.


Agora canonical: <link rel="canonical" href="https://www.seusite.com.br/primeira-pagina-amp.html">tudo 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="SUA-IMAGEM.jpg" alt="NOME DA IMAGEM" height="400" width="800"></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 >
  / * qualquer estilo personalizado entra aqui * /
  body  {
    background-color :  white ;
  }
  amp-img  {
    cor de fundo :  cinza ;
    borda :  1 px  em  preto sólido ;
  }
</ 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

 

Fonte: Redação

Comente esta matéria:


Compartilhe esta matéria




Veja Também