网站代码优化--手机站6的代码优化

   制作出用*户体验良好的手*机页*面只是万事俱备,最为关键的临门一脚是获得搜索*引擎的青睐,这样才能得到精准的用*户,很多网站拥有PC和移*动两套页*面,从经验上看,精准、高效地被搜索*引擎识别不但促进移*动页*面的排名和流*量获取,对PC页*面也有额外的效果加成。

  在经历了一轮轮移*动H5项目,看过很多移*动页*面识别和优化的国外文章,更重要的是多次和百度相关人对话和解决问题后,将一些常见的HTML识别细节总结了两部分,用于促进移*动页*面被搜索*引擎识别、收录,让更多优质流*量更早、更多地分发到自己页*面。本文由长春鑫通桥架http://www.ccxtqj.com推荐分享。

  一、head标签中的部分

  1.URL设计

  URL尽量含有通用已成趋势的移*动命名,例如“m./wap./3g./mobi./mobile./mob/wml/”,可以在子域*名等方面体现

  2.页*面顶部的doctype标签

  作为协议的重要部分,doctype中是否移*动化也很重要,检查是否存在与移*动相关的声明,如这些关键*词,openmobilealliance, xhtml-mobile, xhtml-basic,wapforum,dtd compact html

  例:“<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN””http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>”

  3.meta标签中的viewport属性和x-ua-compatible 属性

  viewport,移*动前端开发中最重要的标签,响应式设计的根基,如果你的页*面是遵守响应式设计的,那么说明这些页*面对移*动设备有友好的输出。

  典型的的viewport代*码是这样的,<meta name=“viewport” content=“width=device-width, initial-scale=1.0″>,判断移*动与否的关键属性值为width,如果width=device-width这是典型的移*动友好的设计,增加判定为移*动页*面的砝码,如果width有具体值,且值大于典型的移*动屏幕(应该小于600),那么该页*面被判定为PC页*面的几率大大增加。

  但,META中还有一个很独特的属性作为SEO人员应该很少接触到,那就是x-ua-compatible 属性,该属性是PC意味非常强烈的功能性代*码。示例代*码如此,<meta http-equiv=”X-UA-Compatible” content=”IE=9; IE=8; IE=7; IE=EDGE” />,从百度工*程师处得知,该代*码会有较强暗示当前页*面为PC页*面的功能,需选择性使用。

  4.title中的移*动暗示

  制作移*动页*面时,在title标签中写明:“移*动版”、“手*机版”、“WAP版”、“触屏版”不仅是照顾用*户体验的方案,也利于页*面的移*动识别,反之PC页*面要谨慎使用这些文案。

  5.链*接link标签的media和href属性中需要注意的细节(多为样式文*件)

  media属性值为screen时,表示屏幕中的显示样式,link的href所填写的URL(基本为样式文*件的URL)就比较重要了,一定程度加大不同设备的偏重。此时URL中尽量出现/wap,/mobile/这样的命名,同URL设计一样,用于提高页*面识别为移*动的效率和概率。

  如URL中含有pc字样则加大识别为PC页*面的几率。

  6.一些通用的PC类识别HTML代*码

  embed:经常用于嵌入多媒体

  object:用于嵌入对象

  marquee:老旧的滚动特效实现代*码

  iframe:想必网站优化人员很熟悉了,典型的PC常用标签

  这些典型的用于PC或者老旧的、HTML5已经有更高效替代方案的旧标签,意味着使用它们将增加页*面的PC属性,需要有目的地取舍。

  7.一些javascript中典型的PC特征

  加载swfobject、含有activexobject语句:移*动页*面根本不会使用如此重的多媒体引用方案(不信你问问你的前端工*程师)

  含有netscape(网景)、msie(IE)、firefox(火狐)、browser.msie(IE)这些典型的非移*动端浏览器兼容代*码的

  设置了timer的 ,以及JS代*码含有settimeout,的(此处不知道为什么设置timer还有识别的问题)

  均大幅增加识别为PC页*面的可能性

  以上这些<head></head>中出现的内容,

  二、正文body中需要注意的部分

  链*接和文本遵照的原则基本与head中一样——多出现移*动相关的字眼;页*面设置的宽度不要超过常规移*动设备的大小;那些常识中(除非招错前端工*程师)绝对只用于PC的一些兼容性代*码。

  此外div块的个数也值得注意,没有哪家移*动页*面会过量使用div块;还有典型的只用于适配PC机*器的HTML代*码,例如:accesskey(如果移*动页*面用,要不前端招错人了,要不产*品招错人了,应该引起警觉)head和正文两大部分,基本涵盖了一张页*面最主要的部分。

  网站优化人员一定要把握这些使用细节,协助前端工*程师从正反方向将公*司的PC和手*机页*面泾渭分明地呈现给搜索*引擎。试想如果你每日被抓取页*面达到90%的识别率,而一般水平是70%,这种优化增量是非常显著的。

  最后,分享一个机*器学习的思想给网站优化的新人,此文中心思想截取如下:

  你从市场上的芒果里随机的抽取一定的样品(训练数据), 制作一张表格, 上面记着每个芒果的物理属性, 比如颜色, 大小, 形状, 产*地, 卖*家, 等等。(这些称之为特征)。

  还记录下这个芒果甜不甜, 是否多汁,是否成熟(输出变量)。你将这些数据提*供给一个机*器学习算法(分类算法/回归算法),然后它就会学习出一个关于芒果的物理属性和它的质量之间关系的模型。

  下次你再去市集, 只要测测那些芒果的特性(测试数据),然后将它输入一个机*器学习算法。算法将根据之前计算出的模型来预测芒果是甜的,熟的, 并且/还是多汁的。

  结合本文中的内容、再结合你已经烂熟于心的搜索*引擎工*作原理,设想一下,你的所有页*面都是芒果,百度是带有识别模型(且该模型会自己训练、纠正自己)的芒果鉴别器,怎么让你的芒果持续性地、每次被拿起来都进入那个又大、又甜、又多汁的篮子?那些一眼就看出来的大甜芒果当然好判断,那些一眼看不出来的呢?我们能不能多生产些一眼就看出来好坏的芒果呢?这样整个果园是不是好收割一点?


转载于:https://my.oschina.net/u/2449762/blog/505688

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值