TRY OUR PACKAGES
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'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.
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.
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.
You can add other meta tags as needed.
When you template your image in Vue, you can use those responsive views to create a responsive Image component.
When you add an Image field to your Custom Type, you can define multiple responsive views for different screen sizes.
In your Vue app, use vue-head to inject your title and description into your page header:
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.
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.
You can add meta tags to your website header with the vue-head plugin.
Install the plugin:
Understanding SEO with Vue.
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.
The main SEO issue that comes with Vue.js has to do with search engine crawlers.
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.
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.
This seems to be the trend with the other major search engines as well.
It’s important to know this, as it could determine whether or not the site’s content is indexable by a search engine, and just as importantly, how well its content is ranked.
The quintessential Vue.js SPA example is the Vue HackerNews Clone 2.0. This is an open source project provided by the Vue team to demonstrate the full capabilities of Vue and effective design patterns.
Don’t forget the “O” in “SEO” stands for “optimization”. Being indexed be a search engine is not enough; we want our sites to rank well, too. Fetch As Google tells us how a page is seen, but not how the page compares to the competition.
If you can’t use SSR for one of the above reasons, there is another way: prerendering. With this approach, you run the app with a headless browser in your development environment, snapshot the page output, and substitute your HTML files with this snapshot in the server’s response.
My advice: if you are going to use the SPA architecture, be sure to provide server rendered or prerendered pages.
I deployed this app to a Heroku instance and ran it through Fetch As Google. In the image below, the screenshot on the left shows how Googlebot saw it, and the screenshot on the right shows how a user would see it. They appear to be identical.
Removing server-side rendering.
According to this video from Google developers Addy Osmani and Rob Dodson (released Nov 2017), Googlebot is currently based on Chrome 41. There are a lot of new APIs that have been released since version 41, and if you used any of them, presumably Googlebot would not be able to render and index your page.
Even with client rendering only, Googlebot had no trouble seeing the content. I also waited a few days to see if Google had indexed the app. It had:
The bottom line is, if SEO is critical, you can’t rely on your SPA’s client rendering and must ensure content comes included in your pages.
This doesn’t mean you need to abandon the SPA architecture, though. There are two techniques, server-side rendering and prerendering, that both can achieve the desired outcome.
I’m Anthony Gore and I’m a web developer with a crush on Vue.js. I’m a Vue Community Partner, curator of the weekly Vue.js Developers Newsletter , and the creator of Vue.js Developers .
Server-side rendering (SSR) is where a page is rendered by the web server as part of the server request/response cycle. In the case of Vue.js and other similar frameworks, this is done by executing the app against a virtual DOM.