前端代码SEO规范，别让网站优化输在起跑线上
发布时间：2023-08-13 点击：119
前端是构建网站中很重要的一个环节，前端的工作主要是负责页面的html+css+js，优化好这几个方面会为seo工作打好一个坚实的基础。通过网站的结构布局设计和网页代码优化，使前端页面既能让浏览器用户能够看懂（提升用户体验），也能让“蜘蛛”看懂（提高搜索引擎友好度）。
前端seo注意事项：
1、网站结构布局优化：尽量简单、开门见山，提倡扁平化结构
一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。一般中小型网站目录结构超过三级，“蜘蛛”便不愿意往下爬了。并且根据相关数据调查：如果访客经过跳转3次还没找到需要的信息，很可能离开。因此，三层目录结构也是体验的需要。为此我们需要做到：
（1）控制首页链接数量
网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。
（2）扁平化的目录层次
尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。
（3）导航优化
导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。
其次，在每一个网页上应该加上面包屑导航，好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。
（4）网站的结构布局---不可忽略的细节
页面头部：logo及主导航，以及用户的信息。
页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关 性，也能增强页面的权重。
页面底部：版权信息和友情链接。
特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。
（5）利用布局，把重要内容html代码放在最前
搜索引擎抓取html内容是从上到下，利用这一特点，可以让主要代码优先读取，广告等不重要代码放在下边。例如，在左栏和右栏的代码不变的情况下，只需改一下样式，利用float:left;和float:right;就可以随意让两栏在展现上位置互换，这样就可以保证重要代码在最前，让爬 虫最先抓取。同样也适用于多栏的情况。
（6）控制页面的大小，减少http请求，提高网站的加载速度。
一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。
2、网页代码优化
（1）突出重要内容---合理的设计title、description和keywords
***title***标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的title标题中不要设置相同的内容。
***meta keywords***标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。
***meta description***标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
（2）语义化书写html代码，符合w3c标准
尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6 是用于标题类的，***nav***标签是用来设置页面主导航，列表形式的代码使用ul或ol，重要的文字使用strong等。
（3）***a***标签：页内链接，要加 ***title***属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 el=nofollow 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。
<a href=https://www.360.cn title=360安全中心 class=logo></a>
（4）正文标题要用***h1***标签：h1标签自带权重“蜘蛛” 认为它最重要，一个页面有且最多只能有一个h1标签，放在该页面最重要的标题上面，如首页的logo上可以加h1标签。副标题用***h2***标签, 而其它地方不应该随便乱用 h 标题标签。
（5）***img***应使用 alt 属性加以说明
<img src=cat.jpg width=300 height=200 alt=猫 />
当网络速度很慢，或者图片地址失效的时候，就可以体现出alt属性的作用，他可以让用户在图片没有显示的时候知道这个图片的作用。同时为图片设置高度和宽度，可提高页面的加载速度。
（6）表格应该使用***caption***表格标题标签
caption 元素定义表格标题。 caption 标签必须紧随 table 标签之后，您只能对每个表格定义一
<table border='1'>
<caption>表格标题</caption>
<tbody>
<tr>
<td>apple</td>
<td>100</td>
</tr>
<tr>
<td>banana</td>
<td>200</td>
</tr>
</tbody>
</table>
（7）***br***标签：只用于文本内容的换行，比如：
<p>
第一行文字内容<br/>
第二行文字内容<br/>
第三行文字内容
</p>
（8）strong、***em***标签 ：需要强调时使用。***strong***标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，***em***标签强调效果仅次于***strong***标签；b、***i***标签：只是用于显示效果时使用，在seo中不会起任何效果。
（9）文本缩进不要使用特殊符号 应当使用css进行设置。版权符号不要使用特殊符号 © 可以直接使用输入法打出版权符号©。
（10）重要内容不要用js输出，因为“蜘蛛”不会读取js里的内容，所以重要内容必须放在html里。
（11）尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容。
（12）谨慎使用 display：none ：对于不想显示的文字内容，应当设置z-index或缩进设置成足够大的负数偏离出浏览器之外。因为搜索引擎会过滤掉display:none其中的内容。
3、前端网站性能优化
（1）减少http请求数量
在浏览器与服务器进行通信时，主要是通过 http 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 http 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 http 的请求数量可以很大程度上对网站性能进行优化。
css sprites
国内俗称css精灵，这是将多张图片合并成一张图片达到减少http请求的一种解决方案，可以通过css的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。
合并css和js文件
现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 http 请求数量，可以通过这些工具再发布前将多个css或者多个js合并成一个文件。
采用lazyload
俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
（2）控制资源文件加载优先级
浏览器在加载html内容时，是将html内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将css提前加载，不要受 js 加载影响。
一般情况下都是css在头部，js在底部。
（3）尽量外链css和js（结构、表现和行为的分离），保证网页代码的整洁，也有利于日后维护
<link rel=stylesheet href=asstes/css/style.css />
<script src=assets/js/main.js></script>
（4）利用浏览器缓存
浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。
（5）减少重排（reflow）
基本原理：重排是dom的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 dom 树上的所有其它结点的visibility属性，这也是reflow低效的原因。如果reflow的过于频繁，cpu使用率就会急剧上升。
减少reflow，如果需要在dom操作时添加样式，尽量使用 增加class属性，而不是通过style操作样式。
（6）减少 dom 操作
（7）图标使用iconfont替换
（8）不使用css表达式，会影响效率
（9）使用cdn网络缓存，加快用户访问速度，减轻服务器压力
（10）启用gzip压缩，浏览速度变快，搜索引擎的蜘蛛抓取信息量也会增大
（11）伪静态设置
如果是动态网页，可以开启伪静态功能，让蜘蛛“误以为”这是静态网页，因为静态网页比较合蜘蛛的胃口，如果url中带有关键词效果更好。
想要制作网站了解一下,网站建设过程什么最重要？应该注意什么事项？
二手域名怎样优化 怎样提高域名出售几率
什么是ip域名解析，域名和IP地址的关系是什么？
网站制作所需基本条件及网站制作的报价
便宜域名值得购买吗？一个好的又便宜域名交易平台都有哪些特点？
ssl证书都有哪些家，你用的是哪一个？
name.com域名注册流程是什么？name.com是哪国的域名注册商？
地方cn域名好不好，都有哪些优点？
前端seo注意事项：
1、网站结构布局优化：尽量简单、开门见山，提倡扁平化结构
一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。一般中小型网站目录结构超过三级，“蜘蛛”便不愿意往下爬了。并且根据相关数据调查：如果访客经过跳转3次还没找到需要的信息，很可能离开。因此，三层目录结构也是体验的需要。为此我们需要做到：
（1）控制首页链接数量
网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。
（2）扁平化的目录层次
尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。
（3）导航优化
导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。
其次，在每一个网页上应该加上面包屑导航，好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。
（4）网站的结构布局---不可忽略的细节
页面头部：logo及主导航，以及用户的信息。
页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关 性，也能增强页面的权重。
页面底部：版权信息和友情链接。
特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。
（5）利用布局，把重要内容html代码放在最前
搜索引擎抓取html内容是从上到下，利用这一特点，可以让主要代码优先读取，广告等不重要代码放在下边。例如，在左栏和右栏的代码不变的情况下，只需改一下样式，利用float:left;和float:right;就可以随意让两栏在展现上位置互换，这样就可以保证重要代码在最前，让爬 虫最先抓取。同样也适用于多栏的情况。
（6）控制页面的大小，减少http请求，提高网站的加载速度。
一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。
2、网页代码优化
（1）突出重要内容---合理的设计title、description和keywords
***title***标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的title标题中不要设置相同的内容。
***meta keywords***标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。
***meta description***标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
（2）语义化书写html代码，符合w3c标准
尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6 是用于标题类的，***nav***标签是用来设置页面主导航，列表形式的代码使用ul或ol，重要的文字使用strong等。
（3）***a***标签：页内链接，要加 ***title***属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 el=nofollow 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。
<a href=https://www.360.cn title=360安全中心 class=logo></a>
（4）正文标题要用***h1***标签：h1标签自带权重“蜘蛛” 认为它最重要，一个页面有且最多只能有一个h1标签，放在该页面最重要的标题上面，如首页的logo上可以加h1标签。副标题用***h2***标签, 而其它地方不应该随便乱用 h 标题标签。
（5）***img***应使用 alt 属性加以说明
<img src=cat.jpg width=300 height=200 alt=猫 />
当网络速度很慢，或者图片地址失效的时候，就可以体现出alt属性的作用，他可以让用户在图片没有显示的时候知道这个图片的作用。同时为图片设置高度和宽度，可提高页面的加载速度。
（6）表格应该使用***caption***表格标题标签
caption 元素定义表格标题。 caption 标签必须紧随 table 标签之后，您只能对每个表格定义一
<table border='1'>
<caption>表格标题</caption>
<tbody>
<tr>
<td>apple</td>
<td>100</td>
</tr>
<tr>
<td>banana</td>
<td>200</td>
</tr>
</tbody>
</table>
（7）***br***标签：只用于文本内容的换行，比如：
<p>
第一行文字内容<br/>
第二行文字内容<br/>
第三行文字内容
</p>
（8）strong、***em***标签 ：需要强调时使用。***strong***标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，***em***标签强调效果仅次于***strong***标签；b、***i***标签：只是用于显示效果时使用，在seo中不会起任何效果。
（9）文本缩进不要使用特殊符号 应当使用css进行设置。版权符号不要使用特殊符号 © 可以直接使用输入法打出版权符号©。
（10）重要内容不要用js输出，因为“蜘蛛”不会读取js里的内容，所以重要内容必须放在html里。
（11）尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容。
（12）谨慎使用 display：none ：对于不想显示的文字内容，应当设置z-index或缩进设置成足够大的负数偏离出浏览器之外。因为搜索引擎会过滤掉display:none其中的内容。
3、前端网站性能优化
（1）减少http请求数量
在浏览器与服务器进行通信时，主要是通过 http 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 http 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 http 的请求数量可以很大程度上对网站性能进行优化。
css sprites
国内俗称css精灵，这是将多张图片合并成一张图片达到减少http请求的一种解决方案，可以通过css的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。
合并css和js文件
现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 http 请求数量，可以通过这些工具再发布前将多个css或者多个js合并成一个文件。
采用lazyload
俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
（2）控制资源文件加载优先级
浏览器在加载html内容时，是将html内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将css提前加载，不要受 js 加载影响。
一般情况下都是css在头部，js在底部。
（3）尽量外链css和js（结构、表现和行为的分离），保证网页代码的整洁，也有利于日后维护
<link rel=stylesheet href=asstes/css/style.css />
<script src=assets/js/main.js></script>
（4）利用浏览器缓存
浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。
（5）减少重排（reflow）
基本原理：重排是dom的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 dom 树上的所有其它结点的visibility属性，这也是reflow低效的原因。如果reflow的过于频繁，cpu使用率就会急剧上升。
减少reflow，如果需要在dom操作时添加样式，尽量使用 增加class属性，而不是通过style操作样式。
（6）减少 dom 操作
（7）图标使用iconfont替换
（8）不使用css表达式，会影响效率
（9）使用cdn网络缓存，加快用户访问速度，减轻服务器压力
（10）启用gzip压缩，浏览速度变快，搜索引擎的蜘蛛抓取信息量也会增大
（11）伪静态设置
如果是动态网页，可以开启伪静态功能，让蜘蛛“误以为”这是静态网页，因为静态网页比较合蜘蛛的胃口，如果url中带有关键词效果更好。
想要制作网站了解一下,网站建设过程什么最重要？应该注意什么事项？
二手域名怎样优化 怎样提高域名出售几率
什么是ip域名解析，域名和IP地址的关系是什么？
网站制作所需基本条件及网站制作的报价
便宜域名值得购买吗？一个好的又便宜域名交易平台都有哪些特点？
ssl证书都有哪些家，你用的是哪一个？
name.com域名注册流程是什么？name.com是哪国的域名注册商？
地方cn域名好不好，都有哪些优点？