如果网站是“自适应设计”的网页,服务器便会向所有设备发送相同的 HTML 代码,而且系统会使用 CSS 更改网页在设备上的呈现方式。如果所有的 Googlebot 用户代理都可以抓取网页及其资源(CSS、JavaScript 和图片),那么 Google 的算法将会自动检测这些设置。

texts.png
自适应设计的网页会对所有设备提供可针对屏幕尺寸调整展示内容的相同代码


重要

  • 使用标记 meta name="viewport" 告诉浏览器如何调整内容。
  • 访问 网站开发基础 来了解相关实现方法。

使用 meta name="viewport"

要向浏览器说明您的网页会自动进行调整以适应所有设备,需要向网站的标头添加下方元标记:

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

元视口标记 可以指示浏览器如何根据设备的宽度调整网页的尺寸和缩放比例。如果没有 “元视口标记” 元素,那么在默认情况下,移动设备浏览器会根据桌面设备屏幕的宽度(通常为 980PX,但会因为设备而异)来呈现网页。此外,为了尽可能使内容开起来更美观,移动设备浏览器还会放大字体,并缩放内容但比例以适应屏幕的尺寸或仅呈现可在相应屏幕内显示的那部分内容。

对于用户来说,这意味着屏幕显示的字体大小可能会不一致,并且用户可能需要点击两次或通过张合双指进行缩放才能看到内容以及与内容互动。对于 Google 来说,这类网页将被视为不适合在移动端浏览器设备上浏览的网页,因为它需要用户在移动设备上进行这类互动。

cuowuzhanshi.png
上图左侧的网页是一个未指定元视口标记的网页,因此,移动设备浏览器会将它假定为桌面设备的屏幕宽度,然后据此对该网页进行缩放以适应屏幕,导致用户很难看清其中显示对内容。而右侧的网页是制定了视口的同一网页,它与设备屏幕宽度完全匹配。因此,移动设备浏览器不会对该网页进行缩放,网页内容清晰易读。

对于自适应图片,需要添加 <picture> 元素

一般来说,如果您的网站可以在最新版的浏览器(如 Google Chrome 或 Apple Mobile Safari)中正常运行,那么该网站就可以使用 Google 的算法。


为什么要使用自适应设计

我们推荐使用自适应设计是因为它有许多优势:

  • 可让用户通过 1 个网址更轻松地分享和连接到您的网站。
  • 有助于 Google 的算法为网页准确分配索引属性,而无需指明存在对应的桌面版/移动版网页。
  • 无需维护多个内容相同的网页,从而减少所需的开发工作
  • 降低出现响应移动版网站的 常见错误 的可能性。
  • 无需重定向即可让用户访问针对设备进行了优化的网页,从而缩短加载时间。此外,基于用户代理的重定向不仅容易出错,而且会使网站提供的用户体验大打折扣(相关详情,可参阅检测用户代理时的常见问题)。
  • 可在 Googlebot 抓取您的网站时节省资源。对于采用自适应设计的网页,一个 Googlebot 用户代理只需执行 1 次抓取 (无需使用不同的 Googlebot 用户代理实施多次抓取),即可检索到响应内容的所有版本。提高抓取效率可间接协助 Google 等搜索引擎将网站更多内容编入索引,并可确保所抓取的内容是最新的。

如果您对自适应设计感兴趣,可以阅读站长中心内的 文章 并访问 网站开发基础 网站。

注意

  1. 请勿使用 robots.txt 或以其他方式阻止 Googlebot 抓取任何网页资源(CSS、JavaScript 和图片)。搜索引擎能够完全访问这些外部文件有助于 Google 的算法检测网站的自适应设计配置并对其进行适当处理。
  2. 为了确保实施成功,需避免 常见错误

JavaScript

构建适合移动设备的网站时需要仔细考虑的一点是:如何使用 JavaScript 来更改网站在不同设备上的呈现方式和行为。JavaScript 的一般用途包括确定在相应网页中显示哪个分辨率版本的广告或图片。

常见配置

适合移动设备的网站有以下三种常见的 JavaScript 实现方式:

  • 适应性 JavaScript:采用这种配置时,网站会向所有设备提供相同的 HTML、CSS 和 JavaScript 内容。在设备上执行 JavaScript 时,网站的呈现方式或行为会发生变化。如果网站需要使用 JavaScript,那么我们推荐您使用此配置
  • 联合检测:采用这种实现方式时,相应网站会同时使用 JavaScript 和服务器端进行设备功能检测,以便向不同的设备提供不同的内容。
  • 动态提供的 JavaScript:采用这种配置时,网站会向所有设备提供相同的 HTML,但提供 JavaScript 的网址可根据设备的用户代理动态地提供不同的 JavaScript 代码。

下面是对于设置方法

适应性 JavaScript

在此配置中,网址会向所有设备提供相同的内容(HTML、CSS、JavaScript 以及图片)。仅当在设备上执行 JavaScript 时,网站的呈现方式或行为才会发生改变。这与使用 CSS 媒体查询的自适应设计的原理相似。

例如,某个网页会向所有设备提供包含 <script> 元素(用于请求可提供 JavaScript 的外部网址)的相同 HTML。所有请求 JavaScript 网址的设备都会获得相同的代码。执行时,JavaScript 便会检测相应设备并决定更改该网页中的某些内容 - 比如添加适合在智能手机(而非桌面设备)上使用的图片或广告代码。

此配置与自适应设计紧密相关,并且我们的算法可以自动检测此设置。此外,此配置不需要使用 Vary HTTP 标头,这是因为网页及其资源的网址不会动态提供内容。鉴于上述优势,如果您的网站需要使用 JavaScript,我们推荐您使用此配置。

联合检测

采用“联合检测”这项设置时,服务器会与 JavaScript 在客户端上协同检测设备的功能并改变提供的内容。

例如,某个网站可根据设备是桌面设备还是智能手机来更改内容的呈现方式。在这种情况下,该网站可以添加用于检测屏幕尺寸的 JavaScript(检测到的尺寸随后会发送到服务器,以便服务器更新或更改要发送给设备的代码)。通常,JavaScript 会将检测到的设备功能存储在 Cookie 中,供服务器针对来自同一台设备的后续访问读取这些功能。

由于服务器会向不同的用户代理返回不同的 HTML,因此,联合检测被视为一种可动态提供内容的配置。“动态提供内容”一节对此进行了详细说明,但简而言之就是:当设备请求获取一个可向不同用户代理提供不同 HTML 内容的网址时,相应网站应添加 HTTP 响应标头“Vary: User-agent”。

动态提供的 JavaScript

采用此配置时,网站会向所有设备提供相同的 HTML。HTML 中包括 <script> 元素以添加一个外部 JavaScript 文件,此文件的内容根据发出请求的用户代理的不同而有所差异。也就是说,JavaScript 代码是动态提供的。

在这种情况下,我们建议在提供的 JavaScript 文件中包含 HTTP 标头“Vary: User-agent”。该标头会向互联网缓存和 Googlebot 表明,JavaScript 可能会因用户代理而异;另外,该标头还会指示 Googlebot 使用不同的 Googlebot 用户代理抓取 JavaScript 文件。

最后修改:2020 年 03 月 13 日 07 : 43 PM
如果觉得我的文章对你有用,请随意赞赏