快速了解SEO，学会SEO优化和Nuxt.js框架
掘金-个人主页
文章原链接
-----
SEO概述
SEO（Search Engine Optimization，搜索引擎优化）是一种利用搜索引擎的排名规则，来提高目标网站在自然搜索结果中的收录数量和排名的优化行为，其目的是从搜索引擎中获得更多的免费流量，以及更好的展现形象。
简单的说，搜索引擎优化是提高自然搜索排名获得流量，且提供给用户有价值的信息。SEO分为站长可控制的网站内部优化，以及网站本身以外的外部优化两个部分，这与SEM（搜索引擎营销）有一定的区别。
搜索引擎的工作原理
- 信息采集模块
信息采集是一个可以浏览网页的程序，被形容为“网络爬虫”。它首先打开一个网页，然后把该网页的链接作为浏览的起始地址，把被链接的网页获取过来，抽取网页中出现的链接，并通过一定算法决定下一步要访问哪些链接。同时，信息采集器将已经访问过的URL存储到自己的网页列表并打上已搜索的标记。自动标引程序检查该网页并为他创建一条索引记录，然后将该记录加入到整个查询表中。信息收集器再以该网页到超链接为起点继续重复这一访问过程直至结束。 - 收录建库预处理
蜘蛛抓取的是网页的内容，那么要想让用户快速的通过关键词搜索到这个网页，就必须对网页做关键词的索引，从而提升查询效率，简单说就是，把网页的每个关键词提取出来，并针对这些关键词在网页中的出现频率，位置，特殊标记等诸多因素，给予不同的权值标定，然后，存储到索引库中。 - 分析搜索内容对结果排序
第一步，会检查最近时间有没有人搜索过同样的关键词，如果存在这样的缓存，最快的处理是将这块缓存提供给你，这样查询效率最高，对后端负载压力最低。
第二步，发现这个输入查询最近没有搜索，或者有其他条件的原因必须更新结果，那么会将这个用户输入的词进行分词，如果不止一个关键词，或者是一句话的情况下，应答程序会又一次分词，将搜索的查询拆成几个不同的关键词。
第三步，将切分后的关键词分发到查询系统中，查询系统会去索引库查询，索引库是个庞大的分布式系统，先分析这个关键词属于哪一块哪一台服务器。
第四步，不同关键词的查询结果(只是按权值排序的部分顶部结果，绝对不是全部结果)，基于权值倒序，会再汇总在一起，然后把共同命中的部分反馈回来，并做最后的权值排序。
搜索引擎收录
查看有多少收录的内容
在搜索网站的输入框中收入 site:你要知道的网址
例如 site: http://www.buka.tv
搜索引擎的营销策略
在概况中有提到SEM（搜索引擎营销），什么是SEM
SEM就是根据用户使用搜索引擎的方式利用用户检索信息的机会尽可能将营销信息传递给目标用户。简单来说，搜索引擎营销就是基于搜索引擎平台的网络营销，利用人们对搜索引擎的依赖和使用习惯，在人们检索信息的时候将信息传递给目标用户。它是一种新的网络营销形式。如下图 带有广告的搜索内容就是通过SEM来提升自己的排名
总结：
短期营销-SEM竞价推广
长期发展-SEO优化
如果企业要求再近期内取得效果，并且是季节性短期营销，建议使用竞价推广；
如果长期发展，SEO是比较合理的选择，提高自身网站的竞争力才是网络营销的根本
SEO查询工具
Chinaz站长工具： 站长工具 - SEO综合查询
爱站网站长工具： 站长工具-百度权重排名查询-站长seo查询 - 爱站网
搜索引擎官方平台工具
http://zhanzhang.XX.com/
前端SEO规范
- 网站结构布局优化：尽量简单，提倡扁平化结构
1.1 控制首页链接数量
网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好
1.2 扁平化的目录层次
尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。
1.3 导航优化
导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，<img>标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。
1.4 网站的结构布局
页面头部：logo及主导航，以及用户的信息。
页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。
页面底部：版权信息和友情链接。 - 网页代码优化
2.1 合理的设计title、description和keywords
<title>标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的<title>标题中不要设置相同的内容。
<meta keywords>标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。
<meta description>标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
2.2 语义化书写HTML代码，合理使用语义化标签
2.3 关于标签属性等
图片超链接等加‘title’‘alt’等属性，访问外部链接，链接到其他网站的，则需要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬。
2.4 正文标题相关
正文标题要用<h1>标签：h1标签自带权重“蜘蛛” 认为它最重要，一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面，如首页的logo上可以加H1标签。副标题用<h2>标签, 而其它地方不应该随便乱用 h 标题标签
2.5 强调标签
<strong>、<em>标签 ：需要强调时使用。<strong>标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，<em>标签强调效果仅次于<strong>标签；<b>、<i>标签：只是用于显示效果时使用，在SEO中不会起任何效果。
快速学会 Nuxt.js
NUXT.js
官方介绍：
从头搭建一个服务端渲染的应用是相当复杂的。幸运的是，我们有一个优秀的社区项目Nuxt.js这让一切变得非常简单。Nuxt是一个基于Vue生态的更高层的框架，为开发服务端渲染的Vue应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。
简单的理解：
代替浏览器的工作,笼统理解就是在created时的请求数据和页面渲染，第二点是当作静态文件服务器，把渲染好的页面返回给用户。
优势：
- 纯静态文件，访问速度快
- 对比SSR,不涉及服务器负载方面问题
- 静态网页不宜遭到黑客工具，安全性高
图中说到服务器端渲染，什么是服务端渲染和客户端渲染
服务端渲染和客户端渲染
1. 浏览器（客户端）通过AJAX向服务端（java servlet）发送http请求数据接口
2. 服务端将获取的接口数据封装成JSON，响应给浏览器
3. 浏览器拿到JSON就进行渲染html页面，生成DOM元素，然后将页面展示给用户
了解什么是服务端渲染和客户端渲染之后，讲一下NUXT.js的工作原理
Nuxt.js工作原理
1.浏览器(客户端)发送http请求到Node.js服务端。<br>
2.部署在Node.js的应用Nuxt.js接收到浏览器请求，它会去请求后台服务端。<br>
3.后台接口服务端会响应JSON数据，Nuxt.js获取数据后进行服务端渲染成html。<br>
4.然后Nuxt.js将html页面响应给浏览器<br>
5.浏览器直接将接收到html页面进行展示<br>
看服务端渲染和Nuxt.js服务端渲染 做对比之后应该很好理解
简单介绍 让大家快速了解Nuxt.js 接下来：<br>
小二！上菜！
1.首先就是安装NUXT 这个简单，大家按照官网的操作步骤就可以了。
参考链接 安装
2.目录结构
| .nuxt
| assets //资源目录 组织为编译的静态资源 大家都懂
| image.png
| components // 组织 Vue.js 组件，NUXT不会扩展增强该目录下的组件，这意味着组件不能使用 asyncData 方法
| layout // 布局目录 如果没有额外配置，目录不能重命名--不建议改名
| middleware // 用于存放应用的中间件
| node_modules // 懂吧~
| pages // 页面目录用于组织应用路由及视图，NUXT会读取该目录下所有.vue文件并自动生成路由（路由文件在 .nuxt/router.js）
| index.vue
| plugins // 插件目录 用于组织那些需要在跟vue.js应用，实例化之前需要运行的Javascript插件
| static // 用于存放应用的静态文件，此类文件不会被NUXT.js调用Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 `/` 下。例如 /static/root.txt 映射至 /root.txt
| store // Nuxt.js 框架集成了 [Vuex 状态树] 的相关功能配置，在 `store` 目录下创建一个 `index.js` 文件可激活这些配置。 新建一个index.js 这事就算妥了
| nuxt.config.js // 文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置 不要gai'ming'zi
| package.json // 用于描述应用的依赖关系和对外暴露的脚本接口3.接下来 直接和大家说一下 NUXT开发中需要注意哪些。然后大家之后就可以直接上手，梭哈！
静态资源的引入 和 路由
//引入静态资源 和 跳转路由
<template>
<!--我们不需要去配置 @去指向根目录 NUXT中可以直接使用 -->
<img src="~/assets/image.png" />
<!--NUXT中我们不需要去写路由表 '/'指的是 page/index.vue 其它语法和日常无恙 -->
<nuxt-link :to="{name:'userPage',query:{id:'111'}}">个人中心</nuxt-link>
</template>asyncData
Nuxt.js扩展了Vue.js 增加了asyncData的方法，这样我们可以在渲染组件之前异步获取数据，asyncData方法会在组件（只限于页面组件）每次加载之前被调用，它可以在服务端或路由更新之前被调用，在这个方法被调用的时候，第一个参数context被设定为当前页的上下文对象。
async asyncData({ params }){ // params 就是传进来的值
//asyncData 函数去执行我们的异步操作 当我们获取到接口返回的内容是 此时我们Vue还没有实例化 所以this获取不到 我们通过返回 方法 去获取 因此标签内如果需要展示内容 {{info.XXX}}
const data = await $axios.$get('/api/user')
return {data}
}@nuxtjs/axios
我们在asyncData中调用接口，在Nuxt.js官方提供了@nuxtjs/axios模块，此模块还包含了axios、@nuxtjs/proxy（解决异步,进行代理转发）模块。
// 1.安装@nuxtjs/axios：
npm install @nuxtjs/axios
// 2.在nuxt.config.js中配置axios
module.exports={
modules:['@nuxtjs/axios']
}中间件
中间件应放置在middleware/ 目录。文件名的名称将成为中间件名称（middleware/auth.js将成为auth中间件）
//创建权限中间件
//在 middleware/ 下创建 auth.js 文件，其中auth就是中间件的名称。
//一个中间件接收content作为第一个参数
export default({ store, redirect }) => {
if(/* 没有token */){
return redirect('/')
}
}文章被以下专栏收录
