<p><strong>Atualmente as Páginas Móveis Aceleradas (AMP), adotadas pelo Google, estão se tornando cada vez mais comuns nos resultados de pesquisa. Mas como você pode aderir a esta tendência? Por meio deste artigo explicaremos como você pode criar versões AMP das suas páginas e melhor experiência de usuário móvel.
<h2>O que são Páginas Móveis Aceleradas?
<p>Em 2015, o Google anunciou que começaria a utilizar as Accelerated Mobile Pages (Páginas Móveis Aceleradas, em português). E hoje as páginas aceleradas costumam aparecer em um posição privilegiadas, nas buscas feitas em dispositivos móveis. Para os que já exploraram ao máximo as <a href="https://www.triscele.com.br/desenvolvimento-web/seo-otimizacao-para-motores-de-busca">otimizações para mecanismos de busca, a implementação de versões aceleradas das páginas móveis é uma ação extra, que renderá uma melhoria significativa nos acessos mobile.
<p><strong>O AMP é iniciativa open-source muito acessível para criar páginas web móveis de carregamento praticamente instantâneo. Esta tecnologia foi pensada para possibilitar aos editores melhorarem a velocidade de carregamento e a experiência do usuário. Tudo isto sem sacrificar qualquer receita em publicidade que estas páginas rendem.
<p>Apesar de desenvolvedores experientes poderem alcançar resultados similares através de intensivas otimizações de performance, os editores muitas vezes negligenciam isso devido a restrições de recursos. Com o AMP pode-se facilmente alcançar esse nível de otimização, sem comprometer a experiência principal da navegação móvel.
<h2>Como o AMP funciona?
<p>Essencialmente uma estrutura para criação de páginas web móveis, o AMP consiste em três partes básicas:
<ol>
<li style="padding-bottom: 7px;"><strong>AMP HTML: Um subconjunto do HTML, essa linguagem de marcação possui algumas tags e propriedades e muitas restrições. Mas se você é familiarizado com o HTML regular, você provavelmente não terá dificuldades de adaptar as páginas existentes para o AMP HTML. Para mais detalhes sobre a diferença do HTML básico, confira a <a href="https://www.ampproject.org/docs/tutorials/create/basic_markup" target="_blank" rel="nofollow noopener">Lista das Marcações Necessárias do Projeto AMP que sua página AMP HTML “deve” ter.
<li style="padding-bottom: 7px;"><strong>AMP JS: Uma estrutura JavaScript para páginas mobile. Na maior parte, ele gerencia a manipulação de recursos e o carregamento assíncrono. Deve-se notar que o JavaScript de terceiros não é permitido.
<li><strong>AMP CDN: Uma Rede de Entrega de Conteúdo opcional, ela irá pegar suas páginas aceleradas, coloca-las em cache e automaticamente fazer algumas otimizações de performance.
<h2>Como você irá adequar seu site para o AMP?
<p>Para iniciantes, você precisará manter pelo menos duas versões de qualquer página do artigo: A versão original da página do seu artigo que os usuários verão tipicamente e a versão AMP dessa página.
<p>Como não são permitidos os elementos de formulário e JavaScript de terceiros, você provavelmente não poderá ter formulários de inscrição em listas de email marketing, comentários na página e alguns outros elementos que você pode ter em sua página em uma implementação padrão. (Embora atualmente haja um hack usando iframes que forneça uma solução para isso).
<p>Também é provável que você precise reescrever seu modelo de site para acomodar as restrições. Por exemplo, todo o CSS no AMP precisa ser in-line e inferior a 50KB. Devido ao carregamento intenso de fontes personalizadas, elas devem ser carregadas usando uma extensão amp-font especial, para controlar melhor esse carregamento.
<h3>Multimídias
<p>As multimídias devem ser especialmente tratadas. Por exemplo, imagens precisam utilizar o <a href="https://www.ampproject.org/docs/reference/amp-img.html target=" rel="nofollow">elemento amp-img customizado e precisam incluir uma altura e largura (width e height) explicita (Converter um site preexistente para um modelo acelerado, pode ser uma grande dor de cabeça se os atributos de largura e altura ainda não estiverem sendo usados). Adicionalmente, se suas imagens são GIFs animados, você precisa usar o <a href="https://www.ampproject.org/docs/reference/extended/amp-anim.html" target="_blank" rel="nofollow noopener">componente estendido amp-anim separado.
<p>Como imagens, há uma tag customizada a ser utilizada para incorporar vídeos hospedados localmente via HTML5, chamada amp-video. Para incorporar vídeos do Youtube, contudo – que representam a maioria dos vídeos na web – há uma extensão separada, <a href="https://www.ampproject.org/docs/reference/extended/amp-youtube.html" target="_blank" rel="nofollow noopener">amp-youtube.
<p>Também há suporte para coisas como slideshows através do amp-carousel e lightboxes através do amp-image-lightbox, bem como incorporar mídias sociais como Twitter, Instagram, Facebook, Pinterest e Vine através de seus próprios <a href="https://www.ampproject.org/docs/reference/components" target="_blank" rel="nofollow noopener">componentes estendidos.
<p>Estas tags e componentes estendidos não são difíceis de usar, eles apenas exigem algum planejamento no design do seu site.
<p>Para o Google (e outras tecnologias que suportam o AMP Project) detectar a versão acelerada de seu artigo, você precisará modificar a versão original da página do artigo. A página do artigo original precisar incluir a tag seguinte, essencialmente uma tag da canonical para páginas:
<p>[codigo PHP removido na limpeza de migracao]
<p>Certifique-se de colocar o ID referente ao seu site no Google Analytics em “UA-XXXXX-Y”.
<p>Feito isso, revalide suas páginas aceleradas, e você terá uma configuração básica de rastreamento para seu site WordPress com páginas aceleradas.
<h2>Conclusão sobre a utilização do AMP
<p>O AMP fornece uma forma relativamente fácil de aumentar a velocidade de websites móveis para editores. Cada vez mais integrado com o Google, está se tornando uma alternativa cada vez mais atraente para empresas e o público em geral. E essa é uma ótima notícia também para os usuários! Pois como pode ser visto neste artigo, <a href="https://www.triscele.com.br/triscele/6-motivos-para-investir-em-mobile">nos últimos tempos o volume de tráfego na internet por dispositivos móveis já ultrapassa o de computadores. Então nada mais certo do que aprimorar ainda mais a navegação em dispositivos móveis.
<p class="text-right">
<a class="btn btn-triscele-whatsapp btn-large squared" target="_blank" href="https://api.whatsapp.com/send?phone=5548996314059&text=Ol%C3%A1%20Saty.%20Tudo%20bem?">Fale Conosco Agora via WhatsApp
<p>Você já navegou em páginas aceleradas? Qual foi sua experiência?
<p>Nos conte aqui embaixo na área de comentários, adoraríamos interagir com você!
