<meta> 標簽是 HTML 文檔頭部 (<head>) 中的一種元數據標簽，用于提供關于 HTML 文檔的信息。雖然它不會直接影響文檔的呈現，但它在搜索引擎優化 (SEO)、瀏覽器行為和文檔元信息方面起著重要作用。以下是一些常見的 <meta> 標簽及其用途：
常見的 <meta> 標簽
1. Charset 聲明
指定 HTML 文檔的字符編碼，通常是 UTF-8。
<meta charset="UTF-8">
2. Viewport 設置
控制頁面在不同設備上的布局和縮放。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3. 描述 (Description)
提供頁面的簡短描述，通常用于搜索引擎結果頁面的摘要。
<meta name="description" content="This is a description of the page">
4. 關鍵詞 (Keywords)
提供頁面相關的關鍵詞列表，用于搜索引擎優化（SEO）。雖然現代搜索引擎很少使用此標簽，但它仍然存在于一些舊的 SEO 實踐中。
<meta name="keywords" content="HTML, CSS, JavaScript, meta tags">
5. 作者 (Author)
指定文檔的作者。
<meta name="author" content="John Doe">
6. 刷新和重定向 (Refresh)
在指定的時間間隔后刷新頁面或重定向到另一個 URL。
<meta http-equiv="refresh" content="30">
<!-- 或重定向 -->
<meta http-equiv="refresh" content="5;url=https://example.com">
7. HTTP 等效 (HTTP-Equiv)
模擬 HTTP 響應頭的效果。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8. Robots
控制搜索引擎爬蟲的行為，是否索引頁面或跟隨頁面上的鏈接。
<meta name="robots" content="index, follow">
<!-- 禁止索引 -->
<meta name="robots" content="noindex, nofollow">
9. 自定義 Meta 標簽
可以創建自定義的 meta 標簽來存儲任意信息，例如應用程序名稱、版本等。
<meta name="application-name" content="MyApp">
<meta name="version" content="1.0.0">
使用 <meta> 標簽的最佳實踐
- 字符編碼: 始終在文檔的開頭定義字符編碼，以確保正確解析文檔中的字符。
- Viewport: 對于響應式設計，設置適當的 viewport 是必要的。
- SEO: 使用描述和關鍵詞標簽幫助搜索引擎更好地理解和索引您的頁面。
- 兼容性: 使用
X-UA-Compatible標簽確保瀏覽器以最佳方式渲染您的頁面，特別是對于舊版 IE 瀏覽器。
示例
以下是一個包含各種常見 <meta> 標簽的 HTML 文檔頭部示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="This is a description of the page"><meta name="keywords" content="HTML, CSS, JavaScript, meta tags"><meta name="author" content="John Doe"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Document</title>
</head>
<body><!-- 內容 -->
</body>
</html>
通過使用 <meta> 標簽，您可以為瀏覽器、搜索引擎和其他服務提供有用的信息，從而提升網頁的用戶體驗和可訪問性。
![[DALL·E 2] Hierarchical Text-Conditional Image Generation with CLIP Latents](http://pic.xiahunao.cn/[DALL·E 2] Hierarchical Text-Conditional Image Generation with CLIP Latents)
