HTML <meta> 標籤 (tag) - 設定網頁元資訊
<meta> tag 用來描述 HTML 文件 (document) 的元資訊 (metadata)，透過 <meta> 我們可以設定很多不同類型的網頁資訊。
<meta> tag 是放在 <head> tag 裡面。
<meta> 標籤使用範例：
<head>
<meta charset="utf-8" />
<meta name="description" content="Free Web Tutorial" />
<meta name="keywords" content="HTML,CSS,JavaScript" />
<meta name="author" content="Mike" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<meta> 標籤可以用來設定這些資訊：
- meta charset 指定網頁所使用的編碼
- meta description 網頁說明
- meta keywords 網頁關鍵字
- meta author 網頁作者資訊
- meta viewport 手機行動版網頁螢幕資訊
- meta refresh 自動跳轉網頁
- meta robots 搜尋引擎標記
社交媒體元資訊 (Social Media Meta Tags)
為了讓網頁在分享到 Facebook、LINE 或 Twitter (X) 時能有精美的預覽圖與標題，我們需要設定 Open Graph (OG) 與 Twitter Cards。
Open Graph (OG)
這是由 Facebook 發起的標準，現在廣泛被各大社群平台支援。
<meta property="og:title" content="網頁標題" />
<meta property="og:description" content="網頁的詳細說明..." />
<meta property="og:image" content="https://www.example.com/share-image.jpg" />
<meta property="og:url" content="https://www.example.com/page.html" />
<meta property="og:type" content="website" />
Twitter Cards
專門用於 Twitter (X) 的顯示優化。
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="網頁標題" />
<meta name="twitter:description" content="網頁說明" />
<meta name="twitter:image" content="https://www.example.com/share-image.jpg" />