Guia Definitivo do AMP para WordPress (2020)

O plugin AMP para WordPress otimiza seus artigos para o Google AMP que melhora o posicionamento dos seus artigos nas pesquisas em dispositivos móveis.

Se você não está familiarizado com as Páginas para Dispositivos Móveis Aceleradas (AMP), é um projeto de código aberto que visa permitir que o conteúdo do website para dispositivos móveis seja processado quase instantaneamente com um layout muitas vezes diferente do website principal.

Essa iniciativa que tem o Google como patrocinador, mas não é um programa de propriedade do Google, e também é suportada pelo Bing, Baidu, Twitter, Pinterest e muitas outras partes.

O AMP foi introduzido para melhorar drasticamente o desempenho da Web e fornecer uma experiência de consumo de conteúdo rápida e consistente principalmente para quem tem conexão lenta com a internet.

O Google possui um recurso chamado Google Web Stories que pode ser instalado no WordPress e atrair ainda mais visitantes para o seu site.

De acordo com esse objetivo, aplicaremos o requisito de paridade próxima entre AMP e página canônica, para páginas que desejam ser exibidas na Pesquisa do Google como AMPs.

Com o plugin oficial do AMP para WordPress ativo todas as postagens do seu site terão versões compatíveis com AMP, acessíveis ao incluir /amp/ ao final dos URLs das postagens.

AMP para WordPress otimiza seus artigos para SERP Mobile

Benefícios do AMP para WordPress

O AMP pode ampliar o alcance do seu website na pesquisa orgânica do Google em dispositivos móveis pois os artigos que são compatíveis com esta tecnologia são exibidos com uma marcação em destaque na pesquisa orgânica.

Outro ponto interessante é que o plugin permite que você selecione o modo de layout para os seus posts.

Recursos e capacidades fornecidos pelo plugin para WordPress incluem:

  • Ferramenta de compatibilidade: para auxiliar o desenvolvimento de experiências com AMP permitindo a depuração de AMP com informações detalhadas sobre erros de validação que podem existir, as marcações / scripts que os causam e os componentes específicos no site (por exemplo, tema, plug-in, etc) responsáveis ​​pelo conteúdo da página .
  • Compatibilidade de CSS: para ajudar a lidar com casos em que as regras CSS definidas em um site excedem o limite de tamanho CSS permitido em páginas com uma única.
  • Suporte ao Gutenberg: permitindo a criação de conteúdo totalmente integrado com o Gutenberg.
  • Amp Stories: O AMP Stories Editor permite a criação de Storytelling parecido com o que faz o Twitter e o instagram.
  • Suporte a AMP-First: permitindo experiências no site completo sem sacrificar a flexibilidade da plataforma ou a fidelidade do conteúdo.
  • Muitas otimizações: vários aprimoramentos de experiência em código, desempenho e desenvolvedor: desde a flexibilidade de personalização até fluxos de interface do usuário, internacionalização, acessibilidade, etc.
Benefícios do AMP para WordPress

AMP no Search Console

Alguns dias após a instalação do Plugin AMP para WordPress, você pode visualizar no Google Search Console o status da indexação das suas páginas AMP. Caso encontre algum erro o próprio Google Search Console exibe o log de erros.

AMP no Search Console

O recurso do Cloudflare chamado AMP Real URL aproveita o SSL dos Websites para autenticar o conteúdo dos editores quando veiculado a partir do cache do Google.

Novos Modelos, PWA e CDN

A versão estável do plugin AMP oficial para WordPress já está disponível e veja alguns destaques neste lançamento.

O WordPress 5.1 foi lançado com uma atualização do Twenty Nineteen que infelizmente quebrou a compatibilidade para o tema devido a um grande aumento na quantidade de CSS. Por esse motivo, o CSS Tree Shaker foi desenvolvido para reduzir ainda mais os estilos.

Na versão anterior do plug-in o tamanho da folha de estilo style.css de Twenty Nineteen depois do CSS Tree Shaker (na página de demonstração de Gutenberg) era de 70 KB.

Isso foi mais de 20 KB do que o limite de 50 KB imposto pela própria AMP, sem falar dos outros estilos que também são enfileirados pelo núcleo.

Com as melhorias no processamento de CSS, o tamanho do style.css do Twenty Nineteen foi reduzido para 33 KB: reduzindo a quantidade de CSS em mais da metade!

Modelos reformulados de Templates AMP

Nesta versão, o modo emparelhado foi renomeado como modo de transição. Uma razão para isso é que o modo clássico também era um modo emparelhado (onde há URLs paralelas separadas para a versão AMP).

Mas o mais importante é que o objetivo desse modo é ajudar a facilitar a transição de um site para o AMP First, em que não há URLs separados específicos para AMP. Portanto, o objetivo do modo de transição é ser um caminho para o modo nativo.

Também foi estabelecido um plano para o modo Clássico. Em vez de removê-lo, o time de desenvolvedores fez um rebranding como um modo “Reader” .

Como o modo Reader contém um modelo básico que não corresponde aos modelos do tema ativo, o modo é semelhante ao modo leitor encontrado em alguns navegadores como o Safari.

Ao reformulá-lo desta forma, foi deixado bem claro que o design básico do modelo não se deve ao fato de o AMP ser limitado. No Customizer você também pode ativar um link “Exit Reader Mode” para incluir no cabeçalho.

Por enquanto, o modo Reader continua sendo o modo padrão, mas a idéia é alternar para o modo nativo sendo o padrão quando um tema compatível está ativo. O modo Leitor é a única solução completa fornecida no plug-in.

Modelos reformulados no AMP 1.1

Nos modos Nativo e Transacional, também foi deixado bem claro que pode ser necessário algum trabalho de desenvolvimento para usá-los em um determinado tema e plug-ins.

Melhorias no Processamento de Imagens

Um erro muito comum encontrado ao veicular AMP a partir do WordPress eram imagens aparecendo na horizontal ou excessivamente dimensionadas na página. Esse erro foi corrigido nesta versão.

Customizando os Estilos do AMP

Tenho certeza de que isso é algo que você deseja alterar imediatamente após a ativação do plug-in, como alterar a cor do plano de fundo do cabeçalho, a família da fonte e o tamanho da fonte para melhor corresponder à marca e à personalidade do seu site.

Para isso, podemos empregar a ação amp_post_template_css no arquivo functions.php do seu tema.

%MINIFYHTML5fe3757d3e018015c1571172fed84f9c17%
<?php function theme_amp_custom_styles() { ?> nav.amp-wp-title-bar { background-color: orange; } <?php } add_action( 'amp_post_template_css', 'theme_amp_custom_styles' );

Se examinarmos o Chrome DevTools, esses estilos serão anexados no elemento <style amp-custom> e substituirão as regras de estilo anteriores. Portanto, a cor de fundo laranja agora é aplicada ao cabeçalho.

Você pode continuar escrevendo as regras de estilo normalmente. Porém, lembre-se de algumas restrições e mantenha os tamanhos de estilo abaixo de 50 KB. Em caso de dúvida, consulte nosso artigo anterior sobre como validar suas páginas AMP.

Customizando Templates no AMP

Se você precisar alterar muito além do estilo, convém personalizar o modelo inteiro. O plugin amp-wp fornece vários modelos internos, a saber:

  • header-bar.php
  • meta-author.php
  • meta-taxonomy.php
  • meta-time.php
  • single.php
  • style.php

Esses modelos são muito parecidos com a hierarquia de modelos padrão do WordPress.

Cada um desses modelos pode ser assumido fornecendo um arquivo com o mesmo nome na pasta / amp / no tema.

Quando esses arquivos estiverem no lugar, o plug-in os buscará em vez dos arquivos padrão e nos permitirá alterar completamente a saída desses modelos.

twentytwelve ├── 404.php ├── amp │ ├── meta-author.php │ ├── meta-taxonomy.php │ ├── single.php │ └── style.php

Você pode reescrever os estilos inteiros através do arquivo style.php ou modificar toda a estrutura da página AMP conforme sua necessidade com o single.php. Ainda assim, você precisará manter a alteração para cumprir os regulamentos da AMP.

Usando os Hooks and Filters do AMP

Como mencionado anteriormente, este plug-in é fornecido com várias ações e filtros. Não é possível abordar cada um neste artigo mas vou apresentar um resumo e os snippets necessários que eu já utilizei:

amp_init(); ação é útil para plug-ins que dependem do AMP para que seu plug-in funcione; é executado quando o plug-in já está iniciado.

<?php function amp_customizer_support_init() { require_once dirname( __FILE__ ) . '/amp-customizer-class.php'; } add_action( 'amp_init', 'amp_customizer_support_init' ); ?>

Semelhante à ação wp_head, podemos usar amp_post_template_head para incluir elementos adicionais na tag head nas páginas AMP, como meta, estilos ou scripts.

<?php function theme_amp_google_fonts() { ?> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700,700italic%7CRoboto+Slab:400,700&subset=latin,latin"> <?php } add_action( 'amp_post_template_head', 'theme_amp_google_fonts' );

A action amp_post_template_footer é semelhante ao wp_footer.

<?php function theme_amp_end_credit() { ?> <footer class="amp-footer"> <p>© luizeof.com 2020</p> </footer> <?php } add_action( 'amp_post_template_footer', 'theme_amp_end_credit' );

amp_content_max_width é usado para definir a largura máxima da página AMP. A largura também será usada para definir a largura dos elementos incorporados, como um vídeo do Youtube.

<?php function theme_amp_content_width() { return 700; } add_filter( 'amp_content_max_width', 'theme_amp_content_width' );

amp_site_icon_url é usado para definir o URL do ícone – favicon e ícone da Apple -. O padrão é a imagem carregada por meio da interface Site Icon, que foi introduzida na versão 4.3.

<?php function theme_amp_site_icon_url( ) { return get_template_directory_uri() . '/images/site-icon.png'; } add_filter( 'amp_site_icon_url', 'theme_amp_site_icon_url' );

O filter amp_post_template_meta_parts é para quando você precisar personalizar a saída de metadados do post, como o nome do autor, a categoria e o carimbo de data e hora.

Através desse filtro, você pode embaralhar a ordem padrão ou remover uma das meta da página AMP.

<?php function theme_amp_meta( $meta ) { foreach ( array_keys( $meta, 'meta-time', true ) as $key ) { unset( $meta[ $key ] ); } return $meta; }; add_filter( 'amp_post_template_meta_parts', 'theme_amp_meta' );

amp_post_template_metadata é para personalizar a estrutura de dados do schema.org nas páginas AMP.

O exemplo a seguir mostra como fornecemos o logotipo do site que será mostrado no carrossel AMP no resultado da pesquisa do Google e removemos o carimbo de data / hora modificado da página.

<?php function amp_schema_json( $metadata ) { unset( $metadata[ 'dateModified' ] ); $metadata[ 'publisher' ][ 'logo' ] = array( '@type' => 'ImageObject', 'url' => get_template_directory_uri() . '/images/logo.png', 'height' => 60, 'width' => 325, ); return $metadata; } add_filter( 'amp_post_template_metadata', 'amp_schema_json', 30, 2 );

amp_post_template_file essa é uma maneira alternativa de substituir arquivos de modelo. É útil se você preferir hospedar seus arquivos de modelo AMP personalizados em outro diretório que não seja /amp/.

function theme_custom_template( $file, $type, $post ) { if ( 'meta-author' === $type ) { $file = get_template_directory_uri() . '/partial/amp-meta-author.php'; } return $file; } add_filter( 'amp_post_template_file', 'theme_custom_template', 10, 3 );

amp_query_var é usado para alterar o ponto de extremidade da página AMP quando o URL Link permanente está ativado. Por padrão, está definido como /amp/. Dado o seguinte, a página AMP agora está acessível adicionando /m/ no URL.

function custom_amp_endpoint( $amp ) { return 'm'; } add_filter( 'amp_query_var' , 'custom_amp_endpoint' );

Com esses hooks e filters você poderá customizar o AMP no seu site.

Conclusão

O AMP para WordPress facilita a inclusão do AMP no seu website e em poucos dias já começa a aparecer na pesquisa do Google em dispositivos móveis.

Deixe uma resposta