目录
1）项目全局配置（目前我已舍弃当前方案，每个页面单独配置）：
2）其余页面需要加.html，格式如：aaa.html.vue
3）详情界面需要用aaaDetails文件包裹，目录如：pages/aaaDetails/[id].vue
4 ）还需要配置如下内容：根目录/middleware/unknownRoute.global.ts
1.robots.txt文件
解释：指示搜索引擎哪些部分可以被抓取和哪些部分不应该被抓取的指令文件，或称机器人文件
在nuxt3项目的目录结构：/public/robots.txt
一般来讲是全部放开的，特殊配置的话需要自行查阅相关资料
User-agent: *
Allow: /
Sitemap: https://www.aaa.com/sitemap.xml2.页面tdk配置
1）项目全局配置（目前我已舍弃当前方案，每个页面单独配置）：
export default defineNuxtConfig({
// ...
app: {
head: {
htmlAttrs: {
lang: "zh-CN",
},
title: "网站title",
charset: "utf-8",
viewport:
"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0",
meta: [
{ name: "description", content: "description" },
{ name: "keywords", content: "keywords，keywords" },
],
// 网站图标
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
pageTransition: { name: "page", mode: "out-in" },
},
})2）单页面配置（目前常用）：
除了tdk基本seo优化的参数以外，我还会加一些其他的不需要的话自行删除，有什么不清楚的请自行查阅相关资料
const runtimeConfig = useRuntimeConfig()
const linkUrl = runtimeConfig.public.linkUrl // 页面前缀：https://www.aaa.com
const title = `页面标题`
const description = `页面描述。`
const keywords = `页面关键词keywords`
const ico = `${imgUrl}/favicon.ico`
useSeoMeta({
title: title,
ogTitle: title,
description: description,
ogDescription: description,
keywords: keywords,
ogImage: ico,
ogUrl: `${linkUrl}/`,
twitterTitle: title,
twitterDescription: description,
twitterImage: ico,
twitterCard: 'summary'
})3.伪静态.html配置
先看目录截图：
1）index.vue不需要添加.html
2）其余页面需要加.html，格式如：aaa.html.vue
3）详情界面需要用aaaDetails文件包裹，目录如：pages/aaaDetails/[id].vue
[id].vue是Nuxt3中独特的接收参数的写法，如有疑问请自行查阅官网文档
接收到的id为例：
const route = useRoute()
// 多参数类似处理就好
// 以下是简单的id提取方法，可自行修改提取到全局utils中
let id = route.params.id
if (id) id = (id + '').split('.')[0]4 ）还需要配置如下内容：根目录/middleware/unknownRoute.global.ts
避免未携带.html通过，自动加上.html后缀
// 伪静态配置
export default defineNuxtRouteMiddleware((to, from) => {
// if (!to.matched.length) return navigateTo('/')
if (!to.path.endsWith('.html') && !to.path.includes('.') && to.path !== '/') {
return navigateTo(`${to.path}.html`)
}
})
4.sitemap.xml动态生成
1）安装对应项目模块@nuxtjs/sitemap
文档（下面有什么不懂的可以自行查阅）：@nuxtjs/sitemap - Nuxt 模块 - Nuxt 中文文档
- 不看文档直接使用以下命令安装
npx nuxi@latest module add sitemap
2）nuxt.config.ts配置：
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
...
modules: [
'@nuxtjs/sitemap' // 记得安装后检查此内容有没有，没有的话需要自行补充上
],
// 站点地图配置
site: {
url: 'https://www.aaa.com',
trailingSlash: false, // 是否保留站点地图 url 的尾部斜杠
indexable: false
},
sitemap: {
autoLastmod: true,
cacheMaxAgeSeconds: 1000 * 60 * 60 * 3, // 三个小时的更新频率
exclude: [], // 排除路径
sources: ['/api/sitemap'],
sitemaps: true, // sitemap多文件开关
defaultSitemapsChunkSize: 1000,
// 自定义用户界面
xslColumns: [
{ label: 'URL', width: '50%' },
{ label: 'Last Modified', select: 'sitemap:lastmod', width: '24%' },
{ label: 'Change Frequency', select: 'sitemap:changefreq', width: '13%' },
{ label: 'Priority', select: 'sitemap:priority', width: '13%' }
]
},
...
})
3）sitemap.js配置（当然使用ts也是可以的）：
目录：server/api/sitemap.js
const runtimeConfig = useRuntimeConfig()
const baseURL = runtimeConfig.public.apiBaseURL // 接口请求使用
// 根据自己项目需求，自行改动
export default defineSitemapEventHandler(async () => {
// 由于 public/sitemap routes参数配置无用
// 将以下页面挪到这里配置
const defList = [
// 首页
{
loc: `/`,
lastmod: new Date(),
changefreq: 'daily',
priority: 1
},
// 文章
{
loc: `/article.html`,
lastmod: new Date(),
changefreq: 'daily',
priority: 0.9
},
]
// 动态数据
const res = await $fetch(`${baseURL}/seo/getSitemapList`, {
method: 'GET',
params: {}
})
// 图文详情动态数据
const materialList = (res?.data?.materialList || []).map(item => {
return {
loc: `/articleDetails/${item.id}.html`,
lastmod: new Date(),
changefreq: 'daily',
priority: 0.8
}
})
return [].concat(
defList,
materialList,
)
})
最后不要忘记一件三连哦！
相关文章：