>

Meta标签怎么用,标签与追寻引擎优化

- 编辑:至尊游戏网站 -

Meta标签怎么用,标签与追寻引擎优化

Meta 标签与搜索引擎优化

2016/01/08 · HTML5 · Meta

原版的书文出处: 静子(@静-如秋叶)   

当谈及到<meta>标签对搜索引擎排行的震慑,很几个人都设有误会。在过去,非常多早就失去意义的价签还是被频仍使用。所以什么标签对寻找引擎优化(SEO)有成效,哪些未有吗?

Meta标签有三个标签(<meta name=”description” content=””><meta name=”keywords” content=””>)总会用到,但Meta标签不止独有那四个,那么常用用Meta标签有如何,以至Meta标签所对应的效果与利益又是什么样,上面就给我们介绍下Meta标签。

什么是Meta标签

Meta标签给寻觅引擎提供了重重有关网页的消息。那些音讯都以富含音讯,意味着对于网页自个儿的访谈者是不可知的。

您能够在网页的 <head>要素中开采<meta>标签。在过去,有人曾经问作者它是还是不是足以放在网页的<body>,最佳不用那样做。假设<meta>标签被放在<body>地点,某个浏览器大概不能够辨认它们,也就相当于您创建了不算的竹签。

常见状态下,<meta> 标签会富含叁个name品质,用来安装元数据。元数据的值放在content品质之中。你能够在<meta>标签中使用各样名目/值对,让我们来探问里面包车型客车有些。

细心:<meta> 标签永世位于 head 成分内部;<meta>标签有两天天性name和http-equiv。

你能够会遇到有个别Meta标签

让大家运营一下在三个网页中发觉的多少个不等的 <meta> 标签。

name属性
大家见得最多的name属性就是keywords和descripion了,除了那七个最常用的属性外name属性还恐怕有别的一些属性。

Meta Description

Meta description标签也许是最有效的价签之后生可畏。以点带面,它会给寻找引擎提供有关那一个网页的轻便的陈诉。代码如下:

JavaScript

<meta name=”description” content=”Everything you need to know about meta tags for search engine optimization”/>

1
<meta name=”description” content=”Everything you need to know about meta tags for search engine optimization”/>

其风流洒脱标签曾在物色排名中占领十分的大的权重,但随着算法的连绵不断的换代进步,它的地位也渐渐减退。它固然不会增高网址排行,然则,因为它会被用在搜索引擎的结果页,所以依旧有效。

那也就意味着它还是能加强你的网页点击率。终归,当客商搜索的首要词与之相相配时,会以粗体突显优秀呈现。那便是干什么四个好的页面表明(利用重大字的) 能够体现越来越多与客商相关的消息,进而加强了点击率。推荐的description长度为160 个字符。

而是假如您未有接受description标签大概description标签为空时,会生出哪些吧?寻找引擎仍会在追寻结果页显示出自身创键的一小段文字。大比较多的结果都不是顾客要求的,也就象征你将失去客商点击网页的空子。

1、name=”viewport”
表达:在活动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 能够禁止使用其缩放(zooming)作用。那样禁止使用缩放作用后,顾客只好滚动显示器,就能够让您的网址看上去更像原生应用的痛感。注意,这种形式大家并不引入全部网址使用,照旧要看你和睦的情景而定!

Meta Robots

我们在事先的教程中曾经触发过Meta robots标签。要是您未有时机回到阅读它,这里有日新月异段简短的牵线:

Meta robots标签管理着找找引擎是还是不是足以踏向网页,你能够用它来允许或不容许搜索引擎来获得你的网页、进入你网页中的子链接或对你的网页存档。比方:

JavaScript

<meta name=”robots” content=”noindex, nofollow” />

1
<meta name=”robots” content=”noindex, nofollow” />

这个 meta 标签告诉寻找引擎不要获取网页,况且阻止其跻身链接。假如您十分大心使用了八个冲突的术语 (比如noindex 和index),Google会选取最具限制性的选项。

为啥这几个标签会对寻觅引擎优化(SEO)起效果吗?首先,它能够预防对拷贝内容的冗余抓取,举例页面包车型客车打字与印刷版页面。它也说不定会对那个剧情不完整的页面恐怕而存在私密音信的网页起效果。

用法:<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

Title

专门的职业的讲,title标签不是meta标签,但她们都放在同等地方。我为此把title标签放在这里处是因为它对寻觅引擎优化很入眼。

在富有的HTML文书档案中,title标签皆以不行缺点和失误的。它定义了方方面面文书档案的题目,如下所示:

JavaScript

<title>Title of the page</title>

1
<title>Title of the page</title>

简单来说而实用。标题日常会显得在八个例外的地方;浏览器的头顶标签和搜索结果页。那就意味着title标签在点击率(CT福睿斯)和排名上有十分重大的熏陶。

贰个好的标题应该包罗关键字,并且最佳放在题指标始发部分。请牢记,那个相配到顾客寻找的尤为重要字会以粗体呈现。

另风度翩翩件你应当牢记在心的事体正是标题标尺寸。谷歌(Google)会限制题目为70个字符,所以临时候你可能须要书写一个合适的标题。

Dan Shure发表过一篇十分不利的关于题指标作品,叫are your titles irresistibly click worthy and viral?,满含了点不清有趣的知识点。

2、name=”description”
表明:这里是网页的描述,是给搜索引擎看的,找寻引擎依据那个描述实行录取排行,日常是网页内的首要字。

别的一些Meta标签

传授学识了有个别常用的meta标签,下边让大家来看一些不平日应用的。

用法:<meta name=”description” content=””>

Meta Content Type (charset)

meta content type标签被用来声称网页的字符编码,为了以免浏览器产生编码难点最棒增加这天性子。但是它不会耳闻则诵找寻排行或点击率(CTLacrosse)。

您或许很熟悉下边长长的Content-type代码:

JavaScript

<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>

1
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>

当今大家也能够利用更轻巧的、向后特别的扬言格局:

JavaScript

<meta charset="utf-8" />

1
<meta charset="utf-8" />

那个标签应该放在别的带有文本元素的竹签从前,富含我们早就疏解的title标签。

3、name=”keywords”
证实:keywords用来报告寻觅引擎你网页的显要字是什么样,换句话说正是您的网址宗旨,从一定意义上的话keywords与description其实它们的成效是如出日新月异辙的(杰出网站主旨),但她俩又有所不一致(在检索结果页的显示)。

Meta Keywords

这么些标签在过去很主要,不过未来却没什么价值了。未来还未有一个主流的搜索引擎使用meta keywords来判断网页的剧情了。

在meta keywords标签里面,你能够储存多少个有关网页内容的显要字。然则,它却不会提升你的排行。要是您想要达成它(尽管小编不知道你干什么这么做)你能够用如下代码:

JavaScript

<meta name=”keywords” content=”meta tags,search engine optimization” />

1
<meta name=”keywords” content=”meta tags,search engine optimization” />

用法:<meta name=”keywords” content=””>

Meta Language

以此标签此前是用来声称网页的言语的。能够告知显示器阅读器和其余文本管理器他们正在管理的语言以便更加好的做事。那正是为何meta language的content注解为啥可以为fr。

JavaScript

<meta http-equiv="content-language" content="fr" />

1
<meta http-equiv="content-language" content="fr" />

但这看起来是多余的,W3C引入应用标签的性子来声称语言:

XHTML

<html lang="en">

1
<html lang="en">

假定这些因素所包括内容的言语和您在<html>要素设置的暗中认可语言分裂时,那本性情也能利用到任何因素上:

XHTML

<p lang="es">Me gusta..

1
<p lang="es">Me gusta..

4、name=”author”
声明:表明网址小编是什么人

Notranslate

神蹟,谷歌在结果页面会提供三个翻译链接,但神跡你不指望出现这么些链接,你能够增进那样四个meta标签:

XHTML

<meta name=”google” content=”notranslate” />

1
<meta name=”google” content=”notranslate” />

用法:<meta name=”author” content=”晨鸟”>

Refresh

动用那一个meta标签你能够垄断(monopoly)浏览器在风姿浪漫段时间之后自动刷新。比方表达,上面包车型客车代码表示每间距30秒网页自动更新:

XHTML

<meta http-equiv=”refresh” content=”30”>

1
<meta http-equiv=”refresh” content=”30”>

您也能够在刷新之后跳转到其余二个页面,看看上面那几个例子:

XHTML

<meta http-equiv=”refresh” content=”30;URL=’;

1
<meta http-equiv=”refresh” content=”30;URL=’http://website.com’”>

W3C是不引入应用那个标签的,因为它会令客商发生吸引。此外,它对寻觅排行未有别的影响。

5、name=”copyright”
证实:标记网站的版权新闻

总结

粗略的说,有几个meta标签,你应当关心一下:descriptionrobotstitle(平时被视为是,但规范来说不是).

description标签被用来体现越多关于网页内容的音信,寻找引擎也会在搜寻引擎结果页面(SERP)使用它。robots标签用来阻止搜索引擎获取拷贝页面、私密页面和未产生的页面。最终,最关键的title标签,调节它在70个字符以下,并在中间使用首要词。

keywords标签的时日已经归西,最棒不在使用它。别的一些相比较关键的标签(有关搜索引擎优化):languagecontentrefreshnontranslate

用法:<meta name=”copyright” content=”晨鸟”>

相关的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=myULX570L" /> <!-- 增多智能 App 广告条 斯马特 App Banner:告诉浏览器那个网址对应的app,并在页面上显得下载banner: --> <!-- 针对手持设备优化,重假若指向有的老的不识别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">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<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">

1 赞 10 收藏 评论

图片 1

6、 name=”robots”
证实:robots用来告诉寻找机器人如何页面须要索引,哪些页面没有须要索引。content的参数有all,none,index,noindex,follow,nofollow。私下认可是all。

用法:<meta name=”robots” content=”all”>

http-equiv属性
http-equiv也正是http的文书头功用,它能够向浏览器传回一些实用的音讯,以赞助科学和规范地出示网页内容,与之相应的属性值为content,content中的内容实在正是各类参数的变量值。

meta标签的http-equiv属性语法格式是:<meta http-equiv=”参数” content=”参数变量值”>

1、Refresh(刷新)
表明:自动刷新并转到新页面。

用法:<meta http-equiv=”Refresh” content=”5;UXC60L”>;(注意前面包车型地铁引号,分别在秒数的眼下和网站的前边,U奥迪Q3L可为空)

专一:个中的2是指停留2分钟后自动刷新到U卡宴L网站。

2、content-Type(显示字符集的设定)
表明:设定页面使用的字符集。

用法:<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″>

只顾:在HTML5中早就简写成<meta charset=”utf-8″>

3、Window-target(突显窗口的设定)
表达:强制页面在时下窗口以单身页面显示。

用法:<meta http-equiv=”Window-target” content=”_top”>

介意:用来防护外人在iframe(框架)里调用自身的页面,那也算是贰个可怜实用的质量。

4、Set-Cookie(cookie设定)
证实:要是网页过期,那么存盘的cookie将被删去。

用法:<meta http-equiv=”Set-Cookie” content=”cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/”>

介意:必需使用丙胺搏来霉素T的时光格式。

5、Pragma(cache模式)
表达:禁绝浏览器从地点Computer的缓存中访谈页面内容。

用法:<meta http-equiv=”Pragma” content=”no-cache”>

只顾:那样设定,报事人将不能脱机浏览。

6、Expires(期限)
注解:能够用来设定网页的到期时间。风流罗曼蒂克旦网页过期,必得到服务器上海重机厂新传输。

用法:<meta http-equiv=Expires Content=0>

用法:<meta http-equiv=”expires” content=”Fri,12 Jan 2001 18:18:18 GMT”>

注意:必得利用博来霉素T的小时格式,或直接设为0(数字代表有一些时间后过期)。

对于怎么着设置mate标签技术让追寻引擎更赏识,更有利SEO优化,作者个人以为与网站优化有关的习性首如果keywords和descripion,其余的习性对于优化中央没多大帮扶,所以keywords和descripion的安装就极度首要了!而对此这两特性格的装置也是因网址而异的,也不可能一碗水端平,keywords和descripion的设置须求作全面包车型客车剖析本事搜查缴获的。

本文由IT-综合发布,转载请注明来源:Meta标签怎么用,标签与追寻引擎优化