Nuxt3项目的SEO优化(robots.txt,页面tdk,伪静态.html,sitemap.xml动态生成等)

目录

1.robots.txt文件

2.页面tdk配置

1)项目全局配置(目前我已舍弃当前方案,每个页面单独配置):

2)单页面配置(目前常用):

3.伪静态.html配置

1)index.vue不需要添加.html

2)其余页面需要加.html,格式如:aaa.html.vue

3)详情界面需要用aaaDetails文件包裹,目录如:pages/aaaDetails/[id].vue

[4 )还需要配置如下内容:根目录/middleware/unknownRoute.global.ts](#4 )还需要配置如下内容:根目录/middleware/unknownRoute.global.ts)

4.sitemap.xml动态生成

1)安装对应项目模块@nuxtjs/sitemap

2)nuxt.config.ts配置:

3)sitemap.js配置(当然使用ts也是可以的):


1.robots.txt文件

解释:指示搜索引擎哪些部分可以被抓取和哪些部分不应该被抓取的指令文件,或称机器人文件

在nuxt3项目的目录结构:/public/robots.txt

一般来讲是全部放开的,特殊配置的话需要自行查阅相关资料

javascript 复制代码
User-agent: *
Allow: /
Sitemap: https://www.aaa.com/sitemap.xml

2.页面tdk配置

1)项目全局配置(目前我已舍弃当前方案,每个页面单独配置):

javascript 复制代码
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优化的参数以外,我还会加一些其他的不需要的话自行删除,有什么不清楚的请自行查阅相关资料

javascript 复制代码
  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为例: ```javascript const route = useRoute() // 多参数类似处理就好 // 以下是简单的id提取方法,可自行修改提取到全局utils中 let id = route.params.id if (id) id = (id + '').split('.')[0] ``` #### 4 )还需要配置如下内容:根目录/middleware/unknownRoute.global.ts 避免未携带.html通过,自动加上.html后缀 ```javascript // 伪静态配置 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 中文文档](https://nuxt.zhcndoc.com/modules/sitemap "@nuxtjs/sitemap - Nuxt 模块 - Nuxt 中文文档") * 不看文档直接使用以下命令安装 > npx nuxi@latest module add sitemap #### 2)nuxt.config.ts配置: ```javascript // 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 ```javascript 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, ) }) ``` **最后不要忘记一件三连哦!** 相关文章: 1.[Nuxt3服务端渲染项目简单搭建](https://blog.csdn.net/weixin_57844432/article/details/141951007?spm=1001.2014.3001.5501 "Nuxt3服务端渲染项目简单搭建") 2.[Nuxt3服务端渲染项目进阶(接口请求,请求代理等)-CSDN博客](https://blog.csdn.net/weixin_57844432/article/details/144821494?sharetype=blogdetail&sharerId=144821494&sharerefer=PC&sharesource=weixin_57844432&spm=1011.2480.3001.8118 "Nuxt3服务端渲染项目进阶(接口请求,请求代理等)-CSDN博客")

相关推荐
安分小尧4 小时前
React 文件上传新玩法:Aliyun OSS 加持的智能上传组件
前端·react.js·前端框架
编程社区管理员4 小时前
React安装使用教程
前端·react.js·前端框架
拉不动的猪5 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya5 小时前
react redux的学习,单个reducer
前端·javascript·react.js
skywalk81635 小时前
OpenRouter开源的AI大模型路由工具,统一API调用
服务器·前端·人工智能·openrouter
Liudef065 小时前
deepseek v3-0324 Markdown 编辑器 HTML
前端·编辑器·html·deepseek
拉不动的猪5 小时前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试
z_mazin6 小时前
Chrome开发者工具实战:调试三剑客
前端·javascript·chrome·网络爬虫
sen_shan7 小时前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
旧识君7 小时前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss