【校招VIP】详解< meta >标签常用的属性及方法

02月07日 收藏 0 评论 0 前端开发

【校招VIP】详解< meta >标签常用的属性及方法

转载声明:文章来源https://blog.csdn.net/cuclife/article/details/137037283

HTML中的标签用于提供网页的元数据(Metadata),这类数据并非显示在网页上供用户查看,而是专为浏览器和搜索引擎等客户端软件提供信息。 下面是一些常见的<meta>标签及其使用方法和示例代码:
1. 设置字符集(Character Encoding)
用来指定网页所使用的字符编码,以便浏览器正确解码网页内容。

<meta charset="UTF-8">

2. 视口设置(Viewport)
用于控制移动设备上的网页视图大小和缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. 搜索引擎优化相关(SEO Meta Tags)
描述(Description):为搜索引擎提供网页内容概述。

<meta name="description" content="这是一个关于HTML meta标签的详细说明页面">

关键词(Keywords):虽然现在对于SEO的作用有限,但仍然可以提供一些关键词。

<meta name="keywords" content="HTML, meta标签, 元数据, SEO">

4. 缓存控制(Cache Control)
通过http-equiv属性模拟HTTP头部信息,例如设置缓存策略。

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
————————————————

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/cuclife/article/details/137037283

5. 网页重定向或刷新
设置网页在特定时间后自动刷新或者跳转到另一个URL。

<!-- 5秒后刷新当前页面 -->
<meta http-equiv="refresh" content="5">

<!-- 立即跳转到新的URL -->
<meta http-equiv="refresh" content="0; url=http://example.com">

6. 指定作者信息

<meta name="author" content="网页作者姓名">

7. 网页生成或最后修改日期

<meta name="revised" content="2024-03-26">

8. 移动设备适应性标签

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

9. 设定搜索引擎爬虫指引
是一个用于向搜索引擎爬虫(也称为机器人或蜘蛛)传达网页抓取和索引指令的HTML元标签。通过设置此标签的内容属性,你可以控制搜索引擎是否应该索引页面内容、跟踪链接或将其缓存。
以下是一些常见的 robots 属性值和它们的含义:
index:允许搜索引擎索引此页面。
noindex:告诉搜索引擎不要索引此页面。
follow:指示搜索引擎跟随页面上的链接并继续爬取。
nofollow:请求搜索引擎不跟随页面上的链接。
none:等同于同时设置 noindex 和 nofollow,既不允许索引也不追踪链接。
noarchive:阻止搜索引擎在搜索结果中显示网页快照(缓存版本)。

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

需要注意的是,不同meta标签的作用取决于其属性和内容值,上述列举只是部分应用场景。另外,有些属性的兼容性和作用可能随时间和浏览器更新而发生变化。
meta标签在HTML中扮演着至关重要的角色,它能帮助开发者更好地控制网页的呈现方式、提升SEO效果、指导浏览器行为以及其他与网页相关的元数据管理。

C 0条回复 评论

帖子还没人回复快来抢沙发