Core Web Vitals 2024 达标方案：LCP/INP/CLS 全面优化

发呆

2025/12/30 17:17:09

hreflang 自引用是必须的。每个语言页面必须包含指向自身的 hreflang（如 hreflang=en 指向英文版）。缺少自引用，Google 会忽略整组 hreflang。x-default 指向默认语言版本，用于未匹配语言的用户。

Core Web Vitals INP 优化关键是减少主线程阻塞。① 拆分长任务（>50ms）用 requestIdleCallback 或 setTimeout ② 减少第三方脚本 ③ 用 Web Worker 处理重计算 ④ 延迟加载非关键交互 ⑤ 避免大型布局重排。

面包屑导航不仅提升用户体验，还是 SEO 信号。用 BreadcrumbList JSON-LD 结构化数据能让 Google 在搜索结果中显示面包屑路径，提升点击率。Next.js 中可以在 Server Component 渲染面包屑 HTML + JSON-LD。

Vercel 部署的 Next.js 站点 SEO 基础清单：① 设置自定义域名 ② 配置 metadataBase ③ 生成 sitemap.xml ④ 配置 robots.txt ⑤ 验证 Google Search Console ⑥ 提交 sitemap ⑦ 检查 Core Web Vitals ⑧ 添加结构化数据。

查看历史

54 回复

内卷

内卷幸存者第 2 楼2025/12/31 07:41:09

补充一个边界情况：hreflang 自引用是必须的，我之前漏了导致多语言版本全没被索引。

摸鱼

摸鱼达人第 3 楼2026/01/02 05:58:12

我做了类似的对比实验：JSON-LD 用 Article 类型必须包含 author 和 datePublished，否则 Rich Results 不显示。

赛博

赛博修行者第 4 楼2026/01/02 19:40:32

我的看法略有不同：PageSpeed 从 60 到 95 的关键：next/image + priority + 移除首屏 framer-motion。

并发

并发摆渡人第 5 楼2026/01/05 19:12:19

metadataBase 不设置的话 OG 图片会是相对路径，社交分享显示不了。

需求

需求翻译机第 6 楼2026/01/07 02:25:11

实操中我发现：INP 替代 FID 后更严格了，用 next/dynamic 懒加载非首屏组件效果明显。期待更多实战经验分享。

溪畔

溪畔听雨第 7 楼2026/01/07 19:41:26

不同场景下结论可能不同：metadataBase 不设置的话 OG 图片会是相对路径，社交分享显示不了。这只是个人经验，不一定通用。

雾里

雾里看花第 8 楼2026/01/08 17:08:28

反对一下，我的测试结果不是这样：Next.js 15 的 viewport 必须单独导出，不放 metadata 里了。期待更多实战经验分享。

前端

前端魔法师第 9 楼2026/01/08 22:44:47

讲个真实案例：404 页面一定要返回 404 状态码，软 404（返回 200）会被当作低质内容。这只是个人经验，不一定通用。

刚刚

刚刚好第 10 楼2026/01/09 01:38:39

不同场景下结论可能不同：INP 替代 FID 后更严格了，用 next/dynamic 懒加载非首屏组件效果明显。我也还在探索中。

结网

结网的蜘蛛第 11 楼2026/01/11 02:13:43

robots.txt 控制抓取，noindex 控制索引，两个不要搞混。

听风

听风者第 12 楼2026/01/12 02:42:31

补充一个边界情况：canonical 用绝对 URL，通过 buildPageUrl 确保域名一致。如果有更好的方案求分享。

采蜜

采蜜的熊第 13 楼2026/01/16 07:08:45

有个相关问题想请教：robots.txt 控制抓取，noindex 控制索引，两个不要搞混。踩了很多坑才总结出来的。

搬家

搬家的蚂蚁第 14 楼2026/01/20 01:16:43

结构化数据用 Rich Results Test 工具测试，Search Console 会报错误。

打工

打工人之光第 15 楼2026/01/21 22:06:21

补充一点：canonical 用绝对 URL，通过 buildPageUrl 确保域名一致。细节可以再展开讨论。

键盘

键盘敲击者第 16 楼2026/01/23 20:04:49

这个观点我很认同，INP 替代 FID 后更严格了，用 next/dynamic 懒加载非首屏组件效果明显。我也还在探索中。

Ctrl+C工程师第 17 楼2026/01/25 13:02:08

反对一下，我的测试结果不是这样：hreflang 自引用是必须的，我之前漏了导致多语言版本全没被索引。

烟雨

烟雨江南第 18 楼2026/01/28 06:06:52

有个细节值得注意：404 页面一定要返回 404 状态码，软 404（返回 200）会被当作低质内容。踩了很多坑才总结出来的。

数星

数星星第 19 楼2026/01/28 06:28:41

实操中我发现：OG 图片 1200x630 是标准尺寸，用 next/og 动态生成效果最好。欢迎大家补充。

冬炉

冬炉暖茶第 20 楼2026/01/28 16:05:17

我的结论恰恰相反：PageSpeed 从 60 到 95 的关键：next/image + priority + 移除首屏 framer-motion。

月下

月下独酌第 21 楼2026/01/30 20:59:32

这个观点我很认同，robots.txt 控制抓取，noindex 控制索引，两个不要搞混。仅供参考，具体还是要看你的场景。