深入浅出meta标签

来源:本网整理

以及设置RASC内容等级,等等。组成:META标签可分为两大部分:HTTP-EQUIV和NAME 也就是中文简体字符。根据这一行代码,浏览器就可以识别出这个网页应该用中文简体字

s">

深入浅出meta标签

作者:佚名 字体:[增加 减小] 来源:互联网 时间:08-29 14:50:00 我要评论 meta标签是html网页源代码中非常重要的标签,下文重点给大家介绍html 中meta标签的知识,非常不错,感兴趣的朋友一起学习吧 ">

通常所说的META标签,是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等。

charset = gb2312 是简体中文UTF- 8 是国际编码如果你是在中国境内的话 最好就是用gb2312吧。会快先。 不容易出乱码

1、viewport XML/HTML Code复制内容到剪贴板

  1. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />   

网站头部是搜索引擎最先读取的部分,对搜素引擎蜘蛛抓取内容有着举足轻重的作用,特别是title和description这2个标签,这一部分主要注重Meta标签优化。 (一)、Title 1、网站标

(1)width  控制viewport的大小,可以指定一个值,如640或者特殊的值;device-width为设备的宽度(单位为缩放为100%的CSS的像素);

在网页的HTML源代码中一个重要的代码“<META>”(即通常所说的META标签)。 也就是中文简体字符。根据这一行代码,浏览器就可以识别出这个网页应该用中文简体字

(2)initial-scale  初始缩放比例,页面第一次加载时的缩放比例;

SEO的朋友都知道你如果在搜索引擎里输入一个关键字,搜索引擎就会检索出几百万甚至 让访客一看就想点击进 入。 META标签之description,也就是一个页面的描述标签。大家

(3)maximum-scale  允许用户缩放到的最大比例,范围从0到10.0;

。尽管现在的搜索引擎检索信息的决定搜索结果的排名很少依赖META标签中的内容,但 也就是中文简体字符。根据这一行代码,浏览器就可以识别出这个网页应该用中文简体字

(4)minimum-scale  允许用户缩放到的最小比例,范围从0到10.0;

在GOOGLE中也存在有一定的决定性作用,META标签在一个页面中的作用仅次于title。所以META标签的内容设计仍然是很重要的。 下面来和大家共同探讨META标签中keyw

(5)user-scalable  用户是否可以手动缩放,值可以是:yes或true允许用户缩放;no或false不允许用户缩放;

<head>和</head>里面包括 <meta>, <title>, <link>,<script> 等标记 至于位置 <meta>习惯写于<title>上面

2、content="IE=edge" XML/HTML Code复制内容到剪贴板

  1. <meta http-equiv="X-UA-Compatible" content="IE=edge">   

我也遇到过类似问题,可是我的网站比较小,所以当时就一个个改了!现在看到这里,正在学习中呢!我当时想写一个函数来实现,可是就像楼主的一样,最终出现问题了!

X-UA-Compatible是IE8的一个专有<meta>属性,它告诉IE8采用何种IE版本去渲染网页,在html的<head>标签中使用;

常用有下面三个<meta name="keywords" content=""></meta> 关键自,你可以在CONTENT里填写你网站的关键字,方便搜索引擎收录 <meta http

IE=edge,如果系统安装ie8或以上版本,则使用最高版本ie渲染;否则,这个设定可以忽略。

meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head>中 name 属性 1、<meta name="Generator" contect=

3、renderer

 

<meta name="renderer" content="webkit|ie-comp|ie-stand">

指定双核浏览器默认以何种方式渲染页面。

webkit  默认webkit内核;

ie-comp  默认IE兼容模式;

ie-stand  默认IE标准模式;

而webkit|ie-comp|ie-stand这种写法是按照顺序排他的优先级,不支持则往下,浏览器将会按照从左到右的先后顺序选择其具备的渲染内核来处理当前网页。

目前支持对其提供支持的浏览器有:360

4、apple-mobile-web-app-title XML/HTML Code复制内容到剪贴板

  1. <meta name="apple-mobile-web-app-title" content="博客园">   

在发送到屏幕的时候默认的命名

5、format-detection XML/HTML Code复制内容到剪贴板

  1. <meta name="format-detection" content="telephone=no" /> //告诉设备忽略将页面中的数字识别为电话号码   
  2.  <meta name="format-detection" content="email=no" /> //不让android识别邮箱  

扩展阅读,根据您访问的内容系统为您准备了以下内容,希望对您有帮助。

Meta标签与搜索引擎优化

 

Meta标签与搜索引擎优化 三联

当谈及到<meta>标签对搜索引擎排名的影响,很多人都存在误解。在过去,许多已经失去作用的标签仍然被频繁使用。所以哪些标签对搜索引擎优化(SEO)有作用,哪些没有呢?

什么是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">

html的meta标签、title 标签、Description标签、keyword 标签是什么概念呢?如果应用这些标签呢?

?“<META>”(即通常所说的META标签)。META标签用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等。??在有关搜索引擎注册、搜索引擎优化排名等网络营销方法内容中,通常都要谈论META标签的作用,我们甚至可以说,META标签的内容设计对于搜索引擎营销来说是至关重要的一个因素,尤其是其中的 “description”(网页描述)和“Keywords”(关键词)两个属性更为重要【参见网络营销教学网站的专文介绍:description Keywords 】。尽管现在的搜索引擎检索信息的决定搜索结果的排名很少依赖META标签中的内容,但META标签的内容设计仍然是很重要的。关于META标签中的HTTP-EQUIV?? HTML代码实例中有一项内容是??<meta http-equiv="Content-Type" content="text/html; charset=gb2312">??其作用是指定了当前文档所使用的字符编码为gb2312,也就是中文简体字符。根据这一行代码,浏览器就可以识别出这个网页应该用中文简体字符显示。类似地,如果 将 “gb2312”替换为“big5”,就是我们熟知的中文繁体字符了。??HTTP-EQUIV用于向浏览器提供一些说明信息,从而可以根据这些说明做出相应。HTTP-EQUIV其实并不仅仅只有说明网页的字符编码这一个作用,常用的HTTP-EQUIV类型还包括:网页到期时间、默认的脚本语言、默认的风格页语言、网页自动刷新时间等。关于META标签中的"description"?? HTML代码实例中有关"description"中的代码为:??<meta name="description" content="网络营销教学网站提供《网络营销基础与实践》教学支持:网络营销课件,网络营销论文,网络营销实验教学,电子商务论文,网络营销与电子商务书籍等">??"description"中的content="网页描述",是对一个网页概况的介绍,这些信息可能会出现在搜索结果中,因此需要根据网页的实际情况来设计,尽量避免与网页内容不相关的“描述”,另外,最好对每个网页有自己相应的描述(至少是同一个栏目的网页有相应的描述),而不是整个网站都采用同样的描述内容,因为一个网站有多个网页,每个网页的内容肯定是不同的,如果采用同样的description,显然会有一些网页内容没有直接关系,这样不仅不利于搜索引擎对网页的排名,也不利于用户根据搜索结果中的信息来判断是否点击进入网站获取进一步的信息。关于META标签中的"Keywords"??与META标签中的"description"类似,"Keywords"也是用来描述一个网页的属性,只不过要列出的内容是“关键词”,而不是网页的介绍。这就意味着,要根据网页的主题和内容选择合适的关键词。在选择关键词时,除了要考虑与网页核心内容相关之外,还应该是用户易于通过搜索引擎检索的,过于生僻的词汇不太适合做META标签中的关键词。关于META标签中关键词的设计,要注意不要堆砌过多的关键词,罗列大量关键词对于搜索引擎检索没有太大的意义,对于一些热门的领域(也就是说同类网站数量较多),甚至可能起到副作用。关于title就是你打开网页的标题。最小化时看到的显示的名称。

网页title标签与meta标签的重要性与写法探讨

  在SEO界,自从夫唯老师提出“四处一词”的概念以来,不管是搜索引擎还是SEOer,都格外重视页面的三个标签。三个标签书写是否成功,在很大程度上决定了网页是否能有好的排名。今天小生就与大家探讨一下,网站页面的三个标签怎么写有利于SEO。

  网页的三个标签分别是:title标签、keyword标签、description标签。

  对于用户来说,这三个标签中,只有title标签用户能直接在浏览窗口中看到,其他两个标签(也就是meta标签)必须要打开源码才能看到;另外,在搜索结果中,基本能看到title标签和description标签。

  对于搜索引擎来说,这三个标签都能看到,但是三个标签的重要程度是完全不一样的。下面我以聚途旅游网http://www.jutuw.com为实例,结合着搜索引擎对这三个标签的态度以及出现的位置,来探讨网站页面的三个标签怎么写有利于SEO。

网页title标签与meta标签的重要性与写法探讨 三联

  首先是title标签。title标签是用户与搜索引擎最看重的标签,它能帮助用户和搜索引擎判断当前页面的主旨和中心思想。

  (1)对搜索引擎来说,title标签中出现的关键词,基本就是该网页最想要表达的内容,因此我们在做SEO写title标签时,应当将当前页面最核心的关键词写进title标签中。

  (2)由于搜索引擎的权重分配是根据人们的常用习惯来计算,因此我们在添加关键词时需要注意两点:

  第一是越重要的关键词越要靠前写出来,如聚途旅游网首页的title标签的写法是:“旅游线路推荐_旅游报价_四川旅游权威网站_聚途旅游网——轻松出行倡导者”;

  第二是不能关键词叠加,如对于聚途旅游网首页,一定不能将title标签写成这样:“旅游,旅游网,旅游线路,旅游线路推荐,旅游报价,四川旅游,四川旅游网,四川旅游权威网站_聚途旅游网——轻松出行倡导者”。

  (3)语句通顺连贯。随着搜索引擎对中文语义的识别技术不断提高,搜索引擎正在不断将语义算法列入到权重和排名算法中,因此,简洁通顺的title标签,能给页面排名加分。

  (4)品牌词的处理。一般网站页面的title标签中都要跟上网站名称或网站品牌词。这里建议大家将品牌词放到title标签的最后,或者是重要的关键词已经出现完毕的后面。如果该页面想要突出网站品牌词,就把它放在title标签的最前面。请尽量不要将品牌词放到title标签的中间。

  (5)字数与个数*。一般title标签我们的建议是不要超过28个字,这是因为搜索引擎一般最多能显示28个字,另外还有就是字数太多,会容易让关键词权重分散。一般title标签中关键词的个数在3个以内比较合适,首页可以增加到5个。

  keyword标签曾经是搜索引擎非常看重的一个标签,因为它的作用是站长帮助搜索引擎识别网页主题。不过后来由于黑帽SEO的兴起,keyword标签目前已经被舍弃。但是,这并不意味着我们不再需要keyword标签了。

  keyword标签作为一种约定俗成的标准页面的一个重要标签,它是一定要写的。只不过,在写keyword标签时需要注意,请不要堆砌关键词,关键词之间用半角逗号隔开,关键词的个数不要超过5个。还有,不要寄希望keyword标签能为页面带来重要关键词排名。

  description标签很重要,不是因为它对SEO的影响有多大,而是因为它能在搜索结果页显示并关键词飘红,从而对用户体验有着巨大的影响力。 description标签建议根据title标签中的关键词来拓展描述,并且每个关键词都要完整出现一次。不要超过100个字,并且不要堆砌关键词,或写一些与页面毫无关系、页面中完全没有提到的内容。

  以上就是小生针对SEO这三个标签的写法的一些建议,希望能对新手站长优化网站有所帮助。本文首发于A5,于代明博客同步发布,转载请注明出处!

  • 本文相关:
  • HTML 文本格式化的简单实例(详解)
  • 细数html中的列表标签
  • HTML (css样式规范)必看篇
  • 浅谈HTML代码中的空格和空行
  • 全面了解html.css溢出
  • htm初学笔记(新手必看)
  • HTML中文件上传时使用的<input type="file">元素的样式自定义
  • 关于input的file 控件及美化
  • Html/Css(新手入门第一篇必看攻略)
  • HTML 隐藏滚动条和去除滚动条的方法
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved