META标签的设置

定义及用法

⑴<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

⑵<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

⑶元数据(metadata)是关于数据的信息。元数据总是以名称/值的形式被成对传递的。

⑷典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

⑸元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

可选属性

![技术图片]()

注意:当有http-equiv或者name属性时,必须要有content属性,content 属性提供了名称/值对中的值,content属性定义与 http-equiv 或 name 属性相关的元信息。content始终要和 name 属性或 http-equiv 属性一起使用。

name属性

⑴定义元数据的名称,与content属性包含的值相关联。html 和 Xhtml 标签都没有指定任何预先定义的 <meta> 名称。通常情况下,您可以自由使用对自己和源文档的读者来说富有意义的名称。

⑵application-name:定义正运行在该网页上的网络应用名称

•简单的网页不应该去定义
⑶author:文档的作者名称

⑷description:内容的简短和精确描述,一些浏览器,如Firefox和Opera,将其用作书签页面的默认描述。

⑸generator:生成页面的软件的标识符

⑹keywords:用逗号分隔的与页面内容相关的单词

⑺referrer:控制所有从该页面发出的HTTP请求中referer首部的内容。

⑻content取值:

![技术图片]()

⑼creator:文档创建者的名称,可以是机构的名称,有多个的话必须定义多个meta

⑽googlebot:robots谷歌的索引抓取工具Googlebot 的同义词,只适用于google

⑾publisher:以自由格式定义文档发布者的名称,可以是机构的名称。

⑿robots:定义协作爬虫应该与页面的行为,以逗号分隔的值的列表。
![技术图片]()

⒀slurp:与robots一样, 但其仅使用于 Slurp – Yahoo Search的抓取工具。

⒁rebderer:为双核浏览器准备,用于指定双核浏览器默认以何种方式渲染页面

⒂viewport:提供有关视口初始大小的提示,仅供移动设备使用。

![技术图片]()

http-equiv

指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

⑴content-language:定义页面使用的默认语言
•尽量使用全剧属性lang来代替

⑵content-security-policy:允许页面作者定义当前页的 内容策略。 内容策略主要指定允许的服务器源和脚本端点,这有助于防止跨站点脚本攻击。

⑶content-type:定义文档的MIME type
•使用charset代替

⑷default-style:指定了在页面上使用的首选样式表

⑸refresh
•如果content只包含一个正整数,则是重新载入页面的时间间隔
•如果content包含一个正整数并且跟着一个字符串,则是重定向到指定链接的时间间隔

⑹set-cookie:为页面定义cookie
•该用HTTP的Set-Cookie代替

移动端meta标签配置

控制显示区域各种属性

&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=0,user-scalable=no&quot;&gt;

⑴width - viewport的宽度(范围从 200 到 10,000,默认为 980 像素)

⑵height – viewport的高度(范围从 223 到 10,000 )

⑶initial-scale - 初始的缩放比例(范围从 > 0 到 10)

⑷minimum-scale - 允许用户缩放到的最小比例

⑸maximum-scale – 允许用户缩放到的最大比例

⑹user-scalable – 用户是否可以手动缩放(no,yes)

1.http-equiv 属性的 Content-Type 值(显示字符集的设定)

说明:设定页面使用的字符集,用以说明主页制作所使用的文字语言,浏览器会根据此来调用相应的字符集显示 page 内容。

用法:

&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;

注意:该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ,就是万国码。它可以在同一页面显示中文简体、繁体及其它语言(如日文,韩文)等。

2.name 属性设置作者姓名及联系方式

&lt;meta name=&quot;author&quot; contect=&quot;liudanyun, liudy102@163.com&quot; /&gt;

3.忽略将数字变为电话号码:

&lt;meta content=&quot;telephone=no&quot; name=&quot;format-detection&quot;&gt;

一般情况下,IOS和Android系统都会默认某长度内的数字为电话号码,即使不加也是会默认显示为电话的,so,取消这个很有必要!

4.IOS中Safari允许全屏浏览:

&lt;meta content=&quot;yes&quot; name=&quot;apple-mobile-web-app-capable&quot;&gt;

5.IOS中Safari顶端状态条样式:

&lt;meta content=&quot;black&quot; name=&quot;apple-mobile-web-app-status-bar-style&quot;&gt;

6.使用特殊链接:

如果你关闭自动识别后 ,又希望某些电话号码能够链接到 iPhone 的拨号功能 ,那么可以通过这样来声明电话链接 ,

&lt;a href=&quot;tel:12345654321&quot;&gt;打电话给我&lt;/a&gt;
&lt;a href=&quot;sms:12345654321&quot;&gt;发短信&lt;/a&gt;

或用于单元格:

&lt;td onclick=&quot;location.href=‘tel:122‘&quot;&gt;

电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

meta标签常用的写法

&lt;meta charset=&quot;utf-8&quot;&gt; &lt;!-- 设置文档字符编码 --&gt;
&lt;meta http-equiv=&quot;x-ua-compatible&quot; content=&quot;ie=edge&quot;&gt;&lt;!-- 告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。 --&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;&lt;!-- 指定页面初始缩放比例。--&gt;

&lt;!-- 上述3个meta标签须放在head标签最前面;其它head内容放在其后面,如link标签--&gt;

&lt;!-- 允许控制加载资源 --&gt;
&lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;default-old-src ‘self‘&quot;&gt;
&lt;!-- 尽可能早的放在文档 --&gt;
&lt;!-- 只适用于下面这个标签的内容 --&gt;

&lt;!-- 使用web应用程序的名称(当网站作为一个应用程序的时候)--&gt;
&lt;meta name=&quot;application-name&quot; content=&quot;Application Name&quot;&gt;

&lt;!-- 页面的简短描述(限150个字符)--&gt;
&lt;!-- 在某些情况下这个描述作为搜索结果中所示的代码片段的一部分。--&gt;
&lt;meta name=&quot;description&quot; content=&quot;A description of the page&quot;&gt;

&lt;!-- 控制搜索引擎爬行和索引的行为 --&gt;
&lt;meta name=&quot;robots&quot; content=&quot;index,follow,noodp&quot;&gt;&lt;!-- 所有搜索引擎 --&gt;
&lt;meta name=&quot;googlebot&quot; content=&quot;index,follow&quot;&gt;&lt;!-- 谷歌 --&gt;

&lt;!-- 告诉谷歌搜索框不显示链接 --&gt;
&lt;meta name=&quot;google&quot; content=&quot;nositelinkssearchbox&quot;&gt;

&lt;!-- 告诉谷歌不要翻译这个页面 --&gt;
&lt;meta name=&quot;google&quot; content=&quot;notranslate&quot;&gt;

&lt;!-- Google网站管理员工具的特定元标记,核实对谷歌搜索控制台所有权 --&gt;
&lt;meta name=&quot;google-site-verification&quot; content=&quot;verification_token&quot;&gt;

&lt;!-- 说明用什么软件构建生成的网站,(例如,WordPress,Dreamweaver) --&gt;
&lt;meta name=&quot;generator&quot; content=&quot;program&quot;&gt;

&lt;!-- 简短描述你的网站的主题 --&gt;
&lt;meta name=&quot;subject&quot; content=&quot;your website‘s subject&quot;&gt;

&lt;!-- 很短(10个词以内)描述。主要学术论文 --&gt;
&lt;meta name=&quot;abstract&quot; content=&quot;&quot;&gt;

&lt;!-- 完整的域名或网址 --&gt;
&lt;meta name=&quot;url&quot; content=&quot;https://example.com/&quot;&gt;

&lt;meta name=&quot;directory&quot; content=&quot;submission&quot;&gt;

&lt;!-- 对当前页面一个等级衡量,告诉蜘蛛当前页面在整个网站中的权重到底是多少。General是一般页面,Mature是比较成熟的页面,Restricted代表受限制的。 --&gt;
&lt;meta name=&quot;rating&quot; content=&quot;General&quot;&gt;

&lt;!-- 隐藏发送请求时请求头表示来源的referrer字段。 --&gt;
&lt;meta name=&quot;referrer&quot; content=&quot;no-referrer&quot;&gt;

&lt;!-- 禁用自动检测和格式的电话号码 --&gt;
&lt;meta name=&quot;format-detection&quot; content=&quot;telephone=no&quot;&gt;

&lt;!-- 通过设置“off”,完全退出DNS队列 --&gt;
&lt;meta http-equiv=&quot;x-dns-prefetch-control&quot; content=&quot;off&quot;&gt;

&lt;!-- 在客户端存储 cookie,web 浏览器的客户端识别--&gt;
&lt;meta http-equiv=&quot;set-cookie&quot; content=&quot;name=value; expires=date; path=url&quot;&gt;

&lt;!-- 指定要显示在一个特定框架中的页面 --&gt;
&lt;meta http-equiv=&quot;Window-Target&quot; content=&quot;_value&quot;&gt;

&lt;!-- 地理标签 --&gt;
&lt;meta name=&quot;ICBM&quot; content=&quot;latitude, longitude&quot;&gt;
&lt;meta name=&quot;geo.position&quot; content=&quot;latitude;longitude&quot;&gt;
&lt;meta name=&quot;geo.region&quot; content=&quot;country[-state]&quot;&gt;&lt;!-- 国家代码 (ISO 3166-1): 强制性, 州代码 (ISO 3166-2): 可选; 如 content=&quot;US&quot; / content=&quot;US-NY&quot; --&gt;
&lt;meta name=&quot;geo.placename&quot; content=&quot;city/town&quot;&gt;&lt;!-- 如 content=&quot;New York City&quot; --&gt;

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。