Next.js 14 SEO 最佳实践（1）了解 SEO，常规要点

近日搞 SEO 比较多，本来想写篇“Nuxt3 SEO 最佳实践”，但是列完大纲，发现内容不太够，基本上只需要照搬各种 SEO 手册，跟 Nuxt3 关系不大，不符合我对内容的要求。然后我自信满满地想帮朋友搞 Next.js 14 SEO，发现，好难，Next.js 14 的坑真多……于是就有了这系列文章。

• 了解 SEO，常规要点（本文）
• Next.js 14 的 SEO 要点
• Next.js 14 性能提升（TODO）

什么是 SEO

SEO 即搜索引擎优化（Search Engine Optimization），是指通过优化网站以提高网站在搜索引擎中的自然排名，从而增加网站流量，提高品牌曝光度的一系列操作。SEO 主要关注两个方面：站内优化与站外优化。站内优化包括确保网站的结构、内容质量、关键词布局、网页元标签、URL结构等对搜索引擎友好。而站外优化则更多关注于外部链接建设，即增加其他网站对你的网站的链接，这有助于提高网站的权威性和排名。

作为技术人员我们一般会负责站内优化，本文也主要讨论站内优化。

为什么要 SEO？

1. SEO 目前仍然是最便宜的流量来源。
2. SEO 跟用户体验并不冲突，事实上，搜索引擎一直在想办法把用户体验和搜索排名结合起来。
3. 我们甚至可以以 SEO 之名，为优化网站争取开发时间

现代 SEO 的注意事项

作为一名前端/全栈开发，有一些东西归属于我们的同事，比如创建内容、扩展外链，我们可以不过分深究。但是也有一些注意事项，尽早注意，可以节省大量返工的时间。

了解必要的知识

本文主要是我的经验之谈，不是很全面，更多的知识请阅读后面扩展阅读里的各个链接。

尽量用服务器端渲染

1. 服务器渲染对 SEO 更加友好。
2. 对于大部分搜索引擎爬虫来说，如果能采用静态分析，性能会比分析 JS 渲染的页面高很多。
3. 服务器端渲染对用户体验也有提升。

尽量用超链接而不是手动跳转

1. 浏览器爬虫可以通过超链接 <a> 找到更多页面。
2. 而 onclick 无法做到这一点。
3. 我们仍然可以使用 onclick 进行数据埋点统计，因为事件会早于链接跳转触发。

给每个资源一个 URL

1. 为了能够在用户间共享，以及让搜索引擎可以索引，我们需要给每个资源一个 URL。
2. 比如一个页面，如果它包含翻页，我们应该给所有页面安排 URL，比如 /p/2，/p/3 等等。而不是把状态保存在浏览器内存里，因为这样外界没法获取直接指向它的资源。
3. 如果是音频、视频等需要长时间播放的资源，则可以利用锚点： #{时间} 来指向某个具体的时间点。长网页上的标题也应使用类似的锚点技术。
4. 总之，尽量不要在内存里保存状态，都搞成 URL，做成超链接

确保页面上有合适的 SEO 内容

1. <title>
2. <meta name="description" content="{description}" />
3. <link ref="canonical" href="{canonical link}" />
4. <link hreflang="{语言}" href="{其它语言链接}" />
5. 使用 og 库添加 OpenGraph 信息
6. 大量可以被搜索引擎阅读和理解的文本，少用图片
7. 图片、音频、视频等，要配备 alt 等文本信息
8. 使用 aria-* 帮助搜索引擎链接页面
9. 使用超链接时，使用 rel 来告诉搜索引擎链接目标和本页面的关系

尽量把内容全部展示出来

1. 搜索引擎希望能一次抓取所有内容，这样它才能正确地索引全部内容，以及爬取剩下的内容。
2. 有时候我们基于页面容量，会倾向于把一些内容隐藏起来，等待用户满足特定条件才展开。比如 tab、carousel 等。此时，我们最好使用 CSS 控制显示效果，而不是只输出部分内容。
3. 当然，如果涉及到付费墙、私密信息等，可以不显示所有内容。

设计良好的 URL 结构

1. 良好的 URL 可以帮助搜索引擎理解我们的内容结构
2. 也拿博客举例：
   1. / 首页
   2. /p/{page} 分页
   3. /tag/{tag-slug} 分类页
   4. /cate 分类页面
   5. /cate/sub-cate/ 子分类页面
   6. /cate/sub-cate/page-slug-一般来说是内容 具体文章页

其它

1. 生成正确的 robots.txt 和 sitemap.xml 并提交给搜索引擎
2. 避免 404 和 500
3. 利用缓存改进访问速度
4. 保证使用 heading，但不要滥用 heading 标题，确保 h1～h6 的合理顺序

小结

如果你对 Next.js 或者 SEO 有什么问题和想法，欢迎留言讨论。

本站目前还在招商：本站广告 2024 年招商，欢迎感兴趣的老板私信洽谈。

系列长文好更不好看，所以我决定以后都在 notion 上做汇总页，方便日后整体阅读。本文实际已经基本写完了，感兴趣的同学可以先去围观：https://meathill.notion.site/Next-js-14-SEO-90d31eee22ff4621af6620524b4b2773?pvs=4