https://github.com/1638410/cn-glowy-circle/discussions
实际上博客的评论区使用 giscus 似乎也会在 discssion 建立一些东西，能被 github 搜索到。那么理论上也可以用博客来搞这个所谓的评论区。
不知道这个会被索引到搜索引擎嘛——
]]>3. 用 semrush 挖掘更多的长尾词。
4. 将挖掘出来的词表丢进项目里，用 Claude code 或 codex 分析后继续开发，改进，做出一个完善的网站。
5. 部署到 vercel ，提交到 Google Search console ，然后坐等流量。
两天就能上线一个新站，用这套方法可以快速上站。
分享我自己用这套方法做的一个网站： https://www.fortune-cookie.cc/ ]]>
原先我都是手动登录到各大搜索引擎的站长管理平台手动提交的。 对了，我每个平台都提交了 sitemap ，还需要每天提交新链接吗？还是说有了 sitemap 就不用管了
]]>1.一个个人展示网站。 提交地址：注册账号，然后选择一个 profile 类型的 template ，然后把自己的网站都挂上去，然后选一个子域名，publish ，就会获得一个 xxx.carrd.co 的个人页 https://linkjob.carrd.co/
2.建立一个个人页，将你的网站都添加上去。个人信息这个 cards 里能放一个网站，可以新增 cards 放更多的链接。 注意：记得点右上角，设置 your cards 中将所有的 cards 设置为可见。 https://dashboard.tap.bio/accounts/Linkjob.ai/
3.这是一个 adobe 的自由职业求职平台，可以创建一个自己的账号，然后在 website 那里填入自己的网站。注意：注册新账号时地区要选外国，不然会显示无法使用。
https://www.behance.net/linkjobai
4.这是一个展示 startup 、公司，求职等的平台。 提交地址：可以选择创建个人 profile ；也可以选择创建公司 profile ，把你的网站包装成一个 startup/company 。 我是选择了公司 profile ，然后在公司信息中有输入 website 的地方，可以输入你的网站。 https://www.startus.cc/company/linkjobai
5.下载 evernote ，然后写一个 note ，把自己的网站写上去，然后将 note 公开 https://share.evernote.com/note/3f1c3c04-4a64-1846-0e70-b068e94b23e6
6.一个类似于 bentome 的 link in bio page 。 提交地址： https://biosites.com/ 注册自己的个人页，然后把你的网站都挂上去
7.类似于 bento.me 的 link in bio page 。免费提交。 提交地址：创建个人页 https://onee.page/linkjobai
8.dev.to 是一个开发者社区平台，流量非常大，DR 非常高 提交地址：新建一个账号，在个人信息 website URL 里填写你的网站，或发 post 带上网站，但注意别太硬广
https://dev.to/linkjob_ai_63fbd5a22fbd1d
9.make.rs 是一个社区网站，你可以在里面发表关于任何你产品的内容，其中可以带上你的产品的链接 https://make.rs/project/3252-your-ai-copilot-for-tech-finance-interviews-realtime-feedback-and-free-mock-practice
10.与 bentome 类似，创建个人页，然后挂上自己的个人网站。 https://k08w5.mssg.me/
11.提交地址：建立个人页，并添加上自己的网站链接。
12.在个人信息页添加自己的网站，直接加就可以了
https://folll.io/linkjobai 一个 Link in bio page 。 提交地址：创建个人页，然后在 links 部分填上你的网站信息。
提交地址：注册账号，点击 your profile https://www.sanity.io/exchange/community/Linkjob.ai
15.一个类似推特的社交平台。 提交地址：新建账号，把你的网站写进 profile 里。也可以发 post ，在内容带上你的网站链接。外链都是 dofollow 的。 https://bsky.app/profile/linkjob.bsky.social
16.提交方式：注册账号，点击右上角头像 - my profile ，里面 website 栏位填入自己的网站。 https://hub.docker.com/u/linkjobai
17.在个人 Profile 中可以填入一个网址，这个网址是 dofollow 的外链。 https://simplelister.com/profile/linkjobai
18.一个日程安排工具 提交地址：注册一个账号，在个人资料的 about 栏里写入你的网站链接 https://cal.com/linkjob-ai-bdoybz
19.注册账号，然后在个人 profile 里 readme 部分填写你的网站。另外还可以写 post 发布，里面介绍你的产品/网站 https://app.daily.dev/linkjobai
20 如果大家觉得还不错。我以后可以再更新其他的，一起加油，也欢迎和我交流
]]>site:网址可以看到自己的网站
我也不太懂 SEO ，不知道这个好不好搞。
]]>我发现很多人花大量时间提交导航站和博客留言这些，导致里面全是同行，估计都没真人看，这有意义吗。难道 google 算法识别不出来吗？
请问大家博客，导航站这些地方提交真的有用吗？大家外链一般提交到哪些地方。 ]]>
技术栈
- 框架: Next.js 14.2.3 (App Router)
- CMS: Keystatic (基于文件的 CMS)
- 样式: Tailwind CSS + Radix UI
- 部署: Docker
核心优化策略
1. 静态生成 (SSG) + 增量静态再生 (ISR)
- 构建时生成所有页面
- 设置合理的重新验证时间（ 1 小时）
- 强制静态生成，避免客户端渲染
2. 图片优化
- 全面使用 Next.js Image 组件
- 自动 WebP 转换和懒加载
- 批量预处理 Logo 为统一尺寸
- 设置合适的
sizes属性
3. 缓存策略
- React
cache()包装数据读取函数 - RSS 和 API 路由设置 30 分钟缓存
- 充分利用 Next.js 自动优化
4. 代码分割
- 合理使用 Server Components
- 客户端组件按需加载
- 使用 Suspense 处理异步组件
5. 字体优化
- 使用 Geist 字体变量
- 设置
font-display: swap - 预加载关键字体文件
性能成果
- LCP: 2.2s (绿色)
- FID: 78ms (绿色)
- CLS: 0 (完美)
- FCP: 2.1s (绿色)
- TTI: 1.3s (绿色)
关键经验
优化重点
- 图片是性能杀手 - 正确使用 Next.js Image 组件至关重要
- 避免客户端渲染 - 能用 Server Components 就用 Server Components
- 充分利用缓存 - 从 React 缓存到 HTTP 缓存
- 字体优化 - 避免布局偏移，使用字体变量
踩过的坑
- 忘记设置图片
sizes属性导致 LCP 不佳 - 过度使用客户端组件影响 FCP
- 字体加载导致的布局偏移
总结
通过系统性的优化，内容密集型网站也能达到满分。关键是理解 Next.js 的优化机制，严格控制客户端 JS ，优化图片和字体。
网站地址：https://dorefer.com
欢迎讨论交流！
]]>去年 7 月份的时候，我正式发布了我的https://tempmail100.com，这是一个免费的临时邮箱网站。经常逛 v2 的朋友，应该对这个网站或多或少有一些印象。
上线后，我在 v2 发出了我的第一篇推广帖子，随后给我的网站带来了一波流量的高峰，不得不说 v2 的用户是非常的活跃。过后我在很多网站都发了对应的推广文章。
当时为了便宜，首先选择的是 xx 的轻量云服务，在项目的初期确实大大的帮我节约了成本，但是到后面我发现轻量云有个致命的问题。
经过一段时间的推广，临时邮箱的访问量慢慢的起来了，随后发现轻量云会随机的出现硬盘使用率 100%的情况，服务器直接卡死。我当时想到的第一解决方案是，重启服务器，但是当多次重启以后，硬盘还是处于卡死状态。想着可能是系统盘的 IO 有限制，便买了数据篇挂载了进去，然后将所有的服务全部已到了数据盘。但是发现此问题还是无法得到解决，每次都是卡死半个小时左右。最后迁移到了Hostinger，问题得到解决。
由于我在很多地方分享过我的访问数据，造成很多人看到我分享的数据以后，纷纷加入了临时邮箱的赛道，虽然大家一起做大做强是好事，但是这个就造成临时邮箱确实太卷了。我其实一直都觉得我的临时邮箱有一定的运气属性在里面的，并不是随便做一做，访问量就能起来的，后期的 SEO 极为困难。
随后的问题就是用户增长。在年初的时候，从 GSC 看到的数据，在最高访问即将破万的时候，临时邮箱的访问量就开始慢慢的减少，直到 4 ，5 月份的时候我才反应过来，我需要继续做 SEO ，但是对于 SEO 来说，我也没有什么经验，我一般是东发一个外链，西发一篇文章，就造成了我发了很多低质量的外链，这个也是会影响访问量的因素之一。上个月我又对首页进行了调整，调整了大概 1/3 的内容，调整完的第二天，访问量近一步的下降，咨询了几位朋友以后，得到的回复确实是，修改网站首页会造成访问量下降。现在每天差不多就只有 1k 人左右的访问量了，不知道什么时候可以恢复。
总结：
- SEO 需要长期的坚持
- 没事别乱改首页
- 太便宜的服务器不能用在生产环境
- 临时邮箱非常卷，大家别来挤了
如果文中有一些细节错误，请在评论区指出。
HTTP 协议、互联网、爬虫、外链。
看起来几个不相关的东西，其实对我们做网站很重要。
总有朋友问，为什么在 Ahrefs 看到了的外链，在 GSC 上看不到，其实原因就是因为爬虫还没爬到。
要解释为什么还没爬到，就需要解释互联网到底是个啥玩意儿。
所以今天的小课堂，是科普性质的，我尽量用我的语言讲得通俗易懂一点。
互联网，互联网，顾名思义，就是一张互联连接起来的网。
这里的网，既可以认为是网线，也可以认为是链接。
一个是实体，一个是虚拟。
世界上所有的计算机，通过网线、光纤、光缆链接起来了，这是实体的链接。
备注：图片由 Claude 生成，能够理解意思即可，细节不用深究，下文所有图片同理
而互联网，正是建立在这个实体网络上的。
每一个网站，都部署在某一台或者某几台服务器上，通过网线连入整个互联网。
而一个网站，少则一个网页，多个几十个，几百个，几万个，几千万个网页。
这些网页之间，通过链接来互相连接。
正是因为有了这些链接，整个互联网，才能称之为真正的互通互联。
服务器，其实也是计算机，只不过是一般不关机，持久长期运行的计算机。
专门用于处理网络请求。
你甚至可以把你自己的电脑通过一些工具，连入互联网，让别人能够通过网络来请求你的电脑。
不过这里我们不展开。
什么是网络请求？
你用浏览器打开一个网页，其实就是由你的浏览器作为客户端，向这个网页所在的服务器，发起一个网络请求，来获取网页 HTML 源码。
这是获取数据，所以是 GET 形式的请求。
你打开推特网页，使用网页里的输入框，发布了一条推文，其实也是一次网络请求。
这是提交数据，所以一般用 POST 形式的请求。
你在你的服务器里调用某个 API ，其实也是发起一个网络请求，这次的请求虽然是服务器到服务器，但其实也分客户端和服务端，你的服务器作为请求的发起方，就是客户端，提供 API 服务的那台服务器，就是服务端。
而请求的具体格式，就是由 HTTP 协议规定的。
所有客户端发出的请求，都遵循 HTTP 协议，所有的服务端响应请求时，也遵循 HTTP 协议。
HTTP 全称 超文本传输协议 ，是明文纯文本协议，也就是发出的数据，返回的数据，其实都是文本格式。
即使我们上传的是图片等二进制数据，有时也会通过 Base64 等编码方式转换为文本格式来传输。
如果是 HTTPS ，则在客户端和服务端进行了加解密，加密后传输的是二进制数据。
HTTP 协议的具体格式，我们今天不展开，感兴趣的朋友可以去自学。
我们只需要知道，网站，其实是由一个一个网页构成的，而每一个网页，返回给客户端的，其实都是 HTML 代码，也是纯文本的，肉眼可以读取和解析的。
浏览器去解析 HTML 文本，之后渲染为丰富多彩的，可以互动操作的网页。
我们常说的后端渲染，就是浏览器发起一个请求后，返回的网页是完整的内容，所有最终渲染出来的，都由后端在 html 里一一返回。
而前端渲染，通常分成两步，第一步浏览器请求时，返回一个 HTML 网页基本内容以及一段 js 代码。
第二步，浏览器解析并且执行 JS 代码，按需再发起新的请求，获取数据之后，在 JS 里组装好 HTML 内容，由浏览器在前端插入到网页的合适位置，最后渲染出来。
互联网，并没有一个统一的数据库。
所有网站和网页都是分散在整个互联网上的各个不同的服务器里的。
没有谁能够清楚的说出全世界总共有多少个网站，有多少网页。
如果有一家公司，想要知道整个互联网上到底有多少网页，就需要派出爬虫，一个一个网页去爬。
这里的爬，其实就是发起一个网络请求，获取网页 HTML 代码。
之后解析 HTML 代码，提取里边的链接，查看是否已经抓取，如果是已经抓取过的网页，就去看是否需要再次抓取，如果是没抓取过的，就需要判断是否需要去抓取。
对于需要抓取的，就放到待爬列表里去。
之后，不断的从待爬列表，拿任务，不断的爬。
爬网页，刚说了，其实是发出请求，下载 HTML 代码。
这就需要消耗资源，所以如果想要爬完整个互联网，需要花特别多的资源，资源就是钱，也就是说，需要花很多钱。
所以这里会有一些判断规则，各家的策略都不一样，目的都是找出值得去爬的网页，尽可能的减少成本。
对于谷歌的爬虫来说，分配给每一个网站的爬虫预算都是不一样的，有些新网站，爬虫预算少，有些高权重网站，爬虫预算就高。
如果你的网站，在大量生成质量低的页面，谷歌一开始爬了之后，发现你的网页都拿不到排名，之后就会调低你的预算，不再爬新的网页。
对于已经爬了的网页，也可能不索引。
对于已经索引了的网页，也可能删除索引。
这时候，你的 GSC 里的网页索引里，就会看到未索引页面在不断增长。
如果你无视这些信号，还在持续不断的生成同样的低质量页面，谷歌就会对你的网站进行惩罚，不给你曝光了，目的也是提醒你，要有点自觉，别再生成垃圾页面了。
刚才说了，各家的爬虫都是独立运行的。
所以谷歌的爬虫爬到了的网页，Ahrefs 家的爬虫不一定爬到了。
同样的，Ahrefs 家爬虫爬到了的网页，谷歌的爬虫不一定爬到了。
另外，谷歌 GSC 里显示的外链（反向链接），是有延迟的，并不是爬虫抓取到了，就立马显示出来了。
而 Ahrefs 等 SEO 数据平台的反链，会更实时的放出来。
基于以上两个原因，一、爬虫独立运行； 2 、数据显示时间不一致，就会导致大家在各个平台看到的数据不一致。
举例，你在 ABC 三个网站给你的 D 网站加了外链，过两天，你去 Ahrefs 查，可能看到了 BC 出来了，A 还没出来，而去 GSC 查，可能一个都看到，或者只看到了 A ，或者只看到了 B ，都是有可能的。
为什么现在大家做 AI 搜索，不会想着去自建一个爬虫？
原因就是上面说的，如果想要建一个把全网所有网页都爬完的爬虫系统，需要的费用会是天价的。
所以 ChatGPT 会选择用 Bing 的搜索接口，有些别的 AI 搜索可能会选择 Google 的接口，或者别的搜索引擎的接口。
但是 OpenAI 是有爬虫的，他的目的不是爬完全网的所有网页，而是去爬一些指定的，有着高质量内容的网页，用于构建训练模型所需要的数据集。
以及，当我们提出让 GPT 去搜索总结一些网页时，实时的去抓取网页内容。
以上就是今天的哥飞小课堂内容，主要是给大家科普一下，网站到底是个什么东西，互联网到底是怎么互联的。
理解了这些基础概念，对于大家做好 SEO ，是有帮助的。
而且程序员学好了 SEO ，就有了不依赖平台而独自生存的能力。
哥飞祝愿每一位程序员，都能得偿所愿。 ]]>
- 注册一个账号
- 把你的网站都挂上去
- 把你的主页分享到能被爬虫爬取的地方，类似这个： https://bio.site/rainwang
1. 引言
Nuxt 框架在 SEO 方面的优势主要体现在以下几个方面:
- 服务器端渲染(SSR): Nuxt 默认支持 SSR,这意味着搜索引擎爬虫可以直接看到完整的页面内容,而不需要执行 Javascript 。
- 内置的元标签管理: Nuxt 提供了比 Next 更简单的 API 来管理
<head>标签,包括 title, meta 描述等关键 SEO 元素。 - 静态站点生成(SSG): 通过 nuxt generate 命令,可以生成完全静态的网站,进一步提高了性能和 SEO 友好度。
2. Nuxt 内置的 SEO 功能
Nuxt 框架内置了多个强大的 SEO 工具,让开发者可以轻松地优化他们的应用程序。让我们详细了解这些功能:
useHead 和 useSeoMeta 组合式函数
Nuxt 有 2 个组合式函数,使得管理头部元标签变得更加简单和灵活:
useHead: 这个函数允许你动态设置<head>标签的内容。
useHead({ title: 'My Amazing Site', meta: [{ name: 'description', content: 'This is my amazing site built with Nuxt 3' }], link: [{ rel: 'canonical', href: 'https://example.com' }] }) useSeoMeta: 这个函数专门用于设置 SEO 相关的元标签。
useSeoMeta({ title: 'My Amazing Site', ogTitle: 'My Amazing Site - The Best Site Ever', description: 'This is my amazing site built with Nuxt 3', ogDescription: 'Experience the best site ever built with Nuxt 3', ogImage: 'https://example.com/image.jpg' }) 这两者最终达成的效果是一致的，都是在 head 里面去设置源数据标签，并没有很特殊的区别使用场景，只是有 ts 类型和进行结构简化了当使用 useSeoMeta 的时候。
动态元标签管理
Nuxt 允许你根据页面内容或路由动态地更新元标签。这对于创建独特的、针对每个页面优化的元描述和标题非常有用。
const route = useRoute() useHead(() => ({ title: `${route.params.productName} - Our Store`, meta: [ { name: 'description', content: `Learn more about ${route.params.productName} and purchase it from our store.` } ] })) 这个场景的考虑是这样的，因为有 lazy 标识，会直接进入页面进行客户端渲染，但因为是新进入页面此时请求还没有拿到数据，title 在浏览器上方显示的就是undefined-product, 而当请求结束后，因为data是一个响应式对象，会直接更新页面的title。
const { data } = await useFetch('/api/products/[id]', { lazy: true }) useHead(() => ({ title: `${data.title}-product` })) 这只是个小 demo ，更好的做法是，当没数据的时候，有一个 title 的占位标志文本。
自动生成规范链接（ canonical URLs ）
Nuxt 可以自动为你的页面生成规范链接,这有助于防止重复内容问题。你可以在nuxt.config.js中配置这个功能:
export default defineNuxtConfig({ app: { head: { link: [{ rel: 'canonical', href: 'https://example.com' }] } } }) 这些语法糖能为 Nuxt 应用提供了坚实的 SEO 基础。在下一节中,我们将探讨如何使用 @nuxtjs/seo 模块来进一步增强你的 SEO 策略。
3. @nuxtjs/seo 模块
@nuxtjs/seo 是一个功能强大的 Nuxt.js 模块，专门用于优化网站的搜索引擎表现。它提供了一套全面的 SEO 工具，使开发者能够轻松实现各种 SEO 最佳实践。
功能介绍和使用方法
@nuxtjs/seo 模块主要提供以下功能：
- 自动生成和管理元标签
- 创建结构化数据（ Schema.org ）
- 生成站点地图（ Sitemap ）
- 配置 robots.txt
- 提供动态 SEO 规则生成
要使用 @nuxtjs/seo 模块，首先需要安装：
npm install @nuxtjs/seo 然后在 nuxt.config.ts 文件中添加模块：
export default defineNuxtConfig({ modules: ['@nuxtjs/seo'] }) 在 nuxt.config 中配置 SEO
@nuxtjs/seo 模块允许你在 nuxt.config.ts 中直接配置 SEO 设置。
site 配置
site 配置定义了网站的基本信息，这是在使用 nuxtjs/seo 必须的：
export default defineNuxtConfig({ site: { url: 'https://example.com', name: 'My Awesome Site', description: 'This is my awesome website', defaultLocale: 'en', enabled: true, debug: false, indexable: true, trailingSlash: false } }) 主要参数说明：
url: 网站的规范 URLname: 网站名称description: 网站描述defaultLocale: 默认语言enabled: 是否启用 site 配置（默认为 true ）debug: 是否启用调试模式（默认为 false ）indexable: 控制网站是否可以被搜索引擎索引（默认在生产环境为 true ）trailingSlash: 控制 URL 是否应该包含尾部斜杠（默认为 false ），尾斜杠应该是网站统一的，不然会出现索引页面分流的问题。
schemaOrg 配置
schemaOrg 配置用于生成结构化数据也就是ld-json：
export default defineNuxtConfig({ schemaOrg: { identity: { type: 'Organization', name: 'Example Company', url: 'https://example.com', logo: 'https://example.com/logo.png' }, defaults: true, minify: true, reactive: false, enabled: true, debug: false } }) 主要参数说明：
identity: 定义网站或组织的身份信息defaults: 是否启用默认的 Schema.org 设置（默认为 true ）minify: 是否压缩 Schema.org 输出（默认在生产环境为 true ）reactive: 是否启用客户端反应性（默认在开发环境或非 SSR 模式下为 true ）enabled: 是否启用 Schema.org （默认为 true ）debug: 是否启用调试模式（默认为 false ）
robots.txt 配置
@nuxtjs/seo 模块允许你配置 robots.txt 文件：
export default defineNuxtConfig({ robots: { UserAgent: '*', Disallow: '/private', Allow: '/', Sitemap: 'https://example.com/sitemap.xml' } }) 这将生成一个 robots.txt 文件，允许所有搜索引擎爬虫访问除 /private 目录外的所有页面，并指向你的站点地图。
sitemap 配置
站点地图配置会自动帮你生成文件路由的页面，如果你需要额外的内容，就使用 sources 配置， 添加一个 Nuxt 的 SeverApi 返回额外的结果。
export default defineNuxtConfig({ sitemap: { enabled: true, sortEntries: true, sources: ['/api/sitemap-urls'], excludeAppSources: false, autoLastmod: true, sitemaps: false, defaultSitemapsChunkSize: 1000, include: ['/**'], exclude: ['/admin/**'], xsl: '/__sitemap__/style.xsl', discoverImages: true, discoverVideos: true, sitemapName: 'sitemap.xml', cacheMaxAgeSeconds: 600, sitemapsPathPrefix: '/__sitemap__/', debug: false } }) 主要参数说明：
-
enabled: 是否生成站点地图（默认为 true ） -
sortEntries: 是否对站点地图条目进行排序（默认为 true ） -
sources: 用于站点地图的数据源// server/api/__sitemap__/urls.ts 通常在这个位置定义 import { defineSitemapEventHandler } from '#imports' import { characterUrls } from '~/characterUrls' export default defineSitemapEventHandler(async () => { const internalLinks = await $fetch('/api/internal-links') if (internalLinks) { const internalLinksNodes = internalLinks.map((link) => asSitemapUrl({ loc: link, lastmod: new Date().toISOString(), priority: 0.8 }) ) return [...internalLinksNodes, ...characterUrls] } return [] }) -
autoLastmod: 是否自动检测每个 URL 的最后修改日期（默认为 false ） -
sitemaps: 是否生成多个站点地图（默认为 false ） -
include和exclude: 用于过滤要包含或排除的路由 -
discoverImages和discoverVideos: 是否在预渲染时发现路由中的图片和视频（默认为 true ） -
cacheMaxAgeSeconds: 站点地图的缓存时间（默认为 600 秒） -
debug: 是否启用调试模式（默认为 false ）
4. Nuxt Content
内容是 SEO 的核心，Nuxt 社区当然有库来帮助你创建和管理 SEO 友好的内容。
使用 Nuxt Content 模块管理 SEO 友好的内容
Nuxt Content 模块是一个强大的文档驱动模块，它可以帮助你轻松管理和呈现 Markdown 、JSON 、YAML 、XML 和 CSV 文件。
- 安装 Nuxt Content:
npm install @nuxt/content - 在
nuxt.config.ts中配置:
export default defineNuxtConfig({ modules: ['@nuxt/content'] }) - 创建 SEO 友好的内容:
--- sitemap: loc: /agreement/community-guidelines title: 'My Amazing Blog Post' description: 'This is a blog post about amazing things' date: '2023-05-20' --- // 内容 这个 sitemap 的配置项，会自动把这个链接添加到 Sitemap 中。
- 在组件中使用内容:
<script setup> const { data } = await useAsyncData('home', () => queryContent('/').find()) </script> <template> <ContentList v-slot="{ list }"> <div v-for="article in list" :key="article._path"> <h2>{{ article.title }}</h2> <p>{{ article.description }}</p> </div> </ContentList> </template> 5. 常见 SEO 问题及解决方案
处理重复内容
使用规范链接（ canonical URLs ）:
useHead({ link: [{ rel: 'canonical', href: 'https://example.com/original-page' }] }) 管理 404 和 301 重定向
- 创建自定义 404 页面:
创建pages/404.vue文件:
<template> <div> <h1>404 - Page Not Found</h1> <p>Sorry, the page you are looking for does not exist.</p> <NuxtLink to="/">Go back to homepage</NuxtLink> </div> </template> <script setup> useHead({ title: '404 - Page Not Found', meta: [{ name: 'robots', content: 'noindex' }] }) </script> - 实现 301 重定向:
在nuxt.config.ts中配置重定向:
export default defineNuxtConfig({ nitro: { handlers: [ { route: '/old-page', handler: (event) => { event.node.res.writeHead(301, { Location: '/new-page' }) event.node.res.end() } } ] } }) 解决 Javascript 渲染内容的 SEO 挑战
-
使用服务器端渲染（ SSR ）: Nuxt 默认支持 SSR ，确保搜索引擎可以看到完整的页面内容。
-
对于动态内容，使用
useFetch或useAsyncData，不加lazy的配置项就是在任何情况下都 ssr 渲染。加了之后意味着如果是通过 Nuxt 本身的 路由方式跳转过来的时候，会直接先进入页面，然后变成客户端渲染。而这对于爬虫是没有影响的:
<script setup> const { data } = await useFetch('/api/products') </script> <template> <div v-for="product in data" :key="product.id"> <h2>{{ product.name }}</h2> <p>{{ product.description }}</p> </div> </template> 这一段内容本来应该是 Nuxt 里面最重要的一部分，但我们这个章节是讲 SEO~，就稍微了解一下 lazy 这个对于在 Nuxt 请求中非常关键的配置项！
- 使用
<ClientOnly>组件包裹仅客户端渲染的内容:
<ClientOnly> <ComplexChart :data="chartData" /> </ClientOnly> 6. 结论
Nuxt 的 Seo 其实非常的方便，相对于 Next 都是配置形的，开发体验非常的好，且页面性能和一些用户体验上都会大于 Next ，比较中肯的说，不考虑社区问题，它几乎就是 SSR 前端框架的最佳实践。
]]>
]]>
]]>
