简介
SEO、Meta、搜索引擎优化、简单教程
细心的同学可能发现了开头出现了关键字，这是为什么呢？阅读完本文后大家就会明白了。
同学们有没有想过互联网上用户、网站 有多少呢？这里提供一个网站 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 の 小秘密。
titletitle 标题标签告诉用户和搜索引擎一个特定网页的主题是什么，所以 title 应该该准确描述网页的内容，并且 title 在 搜索引擎 显示结果时会直接显示输出，如果太长的话 搜索引擎 只会显示一部分内容。
最好带上几个关键词用 -、|、空格 等方式进行分隔，例如掘金主页的title就包含了 掘金、juejin.im、一个帮助开发者成长的社区 三个关键词，同学可以再搜索引擎中分别搜索试试应该都会排在第一个结果。
description掘金 - juejin.im - 一个帮助开发者成长的社区
description 描述标签提供了关于这个网页的总括性描述，如果网页摘要里的某个词语恰好出现在用户的查询里，那么这个词语将被高亮显示。
description 应该准确概括页面上的内容，并且不同的页面最好有不同的 description如果描述标签写的好，可以提升页面的点击率。例如掘金在主页是对整个掘金的整体描述，而在文章中的 description 则截取文章中开头的部分内容。
keywordskeywords 关键词标签 对于页面优化来说重要性已经大不如前，不过对于 SEO 还是有一定的帮助，不要在 keywords 中堆砌太多关键词大概在 5-6 最佳并用 , 分隔开内容，这里以掘金的主页 keywords 为例子：
实例这里的实例为 掘金 这个站点，掘金 是使用 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 并未做出更多的相关关键词。
SEO 相关内容H1 の 小秘密
SEO 初体验
img の 小九九
千里姻缘一线牵
一起成长在困惑的城市里总少不了并肩同行的 伙伴 让我们一起成长。
如果您想让更多人看到文章可以点个 点赞。
如果您想激励小二可以到 Github 给个 小星星。
如果您想与小二更多交流添加微信 m353839115。
本文原稿来自 PushMeTop
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103205.html
showImg(https://segmentfault.com/img/remote/1460000018760855?w=900&h=500); 简介 SEO、Meta、搜索引擎优化、简单教程 细心的同学可能发现了开头出现了关键字，这是为什么呢？阅读完本文后大家就会明白了。 同学们有没有想过互联网上用户、网站 有多少呢？这里提供一个网站 internet live stats 里面实时的给出了...
showImg(https://segmentfault.com/img/remote/1460000018808058?w=900&h=500); 简介 SEO、sitemap、搜索引擎优化、简单教程 在暧昧期和暗恋期时心里总是悬挂着： ta 为什么还不和我表白？ ta 是不是对我没感觉？ ta 是不是只是把我当备胎？ ta 是不是对谁都这样？ 解决问题最简单的方式就是直接 问问对方...
showImg(https://segmentfault.com/img/remote/1460000018825131); 简介 SEO、robot.txt、搜索引擎优化 在浩海的互联网世界中： 互联网 宛如 宇宙 站点 宛如 星系 网页 宛如 星球 网页内容 宛如 生灵万物 而在互联网世界漫游的搜索引擎爬虫小蜘蛛，就好比一搜穿梭在宇宙里的星际漫游器，想想是不是还挺浪漫的。对于不同的星系有着...
showImg(https://segmentfault.com/img/remote/1460000018747727?w=900&h=500); 简介 heading 标签、SEO、无障碍阅读 ps: 内容有点多，本来只想讲一个点，但是关联性太强了，所以辛苦大家了。 在学习 HTML 标签的时候，很多教程只告诉你 怎么用 而没有讲清楚 是什么，让我们一起从 h1 到 h6 开始重新认识 HTM...
showImg(https://segmentfault.com/img/remote/1460000018836440); 简介 无障碍、DOM 小细节、前端开发、a11y、Accessibility 无障碍的英文为 Accessibility 由于单词拼写过长往往被缩写为 a11y 其中 11 指的是中间有11个字母。 无障碍指的是在使用过程中，不管什么类型的用户都可以正常使用。生活中最常见的...
阅读 1138·2021-10-15 09:39
阅读 3019·2021-09-10 10:50
阅读 3436·2019-08-30 15:53
阅读 1861·2019-08-30 15:52
阅读 2519·2019-08-29 15:31
阅读 1953·2019-08-26 13:43
阅读 2574·2019-08-26 13:37
阅读 1423·2019-08-23 18:31
