Aprenda a criar a sua página AMP HTML

Faça uma avaliação
Gratuita

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Aprenda a criar a sua página AMP HTML
Conteúdo Desenvolvido por:
comercial@webceo.br.com

Aprenda a criar a sua página AMP HTML

O Google tem investido de forma consistente em seu projeto AMP - Accelerated Mobile Pages. A ferramenta é vista como uma reação aos recentes movimentos de Facebook (Facebook Instant Articles) e Apple(Apple News).

Introdução

O Google tem investido de forma consistente em seu projeto AMP - Accelerated Mobile Pages. A ferramenta é vista como uma reação aos recentes movimentos de Facebook (Facebook Instant Articles) e Apple(Apple News).

As principais empresas de tecnologia vem tentando conquistar um quinhão cada vez maior dos investimentos publicitários na web e ferramentas visando a construção de páginas otimizadas para anúncios e com alta performance vem sendo lançadas e aprimoradas.

O AMP é um Framework de código aberto(open-source) cujo objetivo é melhorar o desempenho na navegação na internet móvel. A intenção é que as páginas web voltadas para o acesso por dispositivos móveis sejam capazes de abrigar conteúdos variados e de qualidade(vídeos, animações, gráficos, imagens) ao mesmo tempo que possam receber anúncios inteligentes. Tudo isso com um tempo extremamente exíguo de carregamento.

Utilizando o AMP HTML

Ao configurar uma página AMP basicamente você está criando uma segunda versão com o mesmo conteúdo da original, só que otimizada para ser carregada em dispositivos mobile. Essa versão AMP possui a identificação “/amp” ao final do endereço URL.

Como duas versões da páginas estarão em funcionamento, é necessário utilizar um tag especial para avisar ao google que não se trata de conteúdo duplicado, mas sim de versões com e sem AMP.  A página com o conteúdo original deve conter uma Canonical Tag. Essa tag é colocada no início da página e consiste na seguinte linha:

<link rel=”canonical” href=”www.versaooriginal.com.br” />

Basicamente uma referência apontando diretamente para a versão com conteúdo original na qual a página AMP é baseada.

O AMP é composto de três partes principais, sendo uma delas o AMP HTML. Uma variante do HTML tradicional focada em otimizar o desempenho da página. Vamos ver um pouco melhor como trabalhar o AMP HTML para acelerar a sua página web. Vamos lá?

Quais sites podem utilizar AMP?

O projeto AMP está aberto para qualquer tipo de site. A princípio, foram grandes veículos de comunicação como grandes grupos e portais de tecnologia(GIZMODO, eBay) os primeiros a utilizar. Com o tempo, cada vez mais páginas vem sendo otimizadas com AMP.

Os cada vez mais populares E-commerces também são um público alvo importante. Um carregamento lento pode fazer o usuário desistir de visitar uma loja online. Além de poder ser aplicado a qualquer tipo de site e portal, o projeto é open-source, e dependendo das habilidades de sua empresa, é possível implementar versões customizadas.

É possível aplicar o AMP a páginas específicas também, como catálogos de produtos, homes e outras páginas que sejam mais importantes.

Fazendo AMP em HTML

Para aprendermos os principais pontos do AMP HTML vamos utilizar o template exemplo que o próprio projeto oficial utiliza,com algumas modificações para facilitar o entendimento e leitura.

Vamos explicar linha por linha como cada elemento de uma página AMP HTML funciona. O exemplo abaixo é um código típico de uma página AMP. Todas as features encontradas aqui são as que você deve configurar na sua versão AMP.

<!doctype html><html amp lang="en">  <head>    <meta charset="utf-8">    <script async src="https://cdn.ampproject.org/v0.js"></script>    <title>Hello, AMPs</title>    <link rel="canonical" href="http://versaooriginal.com.br" />    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">    <script type="application/ld+json">      {        ...script      }    </script>    <style amp-boilerplate>body{...o código AMP Boilerplate vem aqui... }</style></noscript>  </head>  <body>    <h1>Welcome to the mobile web</h1>  </body></html>

  • <!doctype html>  - Toda página AMP HTML obrigatoriamente deve começar com essa marcação;
  • <html amp lang="en"> - Também é obrigatório que no topo de uma página AMP contenha essa marcação. Ela identifica que o conteúdo desse site é AMP;
  • <head> e <body> - Essas são tags opcionais no HTML tradicional, mas são obrigatórias no AMP HTML;
  • <meta charset="utf-8"> - Esta tag deve vir logo em seguida à tag <head>. É usada para identificar a codificação da página(ut-8 no caso);
  • <script async src="https://cdn.ampproject.org/v0.js"></script> - Marcação para incluir a biblioteca AMP JS (Java Script);
  • <link rel="canonical" href="http://versaooriginal.com.br" /> - marcação que aponta para a versão original do website;
  • <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> - Tag responsável por identificar um viewport responsivo. Páginas responsivas são páginas que se adequam bem a diferentes tamanhos de tela. Para criar uma página AMP responsiva, consulte o guia do projeto oficial AMP;
  • Código AMP boilerplate - Este é um trecho de código extenso que pode ser visto por completo aqui.  Este código é responsável por esconder conteúdos até que o AMP JS tenha sido carregado corretamente.

Este é o conjunto de tags padrão do AMP HTML. Vamos ver agora como adicionar imagens e configurar o Layout padrão de sua página acelerada.

Adicionando imagens no AMP HTML

A adição de imagens é um bom exemplo de como o AMP HTML é ligeiramente diferente do HTML tradicional. A tag na linguagem HTML convencional para adicionar imagens é <img>. Já no AM HTML a tag é um pouquinho diferente: “<amp-img>”.  Para entender bem a diferença, veja o exemplo abaixo em AMP HTML:

<amp-img src="bemvindo.jpg" alt="bemvindo" height="600" width="400"></amp-img>

Este código adiciona uma imagem de nome bemvindo, do tipo .jpg, com altura e comprimento conforme especificados.

Configurando Layout de apresentação no AMP HTML

Como toda página web, páginas AMP usam propriedades do CSS para implementar elementos de estilo. A diferença é que páginas AMP devem ter obrigatoriamente apenas elementos CSS inline. Isto é feito usando a tag “<amp-custom>”, dentro da tag “<head>”.Veja o exemplo abaixo:

<styleamp-custom>  /* qualquer estilo customizado deve vir aqui */  body {    background-color: blue;  }  amp-img {    background-color: grey;    border: 2pxsolidblack;  }</style>

Apenas um stylesheet é permitido por página AMP. E também há algumas restrições em relação aos seletores utilizados. Para entender melhor quais são as restrições em relação aos estilos do CSS, consulte o site oficial do projeto AMP.

Visualizando a sua página acelerada

Um preview da página acelerada pode ser visto como qualquer outro arquivo .html. Não é necessário compilar ou fazer qualquer tipo de verificação. Caso haja erros, a página simplesmente será apresentada com os erros ou não será visualizada.

São duas maneiras para visualizar a sua página AMP HTML.

  • Abra a página diretamente no seu browser a partir do arquivo em seu sistema. Nesse caso, alguns elementos podem não funcionar devido a possíveis falhas nos XMLHttpResquests;
  • Usar um servidor web local como Apache 2 ou Nginx;

Visualizar sua página não te isenta da responsabilidade de validar a página porém. Mesmo que a visualização esteja aparentemente ok, é preciso validar o código de forma adequada em busca de erros.

Validando o HTML para AMP

Após configurar o página web para o AMP HTML, ainda é preciso fazer uma validação para garantir que todo o código está conforme as regras AMP. Aqui temos uma boa notícia. Os desenvolvedores do projeto oficial criaram e disponibilizaram gratuitamente uma ferramenta para validar o AMP HTML.

O nome da ferramenta é AMP Validator e está disponível aqui. Basta copiar e colar o link da página AMP lembrando de acrescentar o “/amp” ao final e dar o comando “validate”, mostrado em destaque no validador.

Na parte inferior é mostrada uma barra de Status. Se a mesma apresentar a mensagem “PASS”, significa que seu código HTML está validado. Caso a mensagem exibida seja “FAIL”, significa que seu código contém erros e precisa ser verificado novamente. A grande vantagem do AMP Validator é que ele apresenta de forma bem intuitiva uma lista dos erros encontrados nos casos em que a validação não é bem sucedida.

Uma outra forma de validar o código é pelo console Chrome DevTools. Siga os seguintes passos:

  1. Abra sua página em seu web browser(Google Chrome);
  2. Adicione o trecho “#development=1” à URL da página como mostrado abaixo:

   

  • http://localhost:8000/released.amp.html#development=1
  1. Abra o  console Chrome DevTools e verifique por erros de validação.

A etapa de validação é importantíssima. Se seu código AMP HTML possuir erros, ele simplesmente não será descoberto e distribuído por plataformas de busca como Google.

Fazendo acompanhamento de acessos e indexação

Por fim, após todo o trabalho para implementar sua página AMP HTML e validá-la, é necessário acompanhar as estatísticas de acesso e indexação. Para isso você vai precisar acessar o Google Search Console(ou seja, você precisa ter uma conta nessa ferramenta).

No console, todas as informações são apresentadas de forma transparente para o usuário. Basta seguir o menu “Aspecto de pesquisa” e selecionar “Páginas aceleradas para dispositivos móveis”.

Aqui você terá acesso à evolução do número de páginas indexadas ao Google e também qualquer erro que eventualmente elas possam ter(um recurso muito útil).

Conclusão

O carregamento de página é um fator fundamental para o acesso a conteúdos em dispositivos móveis. Cada vez mais a maior parte dos acessos é feita por meio de smartphones e tablets, que além de possuírem telas menores, estão conectados às redes móveis de internet.

Para monetizar adequadamente um site e ter tráfego orgânico consistente, é importante garantir que a página seja acelerada e proporcione, consequentemente, uma boa experiência de usuário.

Dificilmente um usuário que não ficou satisfeito na primeira visita dará uma nova chance ao seu site. Provavelmente ele apenas irá migrar para a próxima opção mais bem colocada no google.

Pronto! Agora você sabe como configurar as principais tags do AMP HTML para acelerar a sua página e como validá-la e medi-la. O que achou do texto? Comente sobre os seus resultados!

Ultimas Publicações do Autor

WEBCEO BRASIL

Ultimas Publicações

Conheça nosso programa de Canais

Se Você é uma Agência, Profissional de Marketing ou SEO, Vou Ajuda-lo a Conhecer As Ferramentas WebCEO.

Marcos Custódio,
Country Manager & Partnerships
Web CEO Brazil