添加 favicon 图标和 TDK（标题、描述、关键词）
nuxt.config.ts添加配置：export default defineNuxtConfig({ app: { title:'Dream Site', meta: [ { name: 'keywords', content: 'Nuxt.js,导航,网站' }, { name: 'description', content: '致力于打造程序员的梦中情站' } ], link: [{ rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' }], style: [], script: [], noscript: [] } })- 使用 useHead
<script setup lang="ts"> useHead({ title:'Dream Site', link: [{ rel: 'icon', type: 'image/x-icon', href: 'favicon.ico' }], meta: [ { name: 'keywords', content: 'Nuxt.js,导航,网站' }, { name: 'description', content: '致力于打造程序员的梦中情站' } ] }) </script> - 使用 useSeoMeta 组合函数
<script setup lang="ts"> useSeoMeta({ title: 'Dream Site', ogTitle: 'Dream Site', description: '致力于打造程序员的梦中情站', ogDescription: '致力于打造程序员的梦中情站', ogImage: 'https://example.com/image.png', twitterCard: 'summary_large_image', }) </script> /pages/目录中可以使用definePageMeta来根据当前路由设置元数据<script setup lang="ts"> definePageMeta({ title: 'Dream Site' }) </script>- 动态标题
<script setup lang="ts"> useHead({ // 作为字符串， // 其中`%s`会被标题替换 titleTemplate: '%s - Dream Site', // ... 或者作为一个函数 titleTemplate: (productCategory) => { return productCategory ? `${ productCategory} - Dream Site` : 'Dream Site' } }) </script>
官方文档：SEO和Meta
安装 @nuxtjs/seo 模块
我们需要安装 @nuxtjs/seo 插件，@nuxtjs/seo 是一个模块集合，它覆盖了搜索引擎中常用的模块：
- @nuxtjs/sitemap：网站地图
- nuxt-simple-robots：蜘蛛爬虫协议
- nuxt-schema-org：网页标准
- nuxt-seo-experiments：实验性 SEO 元特征
- nuxt-og-image：生成动态的社交分享图片
- nuxt-link-checker：检查失效链接
具体使用方式：
- @nuxtjs/seo 插件：
npx nuxi@latest module add seo 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
Robots
- 禁用网站索引
export default defineNuxtConfig({ site: { indexable: false } }) - 禁用页面索引
<script lang="ts" setup> defineRouteRules({ robots: false, }) </script> - 如果需要更精细的编程控制，可以使用
nuxt.config.ts配置该模块export default defineNuxtConfig({ robots: { disallow: ['/secret', '/admin'], } })
更加详细的配置可以参考官方文档：Robots
Sitemap
- 禁用
URL模式的索引export default defineNuxtConfig({ routeRules: { // Don't add any /secret/** URLs to the sitemap.xml '/secret/**': { robots: false }, } }) - 对于所有其他情况，您可以使用
include和exclude模块选项来过滤urlexport default defineNuxtConfig({ sitemap: { // exclude all URLs that start with /secret exclude: ['/secret/**'], // include all URLs that start with /public include: ['/public/**'], } }) 设置
Lastmod、changefreq、priority<script setup> useSeoMeta({ // will be inferred as the lastmod value in the sitemap articleModifiedTime: '2023-01-01' }) defineRouteRules({ sitemap: { changefreq: 'daily', priority: 0.3 } }) </script>缓存时间
export default defineNuxtConfig({ sitemap: { cacheMaxAgeSeconds: 3600 // 1 hour } })自定义样式
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%' }, ], }, })
更加详细的配置可以参考官方文档：Sitemap
OG Image
- 使用可组合
defineOgImageComponent来定义主页的og:image<script lang="ts" setup> defineOgImageComponent('NuxtSeo') </script> 在浏览器中访问主页并打开 Nuxt DevTools (
Shift+Alt+D)
自定义模板
<script lang="ts" setup> defineOgImageComponent('NuxtSeo', { title: 'Hello OG Image 👋', description: 'Look what at me in dark mode', theme: '#ff0000', colorMode: 'dark', }) </script>
更加详细的配置可以参考官方文档：OG Image
Schema.org
- 配置默认值
<script lang="ts" setup> useSchemaOrg([ defineWebPage({ name: 'My Page' }), defineWebSite({ name: 'My Site' }) ]) </script> - 如果你不想使用默认值
export default defineNuxtConfig({ schemaOrg: { default: false } }) - 设置身份类型
export default defineNuxtConfig({ schemaOrg: { identity: { type: 'Organization', // or 'Person' name: 'My Company', url: 'https://example.com', logo: 'https://example.com/logo.png' } } }) - 自定义节点
<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>
更加详细的配置可以参考官方文档：Schema.org
添加 Google Analytics 统计代码
- 安装 nuxt-gtag：
npx nuxi@latest module add gtag nuxt.config.ts添加配置：export default defineNuxtConfig({ modules: ['nuxt-gtag'], gtag: { id: 'G-XXXXXXXXXX' } })- 或者在环境变量中添加
NUXT_PUBLIC_GTAG_ID：NUXT_PUBLIC_GTAG_ID = G-XXXXXXXXXX
添加 Microsoft Clarity 统计代码
- 安装 nuxt-clarity-analytics：
pnpm add -D nuxt-clarity-analytics nuxt.config.ts添加依赖：export default defineNuxtConfig({ modules: [ 'nuxt-clarity-analytics' ] })- 在环境变量中添加：
MICROSOFT_CLARITY_ID = 'clarity ID'
添加 Umami 统计代码
- 安装 nuxt-umami：
pnpm add nuxt-umami nuxt.config.ts添加配置：defineNuxtConfig({ extends: ['github:ijkml/nuxt-umami'] });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 } });跟踪事件
<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>详细文档：nuxt-umami
总结
Nuxt3 集成了很多 SEO Modules，使开发者能够更加高效便捷地做好搜索引擎方面的优化。
好了，这篇文章就到这了，希望对你有所帮助！
