Optimize for Search Engines

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.

The Concern

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

With 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.

The Good News

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 that is 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, though most aren't as far along as Google.

So what do I do?

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.

If you want to take action, there are a two ways that you can deal with this issue: Server Side Rendering (SSR) and Static Site Generation (SSG).

With Vue there are many ways to implement SSR and SSG. We recommend Nuxt.js.

Nuxt is a very popular solution for building SSR and SSG applications with Vue. 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.