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, sigla para a expressão em inglês 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, como a tecnologia funciona no PC e qual é a relação entre a Accelerated Mobile Pages e o Instant Articles do Facebook. Depois, o artigo mostra como configurar o sistema em um site, de que forma o usuário consegue validar a AMP-HTML, como acompanhar essa instalação, entre outros pontos importantes.
Continue a leitura e aprenda mais sobre a AMP!
1. Afinal, o que é o Google AMP?
A Accelerated Mobile Pages (AMP), 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. Qual é a história da AMP e em que contexto a tecnologia foi desenvolvida?
A AMP foi desenvolvida pelo Google para ser um concorrente direto do Facebook Instant Articles (recurso de edição de notícias por meio do qual circulam conteúdo colaborativos na rede social) e do Apple News (agregador de notícias desenvolvido pela empresa Apple para os sistemas operacionais iOS).
Otimizada para a navegação online móvel, a AMP foi anunciada pelo Google em 7 de outubro de 2015, após um logo período de discussões com as empresas de tecnologia, os editores de notícias e os colaboradores da Digital News Initiative, um grupo que incentiva o desenvolvimento de produtos, treinamento e inovação de impacto sobre o jornalismo no mundo.
Desde o anúncio do desenvolvimento da AMP até a atualidade, estes foram os fatos que marcaram o desempenho do projeto na relação com os usuários da internet:
- até o final de 2015, mais de 30 editores de notícias e empresas de tecnologia (Twitter, LinkedIn, WordPress etc.) se juntaram à equipe de desenvolvimento do Projeto AMP;
- em setembro de 2016, a Microsoft criou um suporte para o AMP em aplicativos da Bing para iOS e Android;
- em fevereiro de 2017, a Adobe aproveitou o primeiro ano de lançamento do projeto para anunciar que as páginas da AMP representavam 7% do tráfego online dos principais sites publicadores de notícias nos Estados Unidos;
- em maio de 2017, o Google noticiou que cerca de 1 milhão de domínios da internet estavam publicando conteúdos relacionados à tecnologia AMP;
- em junho de 2017, o Twitter se vinculou às páginas AMP em aplicativos iOS e Android;
- em setembro de 2018, a Microsoft lançou o próprio visualizador e cache de páginas AMP no Bing.
A última atualização sobre o Google AMP nos remete a 18 de setembro de 2018, quando a empresa anunciou um modelo de governança aberto para o projeto.
3. Por que é vantajoso usar AMP?
Neste momento, você sabe o que é e quando a AMP foi inicialmente desenvolvida pelo Google. Mas a dúvida que fica é sobre a vantagem de usar essa tecnologia nos diferentes dispositivos, certo?
Na verdade, a principal vantagem da AMP é a velocidade de carregamento das páginas Web. O motivo é que, em geral, quanto maior o tempo de carregamento do site, mais impacientes ficam os usuários e maiores são as taxas de rejeição em relação ao conteúdo veiculado.
Sem a aplicação da AMP ao HTML, o resultado não poderia ser menos impactante: o site tende a ser preterido dos resultados do Google, perdendo a visibilidade online e, possivelmente, deixando de ser uma autoridade no assunto com o qual se relaciona.
4. Por que a AMP funciona no PC?
Antes de responder à questão, é preciso identificar que o foco da tecnologia AMP são os dispositivos móveis, apesar de ser possível acessar as páginas otimizadas também no PC.
O sistema tem compatibilidade com qualquer sistema e funciona nos principais navegadores, como o Chrome, o Firefox, o Opera, o Safari e o Edge, além de otimizar o carregamento de páginas em smartphones e computadores.
5. 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.
6. Qual é a relação entre o SEO e a AMP?
Search Engine Optimization (Otimização de Mecanismos de Busca, em tradução livre) ou simplesmente SEO é o conjunto de técnicas utilizadas para melhorar o posicionamento de páginas no Google e em outros buscadores, gerando, nesse processo que envolve tecnologia, conteúdo de qualidade e autoridade no mundo online, tráfego orgânico para as empresas envolvidas.
Por outro lado, a AMP é uma ferramenta de otimização da navegação online móvel, contribuindo para o carregamento rápido das páginas da internet e otimizando a experiência do usuário com conteúdos de qualidade, os quais são priorizados pelos mecanismos de busca por meio da prática SEO.
Assim, a AMP aplicada ao HTML funciona para acelerar o carregamento das páginas Web, contribuindo para que conteúdos otimizados pelas técnicas SEO aparecem em primeiro lugar no Google e em outros buscadores de relevância para o público.
7. 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.
8. 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:
- acesse o painel do WordPress de seu site;
- em seguida, vá até o menu de plugins e clique em “adicionar novo”;
- 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;
- 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;
- para conferir a aparência das páginas aceleradas, clique em “Design” e depois em “Launch Post Builder”;
- 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;
- 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;
- 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.
9. Qual é a diferença entre AMP e páginas responsivas?
Respondendo à pergunta, as páginas responsivas, também conhecidas como mobile-friendly, são uma estratégia do design para apresentar o conteúdo de modo organizado e eficiente para o usuário, independentemente do aparelho com o qual ele acessa a internet.
Por outro lado, a AMP tem o objetivo de melhorar a velocidade de carregamento da página Web, focando na entrega de conteúdo qualificado da maneira mais rápida possível para quem acessa a internet por meio de dispositivos móveis.
10. Qual é a importância do AMP-HTML?
A principal função do AMP-HTML é tornar tudo o que é externo ao site assíncrono, isto é, o sistema opera para que nenhum elemento da página bloqueie a renderização de outro site.
Por isso, ainda que o Google AMP Cache seja opcional, é importante usar essa ferramenta para armazenar todas as páginas em AMP-HTML em cache nos servidores do Google, impactando automaticamente o desempenho da máquina.
11. 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.
12. Como acompanhar a indexação da AMP?
Para acompanhar a indexação das páginas AMP no Google, especificamente, no Google Search Console, siga este passo a passo explicativo:
- ao visualizar que a página do site foi rastreada pelo Google, verifique o item “AMP” no menu lateral da sua conta no Search Console;
- clique na opção “AMP” para abrir o relatório sobre as páginas do seu site;
- procure a seção “Detalhes”, localizada abaixo do gráfico de impressões, para observar os erros, caso tenham ocorrido durante o processo;
- após corrigir possíveis falhas no carregamento das páginas Web, clique sobre cada um dos erros listados pela plataforma;
- ao final, selecione a opção “Validar” para confirmar se os problemas foram corrigidos pelo Google.
Quando o site está em estágio intermediário de correção, as páginas com AMP válidas são mostradas em cor verde no gráfico, enquanto as páginas com erro são representadas por linhas vermelhas.
Lembre-se de que o processo de verificação dos erros, com o qual o Google valida que as páginas estão funcionando corretamente, pode durar alguns dias. Mas esse cuidado é imprescindível para você e o desenvolvedor do site garantirem a melhor experiência online para o usuário.
Neste conteúdo, você entendeu que 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. Portanto, quem é administrador de sites ou produtor de conteúdos deve se manter antenado com essa tecnologia, primordial para entregar a melhor experiência ao 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.
