Aprenda a criar a sua página AMP HTML

2/1/2018

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.

Leia também: Quem deve se preocupar em ter páginas AMP?

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;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:

Abra sua página em seu web browser(Google Chrome);Adicione o trecho “#development=1” à URL da página como mostrado abaixo:http://localhost:8000/released.amp.html#development=1Abra 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).

Leia também: Como o SEO vai trazer seu primeiro pedido?

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!

Autor

Marcos Custódio

Especialista em Tecnologia e Marketing Digital, entusiasta da arte de vender e apaixonado por meus cães.

Linkedinhttps://www.webpeak.com.br/marcos@webpeak.com.br

Últimas Postagens WebPeak

Últimas Noticias WebPeak