What is Structured Data and How to Add it in Nuxt.JS

In this article, you will learn what Structured Data is, when to use it, when not to use it, and how to implement it in Nuxt.JS in a very simple way.

What is Structured Data?

Structured data is information from a website that is organized in a standardized format such as JSON-LD, Microdata, or RDFa.

Through structured data, search engines like Google receive more information about what your page is about. Based on this information, along with other factors, search engines can display Rich Results of your site's pages in search results.

What are Rich Snippets?

Rich Snippets or Rich Results are visual enhancements in search results such as images, prices, breadcrumbs, review stars, etc.

Below, you can see an example of a Rich Result on Google from the Yahoo Finance website, where an image, title, and publication date are displayed. These visual elements increase the chances of attracting the user's attention and driving them to your site.

Example of Structured Data Code

Below you can see an example of structured data, but don't worry, you won't need to do all this manually. We'll use a Nuxt tool for that.

<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": "What is a CPF Generator?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "A CPF Generator is a tool that generates valid CPF numbers, useful for testing and system development. It applies the official CPF validation algorithm to ensure that the generated numbers are correctly formatted."
      }
    }
  ]
}
</script>

When to Use Structured Data?

Use Structured Data when:

• The page content fits into one of the supported categories, such as products, recipes, events, FAQs, etc.
• You want to increase your page visibility and click-through rate (CTR).
• You want to help search engines better understand your website's content.

When Not to Use Structured Data?

Avoid using Structured Data when:

• The page content does not fit into the supported categories.
• The content is of low quality; structured data won't improve it.
• The content changes frequently, making it costly to update this information regularly.

Installing the Schema.org Package in Nuxt

Nuxt SEO is a collection of SEO modules that make it easier to develop technical SEO for your website. In this tutorial, we will use the module that simplifies the implementation of structured data.

You can install this module in several ways; here, I'll show the two main ones:

1. nuxi (Nuxt's official command-line interface)
2. npm (Package manager)

If you are using nuxi, simply run the following command:

npx nuxi module add schema-org

If you are using npm, you'll need an extra step. Start by installing the package:

npm i nuxt-schema-org

Then add the installed package to the modules option in the nuxt.config.ts file:

export default defineNuxtConfig({
  // other configurations...
  modules: [
    // other modules
    "nuxt-schema-org"
  ]
  // other configurations...
});

Once this is done, we can start using the tool.

Structured Data in Nuxt.JS

As an example, we will create structured data for an FAQ, which is frequently displayed when searching for a question:

In Nuxt, the useSchemaOrg composable is globally available, which you can use inside the script tag to write your structured data.

<script setup>
useSchemaOrg([
  defineWebPage({
    "@type": "FAQPage"
  }),
  defineQuestion({
    name: "What is a CPF Generator?",
    acceptedAnswer:
      "A CPF Generator is a tool that generates valid CPF numbers, useful for testing and system development. It applies the official CPF validation algorithm to ensure that the generated numbers are correctly formatted."
  }),
  defineQuestion({
    name: "How does the CPF Generator work?",
    acceptedAnswer:
      "The CPF Generator randomly creates the first nine digits of the CPF and then calculates the two check digits using the official validation algorithm, ensuring the generated number is valid."
  }),
  defineQuestion({
    name: "What is a CPF?",
    acceptedAnswer:
      "A CPF (Cadastro de Pessoa Física) is a personal identification number used by the Brazilian government to recognize citizens and residents. Composed of 11 digits, it is essential for various activities, such as opening bank accounts, making purchases, hiring services, and other identification processes."
  })
]);
</script>

Conclusion

This article guided you through the basics of creating Structured Data in Nuxt.JS. If you want to explore further, you can check the complete documentation of the tool to learn how to create structured data for your specific needs.