meta

meta 是什么？有什么作用？

meta 用于提供关于文档的元数据（charset、作者、描述、viewport、robots、社交信息、CSP 等），供浏览器、搜索引擎、社交平台和工具使用。

有哪些常见的 meta？

charset

声明文档的字符编码。

<meta charset="utf-8" />

tip：页面乱码时可尝试通过指定字符编码来解决，仍然不行的话再排查错误原因。

description

页面内容的简短而准确的摘要。

<meta name="description" content="这是一个示例页面" />

viewport 的常见用法

元视口（meta viewport）是 HTML 文档中的一个元标签，用于控制网页在移动设备上的显示方式。它可以告诉浏览器如何调整网页的大小和缩放比例，以适应不同的屏幕尺寸。

其中：

• name 属性的值必须为 viewport。
• content 属性的值是一个空格分隔的字符串，可以包含以下参数：
  • width：参数用于指定视口的宽度。如果省略该参数，则视口的宽度将默认为设备的宽度。
  • initial-scale：参数用于指定初始缩放比例。如果省略该参数，则初始缩放比例将默认为 1.0。
  • minimum-scale：参数用于指定允许用户缩小的最小比例。如果省略该参数，则允许用户缩小到任意比例。
  • maximum-scale：参数用于指定允许用户放大的最大比例。如果省略该参数，则允许用户放大到任意比例。
  • user-scalable：参数用于指定是否允许用户缩放。如果该参数设置为 yes，则允许用户缩放网页；如果设置为 no，则禁止用户缩放网页。

示例：

<!-- 网页将以与设备屏幕宽度相同的宽度显示；并且不会进行任何缩放。-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- 网页将以与设备屏幕宽度相同的宽度显示；允许用户将网页缩小到 0.5 倍，放大到 2.0 倍 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0" />

<!-- 禁止用户缩放网页 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

其他常见 meta

robots：指示搜索引擎如何索引页面。

<meta name="robots" content="index, follow" />

社交信息（Open Graph、Twitter Card 等）： 优化网页在社交平台上的展示效果。

<meta property="og:title" content="示例页面" />
<meta property="og:description" content="这是一个示例页面" />
<meta property="og:image" content="https://example.com/image.jpg" />

不提示谷歌翻译

<meta name="google" content="notranslate" />