菜单

Meta 标签以及追寻引擎优化

2018年11月15日 - CSS/CSS3

Meta 标签和寻找引擎优化

2016/01/08 · HTML5 ·
Meta

原稿出处:
静子(@静-如秋叶)   

当谈及到<meta>签对寻找引擎排名之震慑,很多总人口犹存在误会。在过去,许多业已错过作用的竹签还让一再使用。所以怎么标签对找引擎优化(SEO)有作用,哪些没有也?

<meta charset="UTF-8"> 
<meta http-equiv="refresh" content="5;url=" />
<link rel="copyright" href="copyright.html"  />
<meta http-equiv="X-UACompatible" 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标签为寻找引擎提供了重重关于网页的音讯。这些信息都是富含信息,意味着对网页自身之访问者是不可见的。

您得在网页的 <head>素中发觉<meta>签。在过去,有人曾经问我她是不是可以放在网页的<body>,最好不要这么做。如果<meta>签让在<body>职,某些浏览器可能无法辨别它们,也尽管一定给您创造了没用的价签。

日常情况下,<meta> 标签会包含一个name特性,用来安装元数据。元数据的值在content性能之中。你得以<meta>签中动用各种名目/值对,让我们来瞧其中的片段。

原文:
http://www.w3cplus.com/html5/meta-tags-and-seo.html

您得见面赶上一些Meta标签

为我们运行一下在一个网页遭到发现的几独例外的 <meta> 标签。

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签吗空时,会发啊啊?搜索引擎仍会当摸索结果页显示出自己创键的均等多少截文字。大多数的结果还非是用户需之,也尽管代表你拿错过用户点击网页的火候。

Meta Robots

咱俩以前面的教程遭一度点了Meta
robots标签。如果你没机会回到看它们,这里产生同段子简短的介绍:

Meta
robots标签管理方摸引擎是否可入网页,你可就此它来允许或不允许搜索引擎来博你的网页、进入你网页中的子链接或对君的网页存档。例如:

JavaScript

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

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

这个 meta 标签告诉搜索引擎不要抱网页,并且阻止该进入链接。如果您不小心使用了简单单矛盾的术语
(例如noindex 和index),谷歌会选择最好富有限制性的精选项。

怎这标签会指向寻找引擎优化(SEO)起作用为?首先,它可以防止对拷贝内容的冗余抓到手,例如页面的于印版页面。它呢恐怕会见针对那些内容无完的页面或者只要留存私密信息的网页打作用。

Title

标准的出口,title签不是meta标签,但她俩都位于同等位置。我所以把title标签放在此处是坐其对寻找引擎优化很重要。

在备的HTML文档中,title标签都是不足少的。它定义了全套文档的题目,如下所示:

JavaScript

<title>Title of the page</title>

1
<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代码:

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标签。

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

Notranslate

奇迹,Google在结果页面会提供一个翻链接,但有时你免期望出现这链接,你得加上这样一个meta标签:

XHTML

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

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

Refresh

运是meta签而得控制浏览器在一段时间之后自动刷新。举例说明,下面的代码表示每隔30秒网页自动更新:

XHTML

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

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

您为堪于刷新后过反至另外一个页面,看看下面这个事例:

XHTML

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

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

W3C是无推荐下这标签的,因为她会叫用户有迷惑。另外,它对找排行没有任何影响。

总结

简短的游说,有三只meta标签,你应该关爱一下:descriptionrobotstitle(经常吃视为是,但规范来讲不是).

description标签为用来显示更多关于网页内容的音讯,搜索引擎也会在寻觅引擎结果页面(SERP)使用她。robots签从而来遮搜引擎获取拷贝页面、私密页面及不成功的页面。最后,最要紧之title标签,控制它们当70独字符以下,并以内部以主要词。

keywords标签的秋已经过去,最好不在动其。其他组成部分于重大之竹签(有关搜索引擎优化):languagecontentrefreshnontranslate

相关的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”>

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

相关文章

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图