Nuxt SEO: The Basics
Nuxt is a popular framework for building Vue.js applications with server side/static rendering capabilities. It does a whole lot more, but in this article we'll focus on implementing SEO best practices with the framework. Specifically:
The issue with SPAs and SEO
Search engine crawlers need HTML content to determine what your page is all about. If you're running a traditional JavaScript SPA, you're most likely relying on a combination of JavaScript executing and API calls being made to populate the contents of the page. Although Google is getting better at indexing pages that work this way, the tried and true method of delivering fully hydrated HTML to the browser is still the best way to reliably build SEO into your pages. Using Nuxt allows you to deliver fully hydrated HTML to the browser when the page loads. This ensures that all search engines are able to index the content on your page. Using “Universal mode” with nuxt will give you this functionality out of the box.
HTML Titles
Step zero of any on-page SEO is giving a page a title. This is one of the primary factors used by search engines to determine what a page is all about. Nuxt gives you two options to configure page titles.
Global page titles
Using the nuxt.config.js file in the root of the nuxt app, you can specify a template for the title of every page in your application. By inserting a %s in the title string will fill in the name of the individual page, along with the rest of the string on every page. For example, the following template would create the title “Nuxt SEO - seoforbeginners.com” on a page with the title “Nuxt SEO”
You are not required to use a template if you want to have completely unique page titles, but templates are great for consistency across your website.
Page specific titles
On individual pages, you can specify the title using the head section of your script. You can either statically set it using an object, or you can define a head() function and set it dynamically based on different data on your page.
Meta descriptions
Arguably the second most important on-page SEO feature coming in after the page title is the meta description of your page. This is a longer description of your page that search engines can use to display a snippet of information to users on the search engine results page (SERP) about your page. Nuxt lets you set this description on each page using the head script section on the page, just like the title.
You can also dynamically generate this description based on different conditions.
Just like any other site, it's recommended to keep your description text between 50 and 160 characters. Going longer will often cause your description to be cut off in the SERP.
Dynamic sitemaps
Tired of updating your sitemap every time you add a new page? Look no further. Nuxt can generate a sitemap for
you based on the pages linked within your application. It's a quick process, just run
npm install @nuxtjs/sitemap
Then add the following to your nuxt.config.js file.
Then you can head over to the /sitemap.xml route on your website and view the full sitemap. This is a quick way to generate a sitemap and get it ready for submitting to google. More details on the Nuxt sitemap module can be found in their docs.
Social meta tags
While social meta tags may not necessarily be required for SEO, they are a great way to improve click through when sharing links to your site to social media. Nuxt makes it easy to add these meta tags along with the other features we've discussed so far. You can add them either at the nuxt.config.js level to have them globally applied, or you can place the tags on individual pages to customize the tag on a per-page basis. Here's an example of adding social meta tags to the nuxt.config.js file.
. . .
Wrap Up
Nuxt is a great tool for building high-end Vue applications. The server side/static rendering capabilities give us the ability to implement SEO best practices that are often much more difficult in a traditional SPA. We can deliver fully hydrated HTML to the browser, with all of our meta/title content ready to go for search engines to pick up.