AMP no WordPress, AMP que vem do inglês, Accelerated Mobile Pages, “páginas aceleradas para dispositivos móveis” é um projeto de código aberto. Seu objetivo é aumentar o desempenho das paginas em HTML convencionais em smartphones, gerando uma versão alternativa da página.
A justificativa do AMP Project é a grande limitação dos smartphones quando o assunto é a conexão com a internet. Lenta e de banda limitada. Outro ponto é o próprio hardware de alguns celulares, que tem dificuldade em processar páginas grandes, carregadas de javascript, efeitos e imagens.
Quando o objetivo é divulgar uma noticia, um artigo ou um simples post no blog, você não precisa de todos os recursos que uma página HTML convencional disponibiliza e é ai que entra o AMP.
A grande ideia por de traz do AMP é reverter esse cenário, gerando páginas HTML “limpas”, rápidas e objetivas. Páginas levam em conta às técnicas de UI e UX que mais se encaixam aos usuários mobile.
Uma nova “versão” do HTML
O “pulo do gato” por de traz desse projeto é uma variante do HTML que é utilizada para gerar as páginas AMP. Essa “versão” customizada do HTML conta com algumas tags personalizadas, propriedades e um monte de restrições, tudo isso para forçar que o conteúdo realmente seja otimizado.
Outro ponto forte nessa otimização, é o AMP JS, framework javascript especifico para mobile, aumentando ainda mais o desempenho das paginas, afinal, javascript consome bastante memória e processamento.
Neste links, temos o tutorial completo para você criar páginas AMP: https://www.ampproject.org/docs/get_started/create
Link do Github do projeto: https://github.com/ampproject
Exemplo de HTML:
<!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://example.ampproject.org/article-metadata.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",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
AMP no WordPress
AMP no WordPress é simples, se você já utiliza o WordPress, você está na frente, pois é possível instalar um plugin que irá fazer todo o trabalho para você, disponibilizando a versão AMP de seus Posts, sem precisar escrever uma unica linha de código.
AMP for WP – Accelerated Mobile Pages – https://br.wordpress.org/plugins/accelerated-mobile-pages/
Eu testei ele aqui no blog e realmente funciona muito bem.
Após instalado e ativado, basta carregar uma pagina com /?amp no final da URL, para visualizar a versão otimizada.
No Google, AMP faz a diferença
Google, como todos nós sabemos, está constantemente aprimorando o seu sistema de busca e o desempenho das paginas que ele sugere aos seus usuários são extremamente relevantes, ainda mais se o cara estiver no smartphone, com aquela 3G “super rápida”.
Pensando nisso, o Google faz o cache das páginas AMP em seu servidor para que os usuários de smartphone as utilizem.
Automaticamente ele sugere essas versão das páginas no seus resultados de busca.
Dessa forma o usuário baixa “acessa” o conteúdo muito mais rápido, pois ele está salvo no CDN da Google além também das páginas AMP serem uma versão super leve do conteúdo.
Não é tão simple assim, para que sua página AMP seja salva pelo Google, você terá que seguir a risca os padrões do AMP.
Neste link: https://www.ampproject.org/docs/guides/validate você terá maiores instruções de como validar sua página AMP.
Conheça mais sobre o AMP Project neste vídeo.
Tópicos do AMP Project, para pesquisa:
- AMP HTML
- AMP JS
- Google AMP Cache
2 comentários sobre “AMP no WordPress – Accelerated Mobile Pages, páginas otimizadas para dispositivos móveis”