前端SEO

时间 2019-12-01

标签前端 seo 栏目网站开发繁體版

原文原文链接

1、搜索引擎工做原理

当咱们在输入框中输入关键词，点击搜索或查询时，而后获得结果。深究其背后的故事，搜索引擎作了不少事情。html

　　在搜索引擎网站，好比百度，在其后台有一个很是庞大的数据库，里面存储了海量的关键词，而每一个关键词又对应着不少网址，这些网址是百度程序从茫茫的互联网上一点一点下载收集而来的，这些程序称之为“搜索引擎蜘蛛”或“网络爬虫”。这些勤劳的“蜘蛛”天天在互联网上爬行，从一个连接到另外一个连接，下载其中的内容，进行分析提炼，找到其中的关键词，若是“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入数据库。反之，若是“蜘蛛”认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键字相关的网址显示给访客。前端

　　一个关键词对用多个网址，所以就出现了排序的问题，相应的当与关键词最吻合的网址就会排在前面了。在“蜘蛛”抓取网页内容，提炼关键词的这个过程当中，就存在一个问题：“蜘蛛”可否看懂。若是网站内容是flash和js，那么它是看不懂的，会犯迷糊，即便关键字再贴切也没用。相应的，若是网站内容是它的语言，那么它便能看懂，它的语言即SEO。数据库

2、SEO简介

全称：Search English Optimization，搜索引擎优化。自从有了搜索引擎，SEO便诞生了。浏览器

　　存在的意义：为了提高网页在搜索引擎天然搜索结果中的收录数量以及排序位置而作的优化行为。简言之，就是但愿百度等搜索引擎能多多咱们收录精心制做后的网站，而且在别人访问时网站能排在前面。网络

　　分类：白帽SEO和黑帽SEO。白帽SEO，起到了改良和规范网站设计的做用，使网站对搜索引擎和用户更加友好，而且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。黑帽SEO，利用和放大搜索引擎政策缺陷来获取更多用户的访问量，这类行为大可能是欺骗搜索引擎，通常搜索引擎公司是不支持与鼓励的。本文针对白帽SEO，那么白帽SEO能作什么呢？框架

　　1. 对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是作什么的；布局

　　2. 网站内容优化：内容与关键字的对应，增长关键字的密度；优化

　　3. 在网站上合理设置Robot.txt文件；网站

　　4. 生成针对搜索引擎友好的网站地图；搜索引擎

　　5. 增长外部连接，到各个网站上宣传；

三、前端SEO

　　经过网站的结构布局设计和网页代码优化，使前端页面既能让浏览器用户可以看懂，也能让“蜘蛛”看懂。

　　(1)网站结构布局优化：尽可能简单、开门见山，提倡扁平化结构。

　　通常而言，创建的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。通常中小型网站目录结构超过三级，“蜘蛛”便不肯意往下爬，“万一天黑迷路了怎么办”。而且根据相关调查：访客若是通过跳转3次还没找到须要的信息，极可能离开。所以，三层目录结构也是体验的须要。为此咱们须要作到：

　　1. 控制首页连接数量

　　网站首页是权重最高的地方，若是首页连接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。可是首页连接也不能太多，一旦太多，没有实质性的连接，很容易影响用户体验，也会下降网站首页的权重，收录效果也很差。

　　所以对于中小型企业网站，建议首页连接在100个之内，连接的性质能够包含页面导航、底部导航、锚文字连接等等，注意连接要创建在用户的良好体验和引导用户获取信息的基础之上。

　　2.扁平化的目录层次，尽可能让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。扁平化的目录结构，好比：“植物”--> "水果" --> "苹果"、“桔子”、“香蕉”，经过3级就能找到香蕉了。

　　3.导航优化

　　导航应该尽可能采用文字方式，也能够搭配图片导航，可是图片代码必定要进行优化，<img>标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，作到即便图片未能正常显示时，用户也能看到提示文字。

　　其次，在每个网页上应该加上面包屑导航，好处：从用户体验方面来讲，可让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而造成更好的位置感，同时提供了返回各个页面的接口，方便用户操做；对“蜘蛛”而言，可以清楚的了解网站结构，同时还增长了大量的内部连接，方便抓取，下降跳出率。

　　4. 网站的结构布局--不可忽略的细节

　　页面头部：logo及主导航，以及用户的信息。

　　页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关连接，加强了页面相关性，也能加强页面的权重。

　　页面底部：版权信息和友情连接。

　　特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”可以根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页下一页尾页”，特别是当分页数量特别多时，“蜘蛛”须要通过不少次往下爬，才能抓取，会很累、会容易放弃。

　　5.控制页面的大小，减小http请求，提升网站的加载速度。

　　一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验很差，留不住访客，而且一旦超时，“蜘蛛”也会离开。

　　(2)网页代码优化

　　1.<title>标题：只强调重点便可，尽可能把重要的关键词放在前面，关键词不要重复出现，尽可能作到每一个页面的<title>标题中不要设置相同的内容。

　　2.<meta keywords>标签：关键词，列举出几个页面的重要关键字便可，切记过度堆砌。

　　3.<meta description>标签：网页描述，须要高度归纳网页内容，切记不能太长，过度堆砌关键词，每一个页面也要有所不一样。

　　4.<body>中的标签：尽可能让代码语义化，在适当的位置使用适当的标签，用正确的标签作正确的事。让阅读源码者和“蜘蛛”都一目了然。好比：h1-h6 是用于标题类的，<nav>标签是用来设置页面主导航的等。

　　5.<a>标签：页内连接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部连接，连接到其余网站的，则须要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬，由于一旦“蜘蛛”爬了外部连接以后，就不会再回来了。

　　6.正文标题要用<h1>标签：“蜘蛛” 认为它最重要，若不喜欢<h1>的默认样式能够经过CSS设置。尽可能作到正文标题用<h1>标签，副标题用<h2>标签, 而其它地方不该该随便乱用 h 标题标签。

　　7.<br>标签：只用于文本内容的换行，好比:

<p>
　　 第一行文字内容<br/>
    第二行文字内容<br/>
    第三行文字内容
</p>

　　8.表格应该使用<caption>表格标题标签

　 9.<img>应使用 "alt" 属性加以说明

　　10.<strong>、<em>标签 : 须要强调时使用。<strong>标签在搜索引擎中可以获得高度的重视，它能突出关键词，表现重要的内容，<em>标签强调效果仅次于<strong>标签。

　　　 <b>、<i>标签: 只是用于显示效果时使用，在SEO中不会起任何效果。

　　十二、巧妙利用CSS布局，将重要内容的HTML代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。

　　13.重要内容不要用JS输出，由于“蜘蛛”不认识

　　14.尽可能少使用iframe框架,由于“蜘蛛”通常不会读取其中的内容

　　15.谨慎使用 display：none ：对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器以外。由于搜索引擎会过滤掉display:none其中的内容。

　　16. 不断精简代码

　　17.js代码若是是操做DOM操做，应尽可能放在body结束标签以前，html代码以后。