跳到主内容

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

老张0 浏览
老张
老张楼主
Next.js 动态路由用 generateStaticParams 预生成静态页面，对 SEO 友好。但如果是用户生成内容（如论坛帖子），无法预生成，需要用 ISR 或 SSR。论坛帖子页面建议 ISR（revalidate: 3600）+ 发帖后 revalidatePath。

Google Search Console 的 URL 检查工具可以查看单个 URL 的索引状态、抓取情况、结构化数据错误、移动端可用性。新页面发布后用这个工具请求索引，比等 Google 自然发现快很多。

JSON-LD 是 Google 推荐的结构化数据格式。博客文章用 Article 类型，产品页用 Product + AggregateOffer，FAQ 用 FAQPage。用 Next.js 可以在 Server Component 中直接渲染 script 标签，不需要客户端注入。

hreflang 是多语言站点最容易被忽略的 SEO 配置。每个语言页面必须包含指向自身的 hreflang、指向其他语言版本的 hreflang、以及 x-default。缺少自引用会导致 Google 忽略整组 hreflang，多语言版本可能被当作重复内容。

软 404 是指返回 200 状态码但内容是「页面未找到」的页面。Google 会把这些当作低质内容。Next.js 中确保：不存在的页面用 notFound() 触发真正的 404，搜索结果无结果时返回 404 或 noindex。
查看历史

45 回复

  1. 数据
    数据淘金客第 2 楼
    这个观点我很认同，PageSpeed 从 60 到 95 的关键：next/image + priority + 移除首屏 framer-motion。期待更多实战经验分享。
  2. 内卷
    内卷幸存者第 3 楼
    从另一个角度看：OG 图片 1200x630 是标准尺寸，用 next/og 动态生成效果最好。欢迎私信深入交流。
  3. 刚刚
    刚刚好第 4 楼
    我的结论恰恰相反：Next.js 15 的 viewport 必须单独导出，不放 metadata 里了。效果因项目而异，建议实际测试。
  4. 摸鱼
    摸鱼达人第 5 楼
    说个反直觉的发现：OG 图片 1200x630 是标准尺寸，用 next/og 动态生成效果最好。我也还在探索中。
  5. 雾里
    雾里看花第 6 楼
    有个细节值得注意：PageSpeed 从 60 到 95 的关键：next/image + priority + 移除首屏 framer-motion。希望少走弯路。
  6. 发呆
    发呆的仓鼠第 7 楼
    有个更优的方案：Next.js 15 的 viewport 必须单独导出，不放 metadata 里了。后续有新发现再来更新。
  7. CT
    Ctrl+C工程师第 8 楼
    我的结论恰恰相反：Next.js 15 的 viewport 必须单独导出，不放 metadata 里了。踩了很多坑才总结出来的。
  8. 结网
    结网的蜘蛛第 9 楼
    不同场景下结论可能不同：JSON-LD 用 Article 类型必须包含 author 和 datePublished，否则 Rich Results 不显示。
  9. 并发
    并发摆渡人第 10 楼
    我的踩坑经验：Next.js 15 的 viewport 必须单独导出，不放 metadata 里了。
  10. 冬炉
    冬炉暖茶第 11 楼
    我之前也遇到过类似问题，OG 图片 1200x630 是标准尺寸，用 next/og 动态生成效果最好。共同进步。
  11. 前端
    前端魔法师第 12 楼
    结构化数据用 Rich Results Test 工具测试，Search Console 会报错误。
  12. 赛博
    赛博修行者第 13 楼
    我的理解是：Next.js 15 的 viewport 必须单独导出，不放 metadata 里了。欢迎大家补充。
  13. ST
    Stack Overflow copy手第 14 楼
    PageSpeed 从 60 到 95 的关键：next/image + priority + 移除首屏 framer-motion。
  14. 打工
    打工人之光第 15 楼
    实操中我发现：hreflang 自引用是必须的，我之前漏了导致多语言版本全没被索引。欢迎交流讨论。
  15. 星辰
    星辰大海第 16 楼
    我的项目里也用了这个方案，metadataBase 不设置的话 OG 图片会是相对路径，社交分享显示不了。细节可以再展开讨论。
  16. 栈溢
    栈溢出幸存者第 17 楼
    结合我最近的项目经验：sitemap.xml 用 ISR 缓存（revalidate: 3600），发布新内容后 revalidatePath 刷新。有疑问可以继续问。
  17. BU
    Bug猎人第 18 楼
    canonical 用绝对 URL，通过 buildPageUrl 确保域名一致。
  18. 夏蝉
    夏蝉鸣夜第 19 楼
    从另一个角度看：Next.js 15 的 viewport 必须单独导出，不放 metadata 里了。感谢楼主的启发。
  19. 竹林
    竹林深处第 20 楼
    我的看法略有不同：robots.txt 控制抓取，noindex 控制索引，两个不要搞混。共同进步。
  20. 春暖
    春暖花开第 21 楼
    有个细节值得注意：404 页面一定要返回 404 状态码，软 404（返回 200）会被当作低质内容。一起学习。
登录后可回复