音效素材网提供各类素材,打造精品素材网站!

站内导航 站长工具 投稿中心 手机访问

音效素材

什么是Meta标签? 哪些Meta标签对搜索引擎SEO优化有作用?
日期:2016-01-12 16:41:04   来源:脚本之家

搜索引擎优化 SEO优化 网站优化 META标签

什么是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优化有作用全部内容的介绍,更多内容请继续关注!

    您感兴趣的教程

    在docker中安装mysql详解

    本篇文章主要介绍了在docker中安装mysql详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编...

    详解 安装 docker mysql

    win10中文输入法仅在桌面显示怎么办?

    win10中文输入法仅在桌面显示怎么办?

    win10系统使用搜狗,QQ输入法只有在显示桌面的时候才出来,在使用其他程序输入框里面却只能输入字母数字,win10中...

    win10 中文输入法

    一分钟掌握linux系统目录结构

    这篇文章主要介绍了linux系统目录结构,通过结构图和多张表格了解linux系统目录结构,感兴趣的小伙伴们可以参考一...

    结构 目录 系统 linux

    PHP程序员玩转Linux系列 Linux和Windows安装

    这篇文章主要为大家详细介绍了PHP程序员玩转Linux系列文章,Linux和Windows安装nginx教程,具有一定的参考价值,感兴趣...

    玩转 程序员 安装 系列 PHP

    win10怎么安装杜比音效Doby V4.1 win10安装杜

    第四代杜比®家庭影院®技术包含了一整套协同工作的技术,让PC 发出清晰的环绕声同时第四代杜比家庭影院技术...

    win10杜比音效

    纯CSS实现iOS风格打开关闭选择框功能

    这篇文章主要介绍了纯CSS实现iOS风格打开关闭选择框,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作...

    css ios c

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的办法

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的

    Win7给电脑C盘扩容的办法大家知道吗?当系统分区C盘空间不足时,就需要给它扩容了,如果不管,C盘没有足够的空间...

    Win7 C盘 扩容

    百度推广竞品词的投放策略

    SEM是基于关键词搜索的营销活动。作为推广人员,我们所做的工作,就是打理成千上万的关键词,关注它们的质量度...

    百度推广 竞品词

    Visual Studio Code(vscode) git的使用教程

    这篇文章主要介绍了详解Visual Studio Code(vscode) git的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。...

    教程 Studio Visual Code git

    七牛云储存创始人分享七牛的创立故事与

    这篇文章主要介绍了七牛云储存创始人分享七牛的创立故事与对Go语言的应用,七牛选用Go语言这门新兴的编程语言进行...

    七牛 Go语言

    Win10预览版Mobile 10547即将发布 9月19日上午

    微软副总裁Gabriel Aul的Twitter透露了 Win10 Mobile预览版10536即将发布,他表示该版本已进入内部慢速版阶段,发布时间目...

    Win10 预览版

    HTML标签meta总结,HTML5 head meta 属性整理

    移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析HTML代码,更好地将移动web前端页面表现出来...

    移动端html5模拟长按事件的实现方法

    这篇文章主要介绍了移动端html5模拟长按事件的实现方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家...

    移动端 html5 长按

    HTML常用meta大全(推荐)

    这篇文章主要介绍了HTML常用meta大全(推荐),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参...

    cdr怎么把图片转换成位图? cdr图片转换为位图的教程

    cdr怎么把图片转换成位图? cdr图片转换为

    cdr怎么把图片转换成位图?cdr中插入的图片想要转换成位图,该怎么转换呢?下面我们就来看看cdr图片转换为位图的...

    cdr 图片 位图

    win10系统怎么录屏?win10系统自带录屏详细教程

    win10系统怎么录屏?win10系统自带录屏详细

    当我们是使用win10系统的时候,想要录制电脑上的画面,这时候有人会想到下个第三方软件,其实可以用电脑上的自带...

    win10 系统自带录屏 详细教程

    + 更多教程 +
    网站运营微信营销网络赚钱