写在前面

这是好久之前的工作了，之前还没用vue spa 做项目的时候，都是用的原生js写项目，纯html,css,js写项目，真的是每个页面引用css,js各种文件写到头痛，
那个时候做一个大型网站，基本都是各种ui框架，bootstrap,layui,amazy-ui,mui,weui,jqueryweui,zui,各种框架各种组合，
代码也是混乱不堪，项目体积大，对爬虫不是特别友好，后来项目上线的时候，公司要求做seo，就开始了漫长的项目规范，优化代码过程。
在这过程中也总结了好多经验，再次记录下来，方便以后学习更新使用。

ONE，首先介绍下seo

全称：Search English Optimization，搜索引擎优化。自从有了搜索引擎，SEO便诞生了。
存在的意义：为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。简言之，就是希望百度等搜索引擎能多多我们收录精心制作后的网站，并且在别人访问时网站能排在前面。

TWO，搜索引擎工作原理

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

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

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

THREE, 前端SEO

一，网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。

通过网站的结构布局设计和网页代码优化，使前端页面既能让浏览器用户能够看懂，也能让“蜘蛛”看懂。 >>一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。一般中小型网站目录结构超过三级，“蜘蛛”便不愿意往下爬，“万一天黑迷路了怎么办”。并且根据相关调查：访客如果经过跳转3次还没找到需要的信息，很可能离开。因此，三层目录结构也是体验的需要。为此我们需要做到：

1,控制首页链接数量

a . ,网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。
b . ,因此对于中小型企业网站，建议首页链接在100个以内，链接的性质可以包含页面导航、底部导航、锚文字链接等等，注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。

2,扁平化的目录层次

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

3,导航优化

导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。
其次，在每一个网页上应该加上面包屑导航，好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。

4,网站的结构布局–不可忽略的细节

a,页面头部：logo及主导航，以及用户的信息。
b,页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。
c,页面底部：版权信息和友情链接。
d,特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页下一页尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。

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

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

二，网页代码优化(参考，后期还会更新，还是不太全面)

1,

只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的

2,标签：

关键词，列举出几个页面的重要关键字即可，切记过分堆砌。

3,标签：

网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。

4,中的标签：

尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6 是用于标题类的，

标签是用来设置页面主导航的等。

5 ,标签:

页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 el=“nofollow” 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了

6,正文标题要用

     似乎只要提到性能优化，就会说到减少http请求，那么就说说如何减少http请求：：1，能使用icon不适用图片，实在避免不了要使用图片，就使用雪碧图，2，对图片进行压缩（一般网站的图片在200k到500k之间）尽量小于200k,3，图片转base644, 使用静态资源缓存5, 添加Expires头a,页面的初次访问者会进行很多HTTP请求，但是通过使用一个长久的Expires头，可以使这些组件被缓存，下次访问的时候，就可以减少不必要的HTPP请求，从而提高加载速度。写法：Cache-Control： max-age=123456006，压缩css,js,html7, 精简代码8，多使用外部文件，公共的js,css9, 图片懒加载，资源按需加载，可以减少大量的的请求

二，使用cdn加速

三，样式css放头部，js放底部

四，减少iframe数量，或者不要使用iframe因为爬虫不会爬取iframe里边的内容

五，避免404

    404代表服务器没有找到资源，客户端发送一个请求但是服务器却返回一个无用的结果，时间浪费掉了

#####六，减少DNS查找
当我们在浏览器的地址栏输入网址（譬如： [小编简书]https://www.jianshu.com/u/12e7fdbba52f），
然后回车，回车这一瞬间到看到页面到底发生了什么呢？

域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户

七，使用ajax缓存

结束语

在学习过程中总结下来的，可能也不太全面，记录下来，方便学习，希望能帮助到自己和大家，也希望看到的攻城狮多多提出宝贵的意见，小编好更新学习。分享并快乐着。

前端小白浅谈seo优化以及web性能优化方案相关推荐

摸鱼前端的自检（六）你不知道的web性能优化
你不知道的web性能优化你遇到过打开一个网站需要10秒以上的吗,这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅.你会有什么反应?我猜想,大多数用户会关闭这个 ...
css优化，js优化以及web性能优化
Css优化总结对于css的优化可以从网络性能和css语法优化两方面来考虑. Css性能优化方法如下: 1.css压缩 Css 压缩虽然不是高端的知识,但是很有用.其原理也很简单,就是把我们css代码 ...
【黑帽大牛】浅谈SEO快排系统对网站排名优化真的有帮助吗？【精品】
大家好,今天我们要跟大家探讨的问题是"[黑帽大牛]浅谈SEO快排系统对网站排名优化真的有帮助吗?".以下案例参考战神快排系统. 之前有太多的人私聊我:汉文黑帽大牛,我想问一下现在百 ...
浅谈SEO的优化问题
浅谈SEO的优化问题文章目录浅谈SEO的优化问题简介专业名词提高排名的技巧注: 感悟: 简介 SEO是搜索引擎优化(Search Engine Optimization)的英文缩写,中文译 ...
Web前端之浅谈css
Web前端之浅谈CSS CSS 什么是CSS? CSS的三种引用方式 CSS常用选择器介绍选择器权重字体属性文本属性元素分类 display属性: 块状元素行内元素行内块元素盒模型内边 ...
大型项目前端架构浅谈（8000字原创首发）
大型项目前端架构浅谈目录: 1.综合 1.1.使用场景 1.2.核心思想 1.3.切入角度 1.4.其他 2.基础层设计 2.1.自建Gitlab 2.2.版本管理 2.3.自动编译发布Jenkin ...
web性能优化及seo
web性能优化为什么要做性能优化? 提高用户体验,加速页面的相应速度提高用户交互性,操作体验更好为搜索引擎服务常用的技术 css精灵图片压缩图片大小合并css js文件减少http请求的 ...
pythonweb开发-Web | 浅谈用Python进行Web开发
Web开发这样一个大概念,对我这种小白来说,想学也不知道从哪下手.在网上广泛地浏览了一下这个方面的文章后,我发现当今Web开发的一大热门语言是Python(最大的当然还是PHP),而恰好我平常用Pyt ...
浅谈SEO（一）搜索引擎与SEO
浅谈SEO(一)搜索引擎与SEO 作为一个Web开发者,除了要能够写出可用的业务代码,还要在其他方面进行优化.所以我就开了这样一个系列的文章记录我的学习过程. 搜索引擎搜索引擎(Search Eng ...

前端小白浅谈seo优化以及web性能优化方案

写在前面

ONE，首先介绍下seo

TWO，搜索引擎工作原理

THREE, 前端SEO

一，网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。

1,控制首页链接数量

2,扁平化的目录层次

3,导航优化

4,网站的结构布局–不可忽略的细节

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

二，网页代码优化(参考，后期还会更新，还是不太全面)

1,

2,标签：

3,标签：

4,中的标签：

5 ,标签:

6,正文标题要用

标签:

的默认样式可以通过CSS设置。尽量做到正文标题用

标签，副标题用

标签, 而其它地方不应该随便乱用 h 标题标签。

7,应使用 “alt” 属性加以说明

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

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

11,不要使用iframe框架,因为“蜘蛛”一般不会读取其中的内容

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

13,css代码放在最前面，Js代码前面

接下来谈一下web性能优化。

前沿：

接下来我们将研究一下前端攻城狮如何来提高页面的加载速度：

一，减少HTTP请求

二，使用cdn加速

三，样式css放头部，js放底部

四，减少iframe数量，或者不要使用iframe因为爬虫不会爬取iframe里边的内容

五，避免404

七，使用ajax缓存

结束语

前端小白浅谈seo优化以及web性能优化方案相关推荐

最新文章

热门文章

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