AMP: como acelerar o carregamento de sua web em dispositivos móveis


No início do ano, em notícias de SEO para este 2017, falamos sobre AMP e seu peso em SEO, devido à otimização da velocidade de carregamento de sites para dispositivos móveis. comprar vistas do youtube

AMP sim ou não?

Um retumbante Sim levando em consideração que as versões das páginas AMP reduzem o conteúdo de um site ao mínimo necessário para que sejam carregadas mais rapidamente do que nunca.

Portanto, se o Google recomenda o uso de AMP, devemos definitivamente prestar atenção a isso. Principalmente porque nos ajudará a melhorar nossos resultados nas SERPs.

Como implementar o AMP em um blog WordPress

Tornar seu blog compatível com AMP é extremamente fácil. Basta baixar o Plugin que o tornará compatível sem ter que fazer nenhuma configuração adicional. Basta instalá-lo e o plugin trata do resto automaticamente e sem que você precise fazer nada a respeito. Em seguida, deixamos os links para dois Plugins que realizam esta função.

Como implementar o AMP em uma página da web

Em uma página web, não será tão simples como no seu WordPress, pois será um processo manual e, portanto, mais complexo e delicado.

Devemos criar versões AMP de cada uma das páginas finais (produto, notícias, aterrissagens ...) que sejam relevantes para o Google e usuários móveis. Que será veiculado com outro URL e que conterá uma tag HTML específica em seu código.

An Versão de AMP de uma página é aquele que:

  • Descarta ou elimina o uso de elementos pesados ​​como imagens, iframes, formulários ... desnecessários para transmitir informações rapidamente aos usuários finais. Eliminando completamente a possibilidade de usar Javascript .
  • Ele usa tags específicas em seu código HTML para identificá-lo como uma versão AMP. Por exemplo: em vez de vocês usaria  .

Além disso, folhas de estilo têm suas próprias limitações em uma versão de AMP:

  • Você não pode usar folhas de estilo externas (CSS).
  • O CSS deve estar dentro de uma única tag específica e específica de AMP: 
  • Regras CSS como @import e ! Importante ter o uso completamente proibido .

Adaptar uma página a AMP

Tendo em conta o acima, vamos dobrar nossa página e editar seu código HTML para convertê-lo em AMP.

Passo a passo:

  • o tag deve estar presente e em primeiro lugar.
  • Então mudamos o tag para um como este: , como podem ver, além de apontar que se trata de uma página de amplificação, também indicamos o idioma.
  • Dentro começamos com a tag 
  • Imediatamente depois, introduzimos a seguinte biblioteca:   .
  • Para evitar problemas de SEO de conteúdo duplicado, é essencial inserir um  tag que aponta para o URL da página original que estamos convertendo. Isso é importante ou o Google em vez de nos recompensar com melhores posições irá nos penalizar.
  • Nós otimizamos a exibição de conteúdo para a resolução do dispositivo: 
  • Nós introduzimos estilos CSS dentro do   etiqueta
  • Antes de fechar o é fundamental copiar e colar o seguinte código que inclui estilos específicos relacionados à visualização do conteúdo da página.

Here the CSS styles (font types and sizes, colors …

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} } body {-webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none}

Estas são as etapas básicas para construir uma página específica em AMP, sempre respeitando os requisitos indicados no início para uma página AMP. Mas também podemos adicionar metadados do schema.org que identificam o conteúdo da página: artigo, notícias, postagem do blog ...

Incentivamos você a visitar a página do projeto AMP e descobrir muito mais: 

Você já usa AMP? Você notou mudanças em sua indexação no SERP?