当前位置：首页 > news >正文

HTML meta

news 2025/8/15 8:29:57

<meta>标签用于提供html文档的元信息（metadata）。这些信息不会显示在页面上，但会被浏览器或搜索引擎用来识别页面的编码方式、关键字、描述、作者信息、刷新时间等。

基本语法

<meta name="属性名" content="属性值">

常见的name和content属性

charset:指定文档的字符编码

<meta charset="UTF-8">

name="description" 描述页面的内容摘要。这对SEO（搜索引擎优化）很重要。

<meta name="description" content="这是页面的描述">

name="keywords" 页面的关键字，对SEO也有帮助。

<meta name="keyword" content="keyword1,keyword2"

name="author" 页面的作者

<meta name="author" content="gary">

http-equiv 用于模拟HTTP响应头。例如，设置页面的刷新间隔：

<!-- 页面每300秒自动刷新一次 -->
<meta http-equiv="refresh" content="300">

使用`viewport`控制视口

对于响应式设计，meta标签还可以控制移动设备上的视口大小，确保不同尺寸上的屏幕上正确显示：

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

这里，width=device-width使得视口宽度与设备宽度相匹配，initial-scale=1保证页面以1:1的比例渲染。

使用`og:*`属性

Open Graph协议允许你将你的网页变成Facebook和其他社交平台上的丰富对象。

<meta property="og:title" content="页面标题">
<meta property="og:type" content="article">
<meta property="og:url" content="https://www.example.com">
<meta property="og:image" content="https://www.example.com/image.jpg">

使用`twitter:*`属性

Twitter Cards允许你在Twitter上分享更丰富的链接预览：

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@yourusername">
<meta name="twitter:title" content="页面标题">
<meta name="twitter:description" content="页面描述">
<meta name="twitter:image" content="https://www.example.com/image.jpg">