適用於現代網站的完整 Meta 標籤產生器
架設網站不只需要建立可見的內容。為了確保您的網頁在搜尋引擎和社群媒體上完美呈現，您需要正確的隱藏 HTML 程式碼。這款免費的 Meta 標籤產生器能幫助您立即建立現代網頁開發所需的精確 <head> 標籤。
當您輸入內容時，工具會即時產生乾淨且經過正確跳脫處理的 HTML，包含基本的 SEO Meta 標籤、Open Graph 屬性與 Twitter Card 指令。由於所有作業都在您的瀏覽器中本機執行，您的草稿標題、描述和網址絕不會上傳到伺服器。您可以安心地為尚未公開的產品或私人客戶網站準備標籤。
必備的 SEO Meta 標籤
像 Google 這類的搜尋引擎，仰賴特定的 HTML 標籤來理解網頁內容並顯示在搜尋結果中。正確設定這些標籤是站內 SEO (On-page SEO) 的基礎。
標題與描述： <title> 和 <meta name="description"> 標籤決定了使用者在搜尋引擎結果頁 (SERP) 上看到的內容。如果內容太長，搜尋引擎會用省略號截斷。本工具內建 字數計算機，當您的標題超過 60 個字元或描述超過 160 個字元時會發出警告，幫助您撰寫簡潔且吸引點擊的文案。
標準網址： <link rel="canonical"> 標籤能告訴搜尋引擎哪個版本的網址是「主要」版本。如果您的網頁可以透過多個網址存取（例如，帶有或不帶有追蹤參數），這能防止產生重複內容的問題。
Robots 指令： 「index」和「follow」核取方塊會產生 <meta name="robots"> 標籤。預設情況下，搜尋引擎會建立網頁索引並追蹤其連結。如果您正在建立私人網頁、感謝頁面或測試網站，取消勾選這些方塊將產生 noindex 和 nofollow 指令，以阻擋爬蟲抓取。針對全站的爬蟲規則，您也應該使用 Robots.txt 產生器。
Open Graph 與 Twitter 卡片產生器
當有人將您的連結貼到 Slack、Discord 或 iMessage 等通訊軟體，或是分享到社群媒體時，您會希望它看起來很吸引人。單純的純文字連結很容易被忽略，但帶有大圖和粗體標題的豐富預覽畫面，則能有效提升點擊率。
og 標籤產生器： Open Graph 協定 (og:) 是業界產生豐富連結預覽的標準。只要填寫圖片、網站名稱和語系欄位，這個工具就能作為 og 標籤產生器，為您建立 Facebook、LinkedIn 及多數通訊軟體所需的精確屬性（og:image、og:title、og:description 等）。
Twitter 卡片產生器： Twitter 使用專屬的標記來顯示連結。我們的工具內建專用的 Twitter 卡片產生器，可輸出 twitter:card、twitter:title、twitter:description 和 twitter:image 標籤。您可以透過下拉式選單，選擇標準的「摘要 (Summary)」卡片（文字旁帶有方形小圖），或是「帶有大圖的摘要 (Summary with Large Image)」卡片（文字上方顯示全寬圖片）。
掌控顯示效果與品牌形象
除了搜尋引擎與社群媒體，現代的行動版瀏覽器也會利用 meta 標籤來自訂瀏覽器介面 (UI)。
主題顏色欄位會產生 <meta name="theme-color"> 標籤。這能指示行動版瀏覽器（如 Android 的 Chrome 或 iOS 的 Safari）將網址列與狀態列的顏色變更為您的品牌色。只需使用選色器或貼上色碼，就能將品牌色彩直接融入瀏覽器介面。搭配使用我們的 網站圖示產生器 製作專屬圖示，打造一致的行動版品牌體驗。
撰寫有效 meta 標籤的實用技巧
- 以人為本： 雖然關鍵字很重要，但網頁標題與描述本質上就像廣告文案。請確保內容夠吸引人，且符合使用者的搜尋意圖。
- 使用絕對網址： 設定 Open Graph 與 Twitter 圖片時，請務必使用完整的絕對網址（例如
https://example.com/image.jpg），而非相對路徑（/image.jpg）。社群平台無法解析相對路徑，會導致圖片無法正常載入。 - 查看即時預覽： 利用模擬的搜尋結果預覽功能，檢查標題與描述的呈現效果。如果文字被截斷或看起來不順暢，請先調整後再複製程式碼。
- 保持適當的圖片尺寸： 針對「大型圖片摘要」(Summary with Large Image) 的 Twitter 卡片與標準的 Open Graph 分享，1200 × 630 像素是目前公認的最佳圖片解析度。