快速了解SEO，学会SEO优化和Nuxt.js框架

SEO概述

SEO（Search Engine Optimization，搜索引擎优化）是一种利用搜索引擎的排名规则，来提升目标网站在天然搜索结果中的收录数量和排名的优化行为，其目的是从搜索引擎中得到更多的免费流量，以及更好的展示形象。简单的说，搜索引擎优化是提升天然搜索排名得到流量，且提供给用户有价值的信息。SEO分为站长可控制的网站内部优化，以及网站自己之外的外部优化两个部分，这与SEM（搜索引擎营销）有必定的区别。html

搜索引擎的工做原理

1) 信息采集模块

信息采集是一个能够浏览网页的程序，被形容为“网络爬虫”。它首先打开一个网页，而后把该网页的连接做为浏览的起始地址，把被连接的网页获取过来，抽取网页中出现的连接，并经过必定算法决定下一步要访问哪些连接。同时，信息采集器将已经访问过的URL存储到本身的网页列表并打上已搜索的标记。自动标引程序检查该网页并为他建立一条索引记录，而后将该记录加入到整个查询表中。信息收集器再以该网页到超连接为起点继续重复这一访问过程直至结束。前端

2）收录建库预处理

蜘蛛抓取的是网页的内容，那么要想让用户快速的经过关键词搜索到这个网页，就必须对网页作关键词的索引，从而提高查询效率，简单说就是，把网页的每一个关键词提取出来，并针对这些关键词在网页中的出现频率，位置，特殊标记等诸多因素，给予不一样的权值标定，而后，存储到索引库中。vue

3）分析搜索内容对结果排序

第一步，会检查最近时间有没有人搜索过一样的关键词，若是存在这样的缓存，最快的处理是将这块缓存提供给你，这样查询效率最高，对后端负载压力最低。
第二步，发现这个输入查询最近没有搜索，或者有其余条件的缘由必须更新结果，那么会将这个用户输入的词进行分词，若是不止一个关键词，或者是一句话的状况下，应答程序会又一次分词，将搜索的查询拆成几个不一样的关键词。
第三步，将切分后的关键词分发到查询系统中，查询系统会去索引库查询，索引库是个庞大的分布式系统，先分析这个关键词属于哪一块哪一台服务器。
第四步，不一样关键词的查询结果(只是按权值排序的部分顶部结果，绝对不是所有结果)，基于权值倒序，会再汇总在一块儿，而后把共同命中的部分反馈回来，并作最后的权值排序。java

搜索引擎收录

查看有多少收录的内容
在搜索网站的输入框中收入 site:你要知道的网址
例如 site:www.buka.tvnode

搜索引擎的营销策略

在概况中有提到SEM（搜索引擎营销），什么是SEMios

SEM就是根据用户使用搜索引擎的方式利用用户检索信息的机会尽量将营销信息传递给目标用户。简单来讲，搜索引擎营销就是基于搜索引擎平台的网络营销，利用人们对搜索引擎的依赖和使用习惯，在人们检索信息的时候将信息传递给目标用户。它是一种新的网络营销形式。以下图带有广告的搜索内容就是经过SEM来提高本身的排名算法

总结：短时间营销-SEM竞价推广长期发展-SEO优化
若是企业要求再近期内取得效果，而且是季节性短时间营销，建议使用竞价推广；
若是长期发展，SEO是比较合理的选择，提升自身网站的竞争力才是网络营销的根本
npm

SEO查询工具

Chinaz站长工具：seo.chinaz.com 爱站网站长工具：www.aizhan.com/json

搜索引擎官方平台工具

zhanzhang.XX.com/axios

前端SEO规范

1) 网站结构布局优化：尽可能简单，提倡扁平化结构

1.1) 控制首页连接数量

网站首页是权重最高的地方，若是首页连接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。可是首页连接也不能太多，一旦太多，没有实质性的连接，很容易影响用户体验，也会下降网站首页的权重，收录效果也很差

1.2) 扁平化的目录层次

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

1.3) 导航优化

导航应该尽可能采用文字方式，也能够搭配图片导航，可是图片代码必定要进行优化，<img>标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，作到即便图片未能正常显示时，用户也能看到提示文字。

1.4) 网站的结构布局

页面头部：logo及主导航，以及用户的信息。页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关连接，加强了页面相关性，也能加强页面的权重。页面底部：版权信息和友情连接。

2)网页代码优化

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,不涉及服务器负载方面问题
静态网页不宜遭到黑客工具，安全性高

图中说到服务器端渲染，什么是服务端渲染和客户端渲染

服务端渲染和客户端渲染

浏览器（客户端）经过AJAX向服务端（java servlet）发送http请求数据接口
服务端将获取的接口数据封装成JSON，响应给浏览器
浏览器拿到JSON就进行渲染html页面，生成DOM元素，而后将页面展现给用户

了解什么是服务端渲染和客户端渲染以后，讲一下NUXT.js的工做原理

Nuxt.js工做原理

1.浏览器(客户端)发送http请求到Node.js服务端。
2.部署在Node.js的应用Nuxt.js接收到浏览器请求，它会去请求后台服务端。
3.后台接口服务端会响应JSON数据，Nuxt.js获取数据后进行服务端渲染成html。
4.而后Nuxt.js将html页面响应给浏览器
5.浏览器直接将接收到html页面进行展现

看服务端渲染和Nuxt.js服务端渲染作对比以后应该很好理解

简单介绍让你们快速了解Nuxt.js 接下来：
小二！上菜！

1.首先就是安装NUXT 这个简单，你们按照官网的操做步骤就能够了。

参考连接 www.nuxtjs.cn/guide/insta…

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('/')
	}
}
复制代码