Hoje os sites otimizados para mobile estão cada vez mais na mira das prioridades do Google e isso mostra, não apenas que os usuários passam mais tempo no celular, mas também o quanto as empresas devem se preocupar em oferecer uma melhor experiência em todos os dispositivos.
Hoje os sites otimizados para mobile estão cada vez mais na mira das prioridades do Google e isso mostra, não apenas que os usuários passam mais tempo no celular, mas também o quanto as empresas devem se preocupar em oferecer uma melhor experiência em todos os dispositivos.
Quando utilizamos o celular para acessar sites, muitas vezes estamos em conexões 3G limitadas ou até mesmo em Wi-Fi pública com baixa velocidade. Por isso, é necessário otimizar a navegação móvel para todos os usuários. E padronizar uma versão móvel de seu site com AMP, é uma ótima solução.
Como uma iniciativa do próprio Google, o AMP é um projeto de código aberto juntamente com outras empresas do ramo da tecnologia como LinkedIn, Pinterest e Twitter que visa criar uma web melhor para todos.
Mas para implementar essa solução, venha recordar alguns ajustes que precisam ser feitos no site. Confira algumas dicas.
O que é o AMP
A sigla significa Accelerated Mobile Pages (ou Páginas Móveis Aceleradas em português) e tem como objetivo melhorar toda estrutura de conteúdo para os dispositivos móveis. Ele otimiza as páginas do site para os dispositivos móveis, sem que você precise criar uma nova página.
Como o AMP prioriza a velocidade de carregamento da página, ele possui uma arquitetura diferenciada, é composto três componentes principais:
- AMP em HTML: é uma página HTML com propriedades personalizadas, o arquivo em HTML possui as tags comuns, mas também algumas específicas do AMP.
- JS de AMP: a biblioteca JS garante rapidez na renderização das páginas por meio de várias técnicas, um exemplo é a possibilidade de tornar os recursos externos assíncronos, o que faz com que nenhum elemento da página possa bloquear a renderização de outro.
- Cache de AMP: é uma rede de fornecimento de conteúdo com base no proxy para armazenar páginas em cache e aprimorar o seu desempenho.
Devo utilizar em todas as páginas do site?
A resposta é não.
Como o AMP é uma versão leve da sua página, sem muitos elementos visuais, você não deve configurá-lo em páginas que dependem do apelo visual para atrair o visitante. Por exemplo: sua home page, uma página de portfólio ou uma página de vendas não devem, em hipótese alguma, utilizar AMP. Isso porque o propósito original página seria perdido, pois todos os elementos de web design que fazem um site vender e encantar seriam removidos.
Os sites que devem instalar AMP são aqueles que possuem informações como na página sobre ou em um blog, isto é, sites que produzem conteúdo. Então, você irá configurá-lo apenas nessas páginas de conteúdo, e não no site inteiro.
Dicas para configurar o AMP
Agora que você já relembrou a estrutura e pontos importantes, confira algumas dicas para implementá-lo em seu site.
- Doctype: por padrão, você deve iniciar o seu arquivo com o habitual: <!doctype html>
- Não se esqueça de utilizar o <meta charset=“utf-8”> para que os caracteres da sua página não fiquem desconfigurados.
- Você precisa adicionar a tag AMP a sua página HTML. Pode utilizar <html amp> ou <html ↯>
- O uso das tags <head> e <body> continuam os mesmos
Inserindo a tag canonical
É importante lembrar que, ao configurar uma página AMP, ela se torna uma segunda versão da página com o mesmo conteúdo. Ela é identificada com “/amp” no final do link – o que pode gerar conteúdo duplicado. Para evitar isso, é necessário incluir uma canonical tag na versão da página móvel, indicando ao Google qual é a versão original do conteúdo.
Sendo assim, você deve inserir a tag canonical na sua página móvel, remetendo para a página original. Sempre mantenha o padrão das suas urls.
Exemplo: <link rel=”canonical”href=”https://www.hostgator.com.br/blog/versao-original.html”/>
Você deve referenciar para: <link rel=”canonical”
https://www.hostgator.com.br/blog/AMP-Pagina.html” />
Para que a tag canonical funcione perfeitamente, você deve fazer mais alguns ajustes:
<meta name=”viewport” content=”width=device-width,minimum-scale=1″>
Esta linha deve ser inserida no cabeçalho para carregar o conteúdo através do CDN.
<script async src=”https://cdn.ampproject.org/v0.js”></script>
A tag <head> também será implementada:
<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>
Transferência de dados estruturados
Você também pode identificar suas páginas com mark-ups. Desta forma, é possível exibir páginas de notícias ou receitas em dispositivos móveis nos mecanismos de busca, por exemplo. E para quem possui sites de notícias pode também utilizar uma marcação chamada “carrossel” no Google.
Em um artigo que utilize AMP, você pode implementar:
{
“@contexto”: “http://schema.org”,
“@type”: “NewsArticle”,
“manchete”: “Título”,
“datePublished”: “2017-11-11T11:11:00Z”,
“imagem”:”logo.jpg”
}
Inserção de logotipos
Lembre-se que apenas os formatos de arquivo de imagem .jpg, .ou png .gif devem ser usados, os logotipos animados também não são suportados e o tamanho das imagens precisa ser de exatamente 60×600 pixels. Procure priorizar o fundo branco ou transparente, pois isso facilita a identificação no Google.
Para que suas imagens apareçam sem problemas, utilize o código: <img src> <amp-img src>.
Um exemplo:
<amp-img src=”caneca.jpg” alt=”Descrição” height=”400″ width=”800″></amp-img>
A importância do rel-attribute na sua página
Ele serve para tornar as suas páginas mais amigáveis para o Google. Isso por que ele definiu quais são as exigências para as páginas AMPs, é importante que o conteúdo seja idêntico a página na qual ele faz referência.
Insira antes da tag <head>:
<link rel=”amphtml”
href=”https://www.hostgator.com.br/blog/AMP-Version.html” />
O processo de construção de sites possui diversas etapas importantes e os cuidados com a navegação mobile deve ser uma delas. Quer conhecer outras dicas sobre implementação para mobile? Confira nosso artigo sobre SEO para mobile.
E você, já implementou o AMP em algum site? Conte nos comentários como foi a sua experiência.
- Este artigo foi escrito pelo Caio Nogueira, co-fundador e desenvolvedor de sites WordPress na empresa UpSites Digital.