Meta标签怎么用,标签与搜索引擎优化

作者: 前端知识  发布:2019-07-18

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标签被用来声称网页的字符编码,为了防止浏览器产生编码难点最棒增加那个本性。可是它不会影响寻觅排名或点击率(CTRAV4)。

您恐怕很驾驭上边长长的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

一时,Google在结果页面会提供二个翻译链接,但不时候你不期待出现那个链接,你可以加上那样三个meta标签:

XHTML

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

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

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

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=’;

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=myUOdysseyL" /> <!-- 增添智能 App 广告条 Smart 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;UCRUISERL”>;(注意后边的引号,分别在秒数的先头和网站的末尾,URAV4L可为空)

本文由金沙澳门官网发布于前端知识,转载请注明出处:Meta标签怎么用,标签与搜索引擎优化

关键词: 金沙澳门官网

上一篇:调试移动端页面,移动前端调试页面
下一篇:没有了