首页nuxt3 每个页面单独设置 SEO 不被全局seo 覆盖

nuxt3 每个页面单独设置 SEO 不被全局seo 覆盖

时间: 2024-09-30 10:01:58 浏览: 55

Nuxt.js 3.x是一个基于Vue.js的用于构建Server-Side Render (SSR)和Static Site Generation (SSG)的框架。如果你想要每个页面独立设置SEO信息，而不是全局覆盖，你可以这样做： 1. **Page-level SEO**：在`pages`目录下的单页组件（如`pages/index.vue`或`pages/about.vue`）内，可以使用Nuxt的`<meta>`标签或`head`属性来设置页面特定的元数据（如标题、描述等）。例如： ```html <template> <div> <h1>这是一篇关于 SEO 的文章</h1> ... </div> </template> <script> export default { head: { title: '我的个性化标题', meta: [ { name: 'description', content: '这是对当前页面内容的简短描述' }, ], }, } </script> ``` 2. **避免全局覆盖**：如果有全局的SEO配置文件（通常在`nuxt.config.js`或` layouts/default.vue`中），记得将这些设置放在`<head>`标签之外或者针对单个页面禁用它们。在某些情况下，你可以在`nuxt.config.js`中创建一个`head`数组，每个元素对应一个页面或一组页面的特定SEO规则。 ```javascript export default { //... head: { global: [ ...globalMeta ], // 全局SEO规则 routes: [{ path: '/', head: [ ...pageMeta ] }, { path: '/about', head: [ aboutMeta ] }], }, } ```

阅读全文