Optimize for Search Engines

Vue is a fast, modern web framework, but it comes with concerns regarding SEO. On this page, you'll learn a little about SEO strategies with Vue and Prismic.

Vue is a fast, modern web framework, but it comes with concerns regarding search engine optimization (SEO). On this page, you’ll learn a little about SEO strategies with Vue and Prismic.

Understanding SEO with Vue

The concern

The main SEO issue that comes with Vue.js has to do with search engine crawlers.

With basic Vue, most page content is rendered after the page initially loads, in the user’s browser. A traditional search engine crawler will only see the initial page load — without any content — and assume the page is basically blank, which is bad for SEO.

Do I need to worry?

The good news about this issue is that it seems to be going away on its own. Google is getting better and better every day at crawling content rendered in the user’s browser. This means that for many sites using Vue.js with Prismic, your SEO will be fine. Here’s what Google itself had to say on the subject:

“Times have changed. Today, as long as you’re not blocking Googlebot from crawling your JavaScript or CSS files, we are generally able to render and understand your web pages like modern browsers.”

This seems to be the trend with the other major search engines as well.

If you aren’t concerned about the other search engines (Yahoo, Bing, etc.), then you can probably get by without having to do anything. Though even with Google, not everyone has seen perfect results.

Technical SEO with Vue and Prismic

Here are three ways you can optimize your website for search engines with Prismic and Vue.

Meta tags

One of the most important SEO considerations is your meta tags. Meta tags go inside the <head> of every page on your website and describe the page’s content.

You can add meta tags to your website header with the vue-head plugin.

Install the plugin:

npm i vue-head

Then add the plugin to ~/src/main.js:

// ~/src/main/.js

import Vue from "vue";
import App from "./App";
import PrismicVue from "@prismicio/vue";

// Import the plugin
import VueHead from "vue-head";

// Register the plugin
Vue.use(VueHead, {
  separator: "-",
  complement: "My Site",
});

Vue.use(PrismicVue, {
  endpoint: "https://your-repo-name.cdn.prismic.io/api/v2",
});

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

In Prismic, use the key text field to add title description fields to your custom type. We recommend putting these fields in a dedicated “SEO” tab.

Screenshot of an SEO tab in the Prismic editor.

In your Vue app, use vue-head to inject your title and description into your page header:

<template>
  <div id="app">My Website</div>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        doc: null,
      };
    },
    methods: {
      async getContent() {
        // Query your content from Prismic
        this.doc = await this.$prismic.client.getByUID(
          "post",
          "my-great-post",
        );
        // Trigger an event to update the head after API response
        this.$emit("updateHead");
      },
    },
    created() {
      this.getContent();
    },
    // Format your head tags
    head: {
      title: function () {
        if (this.doc) {
          return {
            inner: this.doc.data.seo_title,
          };
        }
      },
      meta: function () {
        if (this.doc) {
          return [
            {
              name: "description",
              content: this.doc.data.seo_description,
            },
          ];
        }
      },
    },
  };
</script>

You can add other meta tags as needed.

Responsive images

One way to optimize your Vue app for SEO is by optimizing your images. Prismic can help make your images responsive and facilitate alt text.

When you add an image field to your custom type, you can define multiple responsive views for different screen sizes.

When you template your image in Vue, you can use those responsive views to create a responsive image component.

Here’s an example of a Vue image component that takes a Prismic image as a prop. In this example, the image has a default width of 1200px, with responsive views called “medium” and “small” set to 800px and 400px respectively.

<template>
  <div>
    <picture>
      <source
        media="(max-width: 400px)"
        :srcset="image.small.url"
      />
      <source
        media="(max-width: 800px)"
        :srcset="image.medium.url"
      />
      <img :src="image.url" :alt="image.alt" />
    </picture>
  </div>
</template>

<script>
  export default {
    props: {
      image: Object,
    },
  };
</script>

Notice how the image element also includes dynamic alt text from Prismic. An alt text input is included on all images in the Prismic editor. Alt text helps with SEO and accessibility.

SSR and SSG

Many developers are using server-side rendering (SSR) and static site generation (SSG) to optimize their websites for search engines. With Vue there are many ways to implement SSR and SSG. We recommend Nuxt.js.

Nuxt is a very popular Vue framework. It takes care of your project structure, routing, and SSR or SSG. To learn more, you can see our Nuxt documentation.