Como Inserir Dados Estruturados via Google Tag Manager

Olá pessoal de SEO! Neste primeiro artigo de 2019, confira como inserir marcação Schema JSON-LD via Google Tag Manager!

Quer Rich Snippets nos resultados Google? Para isso, será necessário inserir marcação de dados estruturados em seu site, mas isso nem sempre é uma tarefa fácil, ainda mais quando se depende de terceiros (normalmente, equipe de TI) para inseri-la no código. Este artigo ensina a você uma forma mais simples de alterar o código Schema de seu site de forma independente, confira!

O que é Google Tag Manager?

Google Tag Manager, ou também GTM, é uma ferramenta desenvolvida pelo Google para facilitar a inserção de tags de tracking (rastreamento) de campanhas em um site.

A principal finalidade é permitir que os profissionais de Marketing (sejam internos ou agências) consigam inserir, editar e remover as tags que permitem acompanhar a ação do usuário, sem depender de um profissional de TI para realizar as alterações no código. Portanto, o GTM traz mais autonomia e agilidade ao time de MKT Digital, além de melhor organização e histórico das alterações realizadas em tags.

Segundo o próprio Google:

O Gerenciador de tags do Google é uma ferramenta gratuita que elimina as tarefas entediantes de edição de código de seu website. A interface da Web fácil de usar permite que seus colegas profissionais de marketing adicionem e atualizem as tags de seus próprios websites, incluindo snippets de código JavaScript para acompanhamento de conversões, análise do site, remarketing e muito mais. Eles podem fazer tudo isso sem incomodar você, o que libera tempo para você relaxar e se concentrar em outras tarefas importantes.

O que são Dados Estruturados?

Não vou me aprofundar neste tópico, pois acredito que a maioria dos profissionais de SEO já possui esse conhecimento. De forma simplificada: inserir marcação de dados estruturados significa dar mais semântica aos dados contidos numa página, permitindo que os bots entendam a informação que cada campo representa.

Há diversos formatos para inserir essa marcação, sendo o padrão Schema o mais atual, disponibilizando vários tipos de acordo com o assunto do site (ex.: receita, curso, produto, oferta, organização, evento, etc.)

É possível escolher 1 entre 3 maneiras diferentes para inserir marcação Schema:

  • Microdata/Microdados: no próprio html, insira atributos microdados no corpo da página que indicam do que se trata o valor da tag html em que foram inseridos;
  • RDFa: assim como microdados, também são marcações diretamente no html da página;
  • JSON-LD: a sigla LD representa Linked-Data, ou JSON for Linking Data. Neste caso, basta criar um script para indicar ao Google as marcações de dados estruturados – esta maneira será usada neste artigo junto com GTM. Acredito ser a forma mais prática quando a alteração do html pode ser uma tarefa difícil ou burocrática.

Dados Estruturados = Rich Snippets!

A partir do momento em que se indica ao Googlebot o que representa a informação da página, o Google tem como exibir resultados de pesquisa mais ricos de informação ao usuário, ou seja, os Rich Snippets. Exemplos:

  • Marcação de receita: exibe foto da receita, quanto tempo leva para execução, classificação e quantidade de comentários dos usuários;
  • Marcação de produto de e-Commerce: preço, disponibilidade em estoque, classificação e quantidade de comentários de quem já comprou;
  • Marcação de vagas de emprego: informações sobre vagas diretamente na página de resultados Google;
  • etc.

Ter um site destacado nos resultados do Google com foto, estrelas e mais informações pode atrair a atenção do usuário para o clique. Ou seja: a implementação de Schema não é um fator de ranking – ter a marcação por si só não fará seu site ganhar posições no Google, porém poderá aumentar a chance do clique. Por consequência, quanto mais cliques do usuário (e o site retê-lo navegando), melhor poderá ser o posicionamento na SERP.

Porém, importante destacar que ter marcação de dados estruturados não é certeza garantida de que o Google irá exibir Rich Results na página de resultados orgânicos.

Inserindo Schema JSON-LD via GTM

Se seu site não possui CMS com plugins prontos de inserção de dados estruturados e você precisará colocar Schema em seu código, poderá escolher uma das maneiras citadas acima para realizar a marcação.

Observação: mesmo que você possua um CMS com plugin pronto (ex.: WordPress), é importante para o profissional de SEO saber elaborar marcação Schema, pois facilitará na validação e entendimento de como os dados estruturados funcionam. E lembre-se: todo profissional de SEO precisa saber trabalhar com sites desvinculados de CMS de mercado, ou seja, mão na massa!

Você pode inserir a marcação no código ou usar recurso do Google Tag Manager, a seguir:

1 – Criar código JSON-LD com marcação Schema

Antes de iniciar qualquer configuração no Google Tag Manager, é preciso criar o script JSON-LD a ser inserido na página desejada.

Usarei neste exemplo marcação Schema de curso. Meu exemplo considera dois cursos, assim você já confere como inserir mais de uma marcação utilizando o mesmo script (observe o uso de colchetes):

<script type="application/ld+json">
[
{
  "@context": "http://schema.org",
  "@type": "Course",
  "name": "Introdução ao SEO",
  "description": "Aprenda o básico sobre otimização de sites para buscadores.",
  "provider": {
    "@type": "Organization",
    "name": "SEO News"
  }
},
{
  "@context": "http://schema.org",
  "@type": "Course",
  "name": "SEO Avançado",
  "description": "Técnicas avançadas de SEO.",
  "provider": {
    "@type": "Organization",
    "name": "SEO News"
  }
}]
</script>

O Google tem diversos exemplos de marcação que poderão ajudar – o importante é validar na Ferramenta de Teste de Dados Estruturados (também chamada pela sigla SDTT, do nome em inglês Structured Data Test Tool) se há erros a corrigir antes de inserir em seu site. Escolha a opção Snippet de Código e cole seu script JSON-LD.

2 – Criar uma conta no Google Tag Manager

Se você ainda não utiliza Google Tag Manager, a primeira etapa é criar uma conta e inserir o código GTM em seu site – lembrando que, ao começar a trabalhar com gerenciador de tags, você pode remover script do Google Analytics de seu site e criar tag GA dentro do GTM (e todos demais eventos GA, tags de terceiro, etc passam a ser criados dentro do Google Tag Manager).

Se você já tem uma conta GTM, confira abaixo como criar a tag para JSON-LD.

3 – Adicionar tag GTM do tipo HTML personalizado

  • Na tela inicial do GTM, clique para adicionar uma nova Tag;
  • Escolha o tipo de tag Personalizar / HTML Personalizado;
  • No campo que abrir, cole todo seu script JSON-LD com sua marcação Schema, inclusive as tags de abertura e fechamento do script;
  • Na área logo abaixo, em Acionamento, é necessário informar quando a tag deverá ser disparada – é possível definir disparo da tag quando há exibição da página (e o código Schema será inserido nesse momento), mas há 2 situações conforme o caso:
    • Todas as páginas: sua marcação Schema deverá estar em todas as páginas do seu site? Se sim, já há disparador pronto All Pages / Exibição de Página;
    • Página(s) específica(s): sua marcação Schema deve estar em uma ou mais páginas específicas? É preciso, então, criar um acionador com condicional de página.
      • Clique no ícone + no canto superior direito para criarmos um novo acionador;
      • Escolha o tipo Exibição de página;
      • Em seguida, selecione a opção Algumas exibições de páginas;
      • Selecione no 1º campo a opção Page URL e insira a condicional (ex.: contém, ou é igual a, regex) e a URL da página em que deseja sua marcação Schema.
  • Dê um nome para seu acionador, nome para a tag e salve.

4 – Validar a tag GTM: Visualizar disparo da tag no site

Antes de publicar a tag, é possível validar se o GTM está disparando no momento e página certos. Clique no botão Visualizar, disponível na área de trabalho do Google Tag Manager.

Recarregue seu site para que o rodapé de validação do GTM seja exibido. Feito isso, acesse a página em que deverá conter o JSON-LD – observe no rodapé GTM que sua tag será disparada.

Lembrando que a visualização somente é possível quando o código de configuração GTM já estiver inserido no site.

5 – Publicar o contêiner Google Tag Manager

Com a tag validada, é hora de publicar o Contêiner, ou seja, colocar tag e acionador em produção. Clique em Enviar, adicione uma descrição sobre esse contêiner e pronto! Sua marcação Schema já faz parte de seu site na(s) página(s) desejada(s).

Bônus: JSON-LD no GTM com Variáveis do Site

Imagine que você deseja implementar Schema através de JSON-LD em seu site, porém alguns campos são variáveis. Exemplo: uma loja virtual pode ter informações de preço e estoque alterados a qualquer momento, isso significa que marcação estática não funcionaria, pois resultaria em valores errados nos Rich Snippets.

Em situações como essa de conteúdo dinâmico, é possível criar variáveis dentro do Google Tag Manager capazes de coletar o valor de atributos no HTML e alterar dentro do script JSON-LD. Confira a seguir:

1 – O primeiro passo é ter seu html identificável – para coletar dados da página, cada tag html (campo a extrair o valor desejado) precisa ter atributo ID único e preenchido. Além do ID, é possível também usar valor do atributo Class (seletor de CSS);

2 – No GTM, clicar no menu lateral em Variáveis, depois em Nova;

3 – Ao configurar sua variável, na lista exibida selecione Elemento DOM;

4 – Na caixa de seleção Método de seleção, escolha o que irá usar Código ou Seletor de CSS;

5 – Na caixa de texto Código do elemento/Seletor de elementos (depende do que escolheu no passo anterior), informe o ID/class CSS;

6 – Salve sua variável;

7 – Retorne para edição de sua tag com o JSON-LD;

8 – No local em que deverá ter conteúdo dinâmico, insira o nome de sua variável entre chaves-duplas: ao digitar {{ exibirá uma lista de variáveis, selecione a desejada.

9 – Pronto! Agora você tem seu script Schema com conteúdo dinâmico!

Exemplo de dados estruturados Schema de Curso em JSON-LD via Google Tag Manager

SDTT: Script Direto no Código X Script via GTM

Após subir em produção seu script via GTM, é hora de checar a URL na Ferramenta de Teste de Dados Estruturados (SDTT)… mas… sua marcação Schema não irá aparecer.

Significa que não funcionou? Não necessariamente.

Ao conferir o código-fonte da página (Ctrl+U), seu script Schema não estará lá – é possível vê-lo através da opção Inspecionar Elemento do Chrome (botão direito na página). O script da marcação estará ao final, antes da tag HTML </body>.

Já foi possível, no passado, testar as páginas com dados estruturados via GTM através da URL no SDTT. Possivelmente, a ferramenta teve alguma alteração:

Tweet de John Mulller sobre JSON-LD por Google Tag Manager na Ferramenta de Teste de Dados Estruturados

Lembre-se que o código foi validado anteriormente no SDTT pelo script JSON-LD, ou seja, apenas a ferramenta de teste não exibe quando informada a URL, mas o código já foi testado (e o importante é o Googlebot identificá-lo). Após alguns dias dias, você conseguirá checar no antigo Google Search Console se a marcação foi encontrada e sem erros.

Observação: testei a proposta do tweet de Simo Ahava de maio/2018 sobre outra maneira de elaborar o script, de forma que seja identificado pelo SDTT. Os comentários do tweet indicam ter funcionado na época, mas no meu teste quase um ano depois, não funcionou. Há comentários do final de 2018 no tweet sobre não funcionar mais, sem resposta de Ahava.

Teste de Resultados Avançados – Rich Results Test

A boa notícia é que o Google lançou a Ferramenta de Teste de Resultados Avançados, ou seja, uma ferramenta que também identifica marcação de dados estruturados válida para exibição de Rich Results. É possível realizar o teste a partir da URL ou código, e o melhor: a ferramenta checa o HTML renderizado, capaz de identificar a marcação Schema em JSON-LD inserida via Google Tag Manager!

Apenas é importante citar que, quando esse artigo foi escrito, a ferramenta estava em versão Beta. Nem todos os rich results e tipos de erro são compatíveis ainda.

Ferramenta Google de teste de resultados avançados, por URL ou código

Após inserir a URL da página que contém código inserido, ou código JSON-LD diretamente na ferramenta, a resposta do validador poderá ser negativa (“página não qualificada para rich results“), caso não seja identificada a marcação correta ou se você estiver utilizando alguma marcação que a versão beta do testador ainda não suporta a validação. Observe que há alguns links: é possível ver o HTML renderizado e mais informações da versão beta.

Página não qualificada para Google Rich Results

Se sua marcação de dados estruturados já for aceita por esta ferramenta e o código estiver implementado corretamente, você verá a mensagem:

Página qualificada para Google Rich Results

A ferramenta de teste de resultados avançados também exibe quais marcações foram identificadas, exemplo:

Resultado Rich Results da ferramente de teste de resultados avançados do Google

Após o Googlebot identificar sua marcação na página e não houver erros, os tipos de dados estruturados encontrados são listados no novo Google Search Console (assim como também acontecia na versão antiga do GSC). Quando este artigo foi escrito, os seguintes tipos de marcação têm relatórios de status no Search Console:

  • Evento
  • FAQ
  • Checagem de fatos
  • How-to
  • Anúncio de emprego
  • Logotipo
  • Produto
  • Página de perguntas e respostas
  • Receita
  • Caixa de pesquisa de sitelinks

Você poderá visualizar os rich results identificados no menu lateral esquerdo do Search Console, na seção “Melhorias”. Para acompanhar a atualização de tipos suportados, confira o Ajuda GSC na página Relatório de status de pesquisa aprimorada. Lembrando que você verá os tipos no Search Console após o Googlebot rastrear sua página e desde que a marcação seja válida. Se você acabou de implementar o código em seu site, aguarde alguns dias até que a página seja rastreada.

Google Search Console Melhorias - Rich Results

Conclusão

A opção de implementar dados estruturados – sem depender do time de TI – facilita e agiliza em muito o trabalho do profissional de SEO. Não há dúvidas de que a inserção, edição e remoção do script Schema por um gerenciador de tags é mais simples do que aguardar, em muitos casos, uma equipe terceira realizar essas ações.

Porém, pouco mais de um mês depois do tweet acima de John Muller, porta-voz do Google, este veio a se pronunciar novamente em julho de 2018 no Twitter para não confiar na implementação de Schema por GTM.

John Mulher do Google afirma não confiar no Google Tag Manager para inserção de dados estruturados

Como o próprio nome diz, o Google Tag Manager não foi criado com a finalidade de inserir dados estruturados, mas facilitar a implementação de tags de campanhas de Marketing. Desta forma, acho natural que o porta-voz do Google não recomende como primeira opção para implementar Schema. Interpreto o tweet como algo do tipo: “O Google não criou o Tag Manager com esse objetivo, portanto não conte com suporte para essa finalidade.“.

De qualquer forma, se o Googlebot rastreou seu site, foi capaz de identificar seus dados estruturados e você pode vê-los no Google Search Console, significa que sua implementação deu certo. Mas lembre-se: ter dados estruturados não significa que o Google sempre exibirá rich snippets para o seu site durante uma busca do usuário. Importante é melhorar a semântica e torcer para vermos rich results na SERP.

Gostou dessa dica? Espero que dê certo para seu site!