网站移动端友好 - 优化指南
- SEO检查清单, WooCommerce, WordPress 教程, 入门指南, 技术性SEO, 站内SEO, 站点性能, 网站配置, 营销工具
-
Nat H.
移动友好衡量的是网站在移动设备上浏览和使用的优化程度 。
如果网站在移动设备上打开，用户是否能够浏览它、查看内容并完成他们的预期目标？
移动友好性一直是 Google 的排名信号，它决定了用户是否可以在移动设备上访问网站时获得良好的体验。
拥有一个适合移动设备的网站不再仅仅是一种选择。
越来越多的移动设备用户正在浏览网页并进行搜索查询。 与此同时， Google 持续为所有网站启用“移动优先”索引。
切换到移动优先索引意味着 Google 将查看网站的移动版本 （而不是桌面版本）以进行抓取和索引。
本文将介绍什么是移动友好性 、为什么采取措施实现移动友好性如此重要，以及在针对移动设备优化网站时应考虑哪些因素。
你将了解哪些工具可以测试移动友好性、要采用的移动配置以及支持移动网站的解决方案，例如 AMP 和移动应用程序。
文章目录
什么是适合移动设备的网站？
移动友好型网站适用于各种设备 。 其内容在移动设备上均可查看和阅读 ， 为移动设备用户提供良好的访问体验 。
当然，移动友好度是一个衡量标准。 一个网站可以被认为是移动友好的，但仍然需要优化其某些元素，以使某些操作更容易或某些内容更易于访问。
为了了解网站的哪些部分可能存在问题并需要改进，让我们首先考虑您的用户。
他们在网站上执行了哪些操作？
这些行为包括阅读博客文章、购物、订阅新闻通讯、浏览网站的内容以了解有关公司的更多信息等等。
网页设计是否可以完成这些操作？
看看谷歌提供的有关移动用户行为的数据。
我们特别需要注意的是：
- 61% 的用户在使用移动设备时只查看第一页搜索结果
- 96% 的人通过手机搜索产品或服务
- 94% 的人使用智能手机搜索本地信息， 其中 90% 的人会采取行动
想想移动设备的特殊性。它们在室内外都被广泛使用。人们在使用移动设备时更有可能寻找具体的信息和针对其查询的具体答案。 他们的时间更紧迫，并且期望更快地获得结果。
这些是在设计移动友好型网站时应该牢记的主要出发点。如果想吸引流量并鼓励用户再次访问网站，就需要专注于满足他们的期望。
移动友好性如何成为如此重要的指标？
移动友好性和 Google
谷歌自 2014 年 11 月推出“移动友好”标签以来，开始更加关注移动友好型网站 。 该标签表明该网站已针对移动设备进行了优化，能够良好地运行。
虽然该标签已停用， 但移动友好性仍然是排名指标之一。2015 年 4 月 21 日， 移动友好性更新发布，提升了出现在移动搜索结果中的移动友好型网站的排名。
谷歌于 2016 年推出了 “移动优先索引” ，进一步推进了这些移动举措。 谷歌使用网站的移动版本进行抓取和索引。大多数网站已经受到此更新的影响。 谷歌原计划在 2021 年 3 月底之前全面转向“移动优先索引” 。然而，由于一些网站面临意想不到的困难， 谷歌表示这个截止日期不切实际。 因此，目前尚无最终日期，但该搜索引擎决定继续逐步实施“移动优先索引”。
2021 年 8 月， 谷歌发布更新， 指出页面体验是一个排名因素。 网页体验涵盖用户如何与网页互动，以及网页体验是好是坏。移动设备友好性是 Google 分析网页体验时考虑的指标之一（此外还有核心网页指标 、HTTPS 协议和无侵入式插页式广告） 。
为了确保网站响应面向移动设备的 Google 更新，请首先检查它对移动设备的友好程度！
移动友好性和 Google
谷歌自 2014 年 11 月推出“移动友好”标签以来，开始更加关注移动友好型网站 。 该标签表明该网站已针对移动设备进行了优化，能够良好地运行。
虽然该标签已停用， 但移动友好性仍然是排名指标之一。2015 年 4 月 21 日， 移动友好性更新发布，提升了出现在移动搜索结果中的移动友好型网站的排名。
谷歌于 2016 年推出了 “移动优先索引” ，进一步推进了这些移动举措。 谷歌使用网站的移动版本进行抓取和索引。大多数网站已经受到此更新的影响。 谷歌原计划在 2021 年 3 月底之前全面转向“移动优先索引” 。然而，由于一些网站面临意想不到的困难， 谷歌表示这个截止日期不切实际。 因此，目前尚无最终日期，但该搜索引擎决定继续逐步实施“移动优先索引”。
2021 年 8 月， 谷歌发布更新， 指出页面体验是一个排名因素。 网页体验涵盖用户如何与网页互动，以及网页体验是好是坏。移动设备友好性是 Google 分析网页体验时考虑的指标之一（此外还有核心网页指标 、HTTPS 协议和无侵入式插页式广告） 。
为了确保网站响应面向移动设备的 Google 更新，请首先检查它对移动设备的友好程度！
你的网站适合移动设备吗？
有一些工具可以快速判断网站是否适合移动设备并能正常加载。还可以查看移动网站可能遇到的潜在问题列表。
Google 的Lighthouse可以告诉你网站是否正确呈现并且可以在移动设备上使用。
如何针对移动设备优化网站？
根据以下指南审核网站，这些指南包含一些针对移动设备进行优化的最佳做法：
布局
适合移动设备的布局更轻松地查看网站内容。请仔细考虑段落、文本以及资源在页面上的布局。 桌面版通常将文本段落并排放置。在移动版上也可以这样做，并且仍然保持可读性，但更好的解决方案是垂直排列文本块，而不是水平排列， 以提高可读性。
拆分文本 ，使用较短的句子。段落之间要留出足够的空间，避免彼此过于靠近。尽量将重要信息放在页面顶部， 帮助访客快速找到所需内容。
字体
使用大字体。在移动设备屏幕上， 正文的字体大小至少应为 16 像素 。标题应大于此值，不太重要的文本则应较小。
考虑使用兼容多种设备的标准网页字体 ，而不是自定义字体。自定义字体可能会影响加载时间，并占用移动设备的更多带宽。一些推荐的字体包括 Open sans、Roboto、Helvetica 或 Verdana 。
图片和视频
使用合适的图片比例和尺寸 。确保图片可以根据不同的展示场景（例如社交媒体平台）调整大小或裁剪。
如果可能， 请压缩图片以减小文件大小。例如，可以使用tinypng轻松压缩图片，同时最大程度地降低质量损失。 这样做可以加快加载速度，同时保持图片的高质量。
根据图像的特点和用途选择图像格式 ：
JPEG 格式最适合照片，但不是图形和文本的最佳选择。
PNG 是高质量图片和视觉效果（如徽标或图标）的常见选择。
GIF 可以保存动画或较小的图形或图标。
请注意，GIF 通常体积较大，会降低页面加载速度。可以考虑将 GIF 转换为视频 ，以提升网页性能。
SVG 是一种基于矢量的格式，适用于图形、图像和徽标，确保它们能够在所有类型的设备上正确显示。
WebP 是一种现代图像格式，旨在取代 JPEG 和 PNG 格式。WebP 的功能包括无损压缩、透明度和动画。
AVIF 旨在提供比 JPEG、PNG 和 WebP 等其他格式更强大的功能。它允许更高的压缩率，同时保持图像的高质量。
网络上最流行的图像格式是 JPEG ，占图像总数的 43%。其次是 PNG（29%）、GIF（19%）、SVG（4%）和 WebP（2%）。
菜单和按钮
考虑到某些元素（例如菜单 ）在移动设备上可能会占用过多空间。汉堡菜单可以解决这个问题。它被广泛用于将菜单项压缩到下拉列表中。
把按钮做得更大一些 ，并在按钮周围留出足够的空白，以便于点击。
Apple 建议所有控件的可点击区域至少为 44pt x 44pt，而 Android 则根据按钮类型制定了更精细的准则 。例如，文本按钮的高度至少应为 36 dp，宽度至少应为 64 dp，而切换按钮的高度至少应为 48 x 48 dp。
对于特别相关的 CTA ， Sticky buttons可能是正确的选择 ，这样用户就不会错过它们。
仅包含必要的按钮 ，以节省移动设备屏幕上有限的空间。按钮应放置在页面底部，以便于访问。
Web 性能
移动设备上的无线网络连接可能不如桌面设备稳定且速度较慢 ，因此必须考虑到这一点进行优化。
优先加载关键资源 ，并延迟渲染不太重要的资源，以提高页面速度。例如，优先渲染页面内容和主要导航。由于 JavaScript 加载时间较长，请选择优先加载其他元素，以免用户看到空白页面。
精简 HTML、CSS 和 JavaScript 文件 。寻找合并 JavaScript 或 CSS 文件的机会。例如，可以尝试将多个 CSS 样式表合并为一个。 限制需要发出的服务器请求数量 。尤其要注意减少对外部资源（例如脚本或图片）的请求。
考虑延迟加载某些资源 ，例如视频和图片。这样做可以延迟加载视口中不可见的内容。
插页式广告
在屏幕较小的设备上，弹出窗口和广告会显得特别具有侵扰性。
检查是否有任何干扰性插页式广告 （即可能遮挡页面内容的弹出窗口）。根据其放置位置，Google 可能会认为这些广告会降低用户体验。如果内容无法访问， 可能会影响网站的排名。
移动优化是否导致了 Web 性能问题？请查看我们的 Web 性能服务并联系我们进行审核。
移动配置：响应式设计、动态服务还是单独的 URL？
有多种解决方案可以构建更加适合移动设备的网站。
给一个建议是让你的网站具有响应能力。
要创建响应式网站，需要将元视口标签添加到页面的<head>部分。这会告诉浏览器调整大小并根据屏幕的宽度和高度调整网站内容。元视口标签如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
谷歌青睐响应式设计 ，因为它可以增强搜索引擎的可访问性。
由于两个版本的网站只需一个 URL，用户可以轻松与内容互动，Google 算法也更容易为其分配索引属性。由于无需多个 Googlebot 用户代理来抓取网站的不同版本， 因此抓取内容的效率也更高 。
在动态服务中，下一个要检查的配置是检测用户代理。然后，根据用户是从移动设备还是桌面设备访问页面，提供相应的 HTML 代码。Vary HTTP 标头会告知浏览器，响应会根据发出请求的用户代理而变化。
它还会告知缓存服务器，在决定是否从缓存中提供代码时，应考虑用户代理。这是为了防止服务器错误地将桌面版 HTML 页面的缓存提供给移动用户。搜索引擎的移动用户代理会收到通知，告知他们应该访问网站的移动版本。
第三种选择是使用单独的子域名来创建网站的移动版和桌面版。这种方法需要谨慎实施，而且更容易出错，但在内容、导航和布局方面可以提供更大的灵活性。此处的移动网站是专为移动设备设计的。
虽然响应式设计是推荐的解决方案，但如果配置正确，选择动态服务或单独的 URL 也可以在移动世界中取得成功！
AMP（Accelerated Mobile Pages加速移动页面）
AMP 是一个由 Google 支持的开源框架，可帮助用户创建响应式、用户驱动的移动网站。其主要组件包括 AMP HTML、AMP JavaScript 和 AMP 缓存。 AMP 在多个层面上增强了网络性能。 它可以使网站达到更快的加载时间，使用更少的数据，并改善用户体验 。
AMP 限制了 HTML、CSS 和 JavaScript，以便移动网页能够更快地渲染。AMP HTML 页面由 Google AMP 缓存抓取并缓存，从而缩短了 Google 搜索的加载时间。
所有 AMP JavaScript 均异步执行。第三方 JS 只能在 iframe 中加载，从而将其移出关键路径。AMP JS 还实现了内联 CSS 和字体触发。它通过优先加载必要的资源来提高资源加载的优先级，并预取延迟加载的资源。
使用 AMP 的一个缺点是，它的预渲染可能会导致每次搜索时数据和电量使用量增加， 这对于数据计划有限的人来说可能尤其重要。
符合 AMP 规范的网站遵循所有必要的准则，Google 抓取、渲染和索引起来会更加容易。也可以使用 AMP 元素（例如 AMP HTML），即使网站不符合 AMP 规范，也能提升网站的性能。
有大量的 AMP 文档 ，其中包含如何实施框架的示例 – 检查这是否是您的新移动解决方案。
移动应用程序如何响应移动友好性？
移动应用程序是在移动设备上显示内容的另一种方式。
下载移动应用程序后，它可以从互联网获取内容，也可以将其存储在设备上，以便离线访问。 移动应用程序和移动网站提供不同的功能 ，各有优缺点。
在用户体验和个性化方面，移动应用程序的功能远超移动网站。应用程序允许用户设置偏好设置，并追踪用户的参与度。
原生移动应用可以访问设备的功能，例如 GPS、相机或通知。应用还可以通过呈现更直接的界面来增强用户参与度。它们旨在帮助用户完成特定目标，例如准备和提交订单或查看订单状态。
可以使用 Firebase 应用索引功能为移动应用内容编制索引 。 它使应用能够显示在搜索结果中。
可以使用深层链接将移动应用的内容编入索引。在移动环境中，深层链接用于将用户直接引导至应用内的特定位置。
这可以向 Googlebot 指示应用链接对应的映射。设置完成后，可以将链接配置为指向应用页面，而不是移动网页。
移动应用内容被编入索引后，用户在使用移动设备时即可在 Google 搜索中找到它。如果他们已安装您的应用，则可以轻松重定向到该应用。如果他们尚未安装，则会看到应用的安装按钮。
移动应用是提供跨平台和设备无缝体验的绝佳补充。如果希望吸引用户并与他们互动，同时提升他们的忠诚度，那么移动应用将尤为有用。另一方面，如果想通过适合移动设备的内容覆盖更广泛的受众，移动网站会是更好的选择，可以在此基础上构建应用。
结束语
世界正在走向移动化，采取移动友好型方法是必须的。
现在应该了解了“移动友好性”的含义及其特点。也熟悉了如何针对移动设备优化网站，以及有哪些其他方法可以触达和吸引移动用户。
一个在设计时没有充分考虑移动设备的网站可能比其他网站需要更多优化。应该确保移动网站不仅能够在移动设备上正常显示和运行，而且用户每次访问时都能获得积极且满意的体验。
审核网站，检查所有元素的大小和布局是否正确。分析您的布局、字体、图片和视频、菜单和按钮、性能以及插页式广告。
优先考虑内容来吸引访问者，以便他们留在网站并不断回来！
如果你有任何问题或疑虑，请随时联系 Nat 的技术 SEO 顾问并利用我们的移动 SEO 服务。
Nat H.
您好！我是Nat，imrnat的创始人。感谢您将宝贵的时间托付给我们，我希望您在这篇博文中找到了问题的答案。
如果您仍然想知道如何确切地推进您的自然增长，请查看我们的服务页面并安排一次免费的对话，我们将为您完成所有繁琐的工作。
希望能尽快与您交谈！
