Unlock the Secret to SEO-Friendly Vue.js Applications
The Limitations of Client-Side Rendering
Single-page applications (SPAs) like Vue.js rely on JavaScript to render content on the client-side. This means that when a search engine bot crawls your page, it only receives the basic HTML structure without any rendered content. The bot is left with nothing to index, leaving your page invisible to search engines.
The Uncertainty of Search Engine Crawlers
Even if search engine crawlers can index SPAs, there’s still uncertainty surrounding how long they wait for your page to render and what happens if your bundle size is too large or your page encounters an error. And even if your page is indexed, there’s no guarantee it’s optimized for search.
The Speed Conundrum
SPAs are generally slower than traditional static HTML/CSS pages due to the overhead of making an Ajax call to fetch the bundle and render it. This can negatively impact page rank, as page download speed is a critical factor in search engine rankings.
A Solution That Combines the Best of Both Worlds
Enter server-side rendering (SSR) with Nuxt.js. This technique involves employing scripts on a web server to produce a fully rendered page, which is then returned to the client application. SSR produces faster page loads since all the content is already rendered on the server.
Building an SEO-Friendly Application with Nuxt.js
Let’s build a simple web application with Nuxt.js to demonstrate its SEO-friendly capabilities. We’ll create a Nuxt app and modify the index.vue file to include some sample content:
<template>
<div>
<h1>Welcome to my Nuxt app!</h1>
<p>This is some sample content.</p>
</div>
</template>When we run the application and view the page source, we’ll see that our content is now included in the HTML.
Adding Dynamic Data and Routing
We’ll add a new page and link to the index.vue file, demonstrating how Nuxt behaves like an SPA after the first page load. We’ll also fetch data from a JSON placeholder API using Axios and Nuxt’s asyncData method, which allows us to render data on the server:
import axios from 'axios';
export default {
async asyncData({ params }) {
const { data } = await axios.get(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
return { post: data };
},
};We’ll also add routing to our application:
export default {
routes: [
{
name: 'index',
path: '/',
component: IndexPage,
},
{
name: 'post',
path: '/post/:id',
component: PostPage,
},
],
};The Power of Vuex and Nuxt
We’ll add a Vuex store to our application and fetch data from the server using Nuxt’s nuxtServerInit method, which allows us to populate the store on the server side and display the data on both pages:
import Vuex from 'vuex';
const store = new Vuex.Store({
state: {
posts: [],
},
actions: {
async nuxtServerInit({ commit }) {
const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
commit('setPosts', data);
},
},
mutations: {
setPosts(state, posts) {
state.posts = posts;
},
},
});Meta Tags and SEO
Nuxt uses vue-meta internally to generate meta tags, which are critical for SEO. We’ll add page titles and meta tags to our article page and see how Nuxt pre-renders them, ensuring that search engine bots receive the updated meta tags:
<head>
<title>My Article Page</title>
<meta name="description" content="This is a sample article page."/>
</head>Static Mode and SEO
Nuxt can generate a static version of the website that is SEO-friendly and doesn’t require a real-time Node server backend. We’ll build our application in static mode and host it on a static server, enjoying all the benefits of SEO.
With Nuxt.js, we can take control of many factors that impact SEO and page ranking, making it easy to create an SEO-friendly application.