Nuxt - set SEO related tags, page titles, icons, etc. separately for each page (page configuration head)

Preface

You must know , To configure some SEO Related tags , It should be under the project root directory nuxt.config.js → head The fields go .

Please note that ,nuxt.config.js What is configured in the file is global ,

Is not “ Independent ” Apply to each page , That is, all pages use this global configuration .

---

But if you want more “ comprehensive SEO” , You must for each page Set separately .

Solution

Nuxt Provides a convenient hook , It allows us to easily define .

for example index.vue page , The code configured for it is as follows ：

<template>
  <div>
	...
  </div>
</template>

<script> export default {
       data() {
       return {
      } }, //  And  data  Hook function sibling  head() {
       //  Directly return all SEO Related and page configuration  return {
       title: " I'm the title ", meta: [ {
       charset: "utf-8" }, {
       name: "viewport", content: "width=device-width, initial-scale=1" }, {
       hid: "description", name: "description", content: " I'm the home page , This is the description " }, {
       name: "renderer", content: "webkit" }, //  More labels ... ], //  This page icon  // link: [{ rel: "icon", type: "image/x-icon", href: "/favicon1.ico" }], } }, } </script>

Each page has head() This hook function .