meta标签

用户5815571442346
37 阅读2分钟

  嘿嘿嘿，我回来啦~~ 消失了一段时间，好久不见。
  meta标签在前端开发应用中扮演着重要的角色，它可以提供关于网页的元数据信息。故本文主要来聊一下meta标签 ~ ~

  先来看看一些天猫首页网站部分meta的设置：

<head>
  	<meta charset="utf-8"/>
	<meta name="renderer" content="webkit"/>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
	<meta name="spm-id" content="875.7931836/B"/>
	<meta name="format-detection" content="telephone=no">
	<meta name="format-detection" content="date=no">
	<meta name="format-detection" content="address=no">
	<meta name="keywords" content="商城,网上购物,网购,进口食品,美容护理,母婴玩具,家用电器,手机数码,家居生活,服饰内衣,营养保健,钟表珠宝,饰品箱包,汽车生活,图书音像,礼品卡"/>
	<meta name="description" content="天猫，中国线上购物的地标网站，亚洲超大的综合性购物平台，拥有10万多品牌商家。每日发布大量国内外商品！正品网购，上天猫！天猫千万大牌正品,品类全，一站购，支付安全，退换无忧！理想生活上天猫!"/>
	<meta property="og:title" content="天猫">
	<meta property="og:type" content="website">
	<meta property="og:url" content=" https://www.tmall.com/">
	<meta property="og:image" content=" https://img.alicdn.com/tfs/TB1MaLKRXXXXXaWXFXXXXXXXXXX-480-260.png">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
</head>

1、概念

  <meta>标签提供了 HTML 文档的元数据。何为元数据？就是描述数据的数据信息。举个例子，一篇论文的元数据可以理解为概要，我们从概要中可以大概了解到论文的研究内容，研究背景等信息，简单点就是总述。所以当网站上线后，如果你想要其他用户了解你的网站或者网页，那么meta标签的设置是非常有必要的。

  注意： 元数据不会显示在客户端，但是会被浏览器解析或其他 Web 服务调用。
  举个例子来说： 当我们使用百度搜索资料所得结果就是meta标签中所设置的内容 meta标签截图

2、用法

<meta 属性=值 />

3、常用属性:

  • charset：HTML5新增的属性，用于指定HTML文档的字符编码方式，如UTF-8、GBK等。
  • http-equiv：用于模拟HTTP头部信息，如刷新页面、设置缓存等。与content搭配使用。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> //指定IE和Chrome使用最新版本渲染当前页面
<meta http-equiv="refresh" content="2；URL=http://www.php.cn"> //2秒后自动刷新跳转到PHP中文网
  • name：用于定义文档的元数据，如关键词、描述、作者、生成工具等。与content搭配使用。
<meta name="keywords" content="xxx网，xxxx"> // 用于告诉搜索引擎，你网页的关键字。
<meta name="description" content="xxx是xxxxxx，提供xxxxxxxxx"> // 用于告诉搜索引擎，你网站的主要内容。
<meta name="robots" content="none"> // 用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。
<meta name="viewport" content="width=device-width, initial-scale=1"> // 常用于设计移动端网页
<meta name="author" content="Michical Jackson"> // 用于标注网页作者
<meta name="copyright" content="xxx公司网"> // 用于标注版权信息
  • property：根据自身需求自定义文档的元数据。与content搭配使用。
<meta property="og:title" content="Open Graph标题">
<meta property="og:description" content="Open Graph描述">

与 name 属性不同的是：   name属性值是预定义的，用于描述常规的、通用的元数据信息，如关键字、描述、作者、生成工具等。   property属性值是自定义的，可以根据不同的需求定义不同的属性

  • content：用于定义与 http-equiv 或 name 或 property属性相关的具体信息。

参考资料：blog.csdn.net/qq_38987146…

  总之，meta标签的作用是提供额外的信息和指令，帮助浏览器和搜索引擎更好地理解和处理网页内容，提高网页的可访问性、搜索排名和用户体验。

avatar
文章
阅读
粉丝