How to add asynchronous JSON+LD structured data to NUXT.js web appIf you have decided to create not only a simple web application, but you want to also want to ensure that the content of your site is digestible for search bots. You can't avoid structured JSON+LD data. To ensure easy indexing and display I recommend using Google JSON+LD to index and index snippets from your page in search.

Most websites use schema.org, however for Google Search it is better to to rely on Google's documentation rather than Schema.org.

Wordpress websites usually include some basic SEO optimization, which is why most bloggers don't even know about them and still rank in search well. That's why it's also important to include these elements in our own websites and search engine robots don't look at our sites through their fingers.

Server-side structured data in Nuxt.js

Nuxt.js is a framework that allows you to create websites in Vue.js with prebuilt server-side rendering, code splitting, and static page generation. It also includes a number of useful libraries or allows their subsequent installation. One such extension is vue-meta, which allows editing the page header directly from the components, and we will use this to add structured data to the page header.

1export default {
2  data () {
3    return {
4      structuredData: {
5        "@context": "http://schema.org",
6        "@type": "Article",
7        // Zbytek strukturovaných dat, pro možnosti se podívejte na odkaz výše
8        // nebo Google Docs...
9      }
10    }
11  },
12  head () {
13    return {
14      script: [{ innerHTML: JSON.stringify(this.structuredData), type: 'application/ld+json' }]
15    }
16  },
17  async asyncData (context) {
18    // Načtení dat a vrácení článku na serveru.
19  }
20}

Code sample explanation

Inside the data() function we preformat the values to be displayed in the structured data block. If you need to retrieve the data dynamically, it should the structured data block should already be included in the asyncData() function. As I have already mentioned Nuxt.js allows you to modify the form of the page header in the head() function and just this is where we insert the structured data script. Nuxt will then generate a <script> tag, which will contain the structured data and the type application/ld+json, so don't forget always set the type property as well.

Conclusion

With this small snippet of code, you will ensure that your Nuxt.js application will be a good fit for Google Search digestible and Google will be able to show you the classic search special snippets as well.