网站SEO优化之如何运用好meta标签?

　　在SEO网站优化过程中应该知道网站的三大meta标签的重要性，这三种标签设置的好坏直接影响着网站后期的优化效果。下面品创天下就来和大家说说在SEO优化中如何运用meta标签。、

　　meta标签之标题(Title)

　　网站的标题标签是三个之中最重要的一个，对于搜索引擎来说，这个要比关键词和描述标签重要，所以一定要把网站要做的核心关键词或者品牌以及公司的名称写上去，一般是以“关键词+公司名称或品牌”的格式写的，当然现在也有一些会写成一句话，包含我们想要的内容，这是一种新的形式，当然如何把这句话写的更合理，更能够吸引客户也是一个挑战。

　　meta标签之关键词(Keyword)

　　关键词标签相对来说没有其他两个标签重要，但是也要写，一般是把自己网站要做的关键词写进去，但是也有长度的限制，不能有多少写多少，更不能为了提高关键词密度而堆砌关键词。在设置的关键词最好把重要的放在前边，然后依次往后排序，一般是4个或者5个最好，关键词之间用英文的逗号隔开。

　　这个标签在过去很重要，但是现在却没什么价值了。现在没有一个主流的搜索引擎使用meta keywords来判断网页的内容了。在meta keywords标签里面，你可以存储几个关于网页内容的关键字。然而，它却不会提高你的排名。如果你想要实现它(尽管我不知道你为什么这样做)你可以用如下代码：

　　meta标签之Robots

　　Meta RobotsMeta robots标签管理着搜索引擎是否可以进入网页，你可以用它来允许或不允许搜索引擎来获取你的网页、进入你网页中的子链接或对你的网页存档。

　　这个 meta 标签告诉搜索引擎不要获取网页，并且阻止其进入链接。如果你不小心使用了两个矛盾的术语 (例如noindex 和index)，谷歌会选择最具限制性的选项。

　　为什么这个标签会对搜索引擎优化(SEO)起作用呢?首先，它可以防止对拷贝内容的冗余抓取，例如页面的打印版页面。它也可能会对那些内容不完整的页面或者而存在私密信息的网页起作用。

　　meta标签之描述(Description)

　　描述标签主要是向用户和搜索引擎展示我们的网站是做什么的，一个合格的描述标签需要包含公司名称、主要产品和关键词、联系电话，一些长尾词也是可以出现在描述中的，这个也是一个增加关键词的技巧。因为在搜索引擎上最多只能显示描述的80个字，所以尽量把字数保持在80个以内，如果真的需要超过80个，要把重要的信息放在前80个字中，这样就能够把重要的信息完整的展示出来。

　　这个标签曾经在搜索排名中占有很大的权重，但随着算法的不断的更新升级，它的地位也逐渐降低。它虽然不会提高网站排名，但是，因为它会被用在搜索引擎的结果页，所以依然有用。

　　这也就意味着它仍然可以提高你的网页点击率。毕竟，当用户搜索的关键词与之相匹配时，会以粗体显示突出显示。这就是为什么一个好的页面说明 (利用关键字的) 可以显示更多与用户相关的信息，进而提高了点击率。

　　简单的说，有三个meta标签，你应该关注一下：Description、robots、title(经常被视为是，但专业来讲不是)。Description标签被用来显示更多有关网页内容的信息，搜索引擎也会在搜索引擎结果页面(SERP)使用它。robots标签用来阻止搜索引擎获取拷贝页面、私密页面和未完成的页面。最后，最重要的title标签，控制它在70个字符以下，并在其中使用关键词
 

　　标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面)，搜索引擎(关键词)，或其他 web 服务。 —— W3School

　　必要属性

　　属性值描述

　　contentsome text定义与http-equiv或name属性相关的元信息

　　可选属性

　　属性值描述

　　http-equivcontent-type / expire / refresh / set-cookie把content属性关联到HTTP头部。

　　nameauthor / description / keywords / generator / revised / others把 content 属性关联到一个名称。

　　contentsome text定义用于翻译 content 属性值的格式。

　　网站SEO优化

　　页面关键词，每个网页应具有描述该网页内容的一组唯一的关键字。

　　使用人们可能会搜索，并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短，则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符。

　　<meta name="keywords" content="your tags" />

　　页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。

　　<meta name="description" content="150 words" />

　　搜索引擎索引方式，robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。确保正确使用nofollow和noindex属性值。

　　<meta name="robots" content="index,follow" /><!--

　　all：文件将被检索，且页面上的链接可以被查询;

　　none：文件将不被检索，且页面上的链接不可以被查询;

　　index：文件将被检索;

　　follow：页面上的链接可以被查询;

　　noindex：文件将不被检索;

　　nofollow：页面上的链接不可以被查询。

　　-->

　　页面重定向和刷新：content内的数字代表时间(秒)，既多少时间后刷新。如果加url,则会重定向到指定网页(搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚)。

　　<meta http-equiv="refresh" content="0;url=" />

　　其他

　　<meta name="author" content="author name" /> <!-- 定义网页作者 -->

　　<meta name="google" content="index,follow" />

　　<meta name="googlebot" content="index,follow" />

　　<meta name="verify" content="index,follow" />

　　移动设备

　　viewport：能优化移动浏览器的显示。如果不是响应式网站，不要使用initial-scale或者禁用缩放。

　　大部分4.7-5寸设备的viewport宽设为360px;5.5寸设备设为400px;iphone6设为375px;ipone6 plus设为414px。

　　<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

　　<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 -->

　　1.width：宽度(数值 / device-width)(范围从200 到10,000，默认为980 像素)

　　2.height：高度(数值 / device-height)(范围从223 到10,000)

　　3.initial-scale：初始的缩放比例 (范围从>0 到10)

　　4.minimum-scale：允许用户缩放到的最小比例

　　5.maximum-scale：允许用户缩放到的最大比例

　　6.user-scalable：用户是否可以手动缩 (no,yes)

　　7.minimal-ui：可以在页面加载时最小化上下状态栏。(已弃用)

　　注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

　　WebApp全屏模式：伪装app，离线应用。

　　<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

　　隐藏状态栏/设置状态栏颜色：只有在开启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" />

　　添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner(如下图)。参考文档

　　<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

　　<!-- 针对手持设备优化，主要是针对一些老的不识别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">

　　网站SEO优化之网页相关

　　申明编码

　　<meta charset='utf-8' />

　　优先使用 IE 最新版本和 Chrome

　　<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

　　<!-- 关于X-UA-Compatible -->

　　<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->

　　<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->

　　<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

　　浏览器内核控制：国内浏览器很多都是双内核(webkit和Trident)，webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。参考文档

　　<meta name="renderer" content="webkit|ie-comp|ie-stand">

　　国内双核浏览器默认内核模式如下：

　　1.搜狗高速浏览器、QQ浏览器：IE内核(兼容模式)

　　2. 360极速浏览器、遨游浏览器：Webkit内核(极速模式)

　　禁止浏览器从本地计算机的缓存中访问页面内容：这样设定，访问者将无法脱机浏览。

　　<meta http-equiv="Pragma" content="no-cache">

　　Windows 8

　　<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->

　　<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

　　站点适配：主要用于PC-手机页的对应关系。

　　<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">

　　<!--

　　[wml|xhtml|html5]根据手机页的协议语言，选择其中一种;

　　url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。

　　-->

　　转码申明：用百度打开网页可能会对其进行转码(比如贴广告)，避免转码可添加如下meta

　　<meta http-equiv="Cache-Control" content="no-siteapp" />

　　在SEO网站优化过程中应该知道网站的三大meta标签的重要性，这三种标签设置的好坏直接影响着网站后期的优化效果。下面品创天下就来和大家说说在SEO优化中如何运用meta标签。

　　meta标签之标题(Title)

　　网站的标题标签是三个之中最重要的一个，对于搜索引擎来说，这个要比关键词和描述标签重要，所以一定要把网站要做的核心关键词或者品牌以及公司的名称写上去，一般是以“关键词+公司名称或品牌”的格式写的，当然现在也有一些会写成一句话，包含我们想要的内容，这是一种新的形式，当然如何把这句话写的更合理，更能够吸引客户也是一个挑战。

　　meta标签之关键词(Keyword)

　　关键词标签相对来说没有其他两个标签重要，但是也要写，一般是把自己网站要做的关键词写进去，但是也有长度的限制，不能有多少写多少，更不能为了提高关键词密度而堆砌关键词。在设置的关键词最好把重要的放在前边，然后依次往后排序，一般是4个或者5个最好，关键词之间用英文的逗号隔开。

　　这个标签在过去很重要，但是现在却没什么价值了。现在没有一个主流的搜索引擎使用meta keywords来判断网页的内容了。在meta keywords标签里面，你可以存储几个关于网页内容的关键字。然而，它却不会提高你的排名。如果你想要实现它(尽管我不知道你为什么这样做)你可以用如下代码：

　　meta标签之Robots

　　Meta RobotsMeta robots标签管理着搜索引擎是否可以进入网页，你可以用它来允许或不允许搜索引擎来获取你的网页、进入你网页中的子链接或对你的网页存档。

　　这个 meta 标签告诉搜索引擎不要获取网页，并且阻止其进入链接。如果你不小心使用了两个矛盾的术语 (例如noindex 和index)，谷歌会选择最具限制性的选项。

　　为什么这个标签会对搜索引擎优化(SEO)起作用呢?首先，它可以防止对拷贝内容的冗余抓取，例如页面的打印版页面。它也可能会对那些内容不完整的页面或者而存在私密信息的网页起作用。

　　meta标签之描述(Description)

　　描述标签主要是向用户和搜索引擎展示我们的网站是做什么的，一个合格的描述标签需要包含公司名称、主要产品和关键词、联系电话，一些长尾词也是可以出现在描述中的，这个也是一个增加关键词的技巧。因为在搜索引擎上最多只能显示描述的80个字，所以尽量把字数保持在80个以内，如果真的需要超过80个，要把重要的信息放在前80个字中，这样就能够把重要的信息完整的展示出来。

　　这个标签曾经在搜索排名中占有很大的权重，但随着算法的不断的更新升级，它的地位也逐渐降低。它虽然不会提高网站排名，但是，因为它会被用在搜索引擎的结果页，所以依然有用。

　　这也就意味着它仍然可以提高你的网页点击率。毕竟，当用户搜索的关键词与之相匹配时，会以粗体显示突出显示。这就是为什么一个好的页面说明 (利用关键字的) 可以显示更多与用户相关的信息，进而提高了点击率。

　　简单的说，有三个meta标签，你应该关注一下：Description、robots、title(经常被视为是，但专业来讲不是)。Description标签被用来显示更多有关网页内容的信息，搜索引擎也会在搜索引擎结果页面(SERP)使用它。robots标签用来阻止搜索引擎获取拷贝页面、私密页面和未完成的页面。最后，最重要的title标签，控制它在70个字符以下，并在其中使用关键词

　　网站SEO优化之HTML meta标签常用属性整理

　　标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面)，搜索引擎(关键词)，或其他 web 服务。 —— W3School

　　必要属性

　　属性值描述

　　contentsome text定义与http-equiv或name属性相关的元信息

　　可选属性

　　属性值描述

　　http-equivcontent-type / expire / refresh / set-cookie把content属性关联到HTTP头部。

　　nameauthor / description / keywords / generator / revised / others把 content 属性关联到一个名称。

　　contentsome text定义用于翻译 content 属性值的格式。

　　网站SEO优化

　　页面关键词，每个网页应具有描述该网页内容的一组唯一的关键字。

　　使用人们可能会搜索，并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短，则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符。

　　<meta name="keywords" content="your tags" />

　　页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。

　　<meta name="description" content="150 words" />

　　搜索引擎索引方式，robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。确保正确使用nofollow和noindex属性值。

　　<meta name="robots" content="index,follow" /><!--

　　all：文件将被检索，且页面上的链接可以被查询;

　　none：文件将不被检索，且页面上的链接不可以被查询;

　　index：文件将被检索;

　　follow：页面上的链接可以被查询;

　　noindex：文件将不被检索;

　　nofollow：页面上的链接不可以被查询。

　　-->

　　页面重定向和刷新：content内的数字代表时间(秒)，既多少时间后刷新。如果加url,则会重定向到指定网页(搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚)。

　　<meta http-equiv="refresh" content="0;url=" />

　　其他

　　<meta name="author" content="author name" /> <!-- 定义网页作者 -->

　　<meta name="google" content="index,follow" />

　　<meta name="googlebot" content="index,follow" />

　　<meta name="verify" content="index,follow" />

　　移动设备

　　viewport：能优化移动浏览器的显示。如果不是响应式网站，不要使用initial-scale或者禁用缩放。

　　大部分4.7-5寸设备的viewport宽设为360px;5.5寸设备设为400px;iphone6设为375px;ipone6 plus设为414px。

　　<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

　　<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 -->

　　1.width：宽度(数值 / device-width)(范围从200 到10,000，默认为980 像素)

　　2.height：高度(数值 / device-height)(范围从223 到10,000)

　　3.initial-scale：初始的缩放比例 (范围从>0 到10)

　　4.minimum-scale：允许用户缩放到的最小比例

　　5.maximum-scale：允许用户缩放到的最大比例

　　6.user-scalable：用户是否可以手动缩 (no,yes)

　　7.minimal-ui：可以在页面加载时最小化上下状态栏。(已弃用)

　　注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

　　WebApp全屏模式：伪装app，离线应用。

　　<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

　　隐藏状态栏/设置状态栏颜色：只有在开启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" />

　　添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner(如下图)。参考文档

　　<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

　　<!-- 针对手持设备优化，主要是针对一些老的不识别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">

　　网站SEO优化之网页相关

　　申明编码

　　<meta charset='utf-8' />

　　优先使用 IE 最新版本和 Chrome

　　<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

　　<!-- 关于X-UA-Compatible -->

　　<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->

　　<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->

　　<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

　　浏览器内核控制：国内浏览器很多都是双内核(webkit和Trident)，webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。参考文档

　　<meta name="renderer" content="webkit|ie-comp|ie-stand">

　　国内双核浏览器默认内核模式如下：

　　1.搜狗高速浏览器、QQ浏览器：IE内核(兼容模式)

　　2. 360极速浏览器、遨游浏览器：Webkit内核(极速模式)

　　禁止浏览器从本地计算机的缓存中访问页面内容：这样设定，访问者将无法脱机浏览。

　　<meta http-equiv="Pragma" content="no-cache">

　　Windows 8

　　<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->

　　<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

　　站点适配：主要用于PC-手机页的对应关系。

　　<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">

　　<!--

　　[wml|xhtml|html5]根据手机页的协议语言，选择其中一种;

　　url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。

　　-->

　　转码申明：用百度打开网页可能会对其进行转码(比如贴广告)，避免转码可添加如下meta

　　<meta http-equiv="Cache-Control" content="no-siteapp" />