简介
SEO、Meta、搜索引擎优化、简单教程???? 一天 30 秒 ⏱ 一段代码 ✍️ 一个场景 ???? ????
细心的同学可能发现了开头出现了关键字，这是为什么呢？阅读完本文后大家就会明白了。
同学们有没有想过互联网上用户、网站 有多少呢？这里提供一个网站 internet live stats 里面实时的给出了一些关于互联网实时状态的统计，这里给出一张 2019 年 4 月 4 日 7 点左右时的状态截图：
可能图上的数据不够准确，但是作为参考可以发现 网站总数 大概在 16 亿 左右，当查找一个网站并对其访问，相当于在人海茫茫的世界里找到你的另一半。这个概率还是相当低的，为了解决这个问题 搜索引擎 便诞生了，我们最常用的搜索引擎 有百度、必应、谷歌等。
SEO
搜索引擎 是根据什么来记录网站和自然排名？
搜索引擎 在记录网站和自然排名上有一套规则，对这套规则作出相应的优化便称之为 SEO 即 Search Engine Optimization（搜索引擎优化）。搜索引擎优化里面门道挺多也产生了相关的职业，在京东相关书籍排名第一的《SEO 实战密码：60 天网站流量提高 20 倍》足足有 640 页。
HTML
网站最终都会被输出为 html 页面，这也是搜索引擎能够触及的最小单元之一。当然在传统后端 MVC 直接输出 html 的方法，优化起来相对容易。不过现在前端开发多为单页应用，输出的 html 需要经过 JavaScript 渲染后才能真正的被显示。在单页面应用解决 SEO 上有两种比较常见的方法：
利用后端渲染，直接输出 html。
利用 head 中的 meta 相关属性。
文章范围
在本文章中将讲解 SEO 中 meta 相关内容，在 meta 标签主要有 title、description、keywords 三个地方对 SEO 有帮助，Heading 标签 相关可以查看 H1 の 小秘密。
title
title 标题标签告诉用户和搜索引擎一个特定网页的主题是什么，所以 title 应该该准确描述网页的内容，并且 title 在 搜索引擎 显示结果时会直接显示输出，如果太长的话 搜索引擎 只会显示一部分内容。
最好带上几个关键词用 -、|、空格 等方式进行分隔，例如掘金主页的 title 就包含了 掘金、juejin.im、一个帮助开发者成长的社区 三个关键词，同学可以再搜索引擎中分别搜索试试应该都会排在第一个结果。
<title> 掘金 – juejin.im – 一个帮助开发者成长的社区 </title>
description
description 描述标签提供了关于这个网页的总括性描述，如果网页摘要里的某个词语恰好出现在用户的查询里，那么这个词语将被高亮显示。
description 应该准确概括页面上的内容，并且不同的页面最好有不同的 description 如果描述标签写的好，可以提升页面的点击率。例如掘金在主页是对整个掘金的整体描述，而在文章中的 description 则截取文章中开头的部分内容。
<meta name=”description” content=” 掘金是一个帮助开发者成长的社区，是给开发者用的 Hacker News，给设计师用的 Designer News，和给产品经理用的 Medium。掘金的技术文章由稀土上聚集的技术大牛和极客共同编辑为你筛选出最优质的干货，其中包括：Android、iOS、前端、后端等方面的内容。用户每天都可以在这里找到技术世界的头条内容。与此同时，掘金内还有沸点、掘金翻译计划、线下活动、专栏文章等内容。即使你是 GitHub、StackOverflow、开源中国的用户，我们相信你也可以在这里有所收获。”>
keywords
keywords 关键词标签 对于页面优化来说重要性已经大不如前，不过对于 SEO 还是有一定的帮助，不要在 keywords 中堆砌太多关键词大概在 5-6 最佳并用 , 分隔开内容，这里以掘金的主页 keywords 为例子：
<meta name=”keywords” content=” 掘金, 稀土,Vue.js, 微信小程序,Kotlin,RxJava,React Native,Wireshark, 敏捷开发,Bootstrap,OKHttp, 正则表达式,WebGL,Webpack,Docker,MVVM”>
实例
这里的实例为 掘金 这个站点，掘金 是使用 vue 来作为单页面开发的。也就会遇到 html 不能被直接搜索引擎检索的问题，从页面标签的 data-vue-meta 来看应该是使用了 vue-meta 来解决 SEO 的问题。
通过这个例子大家可以明白的看到 title、description、keywords 三剑客的魔力。当然也可以利用这个规则，来提升文章在 搜索引擎 的自然排行。
主页
这里的小列表叫做 网站链接 感兴趣的同学可以搜索看看。
title
在 搜索引擎 搜索掘金便会看到 掘金 - juejin.im – 一个帮助开发者成长的社区 被优先放大显示，这也是掘金主页上的标题。
description
而 掘金是一个帮助开发者成长的社区，是给开发者用的 Hacker News，给设计师用的 Designer News，和给产品经理用的 Medium。掘金的技术文章由稀土上聚集的技术 … 则为掘金主页中 description 中的部分内容截取。
keywords
关键字在这次搜索中起到的帮助作用并不大，虽然主页的 keywords 中也提到了 掘金。
个人文章
title
标题为 文章名称 和 掘金 组成，所以在取文章名字的时候尽量带上文章的关键词，这样会比较容易被用户检索到。像小二的 该不该优雅 这个关键词就是一个标准的错误示范，正常用户会喜欢搜索的是 性能、可读性。
description
描述为文章正文中截取的部分开头，这也是小二在文章头部加上了 SEO、Meta、搜索引擎优化、简单教程 的原因，通过使用关键词可以方便大家搜索到这篇文章。
ps: 大家在写文章时，也可以像小二这样在开头抛出关键词哦。
keywords
关键词为创建文章时选择的关键词。
个人详情
title
标题为两个关键字组成 zhangxiangliang、掘金。
description
描述为用户职业、用户公司、用户个人签名 组成，所以在写个人信息的时候一定要好好写，用户在搜索时可以很容易的搜索到你。不信你可以搜索 全职魔法师 试试，你会发现小二就排列在搜索结果的第二个。
keywords
关键词为用户名称 zhangxiangliang 并未做出更多的相关关键词。
一起成长
???? 更新平台多偶尔会漏掉，如果觉得文章还行点个 star 防走失。
如果您感觉有收获可以点赞关注激励我，也欢迎到 Github 加个 star。
本文原稿来自 PushMeTop