Nuxt.js can help you rank better on Google and with SEO (Search Engine Optimization). We’ll go over the best practices on how to set up your Nuxt application to rank well on search engines in this article.
How Nuxt.js helps you with SEO
Let’s quickly review what Nuxt is and how it can help you put together your SEO-optimized application.
Single Page Applications aren’t set up for SEO
Vue.js is usually used to create single-page applications. There is only one file in that application, the blank index.html, and it’s purely JavaScript-based. Once JavaScript has loaded, the content is populated into index.html, and JavaScript handles routing as well.
When it comes to SEO, single page applications are not ideal because they lack initial content. We love SPAs for creating snappy UIs, but they are not ideal for single page applications. In turn, Google and other crawlers (including social media crawlers like Facebook) have difficulty crawling and displaying your website properly in search results.
Nuxt.js makes it simple to create a universal application
With a universal application, your application is preloaded on a web server and submitted to a browser as HTML to improve SEO, speed up loading, and many other benefits.
Having a universal application means that there will be content on the page like a title tag, a meta tag, and a heading tag in the body before any JavaScript is loaded. Crawlers use these tags to figure out what’s on a page.
How Nuxt.js handles the head for all your pages
The *head> element in each of your pages is handled by a library called vue-meta in Nuxt. Nuxt’s term for a route is a page, and each one lives inside a folder called pages.
The *head> element within your application’s pages can be set up in three ways with Nuxt. Here are the three options.
1) Setting up default meta tags for all pages
Meta tags are often shared by different pages of your application. By setting the head property in the nuxt.config.jsfile, you can set the defaults for each of your pages.
For a list of all the properties that can be defined in the head property, click here.
Nuxt.js refers to the property by using head. vue-meta refers to the property by using metaInfo. The properties are identical.
2) Setting up meta tags for your pages individually
You can define a head method on each of your Nuxt pages. Nuxt overwrites whatever you set in nuxt.config.jsfile as the default for the head tags of an individual page.
3) Setting up meta tags for your dynamic pages
Dynamic pages – where one route can be rendered differently – give you more control over your meta tags. An example would be a user profile page.
By prefixing the path to your .vue component with an underscore, you can define dynamic routes.
It gives you access to the component data inside the head method. This property allows you to customize how your meta tags are rendered with the information from your component by leveraging the data you have access to inside.
