SEO with Vue & Prismic

Many people are interested in taking advantage of the benefits of Vue.js with their Prismic websites, but are concerned with the SEO issues that come along with Vue. This page discusses these concerns and offers a couple of possible solutions to this problem.

The concern of SEO with Vue.js

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

The issue is that the bulk of a page's content is often rendered in the user's browser. A search engine crawler will only see the bare bones HTML code delivered from the backend and assume the page basically blank. And this will lead to a poor SEO ranking.

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, you won't take a hit for SEO with Google because their crawlers wait for your content to load. 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, but 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.

There are a two ways that you can deal with this issue. SSR (Server Side Rendering) & Pre-Rendering.

Both options are discussed below.

SSR (Server Side Rendering)

The first time anyone accesses the website, the server responds with a fully-rendered page which includes all the page's content. At that point forward, the site is loaded on the client-side as it would with a regular Vue.js website.

This means that a crawler won't encounter a the bare bones HTML, but the full page. And it works for all search engine crawlers as it doesn't rely on the crawler's ability to wait for javascript loaded content.

We have a few options available with SSR when using Vue.js we are going to discuss each one below.

Vue.js Server-Side Rendering Guide

Vue.js has gone to the trouble of creating a website which is a full in depth guide on how to handle server-rendered Vue.js applications. This is great guide for anyone already familiar with client-side rendered Vue.js applications. You can read more at: ssr.vuejs.org

Nuxt.js

A very popular solution within in the Vue.js community when it comes to dealing with SSR applications & Vue.js. This community project is built on top of the Vue ecosystem and handles all aspects of a production-ready server rendered app. This provides a development experience very close to working in Vue.js. Another great aspect of Nuxt.js is that you can use it as a static site generator. Here is a link to learn more about Nuxt.js.

SSR Advantages

  • SEO will not be a problem when using SSR. You have a unique HTML file that is generated for each route which you can configure with meta tags and other SEO friendly processes.
  • Performs well on slower devices as all the markup is rendered on the server so the device requesting the website has less work to do.

SSR Disadvantages

  • Steep learning curve because it is more complex and requires more configuration especially when embeding javascript frameworks.
  • This requires a server to be setup, so you can't use static hosting which makes it more difficult to deploy.
  • More knowledge needed to develop SSR apps.

Single Page Apps Prerendering

If you're only planning to improve SEO for a small number of pages i.e. contact, about etc. and not for a full large scale website then prerendering probably better suits your needs. Instead of using a web server to compile HTML on-the-fly, prerendering generates HTML files for specific routes at build time.

Options for prerendering include plugins like the prerender-spa-plugin and prerendering services like Netlify or Zeit Now.

SPA Prerender Advantages:

  • Setting up prerendering is easy. Vue.js has default templates for this.
  • Allows you to keep your frontend as a fully static site. Which means it will be easier to deploy on standard static hosting services and you don't need a Node.js production server.
  • You don't need any backend knowledge to get this to work as everything is handled client side.

SPA Prerender Disadvantages:

  • It doesn't work well for pages where the data changes very often.
  • There can be performance issues when you try to handle a large site as you need to prerender each page individually.
  • You must make sure your application is optimized well and even then some low end mobile devices might be slow.

Conclusion

For large scale websites, SSR is the way to go, but if your website is small and only requires SEO for a few routes then prerendering is what you need.

This appears to be an issue that will hopefully just disappear on its own in the near future. For now we hope we've given you enough information to start investigating which approach is best for you and your site.

Check out our content modeling guide for SEO fields for more helpful info when working with SEO and Vue.js.

And if we missed something, let us know! Reach out via the in-website chat to tell us about any another method that we can add to this page.