什么是Meta标签？

Meta标签给搜索引擎提供了许多关于网页的信息，这些信息都是隐含信息,意味着对于网页自身的访问者是不可见的。

你可以在网页的 <head>元素中发现<meta>标签。在过去有人曾经问我它是否可以放在网页的<body>，最好不要这样做。如果<meta>标签被放在<body>位置，某些浏览器可能无法识别它们，也就相当于你创建了无效的标签。

通常情况下，<meta> 标签会包含一个name属性，用来设置元数据。元数据的值放在content属性里面。你可以在<meta>标签中使用各种名称/值对，让我们来看看其中的一些。

你可以会遇到一些Meta标签

让我们运行一下在一个网页中发现的几个不同的 <meta> 标签。

Meta Description

Meta description标签可能是最有用的标签之一。顾名思义，它会给搜索引擎提供关于这个网页的简短的描述。代码如下：

  • <meta name=”description”content=”Everything you need toknow about meta tags forsearch 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个字符，所以偶尔你可能需要书写一个合适的标题。

Dan Shure发表过一篇很不错的关于标题的文章，叫are your titles irresistibly click worthy and viral?，包含了很多有意思的知识点。

其它一些Meta标签

讲解了一些常用的meta标签，下面让我们来看一些不经常使用的。

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"/>

但这看起来是多余的，W3C推荐使用标签的属性来声明语言：

  • <html lang="en">

如果这个元素所包含内容的语言和你在<html>元素设置的默认语言不一样时,这个属性也能应用到其他元素上：

  • <p lang="es">Megusta..

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标签，你应该关注一下：description、robots、title(经常被视为是，但专业来讲不是).

description标签被用来显示更多有关网页内容的信息，搜索引擎也会在搜索引擎结果页面(SERP)使用它。robots标签用来阻止搜索引擎获取拷贝页面、私密页面和未完成的页面。最后，最重要的title标签，控制它在70个字符以下，并在其中使用关键词。

keywords标签的时代已经过去，最好不在使用它。其他一些比较重要的标签(有关搜索引擎优化)：language、content、refresh、nontranslate。

相关的meta设置 XHTML

<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">

什么是Meta标签？ 哪些Meta标签对搜索引擎SEO优化有作用？的更多相关文章

  1. html的meta总结，html标签中meta属性使用介绍

    引用:http://www.haorooms.com/post/html_meta_ds 前言 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta ...

  2. html标签中meta属性使用介绍

    前言 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用 ...

  3. 移动前端头部标签(HTML5 meta)

    在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码 <!DOCTYPE html>  使用 HTML5 doctype,不区分大小写 <he ...

  4. SEO优化之Title 和 Meta 标签

    对搜索引擎最友好(Search Engine Friendly)的网页是静态网页,但大部分内容丰富或互动型网站都不可避免采用到相关技术语言来实现内容管理和交互功能.SEO 思想指导下的技术支持,主要是 ...

  5. 移动端的头部标签和meta

    <!DOCTYPE html><!--HTML5 doctype--> <html> <head> <title>xxx</title ...

  6. h5标签基础 meta标签

    <meta>标签位于<head>标签里面,具体作用有如下: 1.设置网页编码 eg: <meta charset="utf-8"/>  ,//u ...

  7. <meta> 标签 和<title> 标签

    <meta> 标签 主流浏览器都支持 <meta> 标签. 标签定义及使用说明 元数据(Metadata)是数据的数据信息. <meta> 标签提供了 HTML 文 ...

  8. 【转】vue中动态设置meta标签和title标签

    因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 { path: '/teachers', name ...

  9. 一个由SEO优化展开的meta标签大讲解

    您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中登录自己的个人网站 ● 在知名网站加入你个人网站 ...

随机推荐

  1. Objective-C基础知识之“类”

    Objective-C语言是iOS开发的专用语言,虽然现在在逐步被swift语言取代,但是仍可以作为基础学习,学会Objective-C之后入手swift也是相当快速.今天我来简谈一下关于OC中的类. ...

  2. vux使用过程中遇到的问题

    1.使用confirm.prompt组件时,ios下点击输入框很难获得焦点 解决思路:使用confirm.show方法,自定义content内容,show方法里面设置input的focus方法 let ...

  3. 【转】C#计算两坐标点距离

    //地球半径,单位米 ; /// <summary> /// 计算两点位置的距离,返回两点的距离,单位 米 /// 该公式为GOOGLE提供,误差小于0.2米 /// </summa ...

  4. cookie、localstorage、sessionstorage区别

      localstorage sessionsorage cookie 大小 浏览器不能保存超过300个cookie,单个服务器不能超过20个,每个cookie不能超过4k 可以达到5M 可以达到5M ...

  5. 大数据学习之Hadoop运行模式

    一.Hadoop运行模式 (1)本地模式(默认模式): 不需要启用单独进程,直接可以运行,测试和开发时使用. (2)伪分布式模式: 等同于完全分布式,只有一个节点. (3)完全分布式模式: 多个节点一 ...

  6. python教程（四）·序列

    距离上次的小项目已经休息了很长一段时间,是时候来继续本系列教程了.这一节开始我们将深入python中的数据结构. 序列的概念 在python中,最基本的数据结构是序列,序列包含一个或多个元素,每个元素 ...

  7. 基于Doxygen_C语言代码文档一键生成的记录与规范(嵌入式适用)

    下位机代码格式规范整合记录 注册 doxygen 账号获取doxygen 的 *.exe 执行文件 https://pan.baidu.com/s/1MF5v-Ts80BysmZtXSqONmg 提取 ...

  8. js判断两个日期是否相等的方法

    今天优化代码的时候,发现一个问题,js比较日期是否相等时,我用==去比较,发现两个时间不相等但是运行结果却是true,然后去百度了下发现oldStartTime, startTime都是对象,类型为引 ...

  9. 20155224 2016-2017-2 《Java程序设计》第4周学习总结

    20155224 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 第六章主要学习了子类与父类的继承. 先定义一个程序,另一程序可继承他 如: publ ...

  10. 20155224聂小益 2016-2017-2 《Java程序设计》第1周学习总结

    20155224聂小益 2016-2017-2 <Java程序设计>第1周学习总结 教材学习内容总结 第一章 第一章内容不是很多,主要介绍了Java发展历程与Java的使用平台. JVM: ...