据国内三大运营商数据来看,中国的手机用户数已达10亿,超过2/5的移动用户每个月都会从手机终端访问网页,如今的移动端手机网站比例肯定有提升,但是对于这些存在的移动版本网站来说,马海祥查看了很大一部分手机网站,很少做SEO优化工作,在这里,马海祥认为移动端的手机网站优化并不是PC网站的简单copy过来的移动版本。

由于是手机用户,用户浏览网页的时间是零碎的,不可能耐心点击很多的页面,因此,要想做好一个移动端网站的优化,就需要尽可能在制作移动端手机网站的过程中精简移动网站设计,并要合理的做好移动端网站的SEO优化。

一、移动端网站的页面设计

网页设计要尽可能的设计简单,手机端可视区域小,布局上不同于传统网页,需要充分利用有限的空间去展示信息。

1、页面适配手机屏幕

随着手机屏幕的不断的增大,同时也遇到一些用户手机屏幕还是处于240*320这种屏幕的大小,当然也存着在一些不规则的屏幕分辨率心寸大小,对于很多的UI来说,不同的手机屏幕很多时候得出多套的图才能保证手机客户端在不同的屏幕上实现匹配。

2、页面专门针对手机屏幕设计

(1)、页面随屏幕宽度变化,无横向滚动条。

(2)、不放大时,能清晰浏览内容,文字大小不低于12像素。

(3)、不放大时,按钮、链接等点击方便(具体可查看马海祥博客《如何通过修改CSS样式来增强平板电脑的用户体验》的相关介绍),按钮尺寸不能过大或过小。

3、使用最多三级的页面结构

减少移动站的页面层级,降低用户认知难度,一个标准的移动站应该包含首页、列表页和详情页三种类型,以满足广告主的推广需求和用户的认知需要。

对于页面类型及层级,马海祥建议不超过3个,保证简单、高效的用户体验,据马海祥博客的分析,使用尽量浅的页间结构,减少用户点击次数,提升浏览体验。

(1)、首页

整站内容索引,内容预览(使用“更多”“详情”等链接),首页作为用户分流前到达的页面,要求能够汇集整个网站的大部分模块和功能,以保证不同需求的用户在着陆后都能寻找到自己想要的信息。

移动站一般首页又可以分为导航式和内容式,导航式因其风格简洁,一般又可用作品牌宣传,起到快速传达品牌形象的作用,内容式因其丰富的内容,常用来快速传达广告主想传递的信息。

(2)、列表页

频道内容、分类、列表为主,列表页一般用于展现结构简单,并且重复度较高的内容,最常见于商家的产品/服务,形式也一般相对简单,用于满足展现多产品/服务的需求,根据商家产品/服务信息不同一般分为纯文字和图文两种基本形式。

(3)、内容页

推荐以结构化形式展现内容,详情页一般用作展示首页和列表页未显示完全的信息,以满足用户了解详情的需求,从而辅助用户进行决策。

4、使用清晰的导航组件

全站导航:快速到达各个频道(具体可查看马海祥博客《如何规划并架构网站的导航信息结构》的相关介绍);

局部导航:在单个频道的首页、列表、详情页面间移动;

相关链接:相关频道之间的链接。

5、页面单列布局,重要内容显示在首屏

页面内容模块从上到下,单列布局,重要内容展现在首屏。

6、保证良好的可用性

(1)、页面内容无缺失,交互功能正常使用。

(2)、不使用flash

(3)、使用html5来实现动画。

7、优秀交互方式,简化操作流程,提升使用体验

(1)、优秀的交互方式能很有效地提升用户体验,一方面能够简化操作流程提升操作效率,另外,马海祥觉得这对于产品功能易用性的提升也是较大的。

(2)、滑动切换图片相比于自动切换和点击切换,滑动切换增强了用户操作的主动性、同时提升了切换的便捷性。

(3)、滑动切换页面用户可以通过滑动进行页面之间的切换,节省用户寻址时间。

(4)、点击放大图片点击缩略图放大图片,减少了操作流程,一定程度上减少了因页面跳转带来的用户流失。

(5)、页面区域点击区域点击能较大提升用户点击的效率,减少用户因定位点击区域造成的效率损失。

(6)、点击加载更多一方面减少单张页面的非必要信息,让页面变得简洁,同时能减少页面间的跳转,降低因网速等原因造成的用户流失。

8、保证广泛的兼容性

在主流操作系统、浏览器中均可正常展现,比如:操作系统:Android,iOS;浏览器:UC、QQ、iOS Safari、Android。

二、移动端网站内容设置优化

对于手机网站的首页或者频道首页的网页代码中的keywords、description最好加上与PC端有所区别的meta标签和关键词,在每个页面的关键字及描述像做传统PC端网站一样,做好针对性的填写工作,对搜索结果的展现(摘要)以及优化工作大有帮助(具体可查看马海祥博客《如何优化一个移动端手机网站》的相关介绍)。

1、一致性

着陆页内容与关键字、广告文字的相关性,不仅保证广告与目标页面呼应和一致,更重要的能够提升潜在客户在着陆页上面的点击次数,减少客户流失。

2、可信度

通过告知潜在客户公司名称、联系地址、客服电话等信息,能够有效地提升网站(公司)的可信度。

3、重要信息首屏显示

具体产品信息尽量出现在网页的第1-2屏,避免与用户玩寻宝游戏。

4、根据行业特性,放置针对性的内容

重点关注移动页面的信息构建,以满足用户需求;

基础信息:公司介绍、产品/服务介绍。

信任信息:荣誉资质、专家团队、案例。

转化信息:电话、地址。

5、精简文字,处理好图片

精简文字量:PC内容一半左右。

使用图片、幻灯片提升展示效果,并注意压缩图片尺寸。

推荐用宽图片展示LOGO,正方形图片展示产品。

三、优化移动端页面性能

随着移动互联网的发展,我们越发要关注移动页面的性能优化,我们能做得是对移动端页面本身优化,这也是我们专业价值的体现,所以我们必须做移动端页面性能优化(具体可查看马海祥博客《手机网站制作的常用方法及优化技巧》的相关介绍)。

1、控制加载时间与网页大小

跳出前等待时间的用户比例;

加载时间:单页面5S以内;

网页大小:单页面50K以内;

优化加载时间和网页大小:重点在前端优化;

减少HTTP请求:减少重定向,合并图片,懒加载;

减少传输数据大小:压缩图像,开启GZIP……;

考虑到移动设备和移动互联网的特点,马海祥建议在进行移动网站的页面开发设计时,一个总的原则是考虑用户访问的效率,降低页面加载时间(具体可查看马海祥博客《提高网站在移动端打开速度的方法技巧》的相关介绍)。

2、减少访问请求数

从设计实现层面简化页面,不要放太多的图片、复杂的表达、动画、视频等等。

资源合并及压缩:比如将背景图片、导航图片等等作为一张图片,这样只需一次请求,而不是多次。

静态资源(Css、Js、Image)懒加载;

异步执行inline脚本;

避免重复的资源请求;

缩小cooike;

设置连接方式为keep-alive;

减少DNS查询;

移动端可见区域是有限的,采用延迟加载方式;

开启服务器压缩(gzip方式)。

3、优化图片处理

图片走CDN;

少用动态gif图;

图片不适宜过多及过大;

避免使用bmp图片;

图片压缩;

零碎图片使用css Sprite技术一次性下载。

4、优化HTML

减少HTML标签,减少不必要的嵌套;

废弃table标签;

减少DOM深度;

压缩HTML,去掉注释,空格换行等信息。

5、优化JS

使用临时变量或者数组存储document.images及document.forms等集合数据;

慎用with语法;

使用AJAX缓存;

避免eval及Function语法;

避免使用inlineScript;

异步、底部加载js;

合并压缩js;

字符串连接使用数组的join方式。

制作移动端手机网站过程中的SEO优化方法技巧的更多相关文章

  1. CAS SSO:汇集配置过程中的错误解决方法

    本教程为gevin.me原创文章,转载请注明: CAS SSO:配置过程中的错误解决方法 | Gevin’s Blog 本文将收集在配置CAS SSO遇到的所有错误,希望对大家有帮助,也方便下次搭建的 ...

  2. ASP.NET Core 中的SEO优化(4):自定义视图路径及主题切换

    系列回顾 <ASP.NET Core 中的SEO优化(1):中间件实现服务端静态化缓存> <ASP.NET Core 中的SEO优化(2):中间件中渲染Razor视图> < ...

  3. ASP.NET Core 中的SEO优化(3):自定义路由匹配和生成

    前言 前两篇文章主要总结了CMS系统两个技术点在ASP.NET Core中的应用: <ASP.NET Core 中的SEO优化(1):中间件实现服务端静态化缓存> <ASP.NET ...

  4. ASP.NET Core 中的SEO优化(2):中间件中渲染Razor视图

    前言 上一篇文章<ASP.NET Core 中的SEO优化(1):中间件实现服务端静态化缓存>中介绍了中间件的使用方法.以及使用中间件实现服务端静态化缓存的功能.本系列文章的这些技巧都是我 ...

  5. 网站的安全性对seo优化至关重要-智狐SEO顾问

    网站的安全性对seo优化至关重要    作者:智狐zhihuseo 从大的范围来看,网站安全性能也属于seo的范畴之一.域名被恶意泛解析就是网站安全性能低下的特征之一,如果网站域名被恶意泛解析,会直接 ...

  6. 【转】C#中WinForm程序退出方法技巧总结

    C#中WinForm程序退出方法技巧总结 一.关闭窗体 在c#中退出WinForm程序包括有很多方法,如:this.Close(); Application.Exit();Application.Ex ...

  7. C#中WinForm程序退出方法技巧总结(转)

    本文实例总结了C#中WinForm程序退出方法技巧.分享给大家供大家参考.具体分析如下: 在c#中退出WinForm程序包括有很多方法,如:this.Close(); Application.Exit ...

  8. C#中WinForm程序退出方法技巧总结

    C#中WinForm程序退出方法技巧总结 一.关闭窗体 在c#中退出WinForm程序包括有很多方法,如:this.Close(); Application.Exit();Application.Ex ...

  9. 下载类网站的SEO优化方面技巧

    在互联网国际中有一类十分主要的网站,那即是供应各种软件下载的网站,这类网站可以协助用户解决许多软件运用方面的疑问,可是随着知识产权维护的认识越来越强,许多下载类网站也要开端改动自个的经营策略,这么才可 ...

随机推荐

  1. idea Error:(1, 10) java: 需要class, interface或enum, 未结束的字符串文字,Error:(55, 136) java: 非法字符: \65533

    1.未结束的字符串文字,Error:(55, 136) java: 非法字符: \65533  这些乱七吧八遭的错误如果很多的话 , 尝试 重新修改下生成目录 修改下语言等级 上述方法都不行 ,还报错 ...

  2. iOS中大文件下载(单线程下载)

    主要是需要注意,在客服端发请求给服务器的时候,在请求头里是可以设置服务器返回的数据从哪开始,到哪结束的. 当服务器响应客户端时,是可以拿到服务器返回数据具体类型以及大小的 思路: 在接收到服务器响应时 ...

  3. hdu1598

    思路:对所有路径的速度从小到大排个序,然后枚举高度差就ok...... #include<iostream> #include<cstdio> #include<cstr ...

  4. 【转】Oracle 自定义函数语法与实例

    原文地址:https://blog.csdn.net/libertine1993/article/details/47264211 Oracle自定义函数的语法如下: create or replac ...

  5. Spring框架中InitializingBean执行顺序

    本文转自:https://www.cnblogs.com/yql1986/p/4084888.html package org.test.InitializingBean; 2 3 import or ...

  6. swift闭包 notes http://www.gittielabs.com

    Swift Closureshtml, body {overflow-x: initial !important;}.CodeMirror { height: auto; } .CodeMirror- ...

  7. C语言 · 征税程序

    算法提高 征税程序   时间限制:1.0s   内存限制:512.0MB      问题描述 税务局希望你帮他们编写一个征税程序,该程序的功能是:首先输入某公司的年销售额sale和税率rate,然后程 ...

  8. UltraEdit 常用快捷方式

    Ctrl+N :创建一个新文件 Ctrl+O :打开文件 Ctrl+Q :快速打开文件 Ctrl+F4 :关闭文件 Ctrl+S :保存活动文件 F12 :另存为 Ctrl+P :打印当前活动文件 C ...

  9. Spring WebSocket初探1 (Spring WebSocket入门教程)<转>

    See more: Spring WebSocket reference整个例子属于WiseMenuFrameWork的一部分,可以将整个项目Clone下来,如果朋友们有需求,我可以整理一个独立的de ...

  10. WIN7下重建图标缓存(解决MFC.exe桌面图标显示异常问题)

    WIN7下重建图标缓存 使用WIN7时,MFC工程生成的应用程序图标,如果更改为自定义的ICON图标之后可能在桌面上显示的依旧是上一次的图标,改个名或换个路径都能恢复正常,说明在WIN7系统下图标的缓 ...