SEO

You might've heard (in this article and elsewhere) that server-side rendering helps you with SEO for your single page applications (SPAs). But why's that? What does server-side rendering actually do?

It's all about that initial page load which search engine crawlers see. Whenever a crawler visits your website, it's just sending a bunch of requests for the different URLs of your pages. And each request of course returns an HTML page as a response.

The problem with SPAs, especially ones where the content has to be fetched asynchronously (from an API for example), is that the returned HTML file is essentially empty. All the content has to be fetched and rendered via Vue.js.

The search engine crawler doesn't wait for that though - hence your page looks pretty empty to it.

The idea behind server-side rendering is that the content for that first page load can be fetched and rendered on the server. Hence an HTML file with the content would be returned. Thereafter, the app works like a normal SPA again, but the crawler won't click around in your app, so that will only matter to your users.

The search engine crawlers will see the real content though, so it's a win/win situation.

Due to server-side rendering being provided out of the box, your Nuxt.js applications already look good to search engine crawlers.

But of course you also want to ensure that the titles of your individual pages as well as the <meta> tags are set up correctly. This in the end also determines how your results look on Google. <meta> tags are also important to improve the sharability of your content - by providing rich data to Facebook or Twitter.

The problem you typically have in SPAs is that you only got one page and hence that you got the same title and <meta> tags for all your rendered pages (which run on the same physical page).

There is a package which you can use in any Vue app (not just Nuxt.js ones) that helps you set the title, <meta> tags and much more on a per-page (per-route) basis: vue-meta.

vue-meta has a simply syntax that enables you to define which title etc. should be set for a given route.

It's already baked into Nuxt.js apps, hence you don't need to install it manually there. And Nuxt.js even provides a special property you can add to your nuxt.config.js file (for general, cross-page config) and your individual pages (in the pages folder): The head property/ method:

export default {
  head() {
    return {
      title: 'This is the page title',
      meta: [
        {
          name: 'description',
          content:
            'This would be the content of the description meta tag for the page',
        },
      ],
    }
  },
}

As you can see, the syntax is pretty straightforward. The full syntax can be seen on the official vue-meta docs. You can also learn more on the head docs of the Nuxt.js documentation.

With server-side rendering and vue-meta, you got powerful tools to make sure that Google (and other search engines) understand your page just as your users do.

But you got more than one build mode in Nuxt apps! Server-side rendering is turned on automatically if your build mode is universal. You can change it in the nuxt.config.js file though - the alternative would be spa.

How would SEO look like if you actually build your app as a SPA?

It would of course look worse. The server-side rendering part is not taking place. vue-meta would still do its job but if you're loading your content asynchronously, that would happen again in the browser (after the page load) and hence search engine crawlers wouldn't see your content. So that's only an alternative for Nuxt apps that don't require SEO.

There is a third way of building your app though: You can generate a static website. I got a whole article on this - the next one in this series - so don't miss this awesome alternative of building and shipping your Nuxt apps!