近日搞 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？
- SEO 目前仍然是最便宜的流量来源。
- SEO 跟用户体验并不冲突，事实上，搜索引擎一直在想办法把用户体验和搜索排名结合起来。
- 我们甚至可以以 SEO 之名，为优化网站争取开发时间
现代 SEO 的注意事项
作为一名前端/全栈开发，有一些东西归属于我们的同事，比如创建内容、扩展外链，我们可以不过分深究。但是也有一些注意事项，尽早注意，可以节省大量返工的时间。
了解必要的知识
本文主要是我的经验之谈，不是很全面，更多的知识请阅读后面扩展阅读里的各个链接。
尽量用服务器端渲染
- 服务器渲染对 SEO 更加友好。
- 对于大部分搜索引擎爬虫来说，如果能采用静态分析，性能会比分析 JS 渲染的页面高很多。
- 服务器端渲染对用户体验也有提升。
尽量用超链接而不是手动跳转
- 浏览器爬虫可以通过超链接
<a>找到更多页面。 - 而
onclick无法做到这一点。 - 我们仍然可以使用
onclick进行数据埋点统计，因为事件会早于链接跳转触发。
给每个资源一个 URL
- 为了能够在用户间共享，以及让搜索引擎可以索引，我们需要给每个资源一个 URL。
- 比如一个页面，如果它包含翻页，我们应该给所有页面安排 URL，比如
/p/2，/p/3等等。而不是把状态保存在浏览器内存里，因为这样外界没法获取直接指向它的资源。 - 如果是音频、视频等需要长时间播放的资源，则可以利用锚点：
#{时间}来指向某个具体的时间点。长网页上的标题也应使用类似的锚点技术。 - 总之，尽量不要在内存里保存状态，都搞成 URL，做成超链接
确保页面上有合适的 SEO 内容
<title><meta name="description" content="{description}" /><link ref="canonical" href="{canonical link}" /><link hreflang="{语言}" href="{其它语言链接}" />- 使用 og 库添加 OpenGraph 信息
- 大量可以被搜索引擎阅读和理解的文本，少用图片
- 图片、音频、视频等，要配备
alt等文本信息 - 使用
aria-*帮助搜索引擎链接页面 - 使用超链接时，使用
rel来告诉搜索引擎链接目标和本页面的关系
尽量把内容全部展示出来
- 搜索引擎希望能一次抓取所有内容，这样它才能正确地索引全部内容，以及爬取剩下的内容。
- 有时候我们基于页面容量，会倾向于把一些内容隐藏起来，等待用户满足特定条件才展开。比如 tab、carousel 等。此时，我们最好使用 CSS 控制显示效果，而不是只输出部分内容。
- 当然，如果涉及到付费墙、私密信息等，可以不显示所有内容。
设计良好的 URL 结构
- 良好的 URL 可以帮助搜索引擎理解我们的内容结构
- 也拿博客举例：
/首页/p/{page}分页/tag/{tag-slug}分类页/cate分类页面/cate/sub-cate/子分类页面/cate/sub-cate/page-slug-一般来说是内容具体文章页
其它
- 生成正确的
robots.txt和sitemap.xml并提交给搜索引擎 - 避免 404 和 500
- 利用缓存改进访问速度
- 保证使用 heading，但不要滥用 heading 标题，确保 h1～h6 的合理顺序
小结
如果你对 Next.js 或者 SEO 有什么问题和想法，欢迎留言讨论。
本站目前还在招商：本站广告 2024 年招商，欢迎感兴趣的老板私信洽谈。
系列长文好更不好看，所以我决定以后都在 notion 上做汇总页，方便日后整体阅读。本文实际已经基本写完了，感兴趣的同学可以先去围观：https://meathill.notion.site/Next-js-14-SEO-90d31eee22ff4621af6620524b4b2773?pvs=4
发表回复