O que é e como adicionar Dados Estruturados com Nuxt.JS

Neste artigo você vai aprender o que são Dados Estruturados, quando usar, quando não usar e também como fazer isso no Nuxt.JS de maneira muito simples.

O que são Dados Estruturados?

Dados estruturados são informações de um site que estão organizadas de forma padronizada em formatos como JSON-LD, Microdata ou RDFa.

Através dos dados estruturados os mecanismos de busca como o Google recebem mais informações sobre o que se trata a sua página e, com base nessas informações, juntamente com outros fatores, os mecanismos de busca podem fazer a exibição de Resultados Ricos de páginas do seu site nos resultados de busca.

O que são Rich Snippets ?

Os Rich Snippets ou Resultados Ricos são melhorias visuais nos resultados de busca como imagens, preços, breadcrumbs, estrelas de avaliação, etc.

Abaixo você pode conferir um exemplo de Resultado Rico no Google do site Yahoo Finances, onde uma imagem é exibida, título e data de publicação. Essas informações e recursos visuais aumentam a chance de chamar a atenção do usuário e fazer ele acessar o seu site.

Exemplo do Código de Dado Estruturado

Abaixo você pode ver um exemplo de dados estruturados, mas não se preocupe, você não vai precisar fazer tudo isso manualmente, vamos utilizar uma ferramenta do Nuxt para isso.

<script type="application/ld+json">
{
  "@type": "FAQPage",
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://codigoaoponto.com/tools/cpf-generator/#/schema/question/c6e1aab",
      "@type": "Question",
      "inLanguage": "pt-BR",
      "name": "O que é um Gerador de CPF?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Um Gerador de CPF é uma ferramenta que gera números de CPF válidos, sendo útil para testes e desenvolvimento de sistemas. Ele aplica o algoritmo oficial de validação do CPF para assegurar que os números criados estejam formatados corretamente."
      }
    }
  ]
}
</script>

Quando usar dados estruturados?

Use Dados Estruturados quando:

• O conteúdo da página for de alguma das categorias suportadas, como exemplo: produtos, receitas, eventos, perguntas frequentes, etc.
• Desejar aumentar a visibilidade das suas páginas e a taxa de cliques (CTR).
• Querer ajudar mecanismos de busca a entender melhor o conteúdo do seu site.

Quando não usar dados estruturados ?

Evite usar Dados Estruturados quando:

• Conteúdo da página não se encaixa nas categorias suportadas.
• Conteúdo de baixa qualidade, os dados estruturados não auxiliam na melhoria do conteúdo.
• Conteúdo mudar com frequência, pois se tornará custoso realizar atualizações tão frequentes dessas informações.

Instalação do pacote Schema.org no Nuxt

O Nuxt SEO é uma coleção de módulos de SEO que facilitam o desenvolvimento de SEO técnico para o seu site. Para este tutorial nós vamos utilizar o módulo que facilitará a implementação dos estruturados.

Você pode realizar a instalação desse módulo de várias formas, aqui vou exemplificar as duas principais:

1. nuxi (Interface de linha de comando oficial do Nuxt)
2. npm (Gerenciador de pacotes)

Se você for utilizar o nuxi, basta executar o seguinte comando:

npx nuxi module add schema-org

Se você for utilizar o npm, terá que fazer uma etapa extra, comece instalando o pacote:

npm i nuxt-schema-org

E depois adicione o pacote instalado na opção de modules dentro do arquivo nuxt.config.ts:

export default defineNuxtConfig({
  // outras configurações....
  modules: [
    // outros módulos
    "nuxt-schema-org"
  ]
  // outras configurações...s
});

Feito isso, já podemos começar a utilizar a ferramenta.

Dados Estruturados no Nuxt.JS

Como exemplo nós vamos criar dados estruturados de FAQ, que frequentemente são exibidos quando pesquisamos por uma pergunta:

No Nuxt estará disponível de forma global o composable chamado useSchemaOrg que você poderá utilizar dentro da tag script para escrever os seus dados estruturados.

<script setup>
useSchemaOrg([
  defineWebPage({
    "@type": "FAQPage"
  }),
  defineQuestion({
    name: "O que é um Gerador de CPF?",
    acceptedAnswer:
      "Um Gerador de CPF é uma ferramenta que gera números de CPF válidos, sendo útil para testes e desenvolvimento de sistemas. Ele aplica o algoritmo oficial de validação do CPF para assegurar que os números criados estejam formatados corretamente."
  }),
  defineQuestion({
    name: "Como funciona o Gerador de CPF?",
    acceptedAnswer:
      "O Gerador de CPF cria aleatoriamente os nove primeiros dígitos do CPF e, em seguida, calcula os dois dígitos verificadores usando o algoritmo de validação oficial, assegurando que o número gerado seja válido."
  }),
  defineQuestion({
    name: "O que é CPF?",
    acceptedAnswer:
      "O CPF (Cadastro de Pessoa Física) é um número de identificação pessoal que o governo brasileiro utiliza para reconhecer cidadãos e estrangeiros que residem no Brasil. Composto por 11 dígitos, ele é essencial para várias atividades, como abrir contas bancárias, fazer compras, contratar serviços e outros processos que necessitam de identificação."
  })
]);
</script>

Conclusão

Este artigo te guiou nos primeiros acessos da criação de Dados Estruturados no Nuxt.JS, se você quiser se aprofundar pode acessar a documentação completa da ferramenta para aprender como criar os dados estruturados no cenário que você precisa.