视口 Meta 标签入门指南

视口 Meta 标签新手指南

视口 Meta 标签是什么、怎么设置技术 SEO

了解视口 Meta 标签如何影响网站表现，并帮助内容在搜索结果中获得更高排名。

什么是视口 Meta 标签？

视口 Meta 标签（viewport meta tag）是一段 HTML（超文本标记语言）代码，用于告诉浏览器如何控制视口尺寸与缩放。它是响应式网页设计的关键要素，能确保内容易于查看。

视口（viewport）是网页在用户屏幕上可见的区域。视口因设备而异，也会随浏览器窗口大小的调整而变化。

例如，平板电脑上的默认视口尺寸比桌面屏幕小。智能手机的视口通常比两者都小。

用户调整桌面浏览器窗口大小时，同样在操控视口。显示内容可能保持不变，也可能重新排版。

视口很少与完整渲染的网页尺寸相同，因此浏览器会使用滚动条，让用户能够访问网站的所有内容。

注意，各设备上并非只是同一页面的内容多少不同，布局同样会发生变化：

这类响应式网站设计能提升 UX（用户体验），并可以对 SEO 工作产生积极影响。

视口 Meta 标签如何运作？

视口 Meta 标签会根据用户的屏幕调整内容，让页面更具响应性，并避免用户不得不横向滚动或缩放。

以下示例展示视口标签如何影响一个基础页面：

一个没有 viewport meta 标签的页面和一个有 viewport meta 标签的页面对比示例

左侧显示中的文字难以辨认，而且没有很好地利用可用空间。用户必须同时放大照片与文字才能看清。

右侧的文字可以立即阅读（尽管是占位文本），图片铺满屏幕宽度。用户无需任何调整就能清晰看到内容。

带视口 Meta 标签的页面内容更便捷、更有吸引力，用户很可能会停留更久。

添加 Meta 视口标签会让页面更具响应性。它让页面变得对移动端友好，但这并不等同于一个移动端页面。以下是关键区别：

一个响应式页面会自动适应其浏览环境，无论设备是什么（即网站的桌面版 vs. iPad）。用户可以访问你的整个网站。
一个移动端页面仅设计用于移动浏览器。这些页面上的内容与你的主站是分开的，通常有一个单独的 “mdot” 子域名（即 “m.[你的网站].com”）。用户可能无法访问你的整个网站。

视口 Meta 标签如何影响营销表现

使用视口 Meta 标签是改善网站用户体验的一种简单方式，也能增加自然流量。

这两个结果都有助于达成营销目标。

改善用户体验，让用户留在你的网站上

视口 Meta 标签让内容更易阅读，访客更可能在页面上停留更久。

用户在你网站上停留的时间越长，机会就越多：

收集有价值的信息（通过网页表单或网站分析）
转化他们（终极目标）

GoodFirms 调查的网页设计师中，几乎四分之三（73.1%）表示，非响应式设计是导致用户离开网站的主要原因：

图片来源：GoodFirms

可以在自己的网站上验证这一理论。添加视口 Meta 标签后，追踪以下指标，观察互动是否改善：

平均互动时长：用户在屏幕上聚焦于你网页的时间。这一数字也应该上升。
跳出率：Google 计为非互动的会话所占的百分比。即用户在 10 秒内离开你的网站，而没有点击链接或触发事件。跳出率下降意味着互动度更高。

可以在 Google Analytics 仪表板中前往 “Reports”（报告）>“Lifecycle”（生命周期）>“Engagement”（互动）>“Engagement overview”（互动概览）查看平均互动时长。

在 Google Analytics 4 中查找跳出率要稍微困难一些。如需操作方法，请查看我们整理的实用 Google Analytics 指标及其查找位置的汇总文章。

帮助你在搜索引擎结果中获得更高排名

视口 Meta 标签本身不是直接的排名因素，但它提供了更好的用户体验，这可以改善网站在 Google 搜索结果页面（SERP）中的排名。

其中一个重要原因是 Google 转向了移动优先索引。这意味着它在决定你的 SERP 排名时会查看网站的移动版本。

拥有正确的视口 Meta 标签，就能确保内容对移动端友好。让用户无需缩放或滚动就能阅读内容，会让你更有机会获得良好排名。

图片来源：Google

如何使用视口 Meta 标签

大多数内容管理系统（CMS）会自动为你的网站设置最优的视口 Meta 标签。

你也可以通过编辑网站代码来自行设置。

视口 Meta 标签和其他Meta 标签一样，是放入页面 <head> 中的 HTML。

一个典型页面会包含类似这样的内容：

content 属性（“content=”）决定页面加载时的显示方式。你可以通过调整 device-width 和 initial-scale 属性来调整你网站的外观。

Width（宽度）

width 控制视口的宽度，这一点并不意外。你可以设置一个具体的值（以像素为单位），例如 width=500。它会像这样：

你也可以使用 device-width，它将使用设备宽度的 100%。它看起来像这样：

device-width 更简单，并且能通过适应各种屏幕尺寸来确保最佳用户体验。

Initial-scale（初始缩放）

initial-scale 决定页面加载时的缩放级别。你可以从 0.1 设置到 10。默认值是 1。

缩放级别为 3 会像这样：

其他属性

还有其他方式可以调整视口 Meta 标签。相关属性包括：

Height（高度）：它的作用与 width 相同。你可以把它设置为具体的像素数，或使用 device-height（推荐）。
Minimum-scale（最小缩放）：它控制页面允许的缩放程度，防止用户过度缩小。它必须小于或等于 maximum-scale。默认值是 0.1。
Maximum-scale（最大缩放）：它也通过防止用户过度放大来控制缩放级别。它必须大于或等于 minimum-scale。默认值是 10。任何小于 3 的值都违背可访问性准则。
User-scalable（用户可缩放）：它控制用户是否能够缩放。有效值为 0 或 no，或 1 或 yes。不允许用户缩放违背了 Web 内容可访问性指南（WCAG），也会带来糟糕的用户体验。
Interactive-widget（交互式组件）：它指定虚拟键盘等交互式组件如何影响页面的视口。视口有两类：视觉视口（用户当前在屏幕上看到的那部分页面）和布局视口（页面上的所有元素，无论是否可见）。有效值为：
- Resizes-visual：只调整视觉视口，而不调整布局视口（默认）
- Resizes-content：同时调整视觉视口和布局视口
- Overlays-content：不调整任何视口