Метатеги в Nuxt.js

Опубликовано: 11 Августа, 2022

В этой статье мы узнаем, как работают метатеги и SEO в NuxtJ. Nuxt.js — это бесплатная платформа веб-приложений с открытым исходным кодом, основанная на Vue.js, Node.js, Webpack и Babel.js. Nuxt вдохновлен Next.js, фреймворком аналогичного назначения, основанным на React.js.

Создайте приложение NuxtJS:

Шаг 1: Вы можете создать новый проект NuxtJs, используя следующую команду:

npx create-nuxt-app gfg

Шаг 2. Теперь перейдите к своему приложению, используя следующую команду:

cd gfg

Структура проекта: Это будет выглядеть так.

Мета-теги: Мета-теги используются для предоставления метаданных веб-страницы. Они являются частью головного раздела веб-страницы и помогают в SEO и ранжировании веб-страницы.

Добавьте метатеги в Nuxt.Js: есть 2 разных метода, которые вы можете использовать для добавления метатегов на свою страницу.

1. Глобальные настройки: вы можете добавить метатеги в свой файл nuxt.config.js. Эти метатеги будут применяться к каждой странице вашего сайта. Для этого добавьте приведенный ниже код в файл nuxt.config.js вашего приложения.

nuxt.config.js

export default {
  // Disable server-side rendering: 
  // https://go.nuxtjs.dev/ssr-mode
  ssr: true,
  
  // Global page headers: 
  // https://go.nuxtjs.dev/config-head
  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: 
  // https://go.nuxtjs.dev/config-plugins
  plugins: [
    "@/plugins/view-ui",
    { src: "~/plugins/vue-datepicker", ssr: false },
    { src: "~/plugins/vue-time", ssr: false },
  ],
  
  // Auto import components: 
  // https://go.nuxtjs.dev/config-components
  components: true,
  
  // Modules for dev and build (recommended): 
  // https://go.nuxtjs.dev/config-modules
  buildModules: [
  ],
  
  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
  ],
  
  // Build Configuration: 
  // https://go.nuxtjs.dev/config-build
  build: {
  }
}

Здесь мы используем тег Head для добавления метатегов.

Запустите приложение: запустите приложение, используя приведенный ниже код.

npm run dev

Выход:

2. Локальные настройки: вы можете добавлять метатеги на одну страницу, используя тег Head как функцию.

Например: добавьте приведенный ниже контент в файлы index.vue и gfg.vue:

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:
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"
          }
        ],
        link: [
          {
            rel: "stylesheet",
            href:
"https://fonts.googleapis.com/css?family=Roboto&display=swap"
          }
        ]
      }
    }
  }
</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:
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"
          }
        ],
        link: [
          {
            rel: "stylesheet",
            href: 
"https://fonts.googleapis.com/css?family=Roboto&display=swap"
          }
        ]
      }
    }
  }
</script>