In this article, we are going to learn how meta tags and SEO work in NuxtJs. Nuxt.js is a free and open-source web application framework based on Vue.js, Node.js, Webpack, and Babel.js. Nuxt is inspired by Next.js, which is a framework of a similar purpose, based on React.js.
Create NuxtJS Application:
Step 1: You can create a new NuxtJs project using the below command:
npx create-nuxt-app gfg
Step 2: Now navigate to your app using the following command:
cd gfg
Project Structure: It will look like this.
Meta Tags: Meta tags are used to provide metadata of the web page. They are part of the head section of the web page and help in SEO and ranking of the web page.
Add Meta Tags in Nuxt.Js: There are 2 different methods you can use to add meta tags in your page.
1. Global Settings: You can add the meta tags in your nuxt.config.js file. These meta tags will be applied to every page of your website. For this, add the below code to the nuxt.config.js file of your application.
nuxt.config.js
export default { // Disable server-side rendering: ssr: true, // Global page headers: head: { title: 'gfg', htmlAttrs: { lang: 'en' }, meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: '' }, { name: 'format-detection', content: 'telephone=no' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, // Global CSS: https://go.nuxtjs.dev/config-css css: [ 'view-design/dist/styles/iview.css' ], // Plugins to run before rendering page: plugins: [ '@/plugins/view-ui', { src: '~/plugins/vue-datepicker', ssr: false }, { src: '~/plugins/vue-time', ssr: false }, ], // Auto import components: components: true, // Modules for dev and build (recommended): buildModules: [ ], // Modules: https://go.nuxtjs.dev/config-modules modules: [ ], // Build Configuration: build: { } } |
Here we are using the Head tag to add the meta tags.
Start the application: Run the application using the below code.
npm run dev
Output:
2. Local Settings: You can add meta tags on a single page using the Head tag as a function.
For example: Add the below content to your ‘index.vue’ and ‘gfg.vue’ files:
index.vue
<template> <div> <h3>This is the Home Page.</h3> <NuxtLink to="/gfg"> Go to GFG Page </NuxtLink> </div> </template> <script> export default { head() { return { title:'Home page', script: [ { src: } ], link: [ { rel: 'stylesheet', href: } ] } } } </script> |
gfg.vue
<template> <div> <h3>This is the GFG Page.</h3> <NuxtLink to="/"> Go to HomePage </NuxtLink> </div> </template> <script> export default { head() { return { title:'gfg page', script: [ { src: } ], link: [ { rel: 'stylesheet', href: } ] } } } </script> |
Start the application: Run the application using the below code.
npm run dev
Output:
