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

更新日期: 2019-07-14阅读: 2.1k标签: 优化

一、搜索引擎工作原理

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

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 中的内容


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

js中for循环优化总结_如何提高程序的执行效率

在程序开发中,经常会使用到for循环的,但是很多人写的for循环效率都是比较低的,下面就举例说明,并总结优化for循环的方法,来提高我们程序的执行效率。

网站打开速度优化_如何提高网页访问速度技巧方法总结

网站的加载速度不仅影响着用户体验,也会影响搜索引擎的排名,在百度推出“闪电算法”以来,将网站首屏打开速度被列入优化排名行列,作为前端开发的我们需要如果来优化网站的打开速度呢?下面就整理挖掘出很多细节上可以提升性能的东西分享给大家

JS性能优化之文档片段createDocumentFragment

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

深入浅出代码优化﹣if/else

对于代码裡面的 if else,我们可以使用逻辑判断式,或更好的三元判断式来优化代码。除了可以降低维护项目的成本之外,还可以提升代码可读性。就让我们从最简单的 if else 例子开始吧。

微信小程序性能优化入门指南

小程序从发布到现在也已经有将近两年的时间,越来越来多的公司开始重视小程序生态带来的流量,今年也由于小程序平台对外能力的越来越多的开放以及小程序平台的自身优化,越来越多的开发者也自主的投入到小程序的开发当中

网络串流播放_HTML5如何优化视频文件以便在网络上更快地串流播放

无论你正在将 GIF 动图转换为 MP4 视频,还是手头已经有一大堆 MP4 视频,你都可以优化文件结构,以使得这些视频更快地加载和播放。通过重组 atoms 将 moov 放到文件开头,浏览器可以避免发送额外的 HTTP range request 请求来搜寻和定位 moovatom

​web项目优化_Web 服务器性能与站点访问性能优化

要优化 Web 服务器的性能,我们先来看看 Web 服务器在 web 页面处理上的步骤:Web 浏览器向一个特定的服务器发出 Web 页面请求; Web 服务器接收到 web 页面请求后,寻找所请求的 web 页面,并将所请求的 Web 页面传送给 Web 浏览器; 显示出来

前端性能优化之重排和重绘

浏览器下载完页面所有的资源后,就要开始构建DOM树,于此同时还会构建渲染树(Render Tree)。(其实在构建渲染树之前,和DOM树同期会构建Style Tree。DOM树与Style Tree合并为渲染树)

微信小程序代码优化总汇

写篇文章的目的,是以开放小程序代码的层面的优化。包括:条件判断将wx:if换成了hidden 、页面跳转请销毁之前使用的资源、列表的局部更新、小程序中多张图片懒加载方案、Input状态下隐藏input,应预留出键盘收起的时间

我是如何将页面加载时间从6S降到2S的?

生活在信息爆炸的今天,我们每天不得不面对和过滤海量的信息--无疑是焦躁和浮动的,这就意味着用户对你站点投入的时间可能是及其吝啬的(当然有一些刚需站点除外)。如何给用户提供迅速的响应就显得十分重要了

点击更多...

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