Setting Up SEO with Nuxt.js
Nuxt.js introduces a fetch hook in addition to asyncData, which allows you to fetch data on the client side after the component mounts. Unlike asyncData, which is called only on the server-side during SSR and cannot access the component instance, fetch is called on both the server-side and client-side, providing access to the component's instance. This is particularly useful for updating the data on client-side navigation without needing to re-render the entire page.
Step 1: Configure Your Nuxt.js Project
Update the nuxt.config.js file to include SEO-related meta tags and configurations:
export default {
// Global page headers
head: {
title: 'My Nuxt App',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'My awesome Nuxt.js project' },
{ name: 'keywords', content: 'vue, nuxt, seo, vuejs, ssr' },
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
// Other configurations...
};
}Step 2: Create Pages with SEO in Mind
When creating pages, ensure that you add unique meta tags for each page. Nuxt.js makes this easy with the head property in your page components.
Step: 3: Implementing Dynamic Routes and Content
For dynamic routes and content, ensure you are generating the correct meta tags based on the dynamic content.
Step: 4: Implementing Dynamic Routes and Content
Generate a sitemap and robots.txt to help search engines understand your site structure.
1. Install Sitemap Module: npm install @nuxtjs/sitemap
2. Configure Sitemap in nuxt.config.js:
modules: [
'@nuxtjs/sitemap'
],
sitemap: {
hostname: 'https://my-nuxt-app.com',
routes: async () => {
const posts = await fetch('https://api.example.com/posts').then(res => res.json());
return posts.map(post => `/blog/${post.id}`);
}
}3. Add Robots.txt:
Create a `static/robots.txt` file:
User-agent: *
Disallow:
Sitemap: https://my-nuxt-app.com/sitemap.xml