SEO如何使用百度SiteApp搭建手机站

第1步：百度账户申请   要使用百度SiteApp，必须先拥有一个百度账号。百度账号的注册非常方便，登录下面的网址，输入手机或邮箱，再加上密码就可以注册一个百度账号了。百度账号注册网址为https：//passport.baidu.com/v2/?reg

第2步：添加站点   登录百度账号之后，访问http：//siteapp.baidu.com/，单击“立刻免费创建”按钮，然后输入需要生成WebApp的网站地址。

第3步：定制样式   确定了要手机化的网站后，给自己的网站起一个WebApp名称，这个名称会显示在手机站的最顶部。接着就要选择网站的模版样式了。目前百度SiteApp平台提供了5套模板：通用模板A、B、 C提供电话、在线沟通、短信等转化组件列表风格简单明快，列表可以连续加载。   网页风格提供多种导航，可自由布局。以上5套模板都提供多种配色方案。可以根据网站的特点及喜好进行相应的选择。定制好样式后，单击“下一步”按钮。

第4步：定制导航   百度SiteApp会自动从PC站点智能提取一级导航，可对导航进行编辑、调序、删除、添加二级导航等。定制完导航之后，单一击“下一步”按钮。

第5步：全局设置   制作移动站是为了方便用户，往往需要具备电话咨询、短信发送、在线咨询、地图等功能。在百度SiteApp的全局设置中，可以傻瓜式的为自己的手机站添加这些功能，只需要在设置界面左侧填写内容，在右侧手机就可预览系统自动生成的页面效果了。   如想优化页面效果，可在完成建站流程后到“管理我的webapp→优化工具”中进行页面效果的优化定制。确定了全局设置之后，单击“下一步”按钮。

第6步：网站验证   设置完成之后，就要验证网站了，否则百度无法知道你是在编辑自己的网站。验证站点的目的只是确保你拥有该网站的操作权限，不会对你的网站带来任何的风险。验证的方法有两种：文件验证、html标签验证。网站验证完成后，单击“下一步”按钮。

第7步：域名部署   最后，就要把配置好的WebApp跟域名绑定了。需要在“绑定域名”输入框中填写我们提前准备好的几级域名，也就是希望用户访问的手机站的二级域名。然后，要到你的域名管理后台，建立一个CNAME解析，把二级域名解析到siteapp.baidu.com上，完成以以上所有步骤后，WebApp就创建完毕啦。

这时候，还需要耐心等待一下百度官方的审核，审核时长约1个工作日。在提交审核的同时百度会自动分配WebApp的访问地址，在通过审核后该域名就可以正常访问了。

手机端的标签优化跟PC端的一样，主要问题是移动端页面与PC端页面的适配问题，

手机端标签优化特有的有哪些?

<metacontent="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"name="viewport"><metacontent="yes"name="apple-mobile-web-app-capable"><metacontent="black"name="apple-mobile-web-app-status-bar-style"><metacontent="telephone=no"name="format-detection">

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览

width-viewport的宽度height-viewport的高度initial-scale-初始的缩放比例minimum-scale-允许用户缩放到的最小比例maximum-scale-允许用户缩放到的最大比例user-scalable-用户是否可以手动缩放

第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览

第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式

在webapp应用下状态条(屏幕顶部条)的颜色默认值为default(白色)，可以定为black(黑色)和black-translucent(灰色半透明)。注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。

第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。

其次是百度对字号间距的规定，需严格遵守。

百度用户体验部对移动页浏览体验的研究成果：

1、主体内容含文本段落时，正文字号推荐14px，行间距推荐(0.42~0.6)*字号，正文字号不小于10px，行间距不小于0.2*字号

2、主体内容含多图时，除图片质量外，应设置图片宽度一致位置统一

3、主体内容含多个文字链时，文字链字号推荐14px或16px：字号为14px时，纵向间距推荐13px字号为16px时，纵向间距推荐14px文字链整体可点区域不小于40px

4、主体内容中的其他可点区域，宽度和高度应大于40px

5、此外，需注意交互一致性，同一页面不应使用相同手势完成不同功能。

再次，降低js，大图片，flash等富媒体资源使用，甚至在非特别必要情况下，使用纯静态文本资源，访问速度快，主题集中，减少蜘蛛工作。用还是不用，可以细致的体现到每个页面策略上去，富媒体的东西无非是利用人右脑功能强化记忆，加强吸引力的。但在移动端，它会严重拖慢加载速度以及占用有限手机空间。并非很好选择，除非对图片要求及flash或交互要求高的站点，不过通常它们的加速方面有强大的技术支持。可有效抵减带来的不利影响。

第四，使用m.jiaodaseo.com，wap.jiaodaseo.com，类似这样的通用标示多次重复标示，并可采用技术手段拒绝pc用户访问。或者强制跳转到pc页面。如果是自适配的，这种办法就不适用了，可加强上面提到的关键词标示，增进识别度。

第五，百度的自定义标签，用以帮助识别pc移动站。

用来向百度蜘蛛说明此url页面适合在PC端还是M端展现。说白了，就是帮助百度提交校验识别结果的正确性，减少百度蜘蛛把PC站当成M站，或者把M站当成PC站进行抓取。

2.代码位置：

代码放在中间，规则和对应关系见下：

如果是PC站，代码：<metaname="applicable-device"content="pc">

如果是M站，代码：<metaname="applicable-device"content="mobile">

如果是自适应或代码适配，代码：<metaname="applicable-device"content="pc,mobile">。

总的一句话，速度快稳定移动访问体验佳，搜索引擎高度识别，并能建立起移动站跟pc站的一一对应关系。

webapp使用JavaScript修改页面；紧接着再从服务器传递更多数据然后再修改页面，如此循环。

从性能的角度看，在现代浏览器中单页面Web App已经能够和普通native应用程序相媲美，而且几乎所有的操作系统都支持现代的浏览器。

所以，很多人认为webapp是HTML5流行过程中最大的赢家，那么他有哪些特定呢？

SPA（single page application），即单页webapp，它具有以下优点：

用户体验，对于内容的改动不需要加载整个页面。这样不会出现白页情况，页面与页面无缝切换，甚至带有一定动画效果。

请求量少，请求内容无需服务器解析，对服务器压力较小，消耗更少的带宽，比如每次不需要接收完整的html结构，而只需要json数据。

当然，单页应用也不是完美无瑕的，他也具有以下问题：

由于历史原因，单页应用对SEO支持不是太好，需要对SEO做特殊处理。

首次加载量过大，首屏加载慢，所以首屏需要做特殊处理。

本身入门门槛就高，加之view编码需要释放资源，以免heap值过高，对编码人员的要求较高。

孰优孰劣非是小钗可以论断，求稳，webapp不比传统网站；求SEO，webapp需要其它解决方案；说垃圾收集，webapp需要自己释放资源。

说体验，webapp需要考虑首屏加载；说动画，webapp要考虑低端手机，所以webapp还有很长一段路需要走！

现在的webapp效果不可媲美native app，总有一天，当webapp不再制约于网络、设备，那么webapp的春天不会远。

虽说如此，现阶段webapp也会有许多优化心得、奇技淫巧可以拿出来说说的，这里小钗做一次分享，希望可以对webapp的同学有所帮助。

---