Ferramentas para devs no 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.

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

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.

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.

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:

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 na 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 da sua aplicação, ele irá ver um ícone do AMP com algumas opções importantes.

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.

Navegação emparelhada

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.

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=1Code 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.