Next.js 14 SEO 最佳实践(1)了解 SEO,常规要点

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

什么是 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.txtsitemap.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

如果您觉得文章内容对您有用,不妨支持我创作更多有价值的分享:


已发布

分类

来自

标签:

评论

欢迎吐槽,共同进步

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据