Search Engine Optimization “
搜索引擎优化”
白帽SEO ： 改良规范网站设计， 使之对搜索引擎和用户更加友好，网站可以从搜索引擎中获取更多合理的流量，搜索引擎鼓励和支持
黑帽SEO：利用和放大搜索引擎的政策缺陷，获取更多用户访问量，欺骗搜索
白帽SEO
网站的标题，描述，关键字
网站内容优化
网站地图
增加外链引用
网站结构布局优化
扁平化结构：
1，控制首页链接数量（首页链接不能太多，中小企业（建议100之内））
2，扁平化的目录层次（植物网站）
用户体验调查报告（超过三次点击，用户还没有找到想要的东西，方可就会离开网站，考虑用户体验的需要）
3，导航SEO优化（导航设计采用文字方式，如果是图片，必须加上文字）
面包屑导航（
很久很久以前，在大森林的边上住着一个贫穷的樵夫，他与妻子和两个孩子相依为命。他的儿子名叫
汉赛尔，女儿名叫
格莱特。后来樵夫的妻子去世了，他又给孩子们娶了一个后母。后母计划把两个孩子带到森林的深处，然后趁他们睡着的时候跑掉。汉赛尔无意中知道了后母的计划，于是偷偷地把一块面包藏在了口袋里。在去森林的路上，汉赛尔悄悄地捏碎了他的面包，并不时地停下脚步，把碎
面包屑撒在路上。后母顺利地趁孩子们睡着的时候溜掉了，汉赛尔和格莱特醒来已是一片漆黑。汉赛尔安慰他的妹妹说：“等太阳一出来，我们就看得见我撒在地上的面包屑了，它一定会指给我们回家的路。”但是当太阳升起来时，他们在地上却怎么也找不到一点面包屑了，原来它们都被那些在树林里、田野上飞来飞去的鸟儿一点点地啄食了，兄妹俩在森林中迷了路。不停的寻路，让他们饥饿难忍，腿脚无力，来到了一个用面包做屋顶，糖果做窗户的小屋。饥饿让他们忘记了疲惫，及潜在的危险，啃起了屋子。结果在巫婆的诱骗下，哥哥被锁屋中，妹妹被迫做劳力，就在巫婆要吃掉哥哥之时，妹妹借向巫婆学习添柴之机。将巫婆推入炉中，兄妹俩带着巫婆的财宝，回到了家中。后母己经去世，兄妹俩和父亲一起过上了幸福的生活。）
面包屑导航可以让用户乐姐当前所处的位置，以及当前页面在真个网页的位置，从而形成很好的位置感，提供返回各个阶层的快速入口，对于SEO，让搜索引擎清楚地了解网站结构，增加大量的链接，方便抓取，降低跳出率
网站代码优化
<title> 不设置相同的标题
<meta keywords>关键字 不要堆砌
<meta description>描述 不要堆砌
语义化标签
例：h1-h6 正标题用h1
<a> 添加title
<br> 用于文本换行
<img> 添加 alt文字说明
重要内容不要用js
少使用iframe框架
精简代码
蜘蛛。这个功能模块专门用来下载页面，类似浏览器的功能。它们之间的区别在于，浏览器展现给用户的是各种形式的信息，包括文本的信息，图像的信息，视频的信息，等等；而对于蜘蛛来说，并没有一些可视化的组件，而是直接跟基本的html源代码打交道。大家可能都知道，一个标准的web浏览器都是带有html源文件查看的功能的。
爬虫。该功能模块专门用户发现每个页面中的所有链接。它的任务是，通过评估找到的链接，或者已定义的地址，来决定蜘蛛去哪里。爬虫跟踪这些已经找到的链接，并且尝试去发现对于搜索引擎来说不知道的一些文档。
索引。此功能组件负责解析每个页面，然后分析各种页面的元素，例如，文本内容，头部内容，结构化或者自定义过的特色部分，特殊的html标签，等等。
数据库。搜索引擎下载和分析的一些数据，都要进行存储。有些时候，它也叫做搜索引擎的索引。
结果引擎。结果引擎来进行页面的排名工作。它决定着哪些页面是最匹配用户的搜索请求的，并且按照何种有效而合理的次序来显示这些结果。这是根据搜索引擎的排名算法而决定的。它追寻的是这样一种理念，页面排名是有价值的，基于用户兴趣驱动的，所以对于SEO工作者来说这个是最感兴趣的，SEOer们的目标就是如何有效提高所关心的网站的页面排名。
Web服务器。搜索引擎web服务器包含了这样的一个基本的web页面，有一个用于用户输入感兴趣的关键词的文本框，并且当用户提交搜索动作时，将搜索出的结果合理的展示给用户。
1） bilibili做了基本的seo优化，比如
（1）TDK描叙详细。
（2）提升网页加载速度：对外联css,以及js使用了延迟加载以及dns-prefetch，preload。
（3）外联较多，关键词排名高。
2） 掘金网站使用了vue-meta-info 管理网站的meta，应该配合使用了prerender-spa-plugin 对SEO进行了优化。
3） Element在logo上加了首页的地址，并且只有logo是放在h1标签中。
4） 有一些流量不太高的网站比如
http://www.marshall.edu （Marshall University）做了seo社会化分享优化，在meta信息中出现了property=”og:title”这种新东西；
https://we.dji.com/zh-CN/campus （大疆招聘）使用了Nuxt
网站中出现率最高的公共组件
1） 面包屑导航
2） Icon
3） 搜索框
4） Button组件
1.网站的渲染模式----服务端渲染和客户端渲染
1.1服务端渲染（后端渲染SSR）
后端渲染HTML的情况下，浏览器会直接接收到经过服务器计算之后的呈现给用户的最终的HTML字符串，这里的计算就是服务器经过解析存放在服务器端的模板文件来完成的，在这种情况下，浏览器只进行了HTML的解析，以及通过操作系统提供的操纵显示器显示内容的系统调用在显示器上把HTML所代表的图像显示给用户。
好处：前端耗时少（前端只负责将html进行展示），利于SEO
坏处：网络传输数据量大，占用（部分、少部分）服务器运算资源，response 出的数据量会（稍）大点，模板改了前端的交互和样式什么的一样得跟着联动修改
1.2客户端渲染（前端渲染CSR）------SPA---单页面应用
前端渲染就是指浏览器会从后端得到一些信息，这些信息或许angularjs的模板文件，亦或是JSON等各种数据交换格式所包装的数据，甚至是直接的合法的HTML字符串。这些形式都不重要，重要的是，将这些信息组织排列形成最终可读的HTML字符串是由浏览器来完成的，在形成了HTML字符串之后，再进行显示。
好处：网络传输数据量小（减少了服务器压力）
坏处：前端耗时较多，不利于SEO
2.前端渲染遇到的问题---seo和首屏问题
SEO 很好理解。由于传统的搜索引擎只会从 HTML 中抓取数据，导致前端渲染的页面无法被抓取。前端渲染常使用的 SPA 会把所有 JS 整体打包，无法忽视的问题就是文件太大，导致渲染前等待很长时间。特别是网速差的时候，让用户等待白屏结束并非一个很好的体验。
2.1解决前端渲染SEO问题
近几年，随之前端SPA框架的兴起；由前后端分离带来的SEO问题，相信每个前端攻城狮都有遇到。这里以Vue为例来说说解决SEO的方法；
2.1.1 vue------SSR
首先vue2.x直接提供了一份完整的构建Vue服务端渲染。Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最 后将静态标记"混合"为客户端上完全交互的应用程序。
服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。
2.1.2 vue------Nuxt.js
从头搭建一个服务端渲染的应用是相当复杂的。幸运的是 Nuxt.js 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。推荐尝试。
Nuxt.js是创建Universal Vue.js应用程序的框架。
它的主要范围是UI渲染，同时抽象出客户端/服务器分布。
我们的目标是创建一个足够灵活的框架，以便您可以将其用作主项目库或基于Node.js的当前项目。
Nuxt.js预先设置了使Vue.js应用服务器的开发更加愉快的所有配置。
另外，我们还提供另一个名为nuxt generate的部署选项。它将构建一个静态生成的 Vue.js应用程序。我们相信这个选择可能是微软服务开发Web应用程序的下一个重要步骤。
作为一个框架，Nuxt.js提供了很多功能，可以帮助您在客户端和服务器端之间进行开发，如异步数据，中间件，布局等。