新闻中心
HTML代码优化建议
发布日期：2021-12-29 点击次数：27
HTML代码优化建议
一、 目的
1. Html代码增加对搜索引擎的友好性，利于SEO优化；
2. 搜索引擎爬虫抓取网页html源代码，下载存档（即快照）后分析源代码，先去噪提取文本做分析，依据文本分析建立关键词与网页倒排索引，所以友好性html包含2个方面，一是网页源代码体量小便于爬虫抓取存档、便于提升网页打开速度，二是网页源代码简洁利于搜索引擎去噪做文本分析。
二、 现在html代码存在问题
1. 存在问题：首页html代码大小超过125KB，百度快照未完全覆盖整个首页内容，建议优化简化html代码；
http://cache.baiducontent.com/c?m=LBMEGWQtfMGoSQq8GNU1XzLGj-RAo-Ap2sDG6bknFdRJLkJToE1XizqN_YvRnjDjG-4PRR4TyEv-t7853mYlG6-RqmA29tRFOJY2N5eVAwVp9btb2gRTKBng70lQAjEK&p=c47dd116d9c111a05bed9e31174a8c&newp=9967c35485cc43f918bd9b7d0d1c8e231610db2151d4d61f6b82c825d7331b001c3bbfb423291101d4ce77630ba94c5eedf53379330923a3dda5c91d9fb4c57479de67&s=cfcd208495d565ef&user=baidu&fm=sc&query=http%3A//www%2Edehsm%2Ecom/&qid=f6955437001b5611&p1=1
2. 代码臃肿不简洁，需要优化；
3. 隐藏代码，需要优化；
例如首页793行代码
三、 搜索引擎友好性网页html代码建议：
1. Html代码建议：
1) 搜索引擎爬虫抓爬的网页html必须与用户看到同网页的html代码一致，禁止服务器判断User-agent推送不同的网页html代码；
2) Html5文档类型，UTF-8编码；所有的代码都应是小写的，包括元素名称、属性，属性值（除非text或CDATA的内容）、选择器、css属性、属性值（字符串除外）；
3) 自适应网页不加X-UA-Compatible meta标签，此meta标签会导致搜索引擎爬虫误判为PC页；
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> |
4) 自适应网页head区添加applicable-device meta标签，此meta标签告诉搜索引擎本页面即是PC页也是M页，这非常重要；
<meta name="applicable-device" content="pc,mobile"> |
5) 建议自适应网页head区的viewport标签中width不设置具体值，width=device-width，如果width设定具体值不利于搜索引擎判断页面PC/M的属性；
<meta name=“viewport” content=“width=device-width, initial-scale=1.0″> |
6) Head区设置Canonical标签规范URL，防止动态网址导致页面重复，也集中搜索排名权重值到主URL上：
<link rel=”canonical” href=“当前页面URL” /> 例如： <link rel=”canonical” href=“http://www.dehsm.com/” />
呼吸防护 http://www.dehsm.com/category-50.html <link rel=”canonical” href=“http://www.dehsm.com/category-50.html” /> |
7) H5响应式网页禁止使用一些通用的PC类别HTML代码标签，如embed(经常用于嵌入多媒体)、object(用于嵌入对象)、marquee(老旧的滚动特效实现代码)、iframe(非常不利于SEO，典型的PC常用标签) 等这些典型的用于PC或者老旧的、HTML5已经有更高效替代方案的旧标签，意味着使用它们将增加页面的PC属性，干扰搜索引擎的判断识别；
8) 减少DIV+CSS不必要的嵌套，重要文本内容与A链接的DOM层级建议不超过3层；
9) 一个网页中仅有一个H1标签，H1标签尽量包含本页面重要的文本内容，一般资讯标题、产品标题等网页重要的概况性的文本内容使用H1标签，次要文本内容可使用h2、h3、strong等标签；
10) 锚文本A链接不建议设置title增加代码量，图片链接中图片要设置alt或者A链接设置title便于搜索引擎知道本链接是什么，若URL逻辑明确则建议A链接href使用相对路径减少代码量，示例：
<a hrehf=”相对路径” target=”_blank” title=”中英文品牌名称”><img src=“brand.png” alt=“中英文品牌名称” /></a> |
11) 重要图片可设置图片alt，利于搜索引擎了解图片上的内容，增加图片排名机会，非重要图片不建议设置alt增加代码量，示例
<img src=“logo.png” width=“100” height=“100” alt=“网站品牌的LOGO” /> |
12) 精简HTML代码，删除冗余的html代码，去掉不必要的注释、空格换行、空标签等，减少html代码量，减少html体积，提升网页访问速度，这非常重要；
a) 示例一：
前： <div id="mainNav"> <a class="all" href="allcate.html">全部商品分类</a> </div> 压缩建议：使用块级定位设置CSS， css/style.css样式： #mainNav a { font-size: 15px; font-weight: bold; font-family: "微软雅黑"; color: #FFF; padding-left: 20px; } 精简后： <div id="mainNav"> <a href="allcate.html">全部商品分类</a> </div> |
b) 示例二：
前：
<li> <div></div> <div> <a class="over_2" href="http://www.dehsm.com/category-50.html">呼吸防护用品</a> </div> <div> <b> | <a class="over_3" href="http://www.dehsm.com/category-110.html">防尘口罩</a> </b> <b> | <a class="over_3" href="http://www.dehsm.com/category-220.html">医用口罩</a> </b> <b> | <a class="over_3" href="http://www.dehsm.com/category-109.html">防毒面具</a> </b> </div> <div></div> </li> 压缩建议：使用块级定位设置CSS，li中定义clearboth，f_r中定义加粗； 精简后： <li> <div><a href="category-50.html">呼吸防护用品</a></div> <div> | <a href=" category-110.html">防尘口罩</a> | <a href=" category-220.html">医用口罩</a> | <a href=" category-109.html">防毒面具</a> </div> </li> |
c) 示例三：
前： <script type="text/javascript"> obj_h4 = document.getElementById("cate").getElementsByTagName("dt") obj_ul = document.getElementById("cate").getElementsByTagName("ul") obj_img = document.getElementById("cate").getElementsByTagName("img") function tab(id) { if(obj_ul.item(id).style.display == "block") { obj_ul.item(id).style.display = "none" obj_img.item(id).src = "themes/dhgd/images/btn_fold.gif" return false; } else(obj_ul.item(id).style.display == "none") { obj_ul.item(id).style.display = "block" obj_img.item(id).src = "themes/dhgd/images/btn_unfold.gif" } } </script> 压缩建议：JS外部调用， 精简后： <head> ……… <script type="text/javascript" src="themes/dhgd/js/left_goodslist.js"></script> ……… </head> |
d) 示例四：
前：
<div> <div><img src="themes/dhgd/images/tel_top.png" width="33" height="26">021-57882100<div>( 工作时间 8:30-17:30 )</div></div> </div> 压缩建议：精简不必要的嵌套，整合toptel与tel的CSS样式，只保留一个box，并在img css中设置宽与高，在.toptel span中设置class=”ti”的样式； 精简后： <div> <img src="themes/dhgd/images/tel_top.png" >021-57882100<span>( 工作时间 8:30-17:30 )</span> </div>
|
13) 网页html代码尽量控制在2000行内，大小控制在125KB内，这对SEO非常重要；
14) 网页html中建议多用文字文本，便于搜索引擎理解网页内容，重要内容禁止使用JS\AJAX\图片，搜索引擎读取图片、JS、ajax困难；
15) 不设置隐藏文本或者A链接，轮播或滑显等可显示的隐藏层除外；
16) 网页首屏访问加载时间控制在1s内；
17) 减少外网调用DNS解析，外网调用会增加延迟，增加网页访问速度；
18) 每个页面的<title>标题</title>必须不能重复，每个页面的description也不能重复；<meta name="description" content="网页简述">；
19) 手机落地页的字体大小及文本间距的选择，不可明显过大过小，需适合手机用户阅读。页面主体内容的字号应不小于10pt，字体与行高的比率应大于1.4。
2. Js代码友好性建议：
1) 所有JS都外部调用，异步、底部加载JS；
2) 精简压缩JS，减少JS文件体积；
3) 使用临时变量或者数组存储，document.images及document.forms等集合数据；
4) 慎用with语法，避免eval及Function语法、避免使用inlineScript，搜索引擎解析爬虫对此解析困难；
5) 可使用AJAX缓存，减少DOM查询，对DOM查询做缓存；
6) 不要在希望搜索引擎可读的地方使用Ajax技术，比如标题、导航、内容等等；
7) 字符串连接使用数组的join方式；
8) 不建议使用带有PC特征的javascript，例如加载swfobject、含有activexobject语句(移动页面根本不会使用如此重的多媒体引用方案)、含有netscape（网景）、msie（IE）、firefox(火狐)、browser.msie(IE)这些典型的非移动端浏览器兼容代码；
3. CSS代码建议：
1) 确保CSS对主流浏览器 360浏览器、Chrome、Safari、QQ浏览器、UC浏览器、Microsoft Edge、手机百度、安卓浏览器等的有良好的兼容性，确保网页在主流浏览器显示效果统一；
浏览器市场份额数据：https://tongji.baidu.com/research/site#browser
2) 分别率参考：PC端第一分别率1920*1080，手机端第一分辨率360*640
分别率数据：https://tongji.baidu.com/research/site#screen
3) 建议文档结构与CSS样式分离，网页外部调用CSS样式，CSS置于顶部head区、合理使用CSS选择符，例：
<link rel="stylesheet" href="css/style.css" type="text/css" /> |
4) 建议页面文档与CSS样式都采用结构化的书写，逻辑清晰易于阅读，例：
页面文档： <div id=”Menu”> css/style.css样式： |
5) 避免使用@import，避免使用内嵌式CSS，避免使用行内CSS，避免使用CSS表达式(expression)、避免通配符选择器；
6) 清理无用样式，减少CSS文件体积；
7) 合并及精简CSS，减少CSS文件体积，例：同一属性根据它的属性值也可以进行简写；
.search { 同一属性可以简写为： |
不同类有相同属性及属性值的缩写，例：
#mainMenu { |
8) CSS命名建议参考（不是强制要求）
头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search、 友情链接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 注册：regsiter 状态：status 投票：vote 合作伙伴：partner |
9) 建议使用Media Query技术加载与设备屏幕相对应的CSS文件，
发表评论：