详细了解移动优化

内容 

1.一般信息

一般信息  
近年来，使用移动设备（例如智能手机或平板电脑）浏览互联网的人数已大大增加，并且仍在上升。这使得针对移动设备的网站优化成为每个网站管理员的职责。目标是充分展示网站及其在移动设备上的完整可用性。  
网站的“移动友好性”现在也已成为Google的重要排名因素。谷歌甚至宣布，移动搜索索引将成为谷歌的主要索引。该“移动优先”索引使网站的移动版本更加重要，因为它主要用于索引。  
对于某些网站（例如，餐馆，当地商店等），移动优化尤其重要，因为Google偏爱那些在移动设备上运行良好的本地搜索查询的网站（因为此类搜索查询通常是通过移动设备进行的）。  
移动设备上用户行为的特殊特征  
在处理移动优化的特定方面之前，您应该首先了解移动设备上用户行为的特殊性，因为这些是移动优化的基础。  
例如，一个重要的特殊特性是，不是使用鼠标而是通过触摸屏或语音控制在移动设备上进行导航。另外，在大多数情况下，移动设备的显示屏要小得多，这严重限制了显示选项。此外，通常无法显示Java或Flash，并且用户的互联网连接速度通常较慢。另外，当涉及到移动冲浪时，用户非常不耐烦，因此，必须以简洁的形式快速获得所需的信息，以使用户满意。  
“移动友好”网站的要求  
在解释移动优化的技术方面之前，我们首先要提及网站被视为“移动友好”所应满足的标准。  
首先，您应确保网站上的所有文本在所有设备上均可读（无缩放）。您还必须使页面的所有其他元素适应不同的显示尺寸，以避免用户不得不水平缩放或滚动。您还应该确保链接或按钮之间有足够的空间，以便可以用手指轻松触摸它们，而又不会触摸错误的链接。此外，出于用户友好的原因，您应避免使用并非在所有设备上都可用的软件（例如Flash）。  
移动优化方面  
基本上，移动网站的配置存在三种主要可能性。这些是  
1.响应式网页设计  
2.创建一个单独的移动网站，以及  
3.动态服务。  
响应式网页设计  
通过响应式网页设计，网站的HTML代码和URL对于所有设备均保持不变，但其内容会自动适应屏幕尺寸。响应式网页设计是Google推荐的移动优化方法，其缺点是并非所有内容都可以适应不同的显示尺寸。在响应式Web设计中，页面的显示区域由视口元标记配置，该视口元标记提供有关页面宽度缩放的信息：  
<metaname=“viewport”content=“width=device-width，initial-scale=1.0”/>  
此外，您可以使用CSS中的媒体查询进行响应式Web设计，以根据屏幕尺寸定义页面的显示。  
网站的移动版  
上述变体的第二个变种是为您的网站创建一个单独的移动版本，该版本具有自己的URL。在这种情况下，如果用户从移动设备访问您的网站，则会使用HTTP重定向将他们重定向到您页面的移动版本。但是，此替代方法的缺点是，它可能导致重复内容出现问题。  
为了使Google能够更轻松地评估不同的URL，您应该在桌面版URL的HTML代码中添加一个rel=“alternate”标记。此标记指向URL的移动版本：  
<linkrel=“alternate”media=“仅屏幕和（最大宽度：640px）”  
href=“http://m.98link.com/”>  
另外，您应该向页面的移动版本添加规范链接，该版本是桌面版本，以防止出现重复内容的问题：  
<linkrel=“canonical”href=“http://www.98link.com/”>  
动态服务  
配置移动站点的第三个也是最后一个选择是动态服务。如果选择此变体，则根据识别出的用户代理，将交付不同的HTML和CSS代码。在这种情况下，移动站点是实际站点的简化版本。这种选择的主要缺点是在识别用户代理时出错率很高。  
此方法中的一个重要元素是变化的HTTP标头。通过此操作，服务器发送一条消息，即智能手机的Googlebot也应抓取相应的页面。如果没有HTTP标头的变化，Google不会知道移动用户代理的HTML代码正在被修改。

该标头可能如下所示：  

GET/page-1HTTP/1.1  
（...HTTP请求标头的其余部分...）  
HTTP/1.1200OK  
内容类型：text/html  
变体：用户代理  
内容长度：5710  
（...HTTP响应标头的其余部分...）  
移动优化的其他方面  
移动优化的重要部分是速度优化通过减少要传输的数据量来访问您的网站。例如，通过最小化CSS和JavaScript文件，可以做到这一点。一方面，您可以通过最小化各个文件的代码来做到这一点（例如，通过删除换行符），另一方面，可以将一种文件类型的多个单独文件合并为一个整体文件，从而减少了请求加载页面。此外，对于移动网站，应使用尽可能少的图像，因为这些图像会导致更长的加载时间。如果不能没有特定的图像，则应尝试对其进行压缩或为页面的移动版本提供单独的图像（响应式网页设计也可以这样做）。此外，您应将视频，声音文件和其他多媒体元素限制在绝对最低限度内。  
除了速度优化之外，页面菜单适应较小屏幕尺寸的选择也是移动优化的重要方面。在这里，您还应避免使用所谓的英雄标题。也不要忘记调整字体大小，以便用户可以在较小的屏幕上阅读页面上的文本而无需缩放。  
此外，使用元标记“rel=icon”可以定义一个图标，当用户将您的页面添加到其移动设备的主屏幕时会显示该图标。

此meta标签如下所示：  
<linkrel=“icon”size=“192x192”href=“/icon.png”>  
Apple设备的触摸图标具有其自己的meta标签：  
<linkrel=“apple-touch-icon”href=“/apple-touch-icon.png”/>  
此外，您应始终告知Google您的网站针对移动设备进行了优化，或者存在单独的移动网站。您可以使用rel=alternate标记或网站移动版本的规范链接来执行此操作，也可以使用用于动态服务的其他HTTP标头来执行此操作。  
最后但并非最不重要的一点是，除了所有这些技术方面之外，您还应该始终了解用户访问您的内容以及与他们相关的功能的情况，并在设计站点时牢记这些方面。  
常见错误  
您应该避免以下有关移动设备优化的常见错误：  
1.插页式广告会覆盖您页面的全部内容，从而导致移动网站的索引编制出现问题，并给用户带来负面的体验。在这里，您应该使用横幅。  
2.配置错误的重定向（例如，用户始终被重定向到移动主页，而不是相应的子页面）  
3.用户代理未被识别为移动设备。  
4.加载时间过长（导致用户退出）  
5.字体大小太小  
5.触摸的元素太小且太靠近  
6.无法在移动设备上播放的视频（例如Flash视频）。为避免这种情况，您应始终使用HTML5标准标记集成视频，并提供视频成绩单，以防发生错误。