Ferramentas para devs no Plugin de AMP

Nesse post iremos abordar a ferramenta para desenvolvedores do 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.

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 disponíveis entre desenvolvedores e não desenvolvedores

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

Validação

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.

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)

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.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *