什麼是 Meta 標籤產生器?
Meta 標籤是放在 HTML <head> 裡、給搜尋引擎和社群平台讀的資訊。這個Meta 標籤產生器讓你填幾個欄位,就即時產生 SEO 的 title/description、Open Graph 與 Twitter Card 標籤,並附上 Google 搜尋摘要預覽,讓你邊填邊看效果。全程在你的瀏覽器本機完成。
如何使用
- 填入標題、描述、頁面網址與預覽圖網址。
- 右側即時顯示搜尋預覽與字數;下方產生完整標籤。
- 按「複製全部」,貼進你網站的
<head>。
使用情境
- 為新頁面一次補齊 SEO 與社群分享標籤。
- 檢查標題、描述長度是否會被搜尋結果截斷。
- 需要結構化資料或其他工具?看 JSON 格式化 整理 JSON-LD。
為什麼分享連結時,縮圖和標題沒更新?
你剛把 Open Graph 標籤填好、上線,興沖沖貼到 Facebook 或 LINE,結果縮圖還是舊的、甚至一片空白——這幾乎都不是標籤產生錯,而是社群平台把預覽「快取」住了。平台第一次抓到你的頁面後會存一份,之後同一網址不會每次重抓。解法是用各平台的官方偵錯/重抓工具(如 Facebook Sharing Debugger)強制重新抓取一次。另外三個最常見的坑:一是 og:image 用了相對路徑,社群端解不到,一定要用 https:// 開頭的絕對網址;二是圖片太小,多數平台要求至少 200×200、建議 1200×630;三是把標籤放錯位置——它們必須在 <head> 裡,放進 <body> 會被忽略。都確認過還是不動,先跑一次重抓工具再說。要整理頁面用的 JSON-LD 結構化資料,可搭配 JSON 格式化。
完整的一組長什麼樣,長度該看哪個數字?
這一頁用五個欄位產生的完整輸出:
<title>Free Online Toolbox</title>
<meta name="description" content="Image and PDF converters that run in your browser.">
<link rel="canonical" href="https://yunknow.cc/">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="Free Online Toolbox">
<meta property="og:description" content="Image and PDF converters that run in your browser.">
<meta property="og:url" content="https://yunknow.cc/">
<meta property="og:image" content="https://yunknow.cc/og.png">
<meta property="og:site_name" content="Yunknow">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free Online Toolbox">
<meta name="twitter:description" content="Image and PDF converters that run in your browser.">
<meta name="twitter:image" content="https://yunknow.cc/og.png">三件值得注意:og:type 在裡面(它是最常被漏掉的一個);twitter:card 是 summary_large_image(這才是大圖預覽出現的原因,不寫就是小方塊);描述重複三次、每個命名空間一份,因為沒有一方會去讀別人命名空間的那份。而欄位旁邊的計數器是大家會跳過的部分:那個標題回報 Title 19 chars、描述 Description 50 chars —— 照計數器寫,不要照欄位寬度寫。