Personalizar

AMP

O AMP (antigo Accelerated Mobile Pages) é uma estrutura de código aberto que permite que os navegadores e aplicativos carreguem os posts do blog dos seus sites mais rapidamente em dispositivos móveis. Confira o site do AMP para saber mais detalhes sobre como ele funciona.

O AMP é ativado por padrão em todos os sites do WordPress.com. A maior vantagem do AMP é o rápido carregamento em dispositivos móveis. Todos os posts do blog do seu site terão versões compatíveis com o AMP geradas de maneira dinâmica. Página inicial, arquivos e páginas não são compatíveis no momento. Os resultados do Google para o seu site também serão marcados com o emblema do AMP em buscas feitas em dispositivos móveis.

amp-serp

Sumário


Ativar ou desativar AMP

Para a maioria dos usuários, não é necessário desativar o AMP, pois isso fará seu site exibir a visualização responsiva do tema ao Google e removerá o emblema do AMP nos resultados da pesquisa. Visitas regulares ao site com o uso de dispositivos móveis ainda mostrarão o tema responsivo não AMP normal. A visualização do AMP só será mostrada em um acesso de dispositivo originado dos resultados de pesquisa do Google.

Caso você ainda prefira exibir a versão não AMP do seu site ao Google (e potenciais visitantes do site), basta usar o controlador do AMP para desativá-la. Clique em Meus sites e vá em Configurações → Desempenho.

↑ Tabela de Conteúdo ↑

Sites privados/ocultos

O AMP está disponível somente para sites públicos que não bloqueiam rastreadores. Se a caixa do AMP não estiver disponível, defina a Privacidade do site como Público.

↑ Tabela de Conteúdo ↑

Personalização

Para alterar a aparência da versão do AMP em seus posts, acesse a página de configurações, vá no módulo AMP e clique em Editar design. Como as especificações do AMP exigem um design de página minimalista, você verá opções para alterar a cor do texto do cabeçalho, o plano de fundo do cabeçalho, a cor do link e o esquema de cores do fundo.

O CSS personalizado não se aplica à versão do AMP dos posts.

↑ Tabela de Conteúdo ↑

AMP nos planos Negócios e eCommerce

O restante deste guia se aplica somente aos sites com planos Negócios e eCommerce com plugins instalados.

O plugin do AMP vem pré-instalado em seu site e facilita esse processo, pois administra a substituição de componentes dos seus sites por outros compatíveis com o AMP.

Para usar este plugin, é necessário acessar a área do painel WP Admin do seu site.

Geral

Na guia Painel WP Admin → AMP → Geral, você verá três modos de website.

Configurações de plugin do AMP (clique aqui para ampliar)

Padrão: neste modo, o plugin possibilita que sites tenham o AMP como a única versão de conteúdo tanto para computadores quanto para dispositivos móveis. Todo o site será veiculado como páginas válidas do AMP (chamadas de primeiro AMP).

Neste modo, não há nenhuma consulta ?amp adicionada às URLs.

Transitório: se disponível em seu tema, o AMP usará os estilos e o modelo de um tema para exibir conteúdo AMP e não AMP. Isso significa que ambos os tipos de conteúdo terão a mesma aparência e estilo.

Neste modo, a consulta ?amp é adicionada às URLs para conteúdo AMP.

Neste caso, as páginas do AMP são normalmente vistas em dispositivos móveis somente a partir de determinadas fontes, como as pesquisas do Google e o Twitter, ou adicionando manualmente a consulta ?amp.

Leitor: o conteúdo do AMP será veiculado em modelos básicos (ou seja, com a barra azul no parte superior), que são separados dos modelos do seu tema ativo.

Neste modo, as URLs para posts do AMP normalmente terminam em /amp/ e para páginas terminam em ?amp.

Para ver as configurações do plugin do AMP, acesse o Painel WP Admin.

Observe que o modo leitor tem menor probabilidade de interferir na funcionalidade fornecida por um plugin ou tema de terceiros.

Analytics

Primeiro, é necessário configurar o Google Analytics no seu website. Veja como configurar o Google Analytics neste link.

  1. Na sua conta do Google Analytics, clique em Administrador → Configurações da propriedade. Você vai procurar seu ID da propriedade, que será parecido com isso: UA-XXXXX-Y.
  2. Corrija o script seguinte, substituindo o UA-XXXXX-Y pelo seu ID da propriedade.
{ "vars": { "account": "UA-XXXXX-Y" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } }

3. Copie o script e, no seu site, acesse Painel WP Admin → AMP → Analytics. No campo de tipo, insira googleanalytics.

Cole o código no campo Configuração JSON.

4. Clique em Salvar.

Índice de erros e URL validadas do AMP

Essas duas páginas aparecem somente quando o AMP está configurado como Padrão ou Transitório.

  • A palavra “erro” talvez seja um pouco inadequada, pois implica que algo precisa de correção, o que, muitas vezes, não é o caso.
  • Os “erros” são itens identificados como incompatíveis com o AMP e que foram removidos da visualização da página (que é a atitude esperada do plugin do AMP nos modos Padrão e Transitório). Seus arquivos de tema não são editados.
  • Esses itens normalmente (se não sempre) são JavaScript e CSS em excesso (CSS acima do limite de 50 KB).
  • O índice de erros lista todos esses itens em todo o site.

Em geral, você pode ignorar esse aviso, exceto se algo estiver incorreto ou não estiver funcionando na página.

URLs validadas são uma lista de todas as páginas processadas pelo plugin do AMP e que têm uma página válida do AMP.

Acesse a lista de erros por página nesta seção.

Erros de estilo

​Podem acontecer quando o CSS obrigatório em determinada parte da página é eliminado como parte do CSS que ultrapassou o limite de 50 KB.

Erros de estilo (clique para ampliar)

Por exemplo, cores incorretas.

  • ​Podem acontecer quando o CSS obrigatório para determinada parte da página é eliminado como parte do CSS que ultrapassou o limite de 50 KB.
  • Opções para corrigir esse problema:
    1. Procure o CSS entre os erros que você pode remover completamente do site (como os de plugins ou de módulos do Jetpack que podem ser desativados).
    2. Se a página tiver muitos CSS em linha do editor de blocos ou do criador de página, considere colocar menos itens nela, por exemplo, dividindo-a em páginas filhas ou fazendo paginação.
    3. Escolha “manter” o CSS: isso fará com que todas as páginas que contêm o CSS específico não sejam páginas do AMP válidas e exibam o formato não AMP.
    4. Desative o AMP na página única editando-a e clicando na opção “Ativar AMP” nas configurações de Status e visibilidade na guia Documento​.
Erros funcionais (JavaScript)
Erros funcionais (JavaScript) (clique para ampliar)

​Por exemplo, o widget do Twitter não aparece, o widget do Facebook não mostra posts, o slideshow, os submenus suspensos e o menu de dispositivos móveis não funcionam.

Esses tipos de problema ocorrem porque o JavaScript usado por esses itens para carregar ou fazer animações foi removido.

Como lidar com os erros

Como a palavra “erro” pode ser imprecisa, isso normalmente significa uma ou duas coisas.

  • Em geral, não é necessário fazer nada.
  • Se houver um erro de estilo no site ou uma funcionalidade que depende do JavaScript não estiver funcionando, talvez seja necessário fazer correções.

O plugin do AMP remove o JavaScript e o HTML que não está de acordo com sua especificação das versões de páginas do AMP (onde /?amp é adicionado ao fim da URL da página).

Ele também remove o CSS que ultrapassa o limite de 50 KB (depois de tentar reduzi-lo).

Contanto que seu tema/plugin funcione sem aquele CSS ou JavaScript, a remoção não impedirá você de ter uma boa experiência com o AMP.

É de sua responsabilidade verificar se a versão do AMP do seu site permite a remoção daquele item.

Para isso, acesse Painel WP Admin → AMP → Índice de erros. Aqui, você verá os erros e detalhes sobre eles.

Clique para ampliar

Passe o mouse em um erro, clique em Detalhes, role para baixo até a lista de URLs em que o erro é exibido e clique em Ver.

Clique para ampliar

Isso mostrará a página da versão do AMP. Assim, você poderá ver se está contente com a aparência da versão e poderá clicar em “Confirmar remoção”. Ao fazer isso, você confirma que autoriza o AMP a remover aquele script para versões do AMP do site.

Se algo estiver errado, como um menu que não está funcionando adequadamente, ou os widgets do Twitter ou Facebook não estão visíveis, clique em “Manter”. Com isso, os scripts serão mantidos e executados. Isso também significa que a página não será compatível com o AMP.

Se não for possível remover a maioria dos scripts, veja as três principais ações que você realizar:

  1. Altere para Plugins/temas compatíveis com o AMP.
  2. Use um tema secundário e/ou plugin personalizado que evita a saída de marcação inválida. Isso favorecerá a inclusão de componentes do AMP.
  3. Ative o modo Leitor. Como acima, as páginas do AMP não terão a mesma aparência do restante do site, mas terão uma versão completamente compatível com ele.
  4. Você pode desativar o AMP em páginas específicas desativando a opção “Ativar AMP” nas configurações de Status e visibilidade na guia Documento. Com isso, você não terá uma versão da página compatível com o AMP.