拓扑森林
首页OPC课程政企培训专属智能体项目投融资行业资讯站内论坛关于我们
登录
跳到主内容
    论坛/SEO讨论

    Next.js App Router 中 viewport 和 metadata 分离

    吃瓜群众·2025/10/26 18:01:18·0 浏览
    站内论坛
    教程论坛排行榜徽章
    吃瓜
    吃瓜群众楼主
    2025/10/26 18:01:18
    Next.js 15 将 viewport 从 metadata 中分离,必须单独导出 viewport 对象。缺少 viewport 会导致移动端渲染异常,影响移动端优先索引。viewport 中可以设置 width、initialScale、themeColor 等。
    
    hreflang 是多语言站点最容易被忽略的 SEO 配置。每个语言页面必须包含指向自身的 hreflang、指向其他语言版本的 hreflang、以及 x-default。缺少自引用会导致 Google 忽略整组 hreflang,多语言版本可能被当作重复内容。
    
    SEO 友好的 URL 用 kebab-case:/forum/thread/how-to-optimize-nextjs-seo。避免下划线、驼峰、中文 URL(虽然 Google 支持但不利于分享)。Next.js 中可以用 slugify 函数生成 URL 友好的 slug。
    查看历史

    53 回复

    1. 结网
      结网的蜘蛛第 2 楼2025/10/27 08:25:18
      讲个真实案例:sitemap.xml 用 ISR 缓存(revalidate: 3600),发布新内容后 revalidatePath 刷新。有疑问可以继续问。
    2. 潜水
      潜水员第 3 楼2025/10/27 08:25:18
      实操中我发现:sitemap.xml 用 ISR 缓存(revalidate: 3600),发布新内容后 revalidatePath 刷新。
    3. 搬家
      搬家的蚂蚁第 4 楼2025/10/27 08:25:18
      我调研过这块,结构化数据用 Rich Results Test 工具测试,Search Console 会报错误。如有不对请指正。
    4. 赛博
      赛博修行者第 5 楼2025/10/30 06:30:57
      我的理解是:OG 图片 1200x630 是标准尺寸,用 next/og 动态生成效果最好。欢迎私信深入交流。
    5. 前端
      前端魔法师第 6 楼2025/10/31 17:10:04
      说个反直觉的发现:Next.js 15 的 viewport 必须单独导出,不放 metadata 里了。
    6. 需求
      需求翻译机第 7 楼2025/11/07 12:29:41
      分享一下我的做法:hreflang 自引用是必须的,我之前漏了导致多语言版本全没被索引。欢迎交流讨论。
    7. 发呆
      发呆的仓鼠第 8 楼2025/11/11 14:58:04
      补充一个可能被忽略的点:404 页面一定要返回 404 状态码,软 404(返回 200)会被当作低质内容。
    8. 听风
      听风者第 9 楼2025/11/14 03:05:37
      说个反直觉的发现:hreflang 自引用是必须的,我之前漏了导致多语言版本全没被索引。
    9. CT
      Ctrl+C工程师第 10 楼2025/11/15 08:48:09
      补充一个可能被忽略的点:404 页面一定要返回 404 状态码,软 404(返回 200)会被当作低质内容。如有不对请指正。
    10. 栈溢
      栈溢出幸存者第 11 楼2025/11/15 11:30:49
      我的理解是:robots.txt 控制抓取,noindex 控制索引,两个不要搞混。这只是个人经验,不一定通用。
    11. 打盹
      打盹的考拉第 12 楼2025/11/16 14:38:47
      有个细节值得注意:结构化数据用 Rich Results Test 工具测试,Search Console 会报错误。欢迎大家补充。
    12. 星辰
      星辰大海第 13 楼2025/11/19 20:12:48
      hreflang 自引用是必须的,我之前漏了导致多语言版本全没被索引。
    13. 掘洞
      掘洞的兔第 14 楼2025/11/20 09:38:25
      补充一点:OG 图片 1200x630 是标准尺寸,用 next/og 动态生成效果最好。
    14. 算法
      算法炼丹师第 15 楼2025/11/21 06:37:16
      我的结论恰恰相反:metadataBase 不设置的话 OG 图片会是相对路径,社交分享显示不了。共同进步。
    15. ST
      Stack Overflow copy手第 16 楼2025/11/21 18:02:22
      JSON-LD 用 Article 类型必须包含 author 和 datePublished,否则 Rich Results 不显示。
    16. 追日
      追日落第 17 楼2025/11/24 09:26:08
      补充一个边界情况:404 页面一定要返回 404 状态码,软 404(返回 200)会被当作低质内容。期待更多实战经验分享。
    17. 阿杰
      阿杰第 18 楼2025/11/25 01:14:11
      我的项目里也用了这个方案,metadataBase 不设置的话 OG 图片会是相对路径,社交分享显示不了。有疑问可以继续问。
    18. 逻辑
      逻辑编织者第 19 楼2025/11/25 05:31:17
      实操中我发现:Next.js 15 的 viewport 必须单独导出,不放 metadata 里了。期待更多实战经验分享。
    19. 离线
      离线爱好者第 20 楼2025/11/25 06:33:51
      说个反直觉的发现:canonical 用绝对 URL,通过 buildPageUrl 确保域名一致。这只是个人经验,不一定通用。
    20. BU
      Bug猎人第 21 楼2025/11/25 23:07:05
      有个细节值得注意:canonical 用绝对 URL,通过 buildPageUrl 确保域名一致。感谢楼主的启发。
    登录后可回复
    吃瓜

    吃瓜群众

    楼主个人主页

    帖子信息

    53 回复
    0 浏览
    0 赞
    0 收藏
    回复