Nuxt/i18n如何修改默认生成的og:description等head meta描述内容

以下方案可实现全局自动同步og:description与当前页面description标签的content值，无需逐页配置：

Nuxt3 + @nuxtjs/i18n v8.x 配置步骤 #

1. 先关闭i18n内置的og:description自动生成逻辑，避免重复生成标签

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    // 你的其他i18n基础配置
    ogDescription: false, // 关闭默认og:description生成
  }
})

2. 在根目录app.vue中全局配置SEO元信息，自动同步两个标签的值

<!-- app.vue -->
<script setup lang="ts">
useSeoMeta({
  // 自动读取当前页面的description内容赋值给og:description
  ogDescription: () => {
    const pageMeta = useHeadSafe().meta.value
    return pageMeta.find(item => item.name === 'description')?.content as string || ''
  }
})
</script>

<template>
  <NuxtPage />
</template>

Nuxt2 + @nuxtjs/i18n v7.x 配置步骤 #

1. 关闭i18n默认的og:description生成逻辑

// nuxt.config.js
export default {
  modules: [
    ['@nuxtjs/i18n', {
      // 你的其他i18n基础配置
      ogDescription: false
    }]
  ]
}

2. 直接在nuxt.config中配置全局head实现自动同步

// nuxt.config.js 补充如下配置
export default {
  head() {
    return {
      meta: [
        {
          hid: 'og:description',
          property: 'og:description',
          content: this.$meta().meta.find(item => item.hid === 'description')?.content || ''
        }
      ]
    }
  }
}

注意事项 #

• 所有页面的description标签需要确保设置了唯一的hid（Nuxt2）或者正常通过useHead/definePageMeta配置，即可自动同步
• 如果全站description通过i18n语言包统一管理，可以直接在上述配置中读取对应翻译key的值，无需读取现有meta标签，配置更简单

内容的提问来源于stack exchange，提问作者morteza mortezaie