Ferramentas para devs no Plugin de AMP

ferramentas para devs com o plugin de amp

Nesse post iremos abordar a ferramentas para devs no plugin de AMP para WordPress. O plugin não trabalha apenas para melhorar a performance do seu site, mas possui uma séria de ferramentas para entregar um conteúdo que seguem as melhores práticas de desenvolvimento, monitorar erros e comparar páginas AMP com páginas não-AMP.

Video sobre ferramentas para devs no plugin de AMP

Sumário do conteúdo

  1. Definindo o seu perfil
  2. Validação com ferramentas para devs no plugin de AMP
  3. Integração com o Editor
  4. Validação sobre URLs
  5. Índice de Erros
  6. Barra de administração
  7. Navegação emparelhada

O que é o plugin de AMP para WordPress?

O plugin de AMP WordPress é uma ferramenta que ajuda você a criar sites WordPress com foco no usuário, compatíveis com o biblioteca AMP. Um site que prioriza a performance e a entrega do conteúdo.

E, ao contrário que muita gente pensa sites AMP não são apenas para mobile ou cria uma versão limitada do seu site. Com uma estrutura de plugins e temas compatíveis você entregará uma experiência similar de um site tradicional para mobile e desktop.

Definindo o seu perfil

Primeiramente, quando instalamos o plugin precisamos definir qual é o nosso perfil como administradores e editores do seu site, esse é um ponto importante para definir como você irá interagir com o plugin. Existem dois modos: desenvolvedores e usuários experientes e usuários não técnicos que desejam uma configuração simplificada.

Tela de definição de perfil de usuário

Por padrão usuários com perfis de Administradores serão definidos como desenvolvedores, mas essas opções podem ser modificadas a qualquer momento.

Usuários que optarem por um perfil não técnico irão ter uma configuração simplificada e menos notificações referentes aos alertas de validação e também não usarão as ferramentas de desenvolvimento e terão uma ferramenta de validação simplificada.

Comparativo das ferramentas para devs no plugin de amp

Já os usuários que optarem pelo modo desenvolvedor terão as opções que abordaremos a seguir.

Validação com ferramentas para devs no plugin de AMP

Ter uma página totalmente compatível com AMP é ter confiança que o seu conteúdo está seguindo os principais recomendações para entregar uma experiência rápida e responsiva.

O plugin de AMP segue as especificações de validação do framework AMP, E no plugin serão sinalizados erros e a alertas(warnings), esse é um ponto bastante importante no processo, somente erros vão impedir da sua página ser válida.

Para os alertas o plugin irá trazer uma solução mantendo sua página válida, por exemplo, bloquear alguma tag script incluída por algum plugin, neste você precisa ter atenção se o conteúdo está sendo exibido como esperado.

Integração com o Editor

Quando você está trabalhando com o editor de conteúdo do seu WordPress, se o bloco que você incluiu não é compatível com AMP, o plugin irá detectar e adicionar um relatório com mais informações sobre o motivo do erro ou alerta como na imagem abaixo:

Editor gutenberg com mensagens de validação

Essa funcionalidade é útil para você tratar os erros antes de publicar o seu conteúdo.

Validação sobre URLs

Na tela de validação de URLs onde você irá encontrar no menu lateral, na sessão de AMP, com podemos ver na imagem a baixo.

Menu lateral do AMP

Com o tela de validação de URLs você um resumo detalhado de todos os status de validação de sua página. Incluindo o status geral, número de erros encontrados com informações detalhadas sobre o problema.

Nessa tela você irá encontrar uma tabela com as seguintes informações

  • URL: O slug da URL onde o problema foi encontrado
  • Markup status: O número de markup inválidos encontrados e o seu status:
    • revisado
    • não revisado
  • Markup inválido: O tipo de markup inválido encontrado e o número vezes que o erro ocorreu
  • Fonte: Componente do site(tema, plugin, core) responsável pela injeção do markup inválido.
  • Uso de CSS: Percentagem de CSS usada na página (max é 75kb)
  • Última checkagem: a Data da última vez que essa url foi verificada

Índice de Erros

A tela Índice de erro exibe todos os problemas de validação identificados no site, juntamente com informações resumidas sobre cada problema.

Clicando num problema específico temos o detalhamento do problema selecionado, incluindo uma lista dos URLs afetados por ele. Com uma tabela agrupando informações como:

  • Status do Markup
  • Contexto
  • Tipo
  • Ultima vez que o erro foi registrado
  • Quantidade de URLs como o erro

Barra de administração

Além de toda a parte dentro da administração do WordPress o plugin também disponibiliza um ícone na barra de administração para os usuários que definiram o seu perfil como desenvolvedores.

Quando o usuário logado navega no front-end de sua aplicação ele irá ver um ícone do AMP com algumas opções importantes.

Menu para desenvolvedores na barra de administração do AMP

Caso esteja utilizando uma versão emparelhada do plugin(Leitor e Transição) com uma versão AMP e não-AMP é possível, navegar entre as duas versões. Além disso, podemos pedir a reavalição da tela, ir para tela de configurações do plugin e por último a Navegação emparelhada recurso que iremos falar a seguir.

Esse recurso foi introduzido na versão 2.1 do plugin e com ela é possível comparar a versão AMP e a versão não AMP do seu site. Uma vez que, selecionamos essa opção podemos comparar lado-a-lado as duas versões, este recurso é ideal para verificar se a versão AMP está com todos os recursos principais funcionando.

Exemplo de navegação emparelhada AMP

Outra alternativa para utilizar esse recurso, qualquer usuário logado pode adicionar o parâmetro no URL “?amp-paired-browsing=1”, por exemplo:

http://meusite.com/?amp-paired-browsing=1
Code language: JavaScript (javascript)

Para conferir as novidades da versão 2.2 do plugin de AMP clique aqui. Vamos falar mais um pouco sobre as opções a parte técnica do plugin de AMP nos próximos posts, para acompanhar os posts confira a página da categoria.

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.