If you want to use Nuxt.js for your web application's quick and responsive UI, you need also to know how to use Nuxt.js to create an SEO-friendly application. In this article, we'll look at how we can improve the SEO performance of our Nuxtjs website.
What is SEO
SEO (Search Engine Optimization) is the process of taking efforts to improve the ranking of a website or piece of content on Google.
The main distinction between SEO and sponsored content is that SEO involves "organic" ranking, which means you don't have to pay to be in that spot. To put it another way, search engine optimization is the process of improving a piece of online material so that it appears near the top of a search engine's page when someone searches for something.
Nuxt.js and SEO
Nuxt, one of the most popular Vue frameworks for new web apps, can greatly improve your app performance and SEO. One of the most important Nuxt configurations is the mode, as it determines how your app is built, deployed, and served. There are three main types of web apps out there today:
- Classic Single-Page App (SPA)
- Universal/Isomorphic Web App (UWA)
- Pre-Rendered Single-Page App
It is important to use the Universal mode for SEO and here is why:
In a classic SPA, the HTML served to the client is relatively empty, and JavaScript dynamically renders HTML once it gets to the client. Because of this, you may see a "white flicker" before the webpage is fully loaded.
While in a UWA, JavaScript renders the initial HTML the same way SPAs do, but now the JavaScript runs on your Nuxt server before the content is sent back to the client. This way, the client receives the rendered HTML immediately, and will behave like a classic SPA afterwards. This is done so that search engine crawlers can interpret and index our website's pages. As a result, Universal mode is important for SEO.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New App</title>
</head>
<body>
<div id="app"></div>
<script src="/js/app.js"></script>
</body>
</html>
Now that our setup is complete, we should install some npm packages to improve our SEO by adding a Dynamic Sitemap.
A sitemap is a blueprint of your website that help search engines find, crawl and index all of your website’s content. Sitemaps also tell search engines which pages on your site are most important. We will include a sitemap in our app, but first we must install the nuxt module.
npm install @nuxtjs/sitemap
yarn add @nuxtjs/sitemap
We only need to add an entry to our nuxt.config.js file after installing the sitemap module.
{
modules: [
'@nuxtjs/sitemap'
],
}
Next we Add Google Analytics.
Google Analytics is a web analytics service that provides statistics and basic analytical tools for search engine optimization (SEO) and marketing purposes.To use Google Analytics with Nuxtjs, simply install the following module.
npm install --save-dev @nuxtjs/google-analytics
yarn add --dev @nuxtjs/google-analytics
If you are using Nuxt < v2.9, you have to install the module as dependency (without --dev or --save-dev)
We also need to add an entry to our nuxt.config.js file after installing the Google Analytics module.
{
buildModules: [
'@nuxtjs/google-analytics'
],
}
Now we must link this nuxt application to our Google Analytics account. To do so, we must include the Google Analytics ID in nuxt.config.js.
export default {
googleAnalytics: {
id: 'UA-XXX-X'
}
}
Now we Add Meta Tags
Nuxt lets you define all default tags for your application inside the nuxt.config.js file using the head property. This is very useful for adding a default title and description tag for SEO purposes or for setting the viewport or adding the favicon.
export default {
head: {
title: 'my website title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: 'my website description'
}
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
}
}
Note that this code above will give you the same title and description on every page
Adding titles and meta for each page can be done by setting the head property inside your script tag on every page:
<script>
export default {
head: {
title: 'Home page',
meta: [
{
hid: 'description',
name: 'description',
content: 'Home page description'
}
],
}
}
</script>
Use head as an object to set a title and description only for the home page
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
data() {
return {
title: 'Home page'
}
},
head() {
return {
title: this.title,
meta: [
{
hid: 'description',
name: 'description',
content: 'Home page description'
}
]
}
}
}
</script>
Conclusion
That's all there is to it; these steps will undoubtedly boost your SEO performance. However, keep in mind that this isn't all there is to SEO; there are many other factors to consider.
Thank you for Reading
Top comments (4)
Clear, concise, well-put, thanks for sharing! One question though… in terms of SEO, aren’t SSGs the most dominant? The benefit is that the pre-rendered static HTML page is visible immediately, as soon as a visitor comes to the website — in addition, the HTML page can still be dynamic, after hydration has taken place.
Thanks for pointing this out... I think you are right, because SSGs have fast page load times due to much of the content being pre-rendered and the static nature of the content.
great read! i found the dynamic sitemap quite helpful, i'll surely try that out in my next project :)
Great work!