会同网站排名是怎么来的？一个前端工程师眼中的网站优化

一、网站排名那些事儿
当我们在搜索框里输入“会同网站建设”，按下回车，然后看到一堆结果。仔细想想，这个事情挺有意思的。
在搜索引擎的后台，比如谷歌或者百度，都有一个特别大的数据库，里面存了数不清的关键词，每个关键词后面又跟着一串网址，这些网址都是搜索引擎的程序从网上一点一点抓回来的，这些程序也叫“网络爬虫”或者“蜘蛛”。这些不知疲倦的“小蜘蛛”一天到晚在网上爬，从这个链接跳到那个链接，把看到的东西下载下来，分析一下，把有用的关键词挑出来。如果“蜘蛛”觉得这个关键词数据库里没有，而且对用户有用，它就存起来。反过来，要是“蜘蛛”觉得这是垃圾信息或者早就有了，它就扔了不要，接着往前爬，找那些新的、有用的信息存起来等着用户来搜。等到你搜索的时候，它就能把和关键词对得上的那些网址找出来给你看。
一个关键词能对上好几个甚至好几十个网址，那谁先谁后就成了问题，所以就有了排名，自然，和关键词对得最准的那个网址就排在最前面了。在“蜘蛛”抓取网页、分析内容、提炼关键词这个过程里，就有一个问题：它能不能看懂你的网站。如果你的网站里全是些动画特效或者很复杂的脚本，那它就有点懵，看不懂，就算你网站内容做得再贴切也没啥用。反过来，要是你的网站用的是它熟悉的语言，它就能看明白，这个它熟悉的语言，就是我们要聊的SEO。

二、SEO到底是个啥
全称：Search English Optimization，搜索引擎优化。差不多从有搜索引擎那天起，SEO就跟着出来了。
它为啥存在呢？就是为了让咱们精心弄好的网站，能在搜索引擎的自然搜索结果里多出现几次，位置能尽量靠前。简单说，就是希望百度、谷歌它们能多收录咱们优化过的网站，等别人来搜的时候，咱们的网站能出现在前头。
分类的话，主要就两种：白帽SEO和黑帽SEO。白帽SEO，是帮着改进和规范网站设计的，让网站对搜索引擎和对用户都更友好，网站也能从搜索引擎那儿得到该有的流量，这是搜索引擎公司自己也赞成和支持的做法。黑帽SEO就不一样了，它专门钻搜索引擎规则的漏洞，想法儿骗来更多访问量，这种做法大部分时候是在糊弄搜索引擎，一般它们是不支持也不鼓励的。今天我们只聊白帽SEO，那白帽SEO主要能做些什么呢？

1. 好好设置网站的标题、关键字和描述，把网站是干嘛的说清楚，让搜索引擎一眼就能看明白这网站是做什么的；


2. 优化网站内容：让内容跟你的关键字对上号，适当增加关键字的密度；


3. 在网站上放个合理的Robot.txt文件，告诉“蜘蛛”哪些能爬，哪些不能爬；


4. 做个给搜索引擎看的网站地图；


5. 多弄点外部链接，去别的网站上宣传宣传自己的站；

三、从网站前端看优化
就是通过设计好网站的布局结构和优化网页的代码，让做出来的网页不仅咱自己看着明白，也能让“蜘蛛”看得懂。
(1)网站结构布局得往简单了整，最好是一目了然，推荐用扁平化的结构。
一般来说，网站的结构层级越少，“蜘蛛”越容易抓取，也就越容易被它收录。一般中小型网站的目录要是超过三层，“蜘蛛”可能就不太乐意往下爬了，“万一太复杂找不着路了怎么办”。而且有调查说：用户要是跳转超过3次还没找到想要的信息，多半就关掉走人了。所以，三层以内的目录结构也是考虑用户体验。具体来说，我们需要做到：

1. 控制好首页上的链接数量

网站首页的权重是最高的，要是首页上的链接太少，没有“路”，“蜘蛛”就没法接着爬到内页去，这会直接影响网站被收录的数量。但是首页链接也不能太多，一旦链接泛滥，没有几个真正有价值的，就容易影响用户，也会把首页的权重给稀释掉，对收录反而不利。
所以对咱们大多数中小企业的网站来说，建议首页的链接控制在一百个以内，链接的形式可以包括页面顶部的导航、底部的导航、文字锚点链接这些，关键是要建立在让用户感觉舒服、并且能顺利引导用户找到信息的基础上。

1. 目录层次尽量扁平化，争取让“蜘蛛”跳转不超过3次，就能到网站的任何一个内页。比如一个扁平化的结构可以是这样的：“会同信息”--> “会同新闻” --> “2025年会同最新动态”，这样三步就能找到想看的内容了。


2. 导航得好好优化

导航尽量用文字，想用图片做导航也行，但图片代码一定要优化好，必须加上“alt”和“title”这些属性，告诉搜索引擎这导航是干嘛的，这样就算图片没显示出来，用户也能看到说明文字，明白这是啥。
另外，每个网页上都应该加上“面包屑导航”，好处是：对用户来说，能清楚知道自己现在在网站的哪个位置，以及这个页面在整个网站里处于什么位置，帮助用户快速理解网站的布局，心里更有谱，同时也提供了返回各个上级页面的入口，用起来方便；对“蜘蛛”来说，它能更清楚地了解整个网站的结构，同时这也等于增加了不少内部链接，方便它抓取，也降低了跳出率。

1. 网站的结构布局--这些细节可不能忽略

页面的头部：一般是网站的logo和主导航栏，还有用户的登录信息啥的。
页面的主体部分：左边放正文，包括“面包屑导航”和文章内容；右边可以放一些热门文章或者相关内容推荐，好处是能留住访客，让访客在页面上多待会儿。对“蜘蛛”来说，这些推荐文章属于相关链接，能增强页面之间的关联性，也能给页面增加点权重。
页面的底部：通常是版权信息和一些友情链接。
这里有个要特别注意的地方：分页导航的写法，比较推荐的写法是：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能根据页码数字直接跳转到对应页面，用下拉框也能直接选页跳转。下面这种写法就不推荐了：“首页 下一页 尾页”，特别是当总页数特别多的时候，“蜘蛛”得一直点“下一页”才能爬完，会很累，容易半途而废。

1. 控制好页面文件的大小，减少http的请求次数，让网站加载速度快起来。

一个页面最好别超过100k，太大了，页面加载就慢。速度一慢，用户体验就不好，留不住人，而且万一超时了，“蜘蛛”也会扭头就走。

(2)网页代码也得优化

1. 标题：把重点说清楚就行，重要的关键词尽量往前放，关键词别重复出现，尽量做到每个页面的标题都各有侧重。


2. 标签：关键词标签，列出几个页面最核心的关键词就好，千万不能为了凑数堆砌一堆。


3. 标签：就是网页描述，需要用精炼的话概括网页内容，千万别写太长，也别在里面硬塞关键词，每个页面的描述也最好不一样。


4. 页面里的其他标签：尽量让代码有语义，在合适的地方用合适的标签，用对的标签做对的事。让看源码的人和“蜘蛛”都一眼就明白。比如：h1到h6这些标题标签，是专门给标题类内容用的。


5. 超链接标签：网站内部的链接，要加上“title”属性说明一下，让用户和“蜘蛛”都知道这个链接指向什么。如果是链接到别的网站的外部链接，就得加上 rel=“nofollow” 属性，告诉“蜘蛛”这个链接不用爬了，因为它一旦爬出去，很可能就不回来了。


6. 正文的大标题要用h1标签：“蜘蛛”觉得这个最重要，如果你不喜欢h1默认的样式，完全可以用CSS来重新设计。尽量做到正文标题用h1，副标题用h2，其他地方别随便滥用这些标题标签。


7. 换行标签：只用在文本内容需要换行的地方。


8. 表格要用专门的表格标题标签。


9. 图片一定要用“alt”属性来添加说明文字。


10. 加粗、强调标签：需要特别强调的地方再用。加粗标签在搜索引擎眼里分量很重，它能突出关键词，表现出重要的内容，强调标签的强调效果排在加粗标签后面。

10、文本想缩进别用空格或者特殊符号 应该用CSS样式来控制。版权符号也别用特殊符号 可以直接用输入法，打个“banquan”，选序号5就能出来©。
12、要巧妙地利用CSS来布局，把重要内容的HTML代码放在最靠前的位置，因为最前面的内容会被认为是最重要的，优先让“蜘蛛”读取，方便它抓取内容里的关键词。

1. 重要的内容别用JS来输出显示，因为“蜘蛛”不认识JS弄出来的东西。


2. 尽量少用iframe框架，因为“蜘蛛”一般不会去读里面的内容。


3. 谨慎使用 display：none：对于那些你不想显示的文字内容，可以考虑用z-index调整层级或者把它挪到浏览器显示区域外面。因为搜索引擎会直接过滤掉用display:none藏起来的内容。


4. 代码要不断精简，越简单越好。


5. 如果是操作网页元素的js代码，尽量放在正文结束标签前面，html代码的后面。