NuxtJS - 02.SEO

35 阅读4分钟

详情请参考:ezdoc.cn/docs/nuxtjs…

1.添加 favicon 图标和 TDK(标题、描述、关键词):

nuxt.config.ts 添加配置:

export default defineNuxtConfig({
  app: {
    title: "website-name",
    meta: [
      {
        name: 'keywords',
        content: '网站关键字'
      },
      {
        name: 'description',
        content: '网站描述'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' }],
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
    }
    style: [],
    script: [],
    noscript: []
  }
})

2.使用 useHead:

在app.vue中使用

<script setup lang="ts">
useHead({
  title: "Nuxtjs - mywebsite" // 动态改变网站title
  link: [
    {
      rel: 'icon', type: 'image/x-icon', href: 'favicon.ico'
    }
  ],
  meta: [
    { name: 'keywords', content: 'Nuxtjs,前端架构,JavaScript,TypeScript' },
    { name: 'description', content: '网站描述' }
  ]
})
</script>

3.使用 useSeoMeta:

<script setup lang="ts">
useServerSeoMeta({
  title: "网站标题",
  ogTitle: "网站标题",
  description: '网站描述/简介',
  ogDescription: '网站描述/简介',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
</script>

当插入响应性标签时,您应该使用计算得到的语法 () => value

或使用 useHead 实现动态标题:

<script setup lang="ts">
const title = ref('my - website');
useSeoMeta({
  title,
  description: () => `description: ${title.value}`
})
</script>
<script setup lang="ts">
useHead({
  // 作为字符串
  // 其中`%s`会被标题替换
  titleTemplate: '%s - website - title',
  // ... 或者作为一个函数
  titleTemplate: (productCategory) => {
    return productCategory
      ? `${productCategory} - website - title`
      : 'website title'
  }
})
</script>

4. 内置组件:

Nuxt 提供<Title><Base><NoScript><Style><Meta><Link><Body><Html> 和 <Head> 组件,以便您可以直接与组件模板中的元数据进行交互

因为这些组件名称与原生 HTML 元素相匹配,所以在模板中将它们 大写 非常重要!

<Head> 和 <Body> 可以接受嵌套元标记(出于审美原因),但这对嵌套元标记在最终 HTML 中呈现的位置没有影响

<template>
  <div>
    <Head>
      <Title>{{ title }}</Title>
      <Meta name="description" :content="title" />
      <Style type="text/css" children="
        body {
          background-color:rgba(255,0,0,.1);
        }
      "></Style>
    </Head>
    <h1>{{ title }}</h1>
  </div>
</template>
<script setup lang="ts">
  const title = ref('Hello World');
</script>

5. 外部 CSS:

<script setup lang="ts">
useHead({
  link: [
    {
      rel: 'preconnect',
      href: 'https://fonts.googleapis.com'
    },
    {
      rel: 'stylesheet',
      href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
      crossorigin: ''
    }
  ]
})
</script>

6. /pages/ 目录中可以使用 definePageMeta 来根据当前路由设置元数据:

<script setup lang="ts">
definePageMeta({
  title: '网站标题'
})
</script>

7. 安装 @nuxtjs/seo 模块:

npx nuxi@latest module add seo

我们需要安装 @nuxtjs/seo 插件,@nuxtjs/seo 是一个模块集合,它覆盖了搜索引擎中常用的模块:

@nuxtjs/sitemap:网站地图

nuxt-simple-robots:蜘蛛爬虫协议

nuxt-schema-org:网页标准

nuxt-seo-experiments:实验性 SEO 元特征

nuxt-og-image:生成动态的社交分享图片

nuxt-link-checker:检查失效链接

nuxt.config.ts 中根据实际情况添加配置:

export default defineNuxtConfig({
  // SEO 配置
  site: {
    url: 'https://dream-site.cn',
    name: 'Dream Site',
    description: '致力于打造程序员的梦中情站',
    defaultLocale: 'zh-cn',
    exclude: ['/admin/_components/**'],  // 过滤不需要的 url
    cacheMaxAgeSeconds: 24 * 3600,  // 缓存时间一天
    autoLastmod: true, _// 自动检测每个 URL 的 lastmod 日期
  },
  routeRules: {
    // Don't add any /secret/\*\* URLs to the sitemap.xml
    '/admin/_components/**': { robots: false },
  }
})

现在你就能打开 sitemap.xml 和 robots.txt 了,其他更加详细的配置可以参考官方文档:nuxt-seo

8. Robots:

1. 禁用网站索引

nuxt.config.ts

export default defineNuxtConfig({
  site: {
    indexable: false 
  }
})

2. 禁用页面索引

<script setup lang="ts">
defineRouteRules({
  robots: false
})
</script>

3. 如果需要更精细的编程控制,可以使用 nuxt.config.ts 配置该模块

在 nuxt.config.ts

export default defineNuxtConfig({
  robots: {
    disallow: ['/secret', '/admin'],
  }
})

9. Sitemap:

1. 禁用 URL 模式的索引

export default defineNuxtConfig({
  routeRules: {
    // Don't add any /secret/** URLs to the sitemap.xml
    '/secret/**': {
      robots: false 
    },
  }
})

2. 对于所有其他情况,您可以使用 includeexclude 模块选项来过滤 url

export default defineNuxtConfig({
  sitemap: {
    // exclude all URLs that start with /secret
    exclude: ['/secret/**'],
    // include all URLs that start with /public
    include: ['/public/**'],
  }
})

3. 设置 Lastmodchangefreqpriority

<script setup lang="ts">
useSeoMeta({
  // will be inferred as the lastmod value in the sitemap
  articleModifiedTime: '2024-10-01'
})
defineRouteRules({
  sitemap: {
    changefreq: 'daily',
    priority: 0.3
  }
})
</script>

4. 缓存时间

export default defineNuxtConfig({
  sitemap: {
    cacheMaxAgeSeconds: 3600  // 1 hour
  }
})

5. 自定义样式

export default defineNuxtConfig({
  sitemap: {
    xslColumns: [
      { label: 'URL', width: '50%' },
      { label: 'Last Modified', select: 'sitemap:lastmod', width: '25%' },
      { label: 'Priority', select: 'sitemap:priority', width: '12.5%' },
      { label: 'Change Frequency', select: 'sitemap:changefreq', width: '12.5%' },
    ],
  },
})

10. OG Image

1. 使用可组合 defineOgImageComponent 来定义主页的 og:image

<script lang="ts" setup>
defineOgImageComponent('NuxtSeo')
</script>

2. 在浏览器中访问主页并打开 Nuxt DevTools (Shift + Alt + D)

image.png

3. 自定义模板

<script lang="ts" setup>
defineOgImageComponent('NuxtSeo', {
  title: 'Hello OG Image 👋',
  description: 'Look what at me in dark mode',
  theme: '#ff0000',
  colorMode: 'dark',
})
</script>

11. Schema.org

1. 配置默认值

<script lang="ts" setup>
useSchemaOrg([
  defineWebPage({
    name: 'My Page'
  }),
  defineWebSite({
    name: 'My Site'
  })
])
</script>

2. 如果你不想使用默认值

export default defineNuxtConfig({
  schemaOrg: {
    default: false
  }
})

3. 设置身份类型

export default defineNuxtConfig({
  schemaOrg: {
    identity: {
      type: 'Organization',  // or 'Person'
      name: 'My Company',
      url: 'https://example.com',
      logo: 'https://example.com/logo.png'
    }
  }
})

4. 自定义节点

<script lang="ts" setup>
useSchemaOrg([
  {
    '@type': 'DefinedTerm',
    'name': 'Nuxt Schema.org',
    'description': 'Nuxt Schema.org is a Nuxt module for adding Schema.org to your Nuxt app.',
    'inDefinedTermSet': {
      '@type': 'DefinedTermSet',
      'name': 'Nuxt Modules',
    },
  }
])
</script>

12. 添加 Google Analytics 统计代码

1. 安装 nuxt-gtag:

npx nuxi@latest module add gtag

2. nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['nuxt-gtag'],
  gtag: {
    id: 'G-XXXXXXXXXX'
  }
})

3. 或者在环境变量中添加 NUXT_PUBLIC_GTAG_ID

NUXT_PUBLIC_GTAG_ID = G-XXXXXXXXXX

13. 添加 Microsoft Clarity 统计代码

1. 安装 nuxt-clarity-analytics:

pnpm add -D nuxt-clarity-analytics

2. nuxt.config.ts 添加依赖:

export default defineNuxtConfig({
  modules: [
    'nuxt-clarity-analytics'
  ]
})

3. 在环境变量中添加:

MICROSOFT_CLARITY_ID = 'clarity ID'

14. 添加 Umami 统计代码

1、 安装 nuxt-umami:

pnpm add nuxt-umami
  1. nuxt.config.ts 添加配置:
defineNuxtConfig({
  extends: ['github:ijkml/nuxt-umami']
});

3. app.config.ts 添加配置:

export default defineAppConfig({
  umami: {
    id: '95653e90-7b8b-4541-b6de-ea5e544d8c2d',
    host: 'https://umami.baiwumm.com',
    useDirective: true,
    version: 2,
    domains: ['dream-site.cn'],
    ignoreLocalhost: true
  }
});

4. 跟踪事件

<template>
  <button v-umami="'Event-Name'">
    Event Button
  </button>

  <button v-umami="{ name: 'Event-Name' }">
    as object
  </button>

  <button v-umami="{ name: 'Event-Name', position: 'left', ...others }">
    with event details
  </button>
</template>