discuz网站前端代码优化思路

    一、head标签中的局部

  1.URL设计
  URL尽量含有通用已成趋向的移动命名,例如“m./wap./3g./mobi./mobile./mob/wml/”,能够在子域名等方面表现

  2.页面顶部的doctype标签
  作为协议的重要局部,doctype中能否移动化也很重要,检查能否存在与移动相关的声明,如这些关键词,openmobilealliance, xhtml-mobile, xhtml-basic,wapforum,dtd compact html

  3.meta标签中的viewport属性和x-ua-compatible 属性
  viewport,移动前端开发中最重要的标签,响应式设计的根基,假如你的页面是恪守响应式设计的,那么阐明这些页面对移动设备有友好的输出。
  典型的的viewport代码是这样的,,判别移动与否的关键属性值为width,假如width=device-width这是典型的移动友好的设计,增加断定为移动页面的砝码,假如width有详细值,且值大于典型的移动屏幕(应该小于600),那么该页面被断定为PC页面的几率大大增加。
  但,META中还有一个很共同的属性作为SEO人员应该很少接触到,那就是x-ua-compatible 属性,该属性是PC意味十分激烈的功用性代码。示例代码如此,,从百度工程师处得知,该代码会有较强暗示当前页面为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页面的可能性
  以上这些中呈现的内容,

  二、正文body中需求留意的局部

  链接和文本遵照的准绳根本与head中一样——多呈现移动相关的字眼;页面设置的宽度不要超越常规移动设备的大小;那些常识中(除非招错前端工程师)绝对只用于PC的一些兼容性代码。
  此外div块的个数也值得留意,没有哪家移动页面会过量运用div块;还有典型的只用于适配PC机器的HTML代码,例如:accesskey(假如移动页面用,要不前端招错人了,要不产品招错人了,应该惹起警惕)head和正文两大局部,根本涵盖了一张页面最主要的局部。
  网站优化人员一定要把握这些运用细节,辅佐前端工程师从正反方向将公司的PC和手机页面泾渭清楚地呈现给搜索引擎。试想假如你每日被抓取页面到达90%的辨认率,而普通程度是70%,这种优化增量是十分显著的。

原文地址:https://www.cnblogs.com/68xi/p/11582751.html