Como Criar uma Página AMP para um Site Móvel Mais Rápido

O que é o AMP e porque é importante

O AMP (Accelerated Mobile Pages) é uma framework de código aberto que a Google desenvolveu em 2015 para acelerar drasticamente o carregamento de páginas web em dispositivos móveis. Num mundo em que mais de 60% do tráfego da internet provém de telemóveis, a velocidade de carregamento do site afeta diretamente a experiência do utilizador, a taxa de rejeição e a posição nos resultados de pesquisa. A investigação mostra que 53% dos utilizadores móveis abandonam um site que demora mais de 3 segundos a carregar. O AMP resolve este problema restringindo o HTML, o CSS e o JavaScript de uma forma que garante uma renderização extremamente rápida das páginas.

As páginas AMP carregam normalmente em menos de um segundo, o que é 4 a 5 vezes mais rápido do que a página móvel média. A Google acelera ainda mais o conteúdo AMP guardando-o em cache nos seus servidores através do sistema AMP Cache, pelo que a página é entregue a partir da localização da Google mais próxima do utilizador. Isto resulta num carregamento quase instantâneo quando um utilizador clica num resultado AMP na pesquisa Google.

Como funciona o AMP

Os três componentes do AMP

O AMP é constituído por três componentes essenciais que, em conjunto, asseguram um carregamento rápido. O primeiro é o AMP HTML — uma versão estendida do HTML com tags personalizadas que substituem os elementos HTML padrão por versões otimizadas para imagens, vídeo e componentes de carrossel. O segundo componente é a biblioteca AMP JS, que gere recursos, carrega de forma assíncrona os recursos externos e garante que nada bloqueia a renderização da página. O terceiro é o AMP Cache — uma CDN baseada em proxy que obtém automaticamente as páginas AMP, valida-as e guarda-as em cache para uma entrega rápida.

Limitações do AMP

Para alcançar uma velocidade excecional, o AMP impõe limitações rigorosas. Não pode utilizar o seu próprio JavaScript — só pode usar componentes AMP e o elemento limitado amp-script. O CSS deve ser inline e limitado a 75KB. Todos os recursos externos (imagens, anúncios, vídeos) têm de declarar previamente o seu tamanho para que o navegador possa calcular o layout antes de os recursos carregarem. Os formulários e os elementos interativos utilizam componentes AMP especiais. Estas limitações podem parecer rígidas, mas são precisamente o que garante uma experiência consistentemente rápida.

Estrutura de uma página AMP

Modelo básico de AMP HTML

Cada página AMP começa com uma estrutura específica. O doctype é o HTML5 padrão, mas a tag html deve conter o atributo amp ou o emoji do relâmpago. Na secção head, os elementos obrigatórios são uma meta tag charset, uma meta tag viewport, uma ligação canónica para a versão não-AMP da página, o CSS boilerplate do AMP que representa estilos padronizados para evitar o Flash of Unstyled Content e uma referência à biblioteca JavaScript do AMP. O corpo da página utiliza tags específicas do AMP em vez dos elementos HTML padrão para conteúdos multimédia.

Componentes AMP

O AMP oferece um ecossistema rico de componentes para diferentes necessidades. Para imagens utilize amp-img com os atributos obrigatórios de largura e altura. Para conteúdos de vídeo existem o amp-video e o amp-youtube. Os elementos interativos incluem amp-carousel para sliders, amp-accordion para secções expansíveis, amp-lightbox para visualizações modais e amp-form para formulários. Para analítica utilize amp-analytics, que suporta o Google Analytics, o Facebook Pixel e outras plataformas. Cada componente carrega de forma assíncrona e não bloqueia a renderização.

Implementar o AMP num site WordPress

Plugin AMP oficial

A forma mais simples de adicionar AMP a um site WordPress é utilizar o plugin AMP oficial. Este plugin oferece três modos de funcionamento: o modo Standard transforma todo o site em AMP, o modo Transitional cria versões AMP de todas as páginas a par dos originais e o modo Reader cria versões AMP apenas para os artigos. Para a maioria dos sites recomendamos o modo Transitional, porque permite uma migração gradual. Após a instalação, o plugin gera automaticamente versões AMP das suas páginas e adiciona as meta tags necessárias para as associar às páginas originais.

Plugin AMP for WP

O AMP for WP é um plugin alternativo com mais opções de personalização de design. Oferece mais de 10 temas AMP integrados, suporte para WooCommerce, integração com plugins de SEO populares como o Yoast e o Rank Math, bem como opções avançadas de anúncios. A versão gratuita cobre as necessidades básicas, enquanto a versão Pro acrescenta modelos AMP personalizados, suporte para Contact Form 7 e analítica avançada. Se a identidade visual das suas páginas AMP for importante, este plugin oferece mais flexibilidade em comparação com o plugin oficial.

Configuração manual

Para um controlo total sobre a implementação do AMP, pode criar modelos AMP personalizados no seu tema WordPress. Crie ficheiros de modelo separados que gerem AMP HTML válido. Utilize hooks do WordPress para adicionar ligações canónicas entre as versões AMP e não-AMP. Esta abordagem exige mais conhecimentos técnicos, mas dá-lhe controlo total sobre o aspeto e o comportamento das páginas AMP. Recomendamo-la apenas para programadores avançados com requisitos específicos que os plugins não conseguem satisfazer.

Testar e validar páginas AMP

AMP Validator

A Google oferece várias ferramentas para validar páginas AMP. O AMP Validator em validator.ampproject.org é uma ferramenta online onde introduz um URL ou código HTML e obtém informações detalhadas sobre os erros. As Chrome DevTools têm validação AMP integrada — adicione #development=1 ao final do URL AMP e abra a consola para ver os erros. A AMP Test Tool na Google Search Console mostra como a Google vê as suas páginas AMP e identifica problemas que podem impedir a indexação. Valide sempre cada página AMP antes de publicar, porque as páginas AMP inválidas não serão guardadas em cache nem apresentadas com a tag AMP na pesquisa.

Erros comuns

Os erros mais comuns na implementação do AMP incluem a utilização de tags HTML não permitidas em vez dos equivalentes AMP, CSS que excede o limite de 75KB, estilos inline com a declaração important que não é permitida no AMP, JavaScript não permitido no corpo da página, imagens sem dimensões declaradas e formulários sem um endpoint de ação AMP. O validador aponta claramente para cada erro com uma descrição e a linha de código, facilitando a correção.

AMP e SEO

Impacto na classificação

O AMP, por si só, não é um fator de classificação direto na pesquisa Google. No entanto, o AMP melhora indiretamente o SEO porque reduz drasticamente o tempo de carregamento, que é um fator de classificação, melhora as métricas Core Web Vitals, reduz a taxa de rejeição porque os utilizadores não esperam pelo carregamento e aumenta o envolvimento do utilizador, o que envia sinais positivos à Google. As páginas AMP costumavam ser apresentadas num carrossel especial no topo da pesquisa móvel, mas desde 2021 as páginas não-AMP também podem ser apresentadas nessa secção. Ainda assim, as páginas AMP têm vantagem na velocidade de entrega graças ao AMP Cache.

Ligações canónicas

A colocação correta da ligação canónica é fundamental para o SEO do AMP. Cada página AMP deve ter uma ligação link rel canonical que aponte para a versão original não-AMP da página. A página original deve ter uma ligação link rel amphtml que aponte para a versão AMP. Se utilizar o modo Standard, em que todo o site é AMP, a ligação canónica aponta para si própria. Isto garante que a Google indexa e associa corretamente ambas as versões da página, sem problemas de conteúdo duplicado.

Alternativas ao AMP

O AMP não é a única forma de obter páginas móveis rápidas. A otimização web moderna, com foco nos Core Web Vitals, pode alcançar resultados semelhantes sem as restrições do AMP. O carregamento lazy de imagens e vídeos, a gestão eficiente de CSS e JS, a utilização de uma CDN, a otimização do servidor e imagens modernas nos formatos WebP e AVIF podem acelerar drasticamente um site. O Next.js, o Gatsby e frameworks semelhantes geram páginas extremamente rápidas sem AMP. Considere o AMP se a sua prioridade for a visibilidade no Google News ou se tiver um site com conteúdo predominantemente estático. Para aplicações web complexas, com muita interatividade, a otimização padrão é a melhor escolha.

Conclusão

O AMP pode ser uma ferramenta poderosa para acelerar um site móvel, sobretudo em sites com conteúdo maioritariamente textual, como blogues, portais de notícias e sites informativos. A implementação através de plugins WordPress é relativamente simples e pode trazer uma melhoria significativa à experiência móvel. No entanto, o AMP não é uma solução universal — as limitações no JavaScript e no design podem ser problemáticas para sites complexos. Na BeoHosting, os nossos servidores estão otimizados tanto para páginas AMP como para páginas padrão, com armazenamento SSD rápido e um servidor web LiteSpeed que oferece um desempenho excecional, independentemente da abordagem que escolher.