Photo by NisonCo PR and SEO on Unsplash
Do you want your future Vue.js web app rank in search results? If yes, don’t forget to list this among your requirements from the start. Considering the SEO challenges that all single-page apps (SPAs) face, don’t treat your Vue.js app SEO-friendliness as an afterthought. Rather than being a small detail to fix later, it’s a factor that may predefine how your app will be built on the whole.
It doesn’t mean Vue isn’t good for SEO. In fact, Vue.js offers solutions that work awesomely for search engine optimization. Yet, those are not something you get by default. Instead, you should deliberately opt for Vue SEO optimization tools and understand how they’ll influence your app tech stack, architecture, and infrastructure.
Now let’s see how you can fit Vue and SEO together using special Vue modules or the Nuxt.js framework. For this, we’ll consider the options Vue gives for in-app routing, managing meta tags, and webpage rendering. Those three aspects of your Vue app together are crucial for its SEO success.
Scroll down to see a time estimate for adding NUXT and SSR to an existing Vue app. By the way, our own website is built with Vue and we do Nuxt.js SEO optimization. If you found this article via search, it means we’re doing it right.
Vue Router and SPA URLs
The navigation inside a Vue SPA works differently from a static website. Instead of going to different HTML pages sitting on different URLs, users move between different app views that dynamically change inside the same single HTML page. Vue routing allows mapping specific app views to different URLs.
By default, Vue Router adds fragment identifiers (introduced by a hash mark #) to the home page URL to switch between views without refreshing the page. This method doesn’t work for SEO because hashed URLs don’t get indexed by search engines.
For SEO purposes Vue Router can be switched from hash to history mode. When working in this mode, it uses HTML 5 History API and generates normal URLs for every app view. In this case, all URLs of your app can be indexed in search engines and linked from social media and other websites without any problems.
However, none of those URLs matches any static HTML page. When accessed by users directly those URLs would return a 404 error. To avoid this, when switching Vue Router to history mode you’ll need to additionally configure your server so that it has a catch-all fallback route for all URLs.
According to SEO best practices, every URL of your app needs a unique set of title and description meta tags to get a meaningful snippet in search results. However, by default, your Vue app will have a single set of meta tags for all URLs. Those meta tags won't change when JavaScript renders new app views in the 'body' tag of the page because meta tags belong to the static 'head' tag of your app's HTML page.
Vue suggests using the vue-meta plugin to dynamically swap the by-default meta tags for unique when the app views and URLs change. However, the plugin gives just another string of JavaScript code to be rendered client-side after the HTML page was loaded. This means that search engine crawlers will still see the HTML page with the generic title and description first and only after (and if) they run your JavaScript they’ll fetch the correct snippets for your pages.
Vue SEO and server-side rendering (SSR)
All SEO-related issues of Vue apps stem from the client-side rendering that has a long "time to content". Unfortunately, search engine bots and social network agents still haven’t got as good at processing dynamic JavaScript pages as they are in processing static HTML. It means that if SEO is critical for your Vue app, you should take an extra step and implement server-side rendering.
To take advantage of SSR, you’ll have to build an isomorphic (universal) Vue.js app with a Node.js server on its backend. Node.js will run your JavaScript code server-side and send fetched HTML pages to browsers and crawlers. As a result, search engine bots will access content and meta tags for every app view regardless of their ability to process JavaScript.
Although the development and maintenance of an isomorphic app are more complex, by making your app isomorphic you’ll guarantee its SEO-friendliness. The easiest way to implement SSR in a Vue app is to use the Nuxt.js framework.
Nuxt.js vs Vue for SEO-friendly apps
Although your developers can customize Vue to build an isomorphic app themselves, Nuxt.js can simplify their task. This framework is built on top of Vue.js to streamline the development of SSR apps. It provides the right configuration of Vue libraries and an efficient app structure out-of-the-box, which saves a ton of time.
Nuxt.js SPA has a Node.js server under the hood for real-time JavaScript rendering and includes modules and plugins that are necessary for creating SEO-friendly Vue apps:
-
Vue-router working in history mode to create SEO-friendly URLs and set up flawless in-app navigation.
-
Vue-meta plugin to generate unique meta tags for different app views and get correct snippets in search results for all URLs in the app.
-
Webpack with vue-loader and babel-loader to bundle, code-split, and minify code for fast loading and minimizing the app’s time to interactive (TTI).
Although Nuxt renders all pages server-side, it doesn’t mean they lose interactivity. It uses Vue hydration to make the HTML reactive after it was loaded in the browser. The interaction between the app and the user happens in three stages:
-
Step 1. Node.js gets a request from the browser, fetches a proper HTML page, and sends it back to the browser.
-
Step 2. The browser displays the HTML page with static content and starts the hydration process during which Vue makes the page markup interactive for users.
-
Step 3. The browser allows users to navigate through internal links of the app without refreshing the page.
In addition to solving the core Vue SEO challenges, Nuxt provides tools for generating site maps, making 301 redirects, fetching meta for social sharing (Twitter and Open Graph), as well as integrating Google Analytics. Those small but important things allow following the general technical SEO best practices when building Vue apps.
Apart from that, Nuxt has a Static Site Generator for pre-rendering static HTML pages that serves as an alternative to NUXT SSR. This feature can be useful for smaller SPAs with just a few URLs requiring SEO. Nuxt.js optimization allows you to generate a bunch of SEO-friendly HTML pages during the build time and use them as a static website attached to your dynamic app that uses client-side rendering.
Adding Nuxt.js to optimize a Vue app for SEO
We asked Alex Bilyk, Frontend Developer, at Proxify, about the specifics of Vue apps optimization for search engines. He shared his recent experience on adding Nuxt.js SEO to a running Vue app and told us about what it takes to introduce such changes to a project.
The client’s Vue.js SPA wasn’t crawled and indexed by Search Engines correctly because it was initially created without SEO in mind. They decided to engage a developer via Proxify to fix the SEO issues by introducing SSR to their SPA using Nuxt.js.
To solve the problem, Alex had to complete the following tasks:
- Analyze the app architecture and functionality. (3h).
- Change app structure. (3h)
Create a new app structure for Nuxt.js including layouts, pages, plugins, modules, middleware directories at the root level of the project. Add a
nuxt.config.js file and change commands in the package.json file. Prepare for the removal of useless plugins and adding the needed ones into the project.
- Remove
main.js and app.vue files, and change this logic according to Nuxt.js requirements. (8h)
Prepare modules and plugins for the project and create a special usage for them (optionally those can be a store, UI library, or an HTTP Client, for example, Axios). Refactoring the paths to images and backgrounds.
- Setup new routing from scratch. (7h)
Remove Vue-router library and its configuration. Create a
pages directory that contains app views and routes. Customize routes for nested pages (for example, change URL from services/transportation to /pages/services/slug.vue. Replace RouterLink with the NuxtLink component for rendering internal links.
- Setup asyncData hooks to fetch data from APIs. (4h)
- Update configuration for multiple languages. (3h)
Install the
nuxt-i18n module to manage localization.
- Adjust animations and window listeners. (4h)
Change
created lifecycle method to beforeMount and/or mounted lifecycle method.
- Add SEO configuration for the whole app and each separate page. (8h)
Use Nuxt.js methods: meta tags, title, description, keywords, favicon. Update HTML layout with semantic tags.
As a result, it took Alex one week to implement SSR in the project and ensure the Google crawler can process the app correctly.
“I really can't emphasize enough how important it is to state that your SPA should be SEO-friendly in your project requirements. If my clients implemented NUXT from the very beginning, they could have saved a substantial amount of money. Treating SEO as an afterthought resulted in engaging a developer for one week and introducing deep changes to the project.” – Alex Bilyk, Frontend Developer
Vue developers for your project
If you want to create an SEO-friendly Vue app, you need Vue developers with a proven track record. Our talent matching network can help you find them. At Proxify we use Vue.js and Nuxt.js to build our own app and can connect you to vetted specialists. Send us a talent request and meet your perfect candidate within the next two weeks. And don’t forget that when hiring on Proxify, you get senior developers on your team at rates starting from €29/h.
Quick Vue.js SEO Q&A
You ask, we answer.
Is Vue.js good for SEO?
Vue.js has solutions that work well for SEO, but you don’t get them by default. Your developers should know how to use Vue SEO modules (vue-meta, vue-router, Webpack, Nuxt.js framework) and build the app architecture and infrastructure accordingly.
By default, a Vue app has a single set of meta tags for all URLs that reside in the static < head > tag of your app's HTML shell page. To have unique snippets for every URL, you should use the vue-meta plugin. It dynamically swaps the by-default meta tags for unique when an app view renders for every URL. If you use Nuxt.js, this will happen server-side. In this case, Googlebot will see your app views as static HTML pages with correct meta tags.
Is Nuxt.js good for SEO?
Nuxt helps developers solve the core Vue SEO challenges through building SSR Vue apps. The framework provides the right configuration of Vue libraries and an efficient structure for isomorphic apps. It also has tools for generating site maps, making 301 redirects, fetching meta for social sharing (Twitter and Open Graph), and integrating Google Analytics. Apart from the SSR solution, Nuxt has a Static Site Generator for pre-rendering static HTML pages for small Vue apps that need SEO.
Do you need Nuxt.js?
Developers can build an SEO-friendly Vue app without the NuxtJS framework. Yet, if the project is large and requires SSR, NuxtJS will simplify their task. By providing SEO-critical modules and plugins, correct app structure, and a Node.js server out-of-the-box, Nuxt will speed up your app development cycle significantly.
English
