Meta Description
Meta description标签可能是最有用的标签之一。顾名思义，它会给搜索引擎提供关于这个网页的简短的描述。代码如下:
<meta name=”description” content=”Everything you need to know about meta tags for search engine optimization”/>
这个标签曾经在搜索排名中占有很大的权重，但随着算法的不断的更新升级，它的地位也逐渐降低。它虽然不会提高网站排名，但是，因为它会被用在搜索引擎的结果页，所以依然有用。
这也就意味着它仍然可以提高你的网页点击率。毕竟，当用户搜索的关键词与之相匹配时，会以粗体显示突出显示。这就是为什么一个好的页面说明 (利用关键字的) 可以显示更多与用户相关的信息，进而提高了点击率。推荐的description长度为160 个字符。
但是如果你没有使用description标签或者description标签为空时，会发生什么呢?搜索引擎仍会在搜索结果页显示出自己创键的一小段文字。大多数的结果都不是用户需要的，也就意味着你将失去用户点击网页的机会。
Meta Robots
我们在之前的教程中已经接触过Meta robots标签。如果你没有机会回去阅读它，这里有一段简短的介绍：
Meta robots标签管理着搜索引擎是否可以进入网页，你可以用它来允许或不允许搜索引擎来获取你的网页、进入你网页中的子链接或对你的网页存档。例如：
<meta name=”robots” content=”noindex, nofollow” />
这个 meta 标签告诉搜索引擎不要获取网页，并且阻止其进入链接。如果你不小心使用了两个矛盾的术语 (例如noindex 和index)，谷歌会选择最具限制性的选项。
为什么这个标签会对搜索引擎优化(SEO)起作用呢?首先，它可以防止对拷贝内容的冗余抓取，例如页面的打印版页面。它也可能会对那些内容不完整的页面或者而存在私密信息的网页起作用。
Title
专业的讲，title标签不是meta标签，但他们都放在相同位置。我之所以把title标签放在这里是因为它对搜索引擎优化很重要。
在所有的HTML文档中，title标签都是不可缺少的。它定义了整个文档的标题，如下所示：
<title>Title of the page</title>
简单而实用。标题通常会显示在两个不同的地方;浏览器的头部标签和搜索结果页。这就意味着title标签在点击率(CTR)和排名上有很重要的影响。
一个好的标题应该包含关键字，而且最好放在标题的开头部分。请记住，那些匹配到用户搜索的关键字会以粗体显示。
另一件你应该牢记在心的事情就是标题的长度。谷歌会限制标题为70个字符，所以偶尔你可能需要书写一个合适的标题。
Meta Content Type (charset)
meta content type标签被用来声明网页的字符编码，为了防止浏览器产生编码问题最好加上这个属性。但是它不会影响搜索排名或点击率(CTR)。
你可能很熟悉下面长长的Content-type代码:
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
现在我们也可以使用更简短的、向后兼容的声明模式：
<meta charset="utf-8" />
这个标签应该放在任何包含文本元素的标签之前，包括我们已经讲解的title标签。
Meta Keywords
这个标签在过去很重要，但是现在却没什么价值了。现在没有一个主流的搜索引擎使用meta keywords来判断网页的内容了。
在meta keywords标签里面，你可以存储几个关于网页内容的关键字。然而，它却不会提高你的排名。如果你想要实现它(尽管我不知道你为什么这样做)你可以用如下代码：
<meta name=”keywords” content=”meta tags,search engine optimization” />
Meta Language
这个标签之前是用来声明网页的语言的。可以告知屏幕阅读器和其它文本处理器他们正在处理的语言以便更好的工作。这就是为什么meta language的content声明为什么可以为fr。
<meta http-equiv="content-language" content="fr" />
Notranslate
有时，Google在结果页面会提供一个翻译链接，但有时候你不希望出现这个链接，你可以添加这样一个meta标签：
<meta name=”google” content=”notranslate” />
Refresh
使用这个meta标签你可以控制浏览器在一段时间之后自动刷新。举例说明，下面的代码表示每隔30秒网页自动更新：
<meta http-equiv=”refresh” content=”30”>
你也可以在刷新之后跳转到另外一个页面，看看下面这个例子：
<meta http-equiv=”refresh” content=”30;URL=’http://website.com’”>
W3C是不推荐使用这个标签的，因为它会令用户产生迷惑。另外，它对搜索排名没有任何影响。
相关的meta设置
<meta charset="UTF-8">
<meta http-equiv="refresh" content="5;url=" />
<link rel="copyright" href="copyright.html" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="150 words" />
<meta name="keywords" content="your tags" />
<!--
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。
-->
<meta name="robots" content="index,follow" />
<meta name="author" content="author name" />
<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />
<!-- 启用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 隐藏状态栏/设置状态栏颜色：只有在开启 WebApp全屏模式时才生效。content的值为default | black | black-translucent 。 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- 添加到主屏后的标题 -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 忽略数字自动识别为电话号码 -->
<meta content="telephone=no" name="format-detection" />
<!-- 忽略识别邮箱 -->
<meta content="email=no" name="format-detection" />
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" />
<!-- 添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载 banner:https://developer.apple.com/library/ ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html -->
<!-- 针对手持设备优化，主要是针对一些老的不识别 viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
参考资料：https://lee134134134.github.io/page/10/
