添加 favicon 图标和 TDK（标题、描述、关键词）
nuxt.config.ts 添加配置。
默认导出defineNuxtConfig({
应用程序： {
title:“梦想之地”，
元： [
{ name: \’关键字\’, content: \’Nuxt.js、导航、网站\’ },
{ name: \’描述\’, content: \’努力打造程序员的梦想网站\’ }
],
link: [{ rel: \’icon\’, type: \’image/x-icon\’, href: \’favicon.ico\’ }],
样式：[],
脚本：[],
noscript: []
}
})
使用头
脚本设置lang=\’ts\’
使用头（{
title:“梦想之地”，
link: [{ rel: \’icon\’, type: \’image/x-icon\’, href: \’favicon.ico\’ }],
元： [
{ name: \’关键字\’, content: \’Nuxt.js、导航、网站\’ },
{ name: \’描述\’, content: \’努力打造程序员的梦想网站\’ }
]
})
/剧本
使用useSeoMeta 组合功能
脚本设置lang=\’ts\’
使用SeoMeta({
title:“梦想之地”，
ogTitle: \’梦想站点\’,
description: \’努力打造程序员的梦想网站\’,
ogDescription: \’努力创建程序员的梦想网站\’,
ogImage: \’https://example.com/image.png\’,
twitterCard: \’summary_large_image\’,
})
/剧本
您可以使用/pages/目录中的definePageMeta来设置基于当前根目录的元数据。
脚本设置lang=\’ts\’
定义页面元({
title: “梦想之地”
})
/剧本
动态标题
脚本设置lang=\’ts\’
使用头（{
//作为字符串，
//`%s` 将被标题替换
titleTemplate: \’%s – 梦想站点\’,
//.或者作为一个函数
titleTemplate:（产品类别）={
退回的产品类别
`${productCategory} – 梦想站点`
: ‘梦境’
}
})
/剧本
官方文档：SEO 和元
安装 @nuxtjs/seo 模块
您需要安装@nuxtjs/seo 插件。 @nuxtjs/seo 是涵盖搜索引擎中常用模块的模块集合。
@nuxtjs/sitemap：站点地图nuxt-simple-robots：蜘蛛协议nuxt-schema-org：Web 标准nuxt-seo-experiments：实验性SEO 元特征nuxt-og-image：动态社交共享图像生成nuxt -link -checker：检查损坏的链接
具体用法：
@nuxtjs/seo 插件：
npx nuxi@添加了最新模块SEO
根据您的情况将配置添加到nuxt.config.ts 中。
默认导出defineNuxtConfig({
//搜索引擎优化设置
站点： {
url: \’https://dream-site.cn\’,
name:“梦境”,
description: \’努力打造程序员的梦想网站\’,
默认Locale: \’zh-cn\’,
except: [\’/admin/_components/**\’], //过滤不需要的URL
acheMaxAgeSeconds: 24 * 3600, //每天的缓存时间
autoLastmod: true, //自动检测每个URL的lastmod日期
},
根规则： {
//不要将/secret/** URL 添加到sitemap.xml
\’/admin/_components/**\’: { robots: false },
}
})
现在您可以打开sitemap.xml 和robots.txt。详细配置请参考nuxt-seo官方文档。
Robots
禁用您网站的索引
默认导出defineNuxtConfig({
site: {indexable: false}
})
禁用页面索引
设置脚本lang=\’ts\’
定义根规则({
robots:假的，
})
/剧本
如果您需要更多程序控制，可以使用nuxt.config.ts 配置模块。
默认导出defineNuxtConfig({
机器人： {
disallow: [\’/secret\’, \’/admin\’],
}
})
详细设置请参考官方文档“Robot”。
Sitemap
禁用URL 模式索引
默认导出defineNuxtConfig({
根规则： {
//不要将/secret/** URL 添加到sitemap.xml
\’/secret/**\’: { robots: false },
}
})
否则，您可以使用“包含”和“排除”模块选项来过滤URL。
默认导出defineNuxtConfig({
网站地图： {
//排除所有以/secret 开头的URL
排除： [\’/秘密/**\’],
//包含所有以/public 开头的URL
include: [\’/public/**\’],
}
})
设置lastmod、changefreq、优先级
脚本设置
使用SeoMeta({
//推断为站点地图中的lastmod 值
文章修改时间： \’2023-01-01\’
})
定义根规则({
网站地图： {
Changefreq: \’每日\’,
优先级： 0.3
}
})
/剧本
缓存时间
默认导出defineNuxtConfig({
网站地图： {
cacheMaxAgeSeconds: 3600 //1 小时
}
})
定制风格
默认导出defineNuxtConfig({
网站地图： {
xslColumns: [
{ label: \’网址\’, width: \’50%\’ },
{ label: \’最后更新\’, select: \’sitemap:lastmod\’, width: \’25%\’ },
{ label: \’优先级\’, select: \’sitemap:priority\’, width: \’12.5%\’ },
{ label: \’更改频率\’, select: \’sitemap:changefreq\’, width: \’12.5%\’ },
],
},
})
更详细的设置请参考官方文档：Sitemap
OG Image
使用可组合的defineOgImageComponent 定义主页的og:image。
设置脚本lang=\’ts\’
定义OgImageComponent(\’NuxtSeo\’)
/剧本
访问主页并在浏览器中打开Nuxt DevTools (Shift + Alt + D)
自定义模板
设置脚本lang=\’ts\’
DefineOgImageComponent(\’NuxtSeo\’, {
title: \’你好OG 图像\’,
description: \’在黑暗模式下观看我\’,
主题： \’#ff0000\’,
colorMode: \’暗\’,
})
/剧本
更详细的设置请参考官方文档：OG Image
Schema.org
默认配置
设置脚本lang=\’ts\’
使用SchemaOrg([
定义网页({
name:“我的页面”
}),
定义网站({
name: \’我的网站\’
})
]）
/剧本
如果您不想使用默认值
默认导出defineNuxtConfig({
架构Org: {
默认： 假
}
})
设置ID类型
默认导出defineNuxtConfig({
架构Org: {
身份： {
type: \’组织\’, //或\’个人\’
name: \’我的公司\’,
url: \’https://example.com\’,
logo: \’https://example.com/logo.png\’
}
}
})
自定义节点
设置脚本lang=\’ts\’
使用SchemaOrg([
{
\’@type\’: \’定义术语\’,
\’名称\’: \’Nuxt Schema.org\’,
\’description\’: \’Nuxt Schema.org 是一个Nuxt 模块，用于将Schema.org 添加到您的Nuxt 应用程序中。 \’,
\’inDefinedTermSet\’: {
\’@type\’: \’定义术语集\’,
\’name\’: \’Nuxt 模块\’,
},
}
]）
/剧本
详细配置信息请参考官方文档Schema.org。
添加 Google Analytics 统计代码
安装nuxt-gtag。
npx nuxi@添加最新模块gtag
nuxt.config.ts 添加配置。
默认导出defineNuxtConfig({
module: [\’nuxt-gtag\’],
gtag: {
id: \’G-XXXXXXXXXXXX\’
}
})
或者，将NUXT_PUBLIC_GTAG_ID 添加到环境变量中。
NUXT_PUBLIC_GTAG_ID=G-XXXXXXXXXX
添加 Microsoft Clarity 统计代码
安装nuxt-clarity-analytics。
pnpm add -D nuxt-clarity-analytics
添加nuxt.config.ts 依赖项。
默认导出defineNuxtConfig({
模块： [
“nuxt-清晰度-分析”
]
})
添加环境变量。
MICROSOFT_CLARITY_ID=\’清晰度ID\’
添加 Umami 统计代码
安装nuxt-umami。
添加了pnpm nuxt-umami
nuxt.config.ts 添加配置。
定义NuxtConfig({
extends: [\’github:ijkml/nuxt-umami\’]
});
添加app.config.ts配置。
导出默认的defineAppConfig({
鲜味： {
id: \’95653e90-7b8b-4541-b6de-ea5e544d8c2d\’,
host: \’https://umami.baiwumm.com\’,
useDirective: true，
版本： 2，
域名：[\’dream-site.cn\’],
忽略Localhost: true
}
});
田径比赛
按钮v-umami=\’\’活动名称\’\’
事件按钮
/按钮
按钮v-umami=\'{name: \’活动名称\’}\’
作为一个对象
/按钮
Button v-umami=\'{name: \’事件名称\’,position: \’左\’,others}\’
附有活动详情
/按钮
详细文档：nuxt-umami
总结
Nuxt3集成了许多SEO模块，可以让开发者更高效、更方便地优化搜索引擎。
好了，这就是本文的全部内容。如果它有帮助，那么我很高兴。
以上关于#Nuxt3实践的相关内容摘自网络，供大家参考。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/92271.html
