Guia para JSON-LD para iniciantes

Leonardo Lima·04/10/2022·0 comentário

Se você quer ficar entre os primeiros resultados de pesquisa do Google, você precisa conhecer o JSON-LD. Essa linguagem de marcação de dados estruturados é importantíssima para que seu site ultrapasse seus concorrentes e fique em destaque na primeira página do Google.

JSON-LD significa JavaScript Object Notation for Linked Data, que consiste em arrays multidimensionais, parece complicado demais não é mesmo? Mas não é! Nesse artigo vou te mostrar que JSON-LD não é um bicho de 7 cabeças e como VOCÊ pode dominar essa ferramenta poderosíssima para ranquear entre os primeiros no Google!

O que é JSON-LD?

Como dito na introdução, JSON-LD é um JavaScript. Mas não se preocupe, para utilizá-lo você não precisa saber programar, basta conhecer as bibliotecas de modelos, seus usos ou até mesmo as ferramentas que geram esse código.

É um formato de implementação para estruturação de dados análogos a Microdata e RDFa. Normalmente em SEO, o JSON-LD é implementado aproveitando o vocabulário Schema.org, um esforço conjunto do Google, Bing, Yahoo! e Yandex em 2011 para criar um vocabulário de dados estruturados unificado para a web.

O JSON-LD é mais simples de implementar do que Microdata e RDFa, devido à capacidade de simplesmente colar a marcação no documento HTML, em vez de ter que envolver a marcação em elementos do HTML.

O que o JSON-LD faz?

O JSON-LD anota os elementos em uma página, estruturando os dados, que podem ser usados ​​por mecanismos de pesquisa como o Google, Bing e Yahoo para facilitar o entendimento dos elementos, levando à criação de uma internet melhor e mais organizada.

Onde no HTML o JSON-LD fica?

O Google recomenda adicioná-lo na seção<head> da página, porém não tem problema se o código estiver dentro do <body>. O Google também consegue capturar tags de JSON-LD geradas dinamicamente no DOM.

Conhecendo a estrutura do JSON-LD

As tags imutáveis

<script type=”application/ld+json”> {

Quando você vê os dados estruturados, a primeira coisa que você deve encontra é uma tag <script>. A tag <script> acompanhada do atributo type é como falar: “Ei, navegador, estou chamando o JavaScript que contém JSON-LD”.

Dica: lembre-se de fechar todas as tags que você abrir.

“@contexto”: “https://schema.org”,

O segundo elemento permanente na marcação JSON-LD é o @context com o valor de http://schema.org. O @context fala para o navegador: “Ei, navegador, este é o vocabulário que estou referenciando. Você pode encontrá-lo em http://schema.org.” Isso é bom para um SEO, pois podemos usar qualquer um dos tipos de itens e propriedades que a Schema.org define.

Além disso, dê uma olhadinha naquela vírgula no final da declaração. Vírgulas informam para o mecanismo de busca: “Há mais informações, não pare de analisar os dados estruturados.”

Dica profissional: lembre-se das suas vírgulas e sempre verifique seu código na Ferramenta de teste de dados estruturados do Google. As vírgulas são um ponto dolorido tradicional para muitos programadores e o JSON-LD não oferece consolo aqui, vírgulas mal usadas significam código inválido.

“@Type”: “…”,

O último elemento no esquadrão copiar/colar do esquema JSON-LD é a marcação @type. @type especifica o tipo de item que está sendo marcado. Você pode encontrar uma lista completa de todos os tipos no link: https://schema.org/docs/full.html.

@type para aninhamento: ao usar informações aninhadas, você precisará adicionar outro @type, é importante entender isso especialmente nas marcações do tipo “product” e “breadcrumb”.

Atributo – valor

A próxima etapa é anotar informações sobre o tipo de item. Você pode encontrar as propriedades do item na página Schema.org do tipo de item.

Em termos de sintaxe do JSON-LD, existem dois elementos importantes para cada propriedade do item:

  1. Atributo – Isso vem da biblioteca do Schema.org e deve estar sempre entre aspas duplas retas, pode parecer bobo, mas as aspas curvas e simples não são a mesma coisa e vão atrapalhar na validação, e o atributo informado deve pertencer às propriedades permitidas no tipo de item.
  2. Valor – É importante que o valor faça sentido com o atributo e seja individual (ou seja, cada valor deve ser anotado separadamente. Na situação de vários valores para uma propriedade de item, use colchetes). Strings (caracteres) e URLs precisam das “aspas duplas retas”. Números, inteiros, floats ou doubles sozinhos não precisam de aspas, mas também não há problema em colocá-los entre aspas (isso significa apenas que eles serão considerados um tipo de dados string).

Exemplo: 

"familyName":"Silva"

Onde “familyName” é o atributo e “Silva” é o valor.

Colchetes

Os colchetes existem para situações em que há vários valores para um atributo de item. Um uso comum é aproveitar a propriedade de item sameAs usando [colchetes] para listar várias plataformas de redes sociais.

Nota: Não há vírgula após o último elemento entre colchetes. Isso indica não haver mais informações entre colchetes.

Exemplo 1:

"familyName":["Silva","Costa"]

Onde os valores Silva e Costa estão separados por aspas retas e virgula, porém, estão dentro de colchetes.

Exemplo 2:

"sameAs":["https://seomestre.com.br/",
   "https://www.youtube.com/channel/UCUnhOcHSxuxunBc7x-gXB4A",
   "https://www.facebook.com/SEOMestreOficial",
   "https://www.instagram.com/seomestreoficial/"]

Onde o atributo “sameAs” é preenchido com os links das redes sociais como os valores, dentro de colchetes e separados por vírgula.

Aninhamento

O aninhamento é como as informações são organizadas em camadas ou os objetos contêm outros objetos. A imagem das bonecas russas é uma analogia comum, onde bonecas grandes contêm bonecas menores dentro delas.

O aninhamento é vital para marcar com precisão o JSON-LD, porque você terá certas propriedades de item que pertencem a tipos de item que não pertencem a outros.

O aninhamento em JSON-LD começa com o atributo do item. Dentro do primeiro tipo de item (ex. Movie) você deve primeiro usar a propriedade do item (ex. actor, director, image). Esse atributo do item é identificado e então devemos abrir chaves com o novo tipo de item (conforme indicado pelo “@type”:) e dados de atributo-valor.

Lista de verificação de aninhamento JSON-LD:

  • Deve usar a propriedades do item (específica para o tipo de item)
  • O valor deve ir dentro de chaves
  • Você DEVE identificar o tipo de item dessa propriedade
  • As propriedades de atributo/valor devem ser incluídas (normalmente há requisitos para o que precisa ser incluído)
  • Nenhuma vírgula antes do colchete de fechamento
  • Vírgula após fechar colchetes se houver mais propriedades de item (se não, será seguido por uma chave)

Uso comum: na marcação do tipo de item product (produto), o price (preço) é aninhado em um tipo de item offer (oferta) e as classificações também são aninhadas!

Armadilhas comuns no JSON-LD

Caso sua marcação não estiver validando na Ferramenta de teste de dados estruturados do Google e você souber o motivo de isso estar acontecendo, verifique esta lista. Abaixo estão algumas das principais armadilhas na criação de marcação de dados estruturados JSON-LD.

  1. Sintaxe
    • “” não são o mesmo que “” (Aspas retas e curvas são diferentes)
    • Cuidado com as vírgulas
  2. Vocabulário
  3. Violação de política
    • Todas as informações colocadas no código devem estar na página; adicionar informações que não estão na página provavelmente não aparecerá nos resultados de pesquisa e é contra as diretrizes do Google
    • Também é contra as regras se envolver em práticas manipuladoras
    • Verifique/reveja as políticas de dados estruturados do Google
  4. Microsoft
    • Copiar/colar do Word/Excel pode criar problemas (aspas adicionadas, formatação de estilo adicionada)
    • A Microsoft muda de “” para “”
    • Solução: use um editor de HTML de sua preferência

Adicionando JSON-LD ao site

O processo de criação de dados estruturados JSON-LD depende do conforto com o vocabulário Schema.org e a sintaxe JSON-LD. Abaixo descrevo um processo para uma pessoa iniciante em JSON-LD enquanto desenvolve uma compreensão mais profunda do vocabulário.

  1. Responda mentalmente:
    • O que você quer marcar?
      • Objetivo: Determinar que você pode marcar o conteúdo com o vocabulário Schema.org. Algumas coisas podem fazer sentido conceitualmente, mas não estão disponíveis no vocabulário.
    • Por que você quer marcar?
      • Objetivo: Você não quer marcar o conteúdo apenas por marcá-lo; você deseja marcar o conteúdo que ajudará os mecanismos de pesquisa a entender as informações mais importantes em sua página e maximizar sua capacidade de mostrar que você é a melhor opção para os usuários.
      • Procure recursos sobre as marcações compatíveis com o Google, como elas estão sendo usadas e exemplos.
  2. Se você estiver usando uma marcação que o Google está usando (ou seja, recursos no Google), abra a página de documentação específica e todos os exemplos relevantes
    • Você NÃO PRECISA criar a marcação JSON-LD do zero. Use os exemplos do Google para se basear nas marcações. (não há necessidade de reinventar a roda! #eficiência ☺).
  3. Abra a página do tipo de item Schema.org
    • Especialmente quando você está começando com o Schema.org, folheando a página de documentação técnica do Schema.org para obter uma ideia geral do que o tipo de item envolve, quantos sites estão usando essa marcação e suas várias propriedades podem facilitar um melhor entendimento à medida que você continue ao longo de sua jornada de dados estruturados. Depois de um tempo, você só precisará entrar nessa página para aprender novas marcações.
  4. Copie/cole os elementos imutáveis ​​(ou seja, de <script> até “@type”:)
    • Economize tempo e energia mental. 
    • Às vezes, nos exemplos do Google, eles deixam de fora as tags <script>, mas entenda que elas são vitais para o conteúdo do documento HTML. JavaScript não pode ser analisado sem tags <script>.
  5. Adicione o tipo de item desejado que você pretende marcar como o valor de @type:
  6. Liste atributos e valores do item
    • Esta etapa não requer sintaxe e é mais um exercício de organização mental. Concentre-se no que você deseja marcar – não se preocupe com a questão ainda. Basicamente, você quer expor seus pensamentos antes de começar a entender “como”.
    • Muitas vezes, você pode ter ideias sobre o que deseja marcar, mas pode não saber necessariamente se é possível dentro do vocabulário ou como está aninhado.
  7. Adicione a sintaxe JSON-LD aninhando onde necessário/apropriado
    • A etapa essencial em que você coloca tudo na sintaxe, aninha-o e monta a marcação.
  8. Teste com a Ferramenta de teste de dados estruturados
    • Confirme se os dados estruturados estão validando e se todas as propriedades do item estão listadas e precisas.
  9. Determine a estratégia para adicionar à página da web
    • Você pode simplesmente colar uma marcação na seção <head>. 

Ferramentas para criar JSON-LD de forma automática

Existem ferramentas na internet que te ajudam a criar a marcação JSON-LD de forma automática, sem que você precise programar, basta saber quais informações preencher nos campos, testar o código gerado e adicionar no seu site!

Uma das que mais utilizo é a Schema Markup Generator da Merkle, nela basta selecionar o tipo de marcação que deseja fazer, desde artigos, eventos, pessoas, vídeos e websites (vale notar que nem todos os tipos de marcação que o Google já aceita estão disponíveis nessas ferramentas) e seguir preenchendo os campos solicitados, veja o exemplo desse mesmo artigo na imagem abaixo:

Este foi o código gerado pela ferramenta utilizando as informações que eu preenchi:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://seomestre.com.br/guia-basico-de-seo/json-ld-para-iniciantes/"
  },
  "headline": "Guia para JSON-LD para iniciantes",
  "description": "Acesse o guia de JSON-LD para inciantes e aprenda o que é essa poderosa ferramenta e como utilizá-la para ficar entre os primeiros lugares no Google!",
  "image": "https://seomestre.com.br/wp-content/uploads/2022/10/Guia-para-JSON-LD-para-iniciantes.png",  
  "author": {
    "@type": "Organization",
    "name": "Leonardo Lima",
    "url": "https://seomestre.com.br/author/leonardolima/"
  },  
  "publisher": {
    "@type": "Organization",
    "name": "SEO Mestre",
    "logo": {
      "@type": "ImageObject",
      "url": "https://seomestre.com.br/wp-content/uploads/2022/05/cropped-cropped-Logo-Colorido-150x150.png"
    }
  },
  "datePublished": "2022-10-04",
  "dateModified": "2022-10-04"
}
</script>

Agora basta adicioná-lo na <head> ou outra área desse artigo e pronto! Fácil não?

Lembrando que essas ferramentas não englobam todos os tipos de marcação que o Google já permite usar em sua página de resultados de pesquisa, conforme a biblioteca de JSON-LD disponibilizada por eles, leia este artigo e estude sobre essa ferramenta para que você mesmo possa compreender como fazer suas marcações.

Gostou dessa aula? Não deixe de compartilhá-la com seus amigos. Além disso, dê uma olhadinha em nosso artigo Como fazer blog post com o melhor S.E.O em 2022! e fique por dentro das tendencias de SEO.

Leonardo Lima

Leonardo Lima

Artigos relacionados