前端SEO技巧
SEO优化 网络
  前几天在慕课网上学习了“SEO在网页制作中的应用”,觉得挺好、挺有用的,今天,特此做了一个小小的笔记,也算是对学习过后的一个总结。一、搜索引擎工作原理  当我们在输入框中输入关键词,点击搜索或查询时,然后得到结果。深究其背后的故事,搜索引擎做了很多事情。  在搜索引擎网站,比如百度,在其后台有一个非常庞大的数据库,里面存储了海量的关键词,而每个关键词又对应着很多网址,这…

   前几天在慕课网上学习了“SEO在网页制作中的应用”,觉得挺好、挺有用的,今天,特此做了一个小小的笔记,也算是对学习过后的一个总结。

一、搜索引擎工作原理

  当我们在输入框中输入关键词,点击搜索或查询时,然后得到结果。深究其背后的故事,搜索引擎做了很多事情。

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

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

 

二、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.导航优化

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

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

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

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

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

  页面底部:版权信息和友情链接。

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

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

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

  (2)网页代码优化

  1.标题:只强调重点即可,尽量把重要的关键词放在前面,关键词不要重复出现,尽量做到每个页面的<<span lang="EN-US">title>标题中不要设置相同的内容。</span></span></span></span></span></span></p> <p><span style="font-size: 14px;"><span style="font-family: 'Microsoft YaHei';" lang="EN-US"><span lang="EN-US"><span lang="EN-US"><span lang="EN-US"><span lang="EN-US">  </span></span></span></span></span></span><span style="font-family: 'Microsoft YaHei';" lang="EN-US"><span lang="EN-US"><span lang="EN-US"><span lang="EN-US"><span lang="EN-US"><span style="font-family: 'Microsoft YaHei';">2.</span></span></span></span></span></span><span style="font-family: 'Microsoft YaHei';" lang="EN-US"><meta keywords>标签:关键词,列举出几个页面的重要关键字即可,切记过分堆砌。</span></p> <p> </p> <p><span style="font-family: 'Microsoft YaHei';" lang="EN-US">  3.<meta description>标签:网页描述,需要高度概括网页内容,切记不能太长,过分堆砌关键词,每个页面也要有所不同。</span></p> <p> </p> <p><span style="font-family: 'Microsoft YaHei';" lang="EN-US">  4.<body>中的标签:尽量让代码语义化,在适当的位置使用适当的标签,用正确的标签做正确的事。让阅读源码者和<span lang="EN-US">“蜘蛛<span lang="EN-US">”都一目了然。比如:<span lang="EN-US">h1-h6 是用于标题类的,<nav>标签是用来设置页面主导航的等。</span></span></span></span></p> <p> </p> <p><span style="font-family: 'Microsoft YaHei';" lang="EN-US">  5.<a>标签:页内链接,要加 “<span lang="EN-US">title” 属性加以说明,让访客和 “蜘蛛” 知道。而外部链接,链接到其他网站的,则需要加上 <span lang="EN-US">el="nofollow" 属性, 告诉 <span lang="EN-US">“蜘蛛<span lang="EN-US">” 不要爬,因为一旦“蜘蛛”爬了外部链接之后,就不会再回来了。</span></span></span></span></span></p> <p> </p> <p><span style="font-family: 'Microsoft YaHei';" lang="EN-US">  6.正文标题要用<span lang="EN-US"><h1>标签:<span lang="EN-US">“蜘蛛<span lang="EN-US">” 认为它最重要,若不喜欢<h1>的默认样式可以通过<span lang="EN-US">CSS设置。尽量做到正文标题用<h1>标签,副标题用<<span lang="EN-US">h2>标签, 而其它地方不应该随便乱用 h 标题<span lang="EN-US">标签。</span></span></span></span></span></span></span></p> <p> </p> <p><span style="font-family: 'Microsoft YaHei';" lang="EN-US">  7.<span lang="EN-US"><br>标签:只用于文本内容的换行,比如:</span></span></p> <p class="cnblogs_code"> <pre><span style="font-family: 'Microsoft YaHei';"><p><br />   第一行文字内容<br/><span style="color: #000000;"> 第二行文字内容</span><br/><span style="color: #000000;"> 第三行文字内容 </span></p></span></pre> </p> <p><span style="font-family: 'Microsoft YaHei';" lang="EN-US">  8.表格应该使用<span lang="EN-US"><caption>表格标题<span lang="EN-US">标签</span></span></span></p> <p><span style="font-family: 'Microsoft YaHei';"><span lang="EN-US">    9.<img>应使用 "<span lang="EN-US">alt" 属性加以说明</span></span></span></p> <p><span style="font-family: 'Microsoft YaHei';"><span lang="EN-US"><span lang="EN-US">  </span></span><span lang="EN-US">10.<strong>、<em>标签 : 需要强调时使用。<<span lang="EN-US">strong>标签在搜索引擎中能够得到高度的重视,它能突出关键词,表现重要的内容,<<span lang="EN-US">em>标签强调效果仅次于<<span lang="EN-US">strong>标签。</span></span></span></span></span></p> <p><span style="font-family: 'Microsoft YaHei';" lang="EN-US"><span lang="EN-US"><span lang="EN-US"><span lang="EN-US">    <span lang="EN-US"> <b>、<i>标签: 只是用于显示效果时使用,在<span lang="EN-US">SEO中不会起任何效果。</span></span></span></span></span></span></p> <p><span style="font-family: 'Microsoft YaHei';" lang="EN-US"><span lang="EN-US"><span lang="EN-US"><span lang="EN-US"><span lang="EN-US"><span lang="EN-US">  10、文本缩进不要使用特殊符号   应当使用CSS进行设置。版权符号不要使用特殊符号 © 可以直接使用输入法,拼“banquan”,选择序号5就能打出版权符号©。</span></span></span></span></span></span></p> <p><span style="font-family: 'Microsoft YaHei';" lang="EN-US">  12、巧妙利用CSS<span lang="EN-US">布局,将重要内容的<span lang="EN-US">HTML代码放在最前面,最前面的内容被认为是最重要的,优先让“蜘蛛”读取,进行内容关键词抓取。</span></span></span></p> <p><span style="font-family: 'Microsoft YaHei';" lang="EN-US">  13.重要内容不要用<span lang="EN-US">JS输出,因为“蜘蛛”不认识</span></span></p> <p><span style="font-family: 'Microsoft YaHei';" lang="EN-US">  14.尽量少使用<span lang="EN-US">iframe框架<span lang="EN-US">,因为“蜘蛛”一般不会读取其中的内容</span></span></span></p> <p><span style="font-family: 'Microsoft YaHei';" lang="EN-US">  15.谨慎使用 <span lang="EN-US">display:<span lang="EN-US">none :对于不想显示的文字内容,应当设置<span lang="EN-US">z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉<span lang="EN-US">display:none其中的内容。</span></span></span></span></span></p> <p><span style="font-family: 'Microsoft YaHei';" lang="EN-US">  16. 不断精简代码</span></p> <p><span style="font-family: 'Microsoft YaHei';" lang="EN-US">  17.js代码如果是操作<span lang="EN-US">DOM操作,应尽量放在<span lang="EN-US">body结束标签之前,<span lang="EN-US">html代码之后。</span></span></span></span></p></div> <div class="cl mt-20"> <span class="fl">上一篇:<a href="/view/914.html" title="我眼中的SEO——略读一些SEO书后">我眼中的SEO——略读一些SEO书后</a></span> <span class="fr">下一篇:<a href="javascript:void(0);" title="没有了">没有了</a></span> </div> <div class="cl"></div> </div> <div class="fr w350"> <div class="row mt-20"> <div class="block w350"> <div class="title cl"> <span class="fl"><i class="fa fa-square color-bule mr-10"></i>最近更新</span> </div> <ul> <li><a href="/view/915.html" title="前端SEO技巧">前端SEO技巧<span class="time">2019-08-24</span></a></li> <li><a href="/view/914.html" title="我眼中的SEO——略读一些SEO书后">我眼中的SEO——略读一些SEO书…<span class="time">2019-08-24</span></a></li> <li><a href="/view/913.html" title="TortoiseSVN提交数据失败(提示 svn:MKACTIVITY ... 403 Forbidden )">TortoiseSVN提交数据失败…<span class="time">2019-08-24</span></a></li> <li><a href="/view/912.html" title="win2003 64位系统下ODBC连接使用">win2003 64位系统下ODB…<span class="time">2019-08-24</span></a></li> <li><a href="/view/911.html" title="解决x64位 IIS 无法连接Access数据库的问题">解决x64位 IIS 无法连接Ac…<span class="time">2019-08-24</span></a></li> <li><a href="/view/908.html" title="程序员时间翻译作弊手册 —— 为什么程序员不擅长估算时间">程序员时间翻译作弊手册 —— 为什…<span class="time">2019-08-24</span></a></li> <li><a href="/view/910.html" title="Windows7下找不到输入音频设备的解决方法">Windows7下找不到输入音频设…<span class="time">2019-08-24</span></a></li> <li><a href="/view/909.html" title="谈谈对于企业级系统架构的理解">谈谈对于企业级系统架构的理解<span class="time">2019-08-24</span></a></li> <li><a href="/view/907.html" title="任正非语录:企业发展就是要发展一批狼">任正非语录:企业发展就是要发展一批…<span class="time">2019-08-24</span></a></li> <li><a href="/view/905.html" title="去年一个百万级的小软件项目经验分享,20来个功能模块,项目不太好做有些棘手">去年一个百万级的小软件项目经验分享…<span class="time">2019-08-24</span></a></li> </ul> </div> </div> <div class="row mt-20"> <div class="block w350"> <div class="title cl"> <span class="fl"><i class="fa fa-square color-bule mr-10"></i>热门推荐</span> </div> <ul> <li><a href="/view/520.html" title="php提示Fatal error: Call to undefined function imagecreate()">php提示Fatal error:…<span class="time">2019-08-24</span></a></li> <li><a href="/view/663.html" title="win7下的PHP+IIS配置,找不到php5isapi.dll的问题,版本5.4.9">win7下的PHP+IIS配置,找…<span class="time">2019-08-24</span></a></li> <li><a href="/view/778.html" title="IIS 之 在IIS7、IIS7.5中应用程序池最优配置方案">IIS 之 在IIS7、IIS7.…<span class="time">2019-08-24</span></a></li> <li><a href="/view/480.html" title="thinkPHP 模板中的语法知识 详细介绍(十二)">thinkPHP 模板中的语法知识…<span class="time">2019-08-24</span></a></li> <li><a href="/view/360.html" title="Android菜鸟的成长笔记(15)—— Android中的状态保存探究(下)">Android菜鸟的成长笔记(15…<span class="time">2019-08-01</span></a></li> <li><a href="/view/891.html" title="我的创业之路——宁可啃馒头打地铺,也要当老板">我的创业之路——宁可啃馒头打地铺,…<span class="time">2019-08-24</span></a></li> <li><a href="/view/814.html" title="IIS7安装场景对照表">IIS7安装场景对照表<span class="time">2019-08-24</span></a></li> <li><a href="/view/430.html" title="减少HTTP请求之合并图片详解(大型网站优化技术)">减少HTTP请求之合并图片详解(大…<span class="time">2019-08-24</span></a></li> <li><a href="/view/563.html" title="使用 CodeIgniter 框架快速开发 PHP 应用(六)">使用 CodeIgniter 框架…<span class="time">2019-08-24</span></a></li> <li><a href="/view/613.html" title="php中soap应用">php中soap应用<span class="time">2019-08-24</span></a></li> </ul> </div> </div> <!-- <div class="row mt-20"> <div class="block w350"> <div class="title cl"> <span class="fl"><i class="fa fa-square color-bule mr-10"></i>大家都在看</span> </div> <div class="h250 bg-pink color-white t-center flex-center">广告一</div> </div> </div> --> </div> <div class="cl"></div> </div> <div class="cl"></div> <div class="footer cl mt-20"> <div class="w1200 center content"> <div class="qrcode t-center"> <img src="/static/common/qrcode.png" width="180" height="180"/> <p class="mt-15">商务合作</p> </div> <div class="info t-left"> <p>本站部分数据来源于互联网,如有侵犯您的合法权益,请及时告知我们处理。</p> <p> <strong>ICP备案号:</strong> <a href="http://www.beian.miit.gov.cn" target="_blank" rel="nofollow">渝ICP备19011051号-1</a>   <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=50023002020168" target="_blank" rel="nofollow">渝公网安备 50023002020168号</a> </p> <p><strong>网站建站:</strong><a href="http://www.kuvinet.cn" title="重庆库维网络科技有限公司" target="_blank">重庆库维网络科技有限公司</a></p> <p>copyright © 2019 - 2020 <a href="http://www.viblog.com" title="vi博客">www.viblog.com</a> <a href="http://www.kuvinet.cn" title="重庆库维网络科技有限公司" target="_blank">重庆库维网络科技有限公司</a> <span><script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? "https://" : "http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1277958986'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "v1.cnzz.com/z_stat.php%3Fid%3D1277958986%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script></span></p> </div> </div> </div> <script type="text/javascript" src="http://push.zhanzhang.baidu.com/push.js"></script> <script type="text/javascript" src="/static/js/jquery-1.11.3.min.js"></script> </body> </html>