Make your Vue.js application SEO friendly

 

There is a lot of debate around SEO these days. Some people tend to think that SPAs (Single Page Apps) are SEO friendly while others argue on the other side that SPAs are not SEO friendly at all.

In this article we will try to explain how to solve SEO issues and make your website indexable by google whether it’s a SPA or not and maybe give some tips so you can make a rock solid decision when starting a new project.

I won’t go too deep into what SEO means and how it works but it short it stands for Search Engine Optimization and is the process of affecting the online visibility of a website in a search engine. In practice it’s a set rules and best practices of writing websites which in the end affect the visibility of your website in search engines. Some of these practices these days include the page speed, meta tags, relevant content wrapper in proper html tags, proper links on your web pages, having https, making the website mobile friendly and more. You can find a very detailed explanation in this fairly recent video from Google IO 2018.

Pretty much all aspects that impact SEO are pretty much achievable regardless of technology or tech stack you choose except meta tags placed in the head of your html. In this article, we will focus more on the meta tags since they represent an important part on SEO and you might have some issues adding them if you’re not choosing the right tech stack or tools.

Before we dive into technical stuff we will compare 2 ways of building web apps with Vue.js.

SPA (Single Page Apps)

In the Vue.js world, this is most of the times the default way to build web apps. Vue CLI 3 and some older official webpack templates have SPA configuration. This means that you web application is entirely built on the client side. You write .vue files, they get converted to javascript and this javascript is used to render the final markup (html).

SSR (Server Side Rendered)

This has been the go to approach to do websites for a long time until frameworks started to take off. In this case, your website markup is rendered by some server and sent to the browser directly. This means that the browser downloads the fully rendered markup along with some additional javascript and css.

SPA + Pre-render

It is also worth mentioning that there are pre-rendering plugins such as this one or even online services dedicated to this. Pre-rendering helps boosting your SPA index-ability by loading your website and rendering the final markup (html) for each route. SPA + Pre-render is something in between simple SPA and SSR. You get all the benefits of a SPA + some SEO benefits from SSR. However, for a large number of pages or dynamic content, SSR is more scalable and simple in practice.

SPA Advantages

• Easy to setup. Usually most frameworks including Vue.js have default templates or CLIs for this.
• Easier to manage. Everything is client side. You don’t need any backend knowledge to make it work
• Easier to deploy. SPAs are plain html, js and css images in the end. You can deploy them on any static hosting service which are cheap or even free.

SPA Disadvantages

• You have only 1 html page. Even if you have multiple routes, you end up with a single html file. This means you cannot do SEO for each page differently.
• Can get slow if not optimized well. You can reach the big bundle issue quite fast if you don’t pay attention. Even if you keep it really small, you can still hit some performance issues on mobile devices because all this javascript has to be parsed, evaluated and transformed to html on the mobile device. On low end devices, this stuff can have a pretty big impact.

SSR Advantages

• SEO is not an issue with SSR. Each new route is a new html file and you can configure the meta tags however you want for each page.
• Can be more performant for slower devices. All the markup is rendered upfront on the server which means that the device requesting the page, gets all the html rendered and doesn’t need to do extra work like in the case of SPA.
• Enforces some rules which in the end help you build better and more performant websites.

SSR Disadvantages

• SSR is more complex. Usually requires more configuration especially if you want to embed a javascript framework
• Harder to deploy. “Hard” is a subjective term but SSR websites are somewhat harder to deploy compared to SPAs. You need a server which will render your html. You can no longer rely on static hosting.
• Requires more knowledge to develop. You have to know a bit of backend to build it yourself.

Which one to choose ?

If you have an administration website, a website that is static in terms of pages (content on pages is not dynamic) then go with SPA and a pre-render plugin or service. It is easier to manage, deploy and maintain. On the other hand, if you have an online store, a website with tons of pages or dynamic content for each page and you need each page to be indexed by google then definitely go with SSR.

How ?

Before we dive into how to add SEO stuff for each case, let’s go through some important tags that you need on each of your pages.

• <title> This will appear as the tab title in the browser. Put this tag inside <head>tag of your html page.
• <meta name="description" content="Your content"> This will be the description of your website or specific page. This content is used by search engines and will be usually displayed under your website title in searches. This can be also used for the search itself, so make sure to put relevant description there.
• <meta name="author" content="Author> This tag defines the author of the page.
• <link rel="icon" href="iconPath"> This will be your favicon. This icon is displayed in the tab of your browser when navigating to your website. Make sure you have a clear, understandable and relevant icon.
• <link rel="canonical" href="url"> This tag is usually used when you want to distribute content on different websites but keep a single source of truth. One such example can be a blog post that you post on your website and also want to post it on several other websites. Providing such a tag on all the other websites, will make sure search engines prioritize the “source of truth” which would be the url your provide here.
• <meta name="keywords" content="keywords, separated, by, comma"> You can list here at least 10 keywords that are relevant to your website. This will ensure that search engines can display your website in the results when you search for some of the keywords listed here.
• <meta itemprop="name" content="">, <meta itemprop="description" content=""> These are similar to title and meta name="description" but are intended for Google+ in case you want to share your website there. You would also need a meta itemprop="image"
• Twitter tags <meta twitter:card content=""> as well as twitter:site, twitter:description, twitter:title, twitter:creator and twitter:image will help you have a nice twitter preview when sharing your website on twitter. The most important ones are the image, title and description.
• Facebook tags: <meta property=”og:title" content=””> as well as og:type, og:url, og:description, og:image and og:site_name will help in having a very nice preview when sharing your website on facebook.
• Other meta tags which are less relevant or are too specific.

How to do it in Vue CLI 3 ? (SPA)

• Go to your public/index.html file and add the appropriate tags
• On top of that you can use a pre-render plugin to actually serve some relevant html directly to the crawlers rather than having a blank body. To do this you would have to add this piece of code inside vue.config.js

const path = require('path') const PrerenderSPAPlugin = 
require('prerender-spa-plugin')

module.exports = {
 configureWebpack: {
  plugins: [
    new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, 'dist'),
      // Required - Routes to render.
      routes: [ '/', '/about', '/some/deep/nested/route' ],
    })
  ]
 }
}

How to do it in Nuxt.js ? (SSR)

• On each of your pages, Nuxt exposes a head property which you can edit. You can see the documentation details here . An example of how this would look like would be this:

head () {
 return {
    title: "My page title",
    meta: [
     { name: ‘description’, content: ‘My page description’ }
   ]
  }
}

• Do this for every page inside pages directory that you want to be indexed. For example a product page would have a dynamic title and description which would be obtained from the database. You can also reference dataproperties inside this head section.

How to do it with a custom SSR setup ?

• You are on your own here. You decide how to do it in this case? I’d say you might use a similar approach to what nuxt does and have a way to define head data in each of your pages.

Conclusions

Building a nice, performant and accessible website is only a part of making a good website. Having a good SEO is another important part. Make sure you take the right decisions from the start and make your website SEO friendly.