• 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%,这种优化增量是十分显著的。

  • 相关阅读:
    Clojure实现的简单短网址服务(Compojure、Ring、Korma库演示样例)
    android4.4系统解决“ERRORcouldn't find native method”方法
    JS window.open()属性
    网页视频播放器代码大全 + 21个为您的站点和博客提供的免费视频播放器
    理解Java的GC日志
    图像识别技术
    堆排序原理及算法实现(最大堆)
    什么是依赖注入
    Cocos2d-x3.1下实现相似iOS页面滑动指示圆点
    [Bootstrap] 6. Navigation
  • 原文地址:https://www.cnblogs.com/68xi/p/11582751.html
Copyright © 2020-2023  润新知