关闭

WEB前端_搜索引擎工作原理与SEO优化

时间: 2019-07-14阅读: 622标签: 优化

一、搜索引擎工作原理

搜索引擎的工作分为三个阶段,即爬行,索引和检索

1、爬行 

搜索引擎具有网络爬虫或蜘蛛来执行爬网,每次抓取工具访问网页时,它都会复制该网页并将其网址添加到索引中。

在“蜘蛛”抓取网页内容,提炼关键词的这个过程中,就存在一个问题:“蜘蛛”能否看懂。如果网站内容是 flash 和 js,那么它是看不懂的。相应的,如果网站内容是它的语言,那么它便能看懂,它的语言即 seo

2、索引 

此阶段,爬网程序会创建搜索引擎的索引。索引就像一本巨大的书,其中包含爬虫找到的每个网页的副本。如果任何网页发生更改,则抓取工具会使用新内容更新图书

3、检索  

这是搜索引擎以特定顺序提供最有用和最相关答案的最后阶段

 

二、seo 简介

全称:Search English Optimization,搜索引擎优化,即为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化。

1、SEO 的分类

  • 白帽 SEO:起到了改良和规范网站设计的作用,使网站对搜索引擎和用户更加友好,并从搜索引擎中获取合理的流量
  • 黑帽 SEO:利用和放大搜索引擎政策缺陷来获取更多用户的访问量

2、白帽 SEO 的使用

(1)对网站的标题、关键字、描述精心设置,反映网站的定位,让搜索引擎明白网站是做什么的;

(2)网站内容优化:内容与关键字的对应,增加关键字的密度;

(3)在网站上合理设置 Robot.txt 文件;

(4)生成针对搜索引擎友好的网站地图;

(5)增加外部链接,到各个网站上宣传;


三、前端 SEO 优化

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

1、网站结构布局优化

(1)控制首页链接数量

对于中小型企业网站,建议首页链接在100个以内,链接的性质可以包含页面导航、底部导航、锚文字链接等

(2)扁平化的目录层次

尽量让“蜘蛛”只跳转3次,就能到达网站内的任何一个内页

(3)导航优化

导航应该尽量采用文字方式,也可以搭配图片导航,但<img>标签务必添加“alt”和“title”属性,告诉搜索引擎导航的定位

<img src="" alt="" title="">

其次,在每一个网页上应该加上面包屑导航。

对用户而言,可以让用户了解当前所处的位置,形成更好的位置感,并方便用户操作;

对蜘蛛而言,能够清楚的了解网站结构,同时还增加了大量的内部链接,方便抓取,降低跳出率。

(4)结构布局的规范优化

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

  b、页面主体:左边面包屑导航及正文;右边放热门文章及相关文章,既增强了页面相关性,也增强页面的权重

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

注意:分页导航推荐写法:“1 2 3 4 5 6 7 8 9 10 下拉框/输入框”,这样“蜘蛛”能够根据相应页码直接跳转,下拉框直接选择页面跳转

(5)控制页面的大小

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


2、网页代码优化

(1)<title>

标题,强调重点即可,尽量做到每个页面的 <title> 标题内容不重复

<title></title>

(2)<meta keywords>

关键词,列举出几个页面的重要关键字即可

<meta name="Keywords" content="">

(3)<meta description>

网页描述,高度概括网页内容的关键词,每个页面也要有所不同

<meta name="Description" content="">

(4)标签语义化

比如:h1-h6是用于标题类的,<nav>标签是用来设置页面主导航的等

(5)<a>标签:

页内链接,要加“title” 属性加以说明,让访客和 “蜘蛛” 知道;

外部链接,链接到其他网站的,则需要加上 el="nofollow" 属性,避免“蜘蛛”爬了外部链接之后,就不回了

(6)正文标题要用 <h1> 标签:

“蜘蛛” 认为它最重要,若不喜欢<h1>的默认样式可以通过css设置

(7)<br>

只用于文本内容的换行

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

(8)<caption>

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

(9)<img> 应使用 “alt” 属性加以说明

(10)<strong> 和 <em> : 需要强调时使用

<strong>标签在搜索引擎中能突出关键词

<em>标签强调效果仅次于 <strong>

而 <b>、<i>标签: 只是用于显示效果时使用,在 SEO 中不起效果

(11)避免使用 &nbsp; 和 &copy;

空格符 &nbsp; 应用 css 进行设置

版权符 &copy; 可以直接使用输入法打“©”

(12)少用 iframe 框架,因为“蜘蛛”一般不会读取其中的内容

(13)少用 display: none;

对于不想显示的文字内容,应当设置 z-index 或设置到浏览器显示器之外。因为搜索引擎会过滤掉 display:none 中的内容


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/4719

关闭

关于ES6尾调用优化

ES6包含了一个性能领域的特殊要求。这与一个涉及函数调用的特定优化形式相关:即尾调用优化(Tail Call Optimization,TCO)。简单地说,尾调用就是一个出现在另一个函数“结尾”处的函数调用

运用meta标签进行网站优化

Set-Cookie(cookie设定)说明:如果网页过期,存盘的cookie将会被删除(必须是GMT的时间格式); Window-target(显示窗口的设定)说明:强制页面在当前窗口以独立页面显示----用来防止别人在框架里面调用你的页面

编写高质量可维护的代码之优化逻辑判断

if else、switch case 是日常开发中最常见的条件判断语句,这种看似简单的语句,当遇到复杂的业务场景时,如果处理不善,就会出现大量的逻辑嵌套,可读性差并且难以扩展。

提升网站页面速度的14条最佳实践

《高性能网站建设指南》一书共列举了14条提升网站速度的方法。减少http请求;使用内容发布网络;添加Expires头;压缩组件;将样式表放在顶部

Proxy-Go v7.4 发布,内网穿透针对 HTTP 优化!

Proxy是golang实现的高性能http,https,websocket,tcp,udp,socks5代理服务器,支持正向代理、反向代理、透明代理、内网穿透、TCP/UDP端口映射、SSH中转

优化Vue.js 单页应用速度

我有一个项目用了 Vue.js 来构建单页应用程序。随着上线日期的临近,性能优化的工作变得越来越重要。在本文中,我收集了有关在加载时间和渲染性能方面提高 Vue.js 应用性能的所有知识。

css代码优化

css代码优化作用与意义:减少占用网页字节;便于维护;让自己写的css代码更加专业。css优化方法:缩写css代码;排列css代码;同属性提取共用css选择器

JS性能优化之文档片段createDocumentFragment

DocumentFragments是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。在DOM树中,文档片段被其所有的子元素所代替。因为文档片段存在于内存中,并不在DOM树中

Web前端性能优化

web性能优化,主要分为前端和后台两个部分性能优化,后台性能优化决定了web能不能用,前端优化决定了其好不好用,也就是牵涉到前端用户体验和web易用性等情况,所以前端性能与用户体验是有着极大的关联的。

react性能优化之bind(this)

bind在react组件中使用不当也会影响性能,bind在render里面直接onClick = this.onClick.bind(this),这样写的话,render每次都会执行这段

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!