1. 字符集声明

<meta charset="UTF-8">

用途：指定文档的字符编码。UTF-8 是一种广泛使用的编码方式，支持多种语言字符。

最佳实践：将其放在 部分的最前面，以确保浏览器正确解析文档内容。

2. 页面描述

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

用途：提供网页内容的简要描述，通常长度在 150-160 个字符之间，影响搜索引擎结果中的展示。

最佳实践：使用简明扼要的语言，包含主要关键词，以提高点击率（CTR）。

3. 关键词

<meta name="keywords" content="关键词1, 关键词2, 关键词3">

用途：列出与网页内容相关的关键词，虽然大多数搜索引擎（如 Google）现在不再使用此标签作为排名因素。

最佳实践：避免过度堆砌关键词，选择与内容密切相关的词汇。

4. 作者信息

<meta name="author" content="作者名">

用途：指定文档的作者信息。

最佳实践：可以包括作者的完整姓名和相关链接，提升信任度。

5. 视口设置

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

用途：控制页面在移动设备上的显示方式，确保响应式设计。

最佳实践：通常使用此设置以支持移动设备，确保用户在各种设备上都有良好体验。

6. 刷新页面

<meta http-equiv="refresh" content="30">

用途：设置页面在指定时间后自动刷新。

最佳实践：谨慎使用，避免影响用户体验，通常用于特定情况（如数据更新页面）。

7. 兼容性声明

<meta http-equiv="X-UA-Compatible" content="IE=edge">

用途：指示 Internet Explorer 使用最新的渲染引擎，以避免兼容性问题。

最佳实践：确保在 中使用，以提高网站在 IE 中的表现。

8. 版权信息

<meta name="copyright" content="版权所有信息">

用途：提供有关版权的声明，保护网站内容。

最佳实践：包括年份和公司或个人名称，增强法律保护。

9. 社会媒体分享（Open Graph 协议）

<meta property="og:title" content="页面标题">

<meta property="og:description" content="页面描述">

<meta property="og:image" content="图片URL">

<meta property="og:url" content="页面URL">

用途：在社交媒体分享时优化显示的信息，如标题、描述和缩略图。

最佳实践：确保提供高质量的图片和吸引人的描述，以提升社交分享的效果。

10. Twitter Card

<meta name="twitter:card" content="summary_large_image">

<meta name="twitter:title" content="页面标题">

<meta name="twitter:description" content="页面描述">

<meta name="twitter:image" content="图片URL">

用途：为 Twitter 分享优化信息，类似于 Open Graph。

最佳实践：确保信息准确，图片尺寸符合 Twitter 的要求，以提高可视化效果。