Make Your Vue.Js Apps Seo-friendly

Within just a few minutes!

Photo by Markus Winkler on Unsplash

Vue.js is one of my favourite, if not the favourite, framework.

It is easy to understand, the learning curve is not steep at all unlike React and Angular and it is a light package weighing in about 30kb.

However, it still is a Single Page Application(SPA). Although you can still generate static sites using it if you go with the SPA, you will lose out on one of the important things in web development i.e SEO.

Google crawlers have improved over the years and so have the JavaScript apps, however, the developers still have to take a few additional steps to fully comply with SEO and make the app discoverable organically.

If any of the terms like crawlers or “discoverable organically” sound unfamiliar then you should check my guide to Search Engine Optimization(SEO). A Beginner’s Guide to SEO for JavaScript Web Applications After building multiple sites, here’s what I learned about organic traffic and SEOmedium.com

In this article, we will be making Vue.js apps more SEO friendly via Vue-Meta library.

What is Vue-Meta?

Vue Meta is a Vue.js plugin that allows you to manage your app’s metadata. You simply export it as part of your component's data using the metaInfo property.

It tends to provide the same functionality as the React-Helmet package does for React.

Many frameworks are already using the package. Some of them are:

1. Gridsome

2. Nuxt.js

3. Factor JS

4. Ream

Installation

You can quickly get started with the package by using NPM.

NPM makes it easy for JavaScript developers to share and reuse code. If you haven’t installed NPM yet, you can check the official documentation to get started.

Once you have got NPM up and running, run the following command to install the Vue-Meta package.

npm install vue-meta --save

You can install the package via CDN as well. More on that can be found here.

We need to import the package into our main JavaScript file.

import Vue from "vue";
import App from "./App.vue";
import Meta from "vue-meta";

Vue.use(VueMeta, {
// optional pluginOptions
refreshOnceOnNavigation: true
})

new Vue(
{
  render: h => h(App)
}
).$mount("#app");

Customizing the Plugin and Adding Meta-Data

Vue-Meta package allows adding and dynamically modify several meta-tags.

However, for the sake of simplicity, we will be first seeing how to add the Title Tag.

<template>
  <div>Hello 2021!</div>
</template>

<script>
export default {
  name: 'Hello',
  metaInfo: {
    title: 'Goodbye 2020'
  }
}
</script>

As you can see, we can pass an object into metaInfo property given to us by the Vue-Meta library.

Additionally, we can set the default title. This title will be displayed on sites that don’t have any titles.

In your root component, add the title and additionally a title template to make sure your child components follow a uniform template as shown below:

export default {
  name: 'App',
  metaInfo: {
    title: 'My Default Title',
    titleTemplate: '%s | November 2020'
  },

}

Other Options

Besides the Title meta-tag, we can also add other relevant tags to make our Vue app get indexed better and also for the overall experience.

You can set some of the most important tags such as the description and viewport.

export default {
  name: 'App',
  metaInfo: {
    title: 'Default Title',

    meta: [
      { charset: 'utf-8' },
      { name: 'description', content: 'Thanksgiving website' },
      { name: 'viewport', content: 'width=device-width, initial-  scale=1' }
    ]
  },
  ...
}

This is not all though. You can even add external scripts.

export default {
....
  metaInfo() {
    return {
      title: "Goodbye 2020",
      meta: [
       ....
   script: [
        { src: 'your link here', async: true, body: true }
      ],
   link: [
        {
          rel: 'canonical',
          href: '....'
        }
   ]
    };
  }

};

VMID

vmid is a special property that Vue-Meta lets us use which gives control over the component tree.

What it does basically is that if two metadata have the same vmid , then the child will override the parent tree. This makes sure that they don’t merge, instead use the value of the last child.

{
  metaInfo: {
    meta: [
      { vmid: 'desc',
        name: 'description',
        content: 'This is great!' }
    ]
  }
}

Conclusion

Developing good apps take time and one of the worst thing that can happen to it is failing to get adequate traction.

Managing SEO in dynamically generated JavaScript apps and sites is quite tricky however there are several packages which help in making the process slightly easy and straightforward.

One of the packages is Vue-Meta for Vue.js Apps that enables you to add metatags to improve the overall SEO score.

Such packages are available for most of the JavaScript frameworks, however, one should remember that to get the best SEO on your JavaScript, it is wise to use Server-Side rendering.