Optimize for Search Engines
This technology has no Slice Machine integration
This framework has no integration with Prismic's developer tool, Slice Machine. You can still build a Prismic website with this technology by using Prismic's Legacy Builder. However, if you're starting a new project with Prismic, we strongly recommend using a technology that integrates with Slice Machine: Next.js or Nuxt.
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 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.
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.
Here are three ways you can optimize your website for search engines with Prismic and Vue.
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-headThen 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.
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.
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.
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.
Was this article helpful?
Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.