Gerar dados estruturados com JavaScript

Os sites modernos usam JavaScript para exibir muitos conteúdos dinâmicos. Há algumas considerações importantes ao usar JavaScript para gerar dados estruturados nos seus sites. Este guia aborda as práticas recomendadas e estratégias de implementação. Caso você não saiba muito sobre o assunto, veja como os dados estruturados funcionam.

Existem várias maneiras de gerar dados estruturados com JavaScript, mas estas são as mais comuns:

Usar o Gerenciador de tags do Google para gerar JSON-LD dinamicamente

O Gerenciador de tags do Google é uma plataforma que permite gerenciar as tags do site sem editar o código. Para gerar dados estruturados com o Gerenciador de tags do Google, siga estas etapas:

  1. Configure e instale o Gerenciador de tags do Google no seu site.
  2. Adicione uma nova tag HTML personalizada ao contêiner.
  3. Cole um bloco de dados estruturados com suporte no conteúdo da tag.
  4. Instale o contêiner conforme mostrado na seção Instalar o Gerenciador de tags do Google do menu do administrador do contêiner.
  5. Para adicionar a tag ao site, publique o contêiner na interface do Gerenciador de tags do Google.
  6. Teste a implementação.

Como usar variáveis no Gerenciador de tags do Google

O Gerenciador de tags do Google (GTM) é compatível com variáveis para usar informações da página como parte dos dados estruturados. Use variáveis para extrair os dados estruturados da página em vez de duplicar as informações no GTM. A duplicação aumenta o risco de incompatibilidade entre o conteúdo da página e os dados estruturados inseridos via GTM.

Por exemplo, você pode criar dinamicamente um bloco de receita em JSON-LD que usa o título da página como o nome da receita, criando a seguinte variável personalizada chamada recipe_name: 

function() { return document.title; }

Em seguida, use {{recipe_name}} na sua tag HTML personalizada.

Recomendamos criar variáveis para coletar todas as informações necessárias da página.

Veja um exemplo de conteúdo da tag HTML personalizada:

<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "{{recipe_name}}",
    "image": [ "{{recipe_image}}" ],
    "author": {
      "@type": "Person",
      "name": "{{recipe_author}}"
    }
  }
</script>

Gerar dados estruturados com JavaScript personalizado

Outra forma de gerar dados estruturados é usar JavaScript para gerar todos os dados ou adicionar informações ao que foi renderizado no servidor. De qualquer forma, a Pesquisa Google é capaz de compreender e processar dados estruturados disponíveis no DOM ao renderizar a página. Para saber mais sobre como a Pesquisa Google processa a linguagem, veja o guia básico de JavaScript.

Veja um exemplo de dados estruturados gerados por JavaScript:

  1. Encontre o tipo de dados estruturados em que você tem interesse.
  2. Edite o HTML do site para incluir um snippet JavaScript como o exemplo a seguir. Consulte a documentação do seu provedor de hospedagem ou CMS (sistema de gerenciamento de conteúdo), ou pergunte aos desenvolvedores.
    fetch('https://api.example.com/recipes/123')
.then(response => response.text())
.then(structuredDataText => {
  const script = document.createElement('script');
  script.setAttribute('type', 'application/ld+json');
  script.textContent = structuredDataText;
  document.head.appendChild(script);
});
  3. Confira a implementação com o teste de pesquisa aprimorada.

Como usar a renderização do lado do servidor

Se você usa a renderização do lado do servidor, também pode incluir os dados estruturados na saída renderizada. Consulte a documentação da sua estrutura para saber como gerar o JSON-LD para o tipo de dados estruturados do seu interesse.

Como testar a implementação

Para garantir que a Pesquisa Google possa rastrear e indexar os dados estruturados, teste a implementação:

  1. Abra o teste de pesquisa aprimorada.
  2. Insira o URL que você quer testar.
  3. Clique em Testar URL.

    Sucesso: se você fizer tudo corretamente, e o tipo de dados estruturados for compatível com a ferramenta, você vai ver a mensagem "A página está qualificada para pesquisa aprimorada".
    Se você estiver testando um tipo de dados estruturados que não é compatível com o teste de pesquisa aprimorada, confira o HTML renderizado. Se o HTML renderizado conter os dados estruturados, a Pesquisa Google poderá processá-los.

    Tente novamente: em caso de erros ou avisos, é provável que haja um erro de sintaxe ou uma propriedade ausente. Leia a documentação do seu tipo de dados estruturados e verifique se você adicionou todas as propriedades. Se o erro persistir , verifique também o guia sobre corrigir problemas de JavaScript relacionados à pesquisa.