Recent projects are all using vue3 In order to stick to the road of vue3, I chose to enter the pit nuxt3

foreword

As a newcomer to nuxt3, I hope to share and learn with you. The following are the SEO optimization problems I encountered and solved during development. Page meta settings are very important for SEO optimization; in order for search engines to include keywords, different keywords need to be set for each page.

1. Create a project with nuxt3

First, you can follow the official website to create a project, do some simple configuration and complete page rendering:

nuxt3官网地址：Nuxt 3 - The Hybrid Vue FrameworkBuild your next application with Vue 3 and experience hybrid rendering, with an improved directory structure and new features Nuxt 3 is an open source framework making web development simple and powerful.https://v3.nuxtjs.org/

Two, configuration meta

1. Global configuration meta

Find the nuxt.config.ts code in the project as follows:

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: ['@nuxt/content'],
  meta: {
    title: '1039',
    meta: [
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'keywords', name: 'keywords', content: '前端, keywords' }
    ],
   }
})

Page 1 effect:

Page 2 effect:

At this point, you can see that all the keywords in the page meta are the same.

2. Dynamically configure the mate of each page

The code for page 1 is as follows:

<script lang="ts" setup>
  useHead({
    title: 'index',
    meta: [
      { hid: 'keywords', name: 'keywords', content: '外贸, index' }
    ]
  })
</script>

Page 1 effect:

The page 2 code is as follows:

<script lang="ts" setup>
  useHead({
    title:'one',
    meta: [
      { hid: 'keywords', name: 'keywords', content: '前端, keywords' }
    ]
  })
</script>

Page 2 effect:

So far, nuxt3 has successfully modified the meta dynamically. In fact, the key to configuring the keywords and titles of each page is the useHead() method.

Summarize

The above is all I shared. Since nuxt3 is relatively new, the official documents are still in English. After the browser comes with translation, the documents are almost meaningless. After sharing and trying by various bigwigs in Baidu, the project was considered a success. My nuxt3 project is still in progress, I hope everyone can learn and make progress together

Nuxt3-dynamically change meta information (keywords, titles, descriptions)