什么是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. Python -- Effective Python：编写高质量Python代码的59个有效方法

    第 1 章 用 Pythonic 方式来思考 第 1 条:确认自己所用的 Python 版本 python --version import sys print(sys.version_info) p ...

  2. 浅谈nodejs中HTTP模块应用

    这里给大家分享下后端人员如果利用nodejs对数据的一些处理情况  适用于初学者使用 大牛勿喷 给大家分享下主要后端思想部分代码,前端部分就不展示了 const http = require(&quo ...

  3. golang总结-Redis整合

    目录 1. 基本用法 2. Redis连接池 go get github.com/gomodule/redigo/redis 1. 基本用法 获取连接 package conn import ( &q ...

  4. PHP实现单文件、多文件上传 封装 面向对象实现文件上传

    文件上传配置 客户端配置 1.表单页面 2.表单的发送方式为post 3.添加enctype = "multipart/form-data" <form action=&qu ...

  5. 调试日志——基于stm32的智能声光报警器（三）

    智能声光报警器基本功能调试完成. 1.通过拨码开关来设置LED闪烁的频率. 2.关门时喇叭不想,灯熄灭. 3.旁路模式时,灯处于闪烁状态,此时关门灯扔闪烁. 关于此次代码我觉得还是有可以优化的地方,电 ...

  6. Executors 挖坑

    Executors 挖坑 线程频繁的创建销毁是有代价的,所以Java为我们提供了线程池 线程池构造方法很多 我们一般使用Executors的工厂方法: public static ExecutorSe ...

  7. express-session deprecated undefined resave option; provide resave option app.js

    nodejs使用express-session报错 代码如下 app.use(session({ secret: 'hubwiz app', //secret的值建议使用随机字符串 cookie: { ...

  8. IDEA常见错误解决

    tomcat控制台乱码 在tomcat的edit configurations里加入参数:-Dfile.encoding=UTF-8   导入的项目在重写时报 @Override is not all ...

  9. 20170607 JDBC课堂实践 任务四

    20170607 JDBC课堂实践 任务四 题目 查询world数据库,查询哪个国家的平均寿命最长. 码云链接 SQL语句 SELECT Code, Name, LifeExpectancy FROM ...

  10. 20155239 实验四 Android程序设计

    20155239 实验四 Android程序设计 目录 第24章:初识Android 任务一: 完成Hello World, 要求修改res目录中的内容,Hello World后要显示自己的学号 学习 ...