fbpx

Quem nunca desistiu de visitar um site por causa da demora no carregamento? Se isso já era comum quando acessávamos a internet apenas via computador, com a popularização dos smartphones, essa impaciência está cada vez maior.

Com os usuários exigindo mais agilidade das páginas, as gigantes da tecnologia estão sempre em busca de soluções para melhorar a experiência do cliente. Uma das soluções foi a AMP — Accelerated Mobile Pages.

Para quem é administrador de sites ou criador de conteúdo em um ambiente cada vez mais concorrido, é importante ter um diferencial competitivo. Além de aumentar as visitais, a AMP contribui para que seu site ganhe posições no ranking dos mecanismos de buscas, em especial no Google. Neste post, vamos entender melhor o que é AMP, seu funcionamento e como configurá-lo. Confira!

1. O que é a Google AMP?

A Google AMP — Accelerated Mobile Pages, ou Páginas Aceleradas para Dispositivos Móveis em tradução livre — é um projeto open source criado para auxiliar os criadores de conteúdo para web a otimizarem seus sites para dispositivos móveis, acelerando o carregamento.

O objetivo era tornar o carregamento da página instantâneo, sem perder o conteúdo multimídia, como vídeos, animações e gráficos, além dos anúncios inteligentes. Também era importante garantir que um mesmo código funcionasse em múltiplas plataformas e dispositivos.

A partir de fevereiro de 2016, o Google passou a integrar essa tecnologia em seus resultados de pesquisa, dando destaque no topo das pesquisas. As páginas dotadas dessa tecnologia trazem ao lado do título um círculo com um raio e a sigla AMP.

2. O AMP funciona no PC?

O foco da tecnologia AMP são os dispositivos móveis, mas é possível acessar as páginas otimizadas também no PC. Ela tem compatibilidade com qualquer sistema e funciona nos principais navegadores — Chrome, Firefox, Opera, Safari e Edge, seja nos smartphones ou computadores.

3. Qual é a relação do AMP com o Instant Articles do Facebook?

A AMP da Google e o Instant Articles do Facebook são projetos diferentes, mas têm algumas semelhanças. Uma delas é que ambos foram desenvolvidos para aumentar a velocidade de carregamento das páginas. O segundo funciona apenas para redirecionamento via Facebook, já o primeiro é uma ferramenta de código aberto que tem como foco atingir qualquer página da web.

4. Como a AMP funciona?

Essa tecnologia foi criada tendo como base as tecnologias já existentes na web, ou seja, utiliza o HTML como linguagem de marcação. O AMP-HTML nada mais é do que o HTML5 acompanhado de um conjunto de requisitos e restrições. A otimização é potencializada por JavaScript e o estilo é incrementado por CSS3. Além disso, as páginas são armazenadas em cache.

Basicamente, podemos dizer que a Google AMP tem o funcionamento semelhante ao CDN, sendo gratuito e funcionando no modelo “stale-while-revalidate”, o qual garante que o conteúdo será sempre atualizado em cache. O processo é simples: quando o usuário entra no site, é feita uma solicitação, e é enviada ao navegador uma versão em cache. Após isso, há uma nova solicitação do documento partindo de seu servidor original, que o atualizará.

Dessa forma, podemos dizer que as AMPs são totalmente separadas de um site mobile típico, sendo que um site pode ter as três versões: para desktop, a versão responsiva e a AMP para smartphones. Na hierarquia, a versão para desktop é a principal, deixando a responsiva e a AMP como alternativas.

5. Como configurar AMP em seu site?

Você não precisa ser um especialista em programação para aprender a configurar a AMP em seu site. Os melhores CMSs oferecem plugins que facilitam essa configuração. Entre eles, podemos destacar o mais popular: o WordPress. Veja abaixo como fazer esse processo:

  1. acesse o painel do WordPress de seu site;
  2. em seguida, vá até o menu de plugins e clique em “adicionar novo”;
  3. para configurar e fazer otimizações, como analisar os dados do Google Analytics, inserir dados estruturados e utilizar o Google Tag Manager, você deverá instalar o plugin AMP for WP;
  4. para configurar o Google Analytics, acesse a AMP no painel do WordPress e clique em Analytics. Em seguida, digite o código de acompanhamento de sua conta;
  5. para conferir a aparência das páginas aceleradas, clique em “Design” e depois em “Launch Post Builder”;
  6. quando abrir a nova tela, clique em “AMP”, “Aparência” e selecione as informações que você deseja manter nas páginas aceleradas e configure as cores para adequar à identidade de sua marca;
  7. após a configuração básica, volte ao painel principal do WordPress, acesse o menu AMP e analise cada um dos itens de configuração para editar de acordo com a demanda de seu site;
  8. para visualizar a versão final de uma publicação AMP, basta acessar o endereço e digitar AMP no final da URL — essa checagem pode ser feita até pelo computador.

Para configurar utilizando outro CMS, entre no site oficial do projeto e siga o passo a passo específico.

6. Como validar o AMP-HTML?

Após configurar e criar as versões em AMP de suas páginas, você deverá fazer a validação do código. A própria equipe do projeto disponibiliza uma ferramenta para isso de forma gratuita. A melhor maneira é acessando a ferramentas de AMP validator e inserindo o link de uma página acrescentando “/amp” no final da URL e clicando em “Validate”. Se o retorno do Validation Status for PASS, significa que seu código está ok.

Se o resultado for “FAIL”, significa que está com erros que precisarão ser corrigidos para que haja a exibição correta e indexação nos buscadores. A grande vantagem da ferramenta oficial é que, abaixo do status, aparecerá uma listagem dos erros encontrados.

A AMP é um padrão que veio para ficar e, por ser uma ferramenta de código aberto, a tendência é crescer em recursos e possibilidades. Para quem é administrador de sites ou produtor de conteúdos, estar antenado com essa tecnologia será primordial para entregar a melhor experiência para o usuário e ficar em dia com as boas práticas de SEO.

Gostou do post? Quer começar a utilizar a AMP em seu site hoje mesmo? Entre em contato conosco e saiba como ter a melhor estrutura para aderir a essa inovação.

Escreva um comentário

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.