Next.js metadata 中的 OG 和 Twitter Card 配置
OG 图片用 Next.js 的 next/og 或 ImageResponse 动态生成,效果比静态图片好。1200x630 是标准尺寸,图片上放标题和品牌 logo,社交分享时点击率能提升 30%。 hreflang 自引用是必须的。每个语言页面必须包含指向自身的 hreflang(如 hre...
OG 图片用 Next.js 的 next/og 或 ImageResponse 动态生成,效果比静态图片好。1200x630 是标准尺寸,图片上放标题和品牌 logo,社交分享时点击率能提升 30%。 hreflang 自引用是必须的。每个语言页面必须包含指向自身的 hreflang(如 hre...
hreflang 自引用是必须的。每个语言页面必须包含指向自身的 hreflang(如 hreflang=en 指向英文版)。缺少自引用,Google 会忽略整组 hreflang。x-default 指向默认语言版本,用于未匹配语言的用户。 metadataBase 是 Next.js 15 m...
PageSpeed 优化记录:我的站点从 60 分到 95 分花了三周。关键改动:① 图片用 next/image + priority ② 移除首屏 framer-motion 改用 CSS 动画 ③ 非首屏组件 next/dynamic 懒加载 ④ 字体用 next/font ⑤ 第三方脚本延迟...
SEO 分页 URL 用 /page/2 路径形式比 ?page=2 查询参数更好。路径形式更利于 Google 理解和索引,查询参数可能被当作重复内容。但分页页面的 canonical 要指向自身而非第一页,否则第二页之后的内容不会被索引。 Next.js 15 将 viewport 从 met...
Next.js ISR 对 SEO 友好,因为输出的是完整 HTML。但要注意:ISR 缓存的页面不能包含用户个性化数据(如 session),否则不同用户看到相同缓存会有安全问题。SSR 输出必须对所有用户相同。 JSON-LD 是 Google 推荐的结构化数据格式。博客文章用 Article...
Schema.org 类型选择:博客文章用 Article(必须有 author/datePublished),产品页用 Product + AggregateOffer(不要用 Offer + price:0),FAQ 用 FAQPage(必须有 Question/Answer 数组)。选错类型会...
踩过的坑主要是配置层面。文档写得比较理想化,实际跑起来至少有两处和预期不一致,查 issue 才找到解法,后面附上具体配置。 效果数据方面,同样的任务量,整体耗时大概降了三成,返工率也明显下降。当然样本有限,仅供参考。 背景是这样的:手头有个周期两周的小项目,时间紧,所以直接把流程里能自动化的部分全交给了工具链,人只负责把关关键节点。 补充一点:如果团队里有人对这块不熟,建议先做个 15 分钟的内
具体步骤: 1. 先跑通最小闭环; 2. 再逐步替换流程节点; 3. 每一步都留回退方案。别一上来就全量替换,出问题很难定位。 踩过的坑主要是配置层面。文档写得比较理想化,实际跑起来至少有两处和预期不一致,查 issue 才找到解法,后面附上具体配置。 背景是这样的:手头有个周期两周的小项目,时间紧,所以直接把流程里能自动化的部分全交给了工具链,人只负责把关关键节点。
软 404 是指返回 200 状态码但内容是「页面未找到」的页面。Google 会把这些当作低质内容。Next.js 中确保:不存在的页面用 notFound() 触发真正的 404,搜索结果无结果时返回 404 或 noindex。 meta keywords 已经被 Google 完全忽略,不...
hreflang 自引用是必须的。每个语言页面必须包含指向自身的 hreflang(如 hreflang=en 指向英文版)。缺少自引用,Google 会忽略整组 hreflang。x-default 指向默认语言版本,用于未匹配语言的用户。 PageSpeed 优化记录:我的站点从 60 分到...
robots.txt 不是阻止索引的手段,而是控制抓取。要阻止索引用 noindex meta 标签或 X-Robots-Tag header。常见的 robots.txt 配置:允许所有页面、禁止 /admin、禁止 /api、指向 sitemap.xml。 Google 抓取预算对大站很重要。...
Next.js ISR 对 SEO 友好,因为输出的是完整 HTML。但要注意:ISR 缓存的页面不能包含用户个性化数据(如 session),否则不同用户看到相同缓存会有安全问题。SSR 输出必须对所有用户相同。 Schema.org 类型选择:博客文章用 Article(必须有 author/...
Schema.org 类型选择:博客文章用 Article(必须有 author/datePublished),产品页用 Product + AggregateOffer(不要用 Offer + price:0),FAQ 用 FAQPage(必须有 Question/Answer 数组)。选错类型会...
hreflang 是多语言站点最容易被忽略的 SEO 配置。每个语言页面必须包含指向自身的 hreflang、指向其他语言版本的 hreflang、以及 x-default。缺少自引用会导致 Google 忽略整组 hreflang,多语言版本可能被当作重复内容。 Next.js ISR 对 SE...
JSON-LD 是 Google 推荐的结构化数据格式。博客文章用 Article 类型,产品页用 Product + AggregateOffer,FAQ 用 FAQPage。用 Next.js 可以在 Server Component 中直接渲染 script 标签,不需要客户端注入。 Goo...
Core Web Vitals INP 优化关键是减少主线程阻塞。① 拆分长任务(>50ms)用 requestIdleCallback 或 setTimeout ② 减少第三方脚本 ③ 用 Web Worker 处理重计算 ④ 延迟加载非关键交互 ⑤ 避免大型布局重排。 Vercel 部署的 N...
Next.js Image 组件自动优化图片格式(WebP/AVIF)、尺寸和懒加载,对 LCP 优化效果显著。LCP 图片要加 priority 属性,否则懒加载会延迟 LCP 时间。但不要给所有图片加 priority,只给首屏最大的图片。 Schema.org 类型选择:博客文章用 Arti...
Next.js 15 的 metadata API 比 Pages Router 的 Head 组件强大太多。用 generateMetadata 可以根据路由参数动态生成 title、description、OG 标签。关键是 metadataBase 要正确设置,否则 OG 图片的 URL 会是...
SEO 分页 URL 用 /page/2 路径形式比 ?page=2 查询参数更好。路径形式更利于 Google 理解和索引,查询参数可能被当作重复内容。但分页页面的 canonical 要指向自身而非第一页,否则第二页之后的内容不会被索引。 PageSpeed 优化记录:我的站点从 60 分到...
Google Search Console 验证站点后,第一件事是提交 sitemap.xml。新页面发布后可以用 URL 检查工具主动请求索引,加速收录。但不要频繁提交相同 URL,Google 会降低优先级。 Canonical URL 解决重复内容问题。多语言站点、分页页面、带查询参数的页面...