Nuxt3 实战 (十二)：SEO 搜索引擎优化指南

添加 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/**'], // 过滤不需要的 urlcacheMaxAgeSeconds: 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 模块选项来过滤 url

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

设置 Lastmod、changefreq、priority

<script setup>
useSeoMeta({// will be inferred as the lastmod value in the sitemaparticleModifiedTime: '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>