一、搜索引擎工作原理

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

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

　　一个关键词对用多个网址，因此就出现了排序的问题，相应的当与关键词最吻合的网址就会排在前面了。在“蜘蛛”抓取网页内容，提炼关键词的这个过程中，就存在一个问题：“蜘蛛”能否看懂。如果网站内容是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.导航优化

　　导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，<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中不会起任何效果。

　　10、文本缩进不要使用特殊符号 &nbsp; 应当使用CSS进行设置。版权符号不要使用特殊符号 &copy; 可以直接使用输入法，拼“banquan”，选择序号5就能打出版权符号©。

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

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

　　14.尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容

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

　　16. 不断精简代码

　　17.js代码如果是操作DOM操作，应尽量放在body结束标签之前，html代码之后。

前端SEO的更多相关文章

  1. 前端SEO技巧

    前几天在慕课网上学习了“SEO在网页制作中的应用”,觉得挺好.挺有用的,今天,特此做了一个小小的笔记,也算是对学习过后的一个总结. 一.搜索引擎工作原理 当我们在输入框中输入关键词,点击搜索或查询时, ...

  2. 前端-SEO

    SEO是 search Engine Optimization   (搜索引擎优化) SEO: ①白帽SEO(普通SEO做的优化) 网站标题.关键字.描述 网站内容优化 Robot.txt文件 网站地 ...

  3. 前端SEO优化

    结构优化 1.扁平化结构,目录层次越少越好

  4. 前端SEO与爬虫与SSR(Server Side Render)

    讲真,之前没考虑过这个问题.因为项目原因,自己用python的一些工具,爬取了淘宝.京东.百度等的一些图片和图片名称之类的信息.以为爬虫只是解析html文本,然后提取关键字,保存自己想要的信息即可,或 ...

  5. 前端seo小结,网页代码优化

    seo的目的:提高网站流量 search engine optimization 搜索引擎优化seo search engine marketing 搜索引擎营销sem 权重10个等级 等级越大,权重 ...

  6. 关于前端SEO的一些常用知识总结

    Search English Optimization,搜索引擎优化,简称为SEO. (1)网站结构布局优化:尽量简单 1. 控制首页链接数量:首页链接不能太多,一旦太多,没有实质性的链接,很容易影响 ...

  7. 前端seo基础规范

    基本规范 TDK代码规范 A: 关键词,一般3~4个最好,要与当前页面内容相关(根据实际情况,不适宜过多堆积关键词): B: 杜绝不同URL的页面标题重复现象,作为搜索结果摘要的重要选择目标之一,一定 ...

  8. WEB前端-搜索引擎工作原理与SEO优化

    一.搜索引擎工作原理 搜索引擎的工作分为三个阶段,即爬行,索引和检索 1.爬行  搜索引擎具有网络爬虫或蜘蛛来执行爬网,每次抓取工具访问网页时,它都会复制该网页并将其网址添加到索引中. 在“蜘蛛”抓取 ...

  9. 前端要了解的seo

    一.搜索引擎工作原理 当我们在输入框中输入关键词,点击搜索或查询时,然后得到结果.深究其背后的故事,搜索引擎做了很多事情. 在搜索引擎网站,比如百度,在其后台有一个非常庞大的数据库,里面存储了海量的关 ...

随机推荐

  1. CentOS 7 - 安装Oracle JDK8

    我们要在CentOS安装最新版本的JDK8,需要首先将JDK下载到服务器,然后通过操作系统自带的工具yum进行安装. 本文我们将介绍CentOS 7下JDK8的安装. 从官网下载页面找到JDK8的下载 ...

  2. 基于tkinter的九型人格测试系统介绍

    基于tkinter的九型人格测试系统介绍 一.程序代码地址,GitHub 二.程序介绍 1.login.py 登录界面: 注册界面: 2.mainWindow.py 登录成功之后的界面: 3.doTe ...

  3. Windows安装python3.x后，pip list警告！DEPRECATION: The default format will switch to columns in the future.

    前言(凑字数专用) 这个警告虽然不影响你的正常使用,但是每次都好几行红色警告,总是给人一种怪怪的感觉(当然不是FBI的警告了……),所以咱们还是把他解决掉~ 网上好多解决办法都是Ubuntu的解决办法 ...

  4. VNC黑屏解决办法

    在Linux里安装配置完VNC服务端,发现多用户登陆会出现黑屏的情况,具体的现象为:客户端可以通过IP与会话号登陆进入系统,但登陆进去是漆黑一片,除了一个叉形的鼠标以外,伸手不见五指. 原因:用户的V ...

  5. git小乌龟工具TortoiseGit记住你的账号密码

    在使用TortoiseGit的过程中,发下每次push或者pull都要重复输入账号密码,非常麻烦 怎么设置记住密码 在[系统盘]:\Users[你的用户名](比如C:\User\Administrat ...

  6. Cesium Vue开发环境搭建

    最近被问到如何在 vuejs 中集成 cesium,首先想到的官网应该有教程.官网有专门讲 Cesium and Webpack(有坑),按照官网的说明,动手建了一个Demo,在这记录下踩坑过程. 一 ...

  7. NIO基础之同步、异步、阻塞、非阻塞

    这里区分几个概念,也是常见但是容易混淆的概念,就是标题中的同步.异步.阻塞.非阻塞. 一.同步与异步 同步与异步,关心的是消息通信的机制.也就是调用者和被调用者之间,消息是如何进行通知的.如果是调用者 ...

  8. docker OCI runtime

    Open Container Initiative(OCI)目前有2个标准:runtime-spec以及image-spec.前者规定了如何运行解压过的filesystem bundle.OCI规定了 ...

  9. 通过DataTrigger绑定Tag属性值进行判断(.net 3.5的环境)

    如下,在UserControl中通过Tag传递不同的值,然后在Style中使用DataTrigger进行判断, <UserControl Style="{DynamicResource ...

  10. MySQL中临时表的基本创建与使用教程（create temporary table ）

    当工作在非常大的表上时,你可能偶尔需要运行很多查询获得一个大量数据的小的子集,不是对整个表运行这些查询,而是让MySQL每次找出所需的少数记录,将记录选择到一个临时表可能更快些,然后在这些表运行查询. ...