html 中 meta 标签的属性详解

html 中 meta 标签的属性详解

  • [\<meta> 标签是什么](#<meta> 标签是什么)
  • [\<meta> 标签常用属性](#<meta> 标签常用属性)
  • [\<meta> 标签非常用属性](#<meta> 标签非常用属性)

<meta> 标签是什么

<meta> 标签是 HTML 中用于描述网页元信息的元素。它位于 <head> 部分,不会显示在页面内容中,但对于浏览器、搜索引擎等具有重要作用。

主要作用:定义文档的字符编码、提供网页的描述信息、关键词、作者、视口设置等,这些信息有助于搜索引擎理解和索引网页内容。
标签省略:由于这是一个空元素,所以必须有开始标签并且不能有结束标签。

<meta> 标签常用属性

  1. charset :定义文档的字符编码,如 UTF-8。例如:

    html 复制代码
    <meta charset="UTF-8">
  2. name :定义元信息的名称,与 content 属性配合使用。常见的 name 属性值有:description(网页描述)、keywords(关键词)、author(作者)、copyright(版权)、viewport(视口设置)。例如:

    • 描述信息:

      html 复制代码
      <meta name="description" content="这里是对网页的描述。">
    • 关键词:

      html 复制代码
      <meta name="keywords" content="HTML, CSS, JavaScript, Web开发">
    • 作者:

      html 复制代码
      <meta name="author" content="张三">
    • 版权:

      html 复制代码
      <meta name="copyright" content="版权网站名称">
    • 视口设置:

      html 复制代码
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  3. http-equiv :定义 HTTP 头部的元信息,如:Content-Type(内容类型)、X-UA-Compatible(浏览器兼容性)、refresh(自动刷新)。例如:

    • 内容类型:

      html 复制代码
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    • 浏览器兼容性:

      html 复制代码
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
    • 自动刷新(每隔 5 秒刷新一次):

      html 复制代码
      <meta http-equiv="refresh" content="5">

<meta> 标签非常用属性

复制代码
除以上常用属性外,还有一些不太常用但可能有用的 <meta> 属性和应用场景:
  1. robots:指定搜索引擎爬虫如何处理页面。例如:

    html 复制代码
    <meta name="robots" content="noindex, nofollow">

    表示告诉搜索引擎爬虫不要索引该页面,也不要沿着该页面的链接继续爬行。

  2. theme-color:定义浏览器地址栏的颜色,仅在支持的移动设备上有效。例如:

    html 复制代码
    <meta name="theme-color" content=" 336699">
  3. application-name :定义网页在启用 Web 应用时的名称。例如:

    html 复制代码
    <meta name="application-name" content="Web应用">
  4. generator:指定生成该网页的软件名称。例如:

    html 复制代码
    <meta name="generator" content="Meta6.0">
  5. language:定义网页内容的主要语言。例如:

    html 复制代码
    <meta name="language" content="zh-CN">
  6. expires:设定网页过期时间,过期后浏览器将从服务器重新请求。例如:

    html 复制代码
    <meta http-equiv="expires" content="Wed, 21 June 2023 09:18:54 GMT">
  7. pragma:禁止浏览器从本地计算机的缓存中访问页面内容。例如:

    html 复制代码
    <meta http-equiv="pragma" content="no-cache">
  8. Cache-Control:指定浏览器如何缓存页面。例如:

    html 复制代码
    <meta http-equiv="Cache-Control" content="no-cache">
  9. Cproperty :用于指定 Open Graph 元数据。例如:

    html 复制代码
    <head> 
        <meta property="og:title" content="页面标题">
        <meta property="og:description" content="页面描述">
        <meta property="og:image" content="页面图片 URL">
        <!-- Open Graph 是一种开放的元数据协议,用于向社交媒体平台提供有关页面内容的更多信息。 -->
        <!-- 使用 Open Graph 元数据可以在页面被分享到社交媒体平台时,自动生成高质量的预览图像、标题和描述,从而提高分享的可读性和吸引力。 -->
    </head>

注意 :以上这些属性在特定的应用场景下可能有用,但并非在所有网页中都需要使用。根据实际需求和目标选择合适的属性来配置 <meta> 标签。

相关推荐
西西木科技丨Shopify开发机构1 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙8 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到119 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆13 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er18 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0621 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444023 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆24 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子27 分钟前
Web开发中的文件下载
前端·javascript·面试
peakmain934 分钟前
Gradle 8.11.1的升级之旅
前端