🔧用Cursor帮我优化博客SEO

2024-9-1|2025-1-7
Yawatasensei
Yawatasensei
type
status
date
slug
summary
tags
category
icon
password
😀
之前的博客域名和服务器双双到期，同时自己也不太喜欢继续在WordPress平台上写博客，通过搜索发现了Notion Next这个项目，可以通过NextJS将Notion里的写作内容部署发布到Vercel上，省了一笔服务器的费用，而且还便于管理和编写，就把博客的内容迁移了过来。
notion image
Notion Next是我用过最为惊艳的博客系统，但是依旧有一些不满意的地方，尤其在SEO的方面还存在一些问题。我对NextJS一窍不通，自己直接修改代码更是天方夜谭，正巧在V2EX、LINUXDO上看到最近Cursor火的不行，也就尝试了一下AI编写代码，开始也以为只是Visual Studio Code套壳，但是没想到效果有点出乎预料的好。
Cursor是一款基于人工智能的代码编辑器，它结合了传统代码编辑器的功能和AI辅助编程的能力。支持AI代码补全、自然语言编程、代码解释和重构、错误检测和修复等等。Cursor主要使用了以下几种大型语言模型：GPT-4o、Codex、Claude以及Llama 2等。

📝 付费内容

基础背景：为了减少Vercel的资源配额使用，也因为静态内容更容易做CDN缓存，所以我的Notion Next采用的是yarn export的方式。所以在一些功能的使用上，与正常的build方式有所不同，而cursor成功的帮我解决了这种不同所带来的问题。

去掉不存在内容的翻页

发现这个问题是因为在Search Console和Ahref的抓取时，发现yarn export 会生成页码为0的列表页，同时，即便下一页没有任何内容，也会生成页码。这两种生成的页面点击进去会提示404错误，这肯定是不利于SEO的。

问题定位

通过在Cursor中搜索翻页找到了PaginationSimple.js 这个负责翻页的插件，简单看了一下代码，发现是因为原来的代码中将第0页和没有内容的下一页通过invisable方式进行了隐藏，尽管在页面中展示不出，但爬虫还是会抓取到。
直接询问Cursor“如何去掉序号为0的页面和内容为空的下一页”，Cursor很快就给出了答案，对代码修改进行了标记。
notion image
我自己能看懂一个大概意思，但是具体的修改我又追问Cursor，让它解释一下修改的逻辑，Cursor的回答是：
尝试部署，没有报错，且不再生成page/0 和大于总页数的page/$ ,完美！
这是我第一次尝试通过AI进行代码的编辑，效果有点出乎意料的好，同时也给了我很大的信心。

通过Ahref查找更多的问题

在第一次Curor给了我完善的解决方案之后，我开始对自己动手修改博客这件事有了很大的信心。修改问题的前提是发现问题，表面的问题我们直接可以看到，但是SEO和整体博客结构性的问题我们很难通过浏览看到，所以借助了ahref这个工具进行网站的SEO性能评估。
notion image
这是我第一次运行Crawl之后的结果，健康评分只有40分，分析原因有以下几种：
  1. 404和4XX的页面太多：这个大部分都是因为各种列表页都生成的page/0和page/$ 造成的，通过刚刚上面的方法已经解决。
  1. 找不到Sitemap：没有正常生成sitemap，无法为爬虫提供指引
  1. 重复的H1标签：在文章详情页会产生2个H1标签，会对爬虫以及用户产生干扰，无法明确正确内容。
  1. 标题太短：归档、分类、标签、关于、链接这几个页面的<title></title>字数太少
实际在解决的过程中，一个问题总是随着另一个问题的解决而出现，下面是一些详细的过程。
 

Sitemap问题解决

正常的sitemap输出是通过/pages/sitemap.xml.js进行。但是yarn export这种静态模式会忽略/pages/sitemap.xml.js ，采用next-sitemap 进行输出，也就是/lib/sitemap.xm.js，避免与getServerSideProps这个动态文件冲突。
选中上面这三个文件之后，通过询问Cursor为什么没有如期生成sitemap，Cursor告诉我/lib/sitemap.xml.js并没有被使用，并给出了修改的意见，部署发布成功，生成了Sitemap.xml。之后作者也在Github修复了这个问题。
生成后的Sitemap.xml依旧存在问题，它会将外链也作为站内链接，并通过与域名进行拼凑的方式纳入到Sitemap.xml中，例如https://www.dolingou.com/https://github.com/tangly1024/NotionNext ，点击之后会跳转到404页面。
🚧
询问Cursor：
如何避免sitemap将外链当作本站链接收录进来
 
Cursor：
为了避免将外链收录进站点地图，您可以在生成站点地图时对链接进行过滤。以下是修改后的代码建议：
sitemap.xml.js
这里的主要改动是：
添加了一个 isInternalLink 函数来检查链接是否为内部链接。
在添加链接到 urls 数组之前，使用 isInternalLink 函数进行检查。
这个函数的逻辑是：
如果链接以 http:// 或 https:// 开头，则检查它是否包含本站的域名。
如果链接不以 http:// 或 https:// 开头，则认为它是内部链接。
这样可以有效地过滤掉外部链接，只将内部链接添加到站点地图中。
代码示例：
部署、发布、测试，问题解决

重复的H1标签问题解决

通过检查页面，发现Medium主题会在全部页面都对footer.js的博客标题添加<h1></h1> ,我在手动删除掉这个<h1></h1>标签后，问题可以解决，但是又会出现一个新的问题，即除了文章详情页之外的其他页面，都没有<h1></h1>标签。既然如此，那就重新规划一下H1标签的使用。
  • 首页及首页文章列表的翻页，使用站点名称作为H1标签
  • 文章标签页面使用对应标签的名称作为H1标签
  • 文章分类页面使用文章分类的名称作为H1标签
  • 归档页面使用“归档Archives”作为H1标签
首页及首页文章列表的翻页
在不影响首页布局的情况下，我想到的方法是直接在导航栏上进行修改，给予判定条件当且仅当位于首页及首页文章列表的翻页时，为博客名称添加H1标签。导航栏的文件位于NotionNext\themes\medium\components\LogoBar.js 。
🚧
询问Cursor：
我想在首页和首页的翻页为TITLE增加h1标签
 
Cursor：
  1. 根据您提供的代码，要在首页和首页的翻页中为 TITLE 添加 H1 标签，我们需要修改 LogoBar.js 组件。这个组件似乎是负责显示网站标题的。
  1. 这个修改做了以下几点：
    1. 导入了 useRouter 钩子，用于获取当前路由信息。
    2. 使用 router.pathname 来判断当前是否在首页或首页的翻页。我们假设首页的路径是 '/'，翻页的路径以 '/page/' 开头。
3. 根据 isHomePage 的值，决定是否使用 <h1> 标签包裹网站标题。
在首页和翻页时，使用 <h1> 标签；在其他页面，直接显示文本。
5. 为了保持样式一致，我们将原有的类名应用到了 <h1> 标签上。
这样修改后，首页和首页的翻页会使用 <h1> 标签包裹网站标题，而其他页面则不会。这有助于 SEO，同时保持了网站在视觉上的一致性。
请注意，这个修改假设 LogoBar 组件在所有页面中都被使用。如果不是这样，您可能需要在负责渲染首页和翻页的组件中进行类似的修改。
代码示例：
部署、发布、测试，问题解决。
文章标签页面和文章分类页面
文章标签页面和文章分类页面位于NotionNext\themes\medium\components\BlogPostBar.js ,直接对Cursor提问：
🚧
询问Cursor：
我想为Tag和Category标题添加H1标签，我应该怎么修改当前页面的代码
 
Cursor：
好的,我理解您想为标签(tag)和分类(category)页面的标题添加H1标签。我们可以修改BlogPostBar.js组件来实现这一点。以下是修改后的代码:
这个修改做了以下几点改变:
  1. 将原来的<div>标签改为<h1>标签,这样可以为标签和分类页面的标题添加H1标签。
  1. 保留了原有的类名和样式,以确保视觉效果不变。
  1. 为了更好的语义化,我在标签和分类名称外面添加了一个<span>标签,并给它添加了一个小的左边距(ml-2)。
  1. 这样修改后,标签和分类页面的标题将会被H1标签包裹,有利于SEO优化,同时保持了原有的视觉效果。
请注意,如果在同一个页面上还有其他H1标签(比如在LogoBar组件中),您可能需要考虑调整整体的标题层级结构,以确保每个页面只有一个H1标签。如果需要,您可以考虑将这里的H1改为H2,或者调整LogoBar组件中的标题标签。
代码：
部署、发布、测试，问题解决。
归档页面、分类汇总页面、标签汇总页面
这三个页面均由NotionNext\themes\medium\index.js 控制，直接修改代码即可（我也是可以手搓代码的）

标题太短问题

通过搜索功能检索关键字“标签”、“归档”、“分类”等，最终确定是由NotionNext\lib\lang\zh-CN.js 控制，直接修改里面对应的中文即可。

删除不必要的插件和JS

Notion Next里提供了很多我用不上的JS插件，尽管设置为禁用，但是在渲染时依旧会有漏网之鱼包含至.js 文件中，影响Pagespeed Insights的评分。但这些插件和主题以及Notion Next的主程序之间的各种引用和依赖关系实在很乱，所以这部分我在找到对应的插件.js文件后，直接询问Cursor哪些文件的哪些地方使用了这些插件，然后逐一删除。删除的插件包括：
  • Live2D
  • MouseFollow
  • Ribbon
  • Sakura
  • StarrySky
  • Fireworks
  • RevolverMaps（位于主题文件夹内）

翻译代码内容

当我有看不懂的代码时，会直接询问Cursor，让其帮我将代码翻译成文字语言，然后可以了解这是不是我需要修改的功能所在文件。
🚧
询问Curor：
这个文件的代码是什么意思？
 
Cursor：
当然,我来为您解释这些文件的代码:
NotionNext/lib/notion/getAllCategories.js:
这个文件定义了一个函数getAllCategories,用于获取所有文章的分类信息。主要功能包括:
过滤出已发布的文章
统计每个分类的文章数量
根据预设的分类选项(categoryOptions)生成分类列表
可以限制返回的分类数量
 
NotionNext/lib/sitemap.xml.js:
这个文件负责生成网站的sitemap.xml。主要功能包括:
添加网站的主要页面(首页、归档、分类、标签页)到sitemap
遍历所有文章页面,添加到sitemap
过滤外部链接,只包含内部链接
生成符合标准的XML格式的sitemap
 
NotionNext/themes/medium/components/LogoBar.js:
这是网站顶部的Logo栏组件。主要功能:
显示网站标题
在首页和分页页面使用H1标签包裹标题(有利于SEO)
在其他页面正常显示标题文本
 
NotionNext/themes/medium/components/BlogPostBar.js:
这是博客文章列表上方的标题栏组件。主要功能:
根据是否有标签或分类来显示相应的标题
使用H1标签包裹标题(有利于SEO)
显示标签或分类的图标和名称

🤗 最终效果

根据昨天晚上ahref的抓取评分结果：
notion image
 
PageSpeed Insights结果:
notion image
 
目前Cursor还在试用期，收费的话，之后要每个月$20，为什么每个AI产品的定价都是$20？
更新：
目前已经过了试用期，也不想用白嫖大法，所以用VsCode + Cline的组合，也基本可以满足需求。
我又通过使用Cline对博客做了优化，可以参见《✍🏼NotionNext博客精简优化》

📎 参考文章

 
💡
有关Notion安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~
工具分享
黑神话：悟空性能优化MOD分享如何在Android电视上使用Xbox无线接收器
Loading...