How Nuxt JS boosts your website seo score

Disclaimer: This article will help to enhance SEO implementation for nuxt based full static websites. It requires basic knowledge of Vue js and nuxt js.

Table of Contents

1. Meta tags implementation globally using the nuxt.config.js
2. Meta tags implementation at the page level
3. Meta Tag implementation for dynamically generated pages
4. Final Thoughts

Note:Website images used in the post are from Hawthornephc
Introduction: Nuxt has different modes while shipping the website/application to production.
these modes can be configurable in nuxt.config.js

1. SPA (Single Page Application) 
    Note: in nuxt.config.js use SSR: false instead of mode: spa (deprecated)
2. Universal Mode ( server-side rendering and client navigation )
    SSR-based applications will allow developers to preload the application on the server-side with data and sent it to the browser as rendered HTML. Application SEO will be improved.
   Nuxt JS also works as a static website like traditional HTML pages. By setting target: static in nuxt.config.js
   Note: Nuxt JS uses vue-meta to update the page head and meta for generated web pages

Meta tags Implementation at the Website level

Nuxt js will allow us to configure the meta tags in a global manner using the head property in nuxt.config.js

Note: hid should be unique to avoid duplicates

Meta tags implementation at the page level

With next js, you can define individual meta info at page level using the head method. Next, js will override the default meta info listed on nuxt.config.js

Meta Tag implementation for dynamically generated pages

We can implement meta tags for dynamically generated pages. Dynamic page components are prefixed with _underscore
Example: pages -> blogs -> _blog.vue

Final Thoughts: Updation in progress