跳到主要内容
Mera News

出版商指南，第 2 章

手机和桌面端的页面结构

最近审查：2026 年 11 月

读者会很快决定一个新闻页面值不值得停留。标题应该迅速出现，页面应该保持稳定，每次点按都应该得到响应。Google 还会索引你页面的移动版本，所以手机上的布局对搜索来说同样是起决定作用的版本。

值得争取的数字

Google 的核心网页指标（Core Web Vitals）提供三项衡量标准，每项都有明确的目标。

指标衡量内容良好
最大内容绘制（LCP）加载2.5 秒或更短
下次绘制的交互延迟（INP）对输入的响应200 毫秒或更短
累积布局偏移（CLS）视觉稳定性0.1 或更低

测量页面加载的第 75 百分位，移动端和桌面端分别计算。当三项指标在该百分位都达到目标时，页面才算通过。

请使用真实访问的实测数据：Search Console 中的核心网页指标报告、PageSpeed Insights 或 Chrome 用户体验报告。Lighthouse 在实验室环境中很有用，但它无法测量 INP，而是报告总阻塞时间（Total Blocking Time）作为替代。

Google 表示并不存在单一的页面体验信号。它确实表示核心网页指标会被其排名系统使用，而页面体验的其他方面并不直接帮助网站排名，但仍然可以让网站更好用。

一个页面，适配两种屏幕

Google 推荐响应式设计，认为这是最容易实现和维护的模式。同一份 HTML 为所有设备提供服务，因此内容和元数据无需额外工作就能保持一致。如果你运行单独的移动页面，请保证以下内容与桌面端完全相同：

  • 主要内容
  • 标题
  • 结构化数据
  • Robots 元标签（一个多余的 noindex 可能让移动页面无法进入索引）

先从 viewport 标签开始，然后检查页面在 320 CSS 像素宽时是否能重新排版，且不出现横向滚动。

<meta name="viewport" content="width=device-width, initial-scale=1">

在手机上

  • 先放标题、署名和可见的日期，然后是首图或开头段落。
  • 把文章正文保留在 HTML 中。点按后才获取其余内容的“继续阅读”按钮，可能会让 Google 看不到这些文字，因为 Google 不会点击、滑动或输入。
  • 触控目标至少为 24 乘 24 CSS 像素，这是 WCAG 2.2 AA 的最低要求。对于菜单和关闭按钮，建议做到 44 乘 44，即 AAA 级别。
  • 让固定页眉保持简短，并把 scroll-padding-top 设置为它的高度，这样获得焦点的链接就不会被它遮住。

在桌面端

  • 正文每行不超过 80 个字符，中文、日文和韩文不超过 40 个字符。这是 WCAG AAA 的指导原则，对每位读者都有帮助。
  • 段落内的行距至少设为 1.5。
  • 把辅助内容放在侧边栏中，并且加载时不要让文章移位。

加载更快

新闻页面上最大的元素通常是首图。请把它当作页面上最重要的请求。

<img
  src="/images/lead-1200.jpg"
  srcset="/images/lead-800.jpg 800w, /images/lead-1200.jpg 1200w"
  sizes="(min-width: 768px) 720px, 100vw"
  width="1200"
  height="675"
  alt="Describe what the photo shows"
  fetchpriority="high">
  • 不要对 LCP 图片使用懒加载。
  • 把它放在初始 HTML 中，让浏览器在任何脚本运行之前就能发现它。
  • fetchpriority="high" 最多用在一两张图片上。更多就不再有效。
  • 只对首屏之外的图片和 iframe 使用 loading="lazy"。
  • 减少重定向，并让页面可缓存。独特的 URL 参数可能让请求回到你的源服务器，而不是 CDN。

保持稳定的页面

  • 为每张图片和每个视频设置 width 和 height，并在 CSS 中保留 height: auto。
  • 让 srcset 中的所有图片使用相同的宽高比。
  • 在广告、嵌入内容和 iframe 加载之前为它们预留空间。广告一章介绍了广告位尺寸。
  • 让 Cookie 提示和注册提示以叠加方式显示，或者为它们预留空间，这样它们就不会把文章往下推。
  • 使用 font-display: optional，或使用调整过、与网页字体度量一致的备用字体。
  • 用 transform 做动画。对 top 或 left 做动画会造成布局偏移。

快速响应

交互的总耗时有三部分：代码运行之前的等待、你的代码，以及随后的绘制。任何超过 50 毫秒的任务都是长任务。

  • 事件回调中尽量少做事。先更新屏幕，再推迟其余工作。
  • 用 scheduler.yield() 拆分长任务，在不支持它的浏览器中退回到 setTimeout。
  • 保持 DOM 小巧。较长的文章列表可以使用 content-visibility，稍后再渲染屏幕外的条目。
  • 记住每个 iframe 都有自己的主线程，所以要检查一次缓慢的交互来自哪个框架。

长页面与无限滚动

如果某个栏目页无休止地滚动，请为每一段内容提供自己的固定 URL，使用绝对页码，例如 ?page=12，并按顺序链接这些页面。随着读者移动，用 History API 更新地址。Google 不会滚动或点击，所以懒加载的内容必须在进入视口时加载，无需任何操作。

检查清单

  • 在 Search Console 中检查 LCP、INP 和 CLS，移动端和桌面端分别检查。
  • 在手机上打开你访问量最高的文章模板，确认标题和日期出现在第一屏。
  • 确认完整的文章正文位于服务器发送的 HTML 中。
  • 对比移动端和桌面端的内容、标题、结构化数据和 robots 标签是否一致。
  • 从首图上移除 loading="lazy"，并添加 fetchpriority="high"。
  • 为每张图片和每个视频添加 width 和 height。
  • 为每个广告、嵌入内容和横幅预留空间。
  • 把 scroll-padding-top 设置为与固定页眉一致。
  • 在 320 CSS 像素宽度下测试页面。
  • 为无限滚动页面的每一段内容提供各自的 URL。

来源