Como criar páginas AMP de um jeito rápido e fácil

Aprenda agora o que são páginas AMP (Accelerated Mobile Pages) e como criar 'na mão' com PHP e HTML, sem ajuda de plugins.

PUBLICADO POR AYLTON INACIO
Tutoriais e Artigos > Websites e SEO

E aí, blz pura? Vamos lá para mais um tutorial bem prático e tenho certeza que será muito útil para você, pois é de um assunto que vem ganhando muita força no mundo web: Páginas AMP!!!

O objetivo do tutorial é mostrar o que são páginas AMP, como funcionam e depois ir na prática e criar um modelo simples e funcional de site feito com PHP e utilizando estrutura de páginas AMP, então bora começar!

Introdução - O que é AMP?

A sigla AMP significa Accelerated Mobile Pages ou Páginas Móveis Aceleradas, mais ou menos isso. O que importa é que na prática, o grande do objetivo do projeto é fazer com que websites e anúncios na internet, principalmente postagens, sejam carregados "bem rápidos" e em vários tipos de dispositivos.

O link do projeto AMP oficial é este aqui https://www.ampproject.org/pt_br e nele tem tudo que você precisa pra se aprofundar no assunto, mas isso depois.

Como identificar uma página AMP?

Para ver uma página AMP, você deve fazer pesquisas no Google através do celular, pois somente assim elas aparecem e são identificadas pelo símbolo raio.

Busca Página AMP

Criando a sua primeira página amp

A ideia do tutorial é criar um modelo de site muito simples, específico para postagens em blog. Ele poderá ser acessado pela URL local a seguir, então para isso você precisa de um servidor web, como o XAMPP.

localhost/projetomobile/blog/meu-post-sobre-amp

Será uma página simulando um post sobre AMP, mas que poderia ser qualquer outro assunto. A grande sacada aqui é que vamos oferecer uma versão do mesmo conteúdo em formato AMP, através deste link aqui:

localhost/projetomobile/blog/meu-post-sobre-amp/amp

Então vamos começar!

1 - Defina quais páginas serão AMP

Pra começar, você precisa definir se o site todo será AMP ou se você terá a versão comum e a versão AMP, para todas as páginas ou somente algumas.

No caso do nosso projeto, as páginas AMP são somente para as postagens, mantendo a original e uma versão igual em formato AMP, sendo que as duas devem estar vinculadas.

Ainda é bem raro encontrar um site totalmente AMP e também não vejo necessidade disso no momento, e sinceramente não sei se um dia teremos que fazer isso. Vale a pena ficar antenando com as novidades no Google Webmaster Central Blog.

2- Criar os arquivos do site

Basicamente, para o nosso projeto serão necessários 3 arquivos: um .htaccess para disponibilizar as URLs comuns e AMP; outro chamado artigo.php, que é o responsavel por exibir postagens; e uma imagem qualquer chamada imagem_amp.jpg.

Crie a pasta do projeto chamada projetomobile dentro da pasta htdocs do seu XAMPP ou do seu servidor web preferido, e dentro dela coloque a imagem e o arquivo artigo.php com o conteúdo abaixo, inicialmente.

<!DOCTYPE html>
<html>
	<head>
  		<meta charset="utf-8">
  		<title>Primeira página AMP</title>
  	</head>
  	<body>
  		<h1>Primeira página AMP</h1>
  		<h2>As AMP oferecem uma excelente experiência do usuário em muitas plataformas</h2>
  		<p>O projeto AMP é uma iniciativa de código aberto com o objetivo de criar uma Web melhor para todos. O projeto possibilita a criação de websites e anúncios rápidos, atraentes e de alto desempenho em vários dispositivos e plataformas de distribuição.</p>
  		<img src='http://localhost/projetomobile/imagem_amp.jpg' width='1200' height='630'>	
  	</body>
</html>

Depois é só testar chamando a URL localhost/projetomobile/artigo.php no seu navegador.

Página HTML comum to AMP

Por enquanto temos um código HTML comum e uma página estática, então vamos precisar deixar o acesso dinâmico através de URLs inteligentes.

3- Montar estrutura de URL

O próximo passo é criar o arquivo .htaccess com o conteúdo abaixo:

Options -Indexes
<IfModule mod_rewrite.c>
RewriteEngine on
DirectoryIndex index.php
RewriteRule ^blog/(.*)/amp$ artigo.php?slug=$1&formato=amp [QSA]
RewriteRule ^blog/(.*)$ artigo.php?slug=$1 [QSA]
</IfModule>

Aqui vai uma breve explicação, mas recomendo a leitura posterior na internet sobre arquivos .htaccess, caso você esteja iniciando no assunto.

O nosso .htaccess cria uma URI virtual /blog que chama o arquivo artigo.php e que recebe o parâmetro slug, utilizado para identificar o post. Um segundo parâmetro recebido já com o valor amp definido é o formato, utilizado para identificar a URL das versões AMP.

Dessa forma, agora você pode acessar os exemplos de URLs a seguir e ver que o resultado será sempre o mesmo, de acordo com o conteúdo do arquivo artigo.php

localhost/projetomobile/blog/meu-post-sobre-amp/amp
localhost/projetomobile/blog/meu-post-sobre-informatica
localhost/projetomobile/blog/meu-post-sobre-informatica/amp
localhost/projetomobile/blog/meu-artigo-sobre-html

4- Entendendo uma página AMP e suas diferenças

As páginas AMP utilizam HTML muito similar ao que você conhece, e formatações CSS também, mas devem ser seguidas algumas regras, como por exemplo, não utilizar Javascript no seu código.

Uma página AMP funciona sobre 3 componentes, que são:

AMP em HTML (Você deve usar HTML, mas com algumas restrições e diferenças, inclusive em tags.)
JS de AMP (Uma biblioteca que garante rapidez na renderização das AMP em HTML)
Cache de AMP (Este cache é do Google e pode ser utilizado para veicular as páginas AMP e ter melhor desempenho no carregamento)

E aqui o modelo mais simples de uma página AMP, que já serve pra começar e dar uma clareada.

<!doctype html>
<html amp>
  	<head>
  		<meta charset="utf-8">
  		<script async src="https://cdn.ampproject.org/v0.js"></script>
  		<title>Hello AMP world</title>
  		<link rel="canonical" href="hello-world.html">
  		<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  		<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>Hello AMP World!</h1>
  	</body>
</html>

E importante lembrar que as páginas AMP devem ser feitas com layout responsivo e seguindo todas as boas práticas de um desenvolvimento otimizado para dispositivos móveis.

5- Criar o template genérico

Neste ponto, já temos as URLs funcionando e você já conhece o básico para montar uma página AMP, então basta utilizar PHP para criar um template genérico no arquivo artigo.php, que servirá no navegador conteúdo comum e também conteúdo AMP.

Como visto anteriormente, quando acesso uma URL com /amp no final, o .htaccess envia para o arquivo artigo.php um parâmetro por GET chamado formato, com o valor amp, então temos aí o que precisamos pra fazer tudo funcionar.

Altere o seu arquivo artigo.php da seguinte forma:

<?php if(!isset($_GET['formato'])) { ?>
<!DOCTYPE html>
<html>
  	<head>
  		<meta charset="utf-8">
  		<title>Primeira página AMP</title>
  	</head>
<?php }else if($_GET['formato'] == 'amp'){ ?>
<!DOCTYPE html>
<html amp>
  	<head>
  		<meta charset="utf-8">
  		<title>Primeira página AMP</title>
  		<link rel="canonical" href="">
  		<meta name="viewport" content="width=device-width,minimum-scale=1">
  		<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>
  		<script async src="https://cdn.ampproject.org/v0.js"></script>
  	</head>
<?php } ?>
  	<body>
  		<h1>Primeira página AMP</h1>
  		<h2>As AMP oferecem uma excelente experiência do usuário em muitas plataformas</h2>
  		<p>O projeto AMP é uma iniciativa de código aberto com o objetivo de criar uma Web melhor para todos. O projeto possibilita a criação de websites e anúncios rápidos, atraentes e de alto desempenho em vários dispositivos e plataformas de distribuição.</p>
  		<img src='http://localhost/projetomobile/imagem_amp.jpg' width='1200' height='630'>
  	</body>
</html>

Foi simples o que fizemos, analisando se o parâmetro formato NÃO está definido, e assim montando o conteúdo do cabeçalho em HTML comum. Já se tiver o parâmetro formato com o valor amp, aí é fornecido o conteúdo do cabeçalho em AMP HTML.

Quer testar? Acesse os links abaixo e verá duas páginas iguais, sendo uma comum e outra AMP.

localhost/projetomobile/blog/meu-post-sobre-amp
localhost/projetomobile/blog/meu-post-sobre-amp/amp

Na página AMP, acesse o console do Google Chorome para ver a confirmação de página AMP, mas isso não significa que ela já esteja válida.

Exemplo de Página AMP Inválida

6- Validando a página AMP

Com a página AMP pronta, resta fazer a validação e conseguir o tão esperado VALID AMP. Existem diversas formas para ver se uma página AMP é válida, e precisamos fazer isso, pois a nossa ainda não é!

Você pode instalar uma extensão do Google Chrome chamada AMP Validator que mostra um ícone no canto da janela com um raio verde ou vermelho.

Extensão Validate AMP Chrome

Também é possível adicionar #development=1 no final da URL e abrir o console do Google Chrome.

Testar página AMP no Console do Google Chrome

Outro jeito, é acessar https://validator.ampproject.org e colocar o código fonte gerado pela página AMP.

AMP Validator Oficial

Voltando para o nosso projeto, o teste de validação retornou 3 erros relacionados com o link canonical e também com a imagem.

O link canonical deve ter a URL da versão da postagem comum, e a versão comum deve ter o link da versão AMP, então vamos resolver assim:

No cabeçalho comum:

<link rel="amphtml" href="<?php echo 'http://localhost/projetomobile/blog/' . $_GET['slug'] . '/amp'; ?>">

No cabeçalho AMP:

<link rel="canonical" href="<?php echo 'http://localhost/projetomobile/blog/' . $_GET['slug']; ?>">

Utilizamos o parâmetro slug enviado por GET, que serve como identificador do post. Agora podemos tentar a validação do código novamente.

Validação AMP somente 1 erro

Pronto, agora temos somente o erro relacionado com a imagem. A tag <img> deve ser trocada por <amp-img> e é obrigatório ter os atributos height e width, então será necessário utilizar mais uma vez o PHP e verificar se a página é AMP para fornecer o conteúdo correto.

Basta atualizar a parte do código que insere a imagem com o bloco a seguir:

<?php 
if(!isset($_GET['formato'])) { 
  	echo "<img src='http://localhost/projetomobile/imagem_amp.jpg' width='1200' height='630'>";
}else if($_GET['formato'] == 'amp'){
  	echo "<amp-img src='http://localhost/projetomobile/imagem_amp.jpg' width='1200' height='630'></amp-img>";
}
?>

Para finalizar, chegou a hora de validar a página novamente e conseguir o VALID AMP.

Página AMP Válida

7- Acompanhar indexação das páginas

Você pode ver a indexação das páginas através do Google Search Console e instalar na versão AMP o componente estendido amp-analytics.

Ver Indexação de Páginas AMP no Google Console Search

Tutorial em vídeo

Você também pode conferir este tutorial em vídeo acessando o link "como criar páginas AMP para o seu site" , no meu canal do YouTube. Entre lá e se inscreva no canal pra ficar antenado com muito mais conteúdo sobre sites otimizados, web analytics e marketing digital.

Próximos passos

Bom, o conteúdo do tutorial foi bem básico, mas tenho certeza que serviu para você entender como funciona e dar os primeiros passos com páginas AMP. Se você é programador PHP, também pode utilizar essa base para criar uma engine completa para um site, fornecendo conteúdo comum e AMP, deixando toda a conversão automatizada através de funções ou classes.

Mais uma vez eu deixo o link https://www.ampproject.org/pt_br que é do projeto AMP Oficial e lá você tem todo o conteúdo para avançar nos estudos.

Então é isso, eu espero que você tenha gostado desta publicação. Fique à vontade para compartilhar nas suas redes sociais para ajudar na divulgação e crescimento do site.

Aproveite para se inscrever no meu canal do YouTube e também na News do site pra ficar por dentro das novidades em artigos, tutoriais e cursos online.

Abraço e até a próxima!