Os três tipos de website para dispositivos móveis
Web design Responsivo, Exibição dinâmica e URLs separados são os tipos de website para dispositivos móveis. Qual a preferência do Google?
O questionamento “como implementar AMP” cresce a cada dia. A relevância do assunto para o usuário e para os mecanismos de busca explica o crescimento.
O AMP (Accelerated Mobile Pages) é a tecnologia que deixa suas páginas com carregamento extremamente rápido no mobile.
Como implementar AMP no WordPress
As implementações no WordPress, antes de tudo, giram em torno do seguinte questionamento:
Deve-se implementar o Accelerated Mobile Pages com ou sem plugin?
Compreenda. Ambos os cenários são válidos, pois cumprem seu papel e possuem vantagens e desvantagens.
Neste momento há centenas de plugins que mencionam o termo “AMP” no diretório do WordPress.org.
No entanto, dois deles são mais relevantes.
Plugin AMP
O plugin AMP está ativo em mais de 200k instalações e implementa a tecnologia sem intervenção por códigos.
Ele tem por trás duas grandes empresas: Automattic e Google.
Plugin Glue for Yoast SEO & AMP
O plugin Glue for Yoast SEO & AMP integra as funcionalidades do plugin Yoast SEO às páginas AMP.
É um grande aliado e garante a correta implementação das meta-tags em páginas AMP.
Sobre a implementação sem plugins
A implementação do AMP sem plugins tem ganhado adeptos que querem ir para o próximo nível.
Reduzir a quantidade de códigos (logo, de kilobytes também) resultará em ainda mais velocidade.
Esse é o segundo passo, algo mais avançado que você poderá pensar futuramente.
No entanto, ao implementar o Accelerated Mobile Pages é preciso ficar atento aos seguintes tópicos:
- Conhecer a implementação e seus elementos requeridos;
- Tratar corretamente os elementos de mídia, como as imagens;
- Fazer uso da tag canonical;
- Aplicar o layout e estilos desejados e
- Validar a implementação.
Quais são os elementos requeridos?
A implementação básica do Accelerated Mobile Page requer, no mínimo, o uso dos elementos obrigatórios.
Os itens são:
- Começar a marcação com <!doctype html>;
- No primeiro nível conter <html ⚡> ou <html amp>;
- Conter as tags <head> e <body>;
- O primeiro filho da tag <head> deve ser <meta charset=”utf-8″>;
- O segundo deve ser a inclusão do script <script async src=”https://cdn.ampproject.org/v0.js”></script>;
- Inserir a tag canonical <link rel=”canonical” href=”HTTP://ALGUMA_URL.COM.BR”>;
- Utilizar a meta-tag <meta name=”viewport” content=”width=device-width,minimum-scale=1″> com a recomendação de uso do initial-scale=1.
O resultado da marcação resultaria nos seguintes códigos:
<!doctype html> <html amp lang="pt-BR"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title>Minha primeira página AMP</title> <link rel="canonical" href="http://endereco-da-pagina.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> </head> <body> <h1>Minha primeira página com o Accelerated Mobile Page</h1> </body> </html>
Sobre as tratativas dos elementos de mídia
Nem todas as tags HTML são mantidas no AMP. Algumas são banidas e outras substituídas por equivalentes.
A inserção de imagens em páginas com o Accelerated Mobile Pages implementado requer uma marcação HTML específica.
<amp-img src="https://imagem-xxx.jpg" alt="Um gatinho" height="800" width="600"></amp-img>
A tag tag canonical e o AMP
Na maioria das vezes suas páginas web terão duas versões: uma com e outra sem a tecnologia implementada.
Através do uso da tag canonical conseguimos controlar e informar a versão da página em uso.
Haverá situações também em que somente páginas com o AMP existirão.
Páginas com e sem AMP implementada
Para a página sem o AMP considerar esta tag canonical:
<link rel="amphtml" href="https://dominio.com.br/pagina-amp.html">
Para a página com o AMP considerar essa outra:
<link rel="canonical" href="https://dominio.com.br/pagina-sem-amp.html">
Páginas somente em versão AMP
Mesmo quando não há duas versões da mesma página, devemos considerar o uso da tag canonical.
Ele deve apontar para a própria página com o AMP implementado. Assim:
<link rel="canonical" href="https://dominio.com.br/pagina-amp.html">
A estilização
Páginas AMP nada mais são do que páginas HTML.
O único ponto diferente é que temos algumas tags especiais.
Portanto, o bom e parceiro CSS pode ser utilizado para estilizar e personalizar o layout.
Outro ponto de atenção é que as declarações de estilo devem ser implementas inline na página.
Dentro da tag <head> devemos considerar a tag style do AMP:
<style amp-custom> body { background-color: #fff; color: #f90; } amp-img { background-color: #f7f7f7; border: 1px solid #ccc; } </style>
O processo de validação
Para garantir a distribuição das suas páginas AMP nas plataformas que o suportam, é preciso certificar-se que ela esteja válida.
Um página inválida será desconsiderada pelas plataformas, como o mecanismo de busca do Google.
O navegador de internet pode ser utilizado para esse processo.
É necessário, ainda, acrescentar o hash #development=1 a URL da página AMP e, em seguida, observar o Console do navegador.
A URL final ficaria assim:
https://dominio.com.br/pagina-amp.html#development=1
Conclusão
Implementar o AMP é um caminho sem volta porque os usuários querem navegar por páginas que carregam mais rápido.
Se suas páginas estiverem lentas, terá perdas de conversão e negócios.
Implementar o Accelerated Mobile Pages com ou sem plugins é o próximo passo. O primeiro (e obrigatório!), deve ser implementá-lo.
