Mastermind Challenger

Crie Sua Primeira Pagina AMP 100% Valida

OS MELHORES CONTEÚDOS DE DESENVOLVIMENTO WEB AMP E PROGRAMAÇÃO DO MERCADO!

Neste artigo quero que você crie sua primeira pagina amp 100% vaildada pelo google search console ou pelo AMP Validator, venha aprender é rápido e pratico

Escola de Desenvolvimento Web e Otimização de Sites

Crie Sua Primeira Pagina AMP

Crie Sua Primeira Pagina AMP

Neste artigo você vai aprender a criar uma pagina amp simples, com o objevo apenas de apresentar os elementos basicos para validação de uma pagina amp simples.

Supondo que você tenha um emulador localhost ou até mesmo um dominio hospedado o primeiro passo é criar um arquivo com a extensão .html De posse do arquivo criado passe o codigo abaixo e salve:

 

```<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Olá, AMPs</title>
    <link rel="canonical" href="https://www.seo.emp.br/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Crie Sua Primeira Pagina AMP",
        "datePublished": "2020-7-30T18:14:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </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 ao Mundo Mobile</h1>
  </body>
</html> 
```

O conteúdo do body, até agora, é bastante direto. Mas há muitos códigos adicionais no cabeçalho da página que podem não ser imediatamente óbvios. Vamos desconstruir a marcação necessária.

Use HTTPS: Ao criar páginas e conteúdo AMP, você deve considerar o uso do protocolo HTTPS (vs. HTTP). Embora o HTTPS não seja necessário para o próprio documento AMP ou para imagens e fontes, há muitos recursos AMP que requerem HTTPS (por exemplo, vídeo, iframes e mais). Para garantir que suas páginas AMP aproveitem ao máximo todos os recursos, use o protocolo HTTPS. Você pode aprender mais sobre HTTPS em Por que o HTTPS e importante .

Modelo de pagina amp

Ao analisar o codigo acima e implementar no seu arquivo .html você pode identificar que esta pagina é valida através do validador oficial para paginas amp que esta disponível como extensão para o navegador Google Chrome basta instalar acessando AMP Validator.

Marcações Necessárias

Os documentos HTML AMP  para se tornarem validos devem conter as seguintes regras de aplicações ao documento:

  • Comece com o <!doctype html>doctype.
  • Contenha uma <html ⚡>tag de nível superior (também <html amp>é aceita).
  • Conter <head><body>tags.
  • Contenha uma <meta charset="utf-8">tag como o primeiro filho da <head>tag.
  • Contenha uma <script async src="https://cdn.ampproject.org/v0.js"></script>etiqueta dentro da <head>etiqueta. Como prática recomendada, inclua o script o mais cedo possível no <head>.
  • Contenha uma <link rel="canonical" href="$SOME_URL">etiqueta dentro deles <head>.
  • Contenha uma <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">etiqueta dentro da <head>etiqueta. Também é recomendável incluir initial-scale=1.
  • Contenha o código padrão do AMP em sua <head>tag.

 

Metadados Opcionais

Além dos requisitos simples, este exemplo também inclui uma definição do Schema.org no head, que não é um requisito  para o AMP, mas é fudnamental para que seu conteúdo seja distribuído em determinados locais (por exemplo, no Google Pesquisas no carrossel das principais histórias e demais situações que no momento não vem ao caso ficarmos explorando).

Informações complementares ao post

Introdução ao AMP na Pesquisa Google – aprenda a preparar suas páginas AMP para a Pesquisa Google.
Amostras de metadados – saiba mais sobre todos os metadados necessários em vários outros lugares (por exemplo, Twitter).

Pesquise no Site

Posts Relacionados
Anuncio

Quer Aprender a criar temas 100% validados pelo Google AMP? Matricule-se e inicie agora mesmo o treinamento mais completo que você vai encontrar na web!

QUERO ME INSCREVER