每日 30 秒 ⏱ SEO初体验

时间 2019-12-06

原文原文链接

简介

SEO、Meta、搜索引擎优化、简单教程

细心的同窗可能发现了开头出现了关键字，这是为何呢？阅读完本文后你们就会明白了。

同窗们有没有想过互联网上用户、网站 有多少呢？这里提供一个网站 internet live stats 里面实时的给出了一些关于互联网实时状态的统计，这里给出一张 2019年4月4日7点左右时的状态截图：html

可能图上的数据不够准确，可是做为参考能够发现 网站总数 大概在 16亿 左右，当查找一个网站并对其访问，至关于在人海茫茫的世界里找到你的另外一半。这个几率仍是至关低的，为了解决这个问题 搜索引擎 便诞生了，咱们最经常使用的搜索引擎 有百度、必应、谷歌等。前端

SEO

搜索引擎 是根据什么来记录网站和天然排名？

搜索引擎 在记录网站和天然排名上有一套规则，对这套规则做出相应的优化便称之为 SEO 即 Search Engine Optimization（搜索引擎优化）。搜索引擎优化里面门道挺多也产生了相关的职业，在京东相关书籍排名第一的《SEO实战密码：60天网站流量提升20倍》足足有 640 页。vue

HTML

网站最终都会被输出为 html 页面，这也是搜索引擎可以触及的最小单元之一。固然在传统后端 MVC 直接输出 html 的方法，优化起来相对容易。不过如今前端开发多为单页应用，输出的 html 须要通过 JavaScript 渲染后才能真正的被显示。在单页面应用解决 SEO 上有两种比较常见的方法：git

利用后端渲染，直接输出 html。
利用 head 中的 meta 相关属性。

文章范围

在本文章中将讲解 SEO 中 meta 相关内容，在 meta 标签主要有 title、description、keywords 三个地方对 SEO 有帮助，Heading 标签 相关能够查看 H1 の小秘密。github

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 并未作出更多的相关关键词。

SEO 相关内容

一块儿成长

在困惑的城市里总少不了并肩同行的 伙伴 让咱们一块儿成长。

若是您想让更多人看到文章能够点个 点赞。
若是您想激励小二能够到 Github 给个 小星星。
若是您想与小二更多交流添加微信 m353839115。

本文原稿来自 PushMeTop