封面图加载中
添加 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 seonuxt.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 模块选项来过滤 url
export 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 gtagnuxt.config.ts 添加配置：
export default defineNuxtConfig({
modules: ['nuxt-gtag'],
gtag: {
id: 'G-XXXXXXXXXX'
}
})或者在环境变量中添加 NUXT_PUBLIC_GTAG_ID ：
NUXT_PUBLIC_GTAG_ID = G-XXXXXXXXXX添加 Microsoft Clarity 统计代码
pnpm add -D nuxt-clarity-analyticsnuxt.config.ts 添加依赖：
export default defineNuxtConfig({
modules: [
'nuxt-clarity-analytics'
]
})在环境变量中添加：
MICROSOFT_CLARITY_ID = 'clarity ID'添加 Umami 统计代码
安装 nuxt-umami
pnpm add nuxt-umaminuxt.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>详细文档：
总结
Nuxt3 集成了很多 SEO Modules，使开发者能够更加高效便捷地做好搜索引擎方面的优化。
好了，这篇文章就到这了，希望对你有所帮助！