用 JavaScript 讀取 meta 標籤值，前提是解析後的 DOM 裡已有該 meta 元素，且帶有可識別的 name 或 http-equiv 屬性，接著用 document.querySelector 對 meta 選擇器搭配 getAttribute('content') 取回其內容。在這一切能運作之前，HTML head 必須含有乾淨、符合標準的區塊：charset、viewport、title、description 與選填的 author 各自輸出成獨立、格式正確的元素，並帶有效的 content 屬性。若產生的區塊把 canonical 連結、robots 指令、Open Graph 屬性與 Twitter Card 標記混進單一通用表單，往往會帶出互相矛盾或重複的項目，讓下游取用者困惑，也讓讀取變得脆弱。Meta Tag Generator 能解決這項任務的上游半邊，產出可稽核的基本 head 區塊，內含 UTF-8 宣告、響應式 viewport、title 元素、description 中繼資料與選填的 author 中繼資料，全部經過修剪與 HTML 跳脫，讓同一份內容在靜態提供與 JavaScript 解析時都能存活。JavaScript 這一半接著就變成對已知元素名稱做可預期的選擇器查找。
JavaScript 從 Meta 標籤讀到什麼
JavaScript 並不會把 meta 標籤本身理解成中繼資料；它讀的是瀏覽器已經解析好的 DOM 元素。head 裡的每個 meta 標籤都是一個 HTMLElement 節點，其屬性可透過標準 DOM API 存取。JavaScript 實際用來讀取的兩個屬性是 name（或 http-equiv）屬性——用來標明用途——以及 content 屬性——用來存放值。這些元素的語意定義於 WHATWG HTML 規格，它是哪些 name 值被承認為有標準依據之中繼資料的權威來源。
換句話說，缺少 content 屬性、content 值少了結尾引號，或在 CMS 插入時被雙重跳脫而帶著 HTML 實體的 meta 標籤，被查詢時會回傳 null、空字串，或帶有殘留實體痕跡的字串。這就是為什麼任務的上游——輸出有效標記——必須在任何 JavaScript 讀取之前先做好。
逐步產生基本 Head 區塊
在寫下任何一行 JavaScript 之前，頁面需要可預期、可供查詢的 meta 標籤。Meta Tag Generator 產出的正是這份基礎：一小段範圍明確的區塊，只含可以一起審查的元素。
- 輸入一個準確的文件標題（最多 200 個字元），要符合訪客在瀏覽器分頁應看到的內容，以及你希望搜尋系統用來標示此頁的名稱。
- 加上精簡的頁面描述（最多 500 個字元），用人讀得懂的語言概述此頁，避免關鍵字清單、從無關頁面複製的重複文案，或此頁無法兌現的承諾。
- 若網站有值得作為基本中繼資料呈現的明確作者慣例，可選擇納入受維護的作者名稱（最多 120 個字元）。網站若沒有有意義的值，就省略此欄。
- 產生已跳脫的基本 head 區塊並複製。區塊含 UTF-8 charset 宣告、響應式 viewport meta 元素、title 元素、description 中繼資料，以及僅在有提供時才出現的 author 中繼資料。Canonical 連結、robots 指令、Open Graph 屬性與 Twitter Cards 刻意排除，另有專用工具。
- 把區塊插入文件 head，並檢查實際送出的原始碼。拿掉佈景主題、外掛或框架多加的任何重複 description 中繼資料、title 元素或 charset 宣告，讓之後讀取回傳的是你打算要的值。
每個值都會被修剪、限制長度、檢查控制字元，並做 HTML 跳脫，讓可能影響屬性解析的和號、角括號與引號，在區塊離開表單前就被編碼。
用 JavaScript 讀取每一個 Meta 值
區塊就位後，JavaScript 可透過三種可靠模式讀取：document.title、document.charset，以及 document.querySelector('meta[name="..."]').getAttribute('content') 處理其餘項目。
文件標題最乾淨的取法是 document.title，無論它如何輸出，都會回傳 title 元素的文字內容。若要取宣告的編碼，document.charset 會回傳解析後的 charset 字串（「UTF-8」，當 meta 標籤宣告 UTF-8 charset 時）。對於 description、author 與 viewport，下列模式會原樣回傳 content 屬性的值。
document.querySelector('meta[name="description"]').getAttribute('content') 會以純字串回傳 description 中繼資料值。 document.querySelector('meta[name="author"]').getAttribute('content') 會回傳 author 中繼資料；若選填欄位未出現在 head 區塊中，則為 null。 document.querySelector('meta[name="viewport"]').getAttribute('content') 會回傳 viewport 的 content 屬性，Meta Tag Generator 將其固定為 width=device-width, initial-scale=1。
document.querySelector('meta[charset]') 可直接抵達宣告的編碼，適用於你要檢查元素本身、而不是文件層捷徑的情況。基本區塊使用 charset 屬性形式，而非 http-equiv，因此 http-equiv 選擇器不會匹配到它。
若存在多個相符元素，例如佈景主題與產生器各插入的兩個 description meta 標籤，querySelector 會依文件順序回傳第一筆相符，那可能不是你預期的值。上述流程中部署後的清理步驟就是為此把關，而在依賴該值之前先做一次 querySelectorAll 掃描，能很快揭露任何重複。
各產生欄位的選擇器模式
| 欄位 | HTML 元素 | JavaScript 取法 |
|---|---|---|
| 文件標題 | <title>...</title> | document.title |
| Charset | <meta charset="utf-8"> | document.charset |
| Viewport | <meta name="viewport" content="width=device-width, initial-scale=1"> | document.querySelector('meta[name="viewport"]').getAttribute('content') |
| Description | <meta name="description" content="..."> | document.querySelector('meta[name="description"]').getAttribute('content') |
| Author（選填） | <meta name="author" content="..."> | document.querySelector('meta[name="author"]').getAttribute('content') |
第三欄是基本區塊作為這些欄位唯一來源時，JavaScript 看到的內容。CMS 再插入的任何額外標籤，會在 querySelectorAll 裡成為第二筆相符，而 querySelector 回傳的是文件順序中的第一筆相符。
為什麼跳脫對讀取很重要
Meta Tag Generator 會修剪每個文字值、拒絕控制字元，並對和號與角括號做 HTML 跳脫，引號則在可能影響屬性解析之處編碼。這在讀取時很重要，因為未跳脫的和號會變成格式錯誤的 HTML 實體，瀏覽器會在解析前靜默改寫，於是 JavaScript 讀到的是「Tom & Jerry」而不是「Tom & Jerry」。同樣地，屬性值裡多餘的雙引號可能過早關閉屬性，並破壞其後直到下一個角括號為止的每個 meta 標籤，回傳被截斷的內容。
表單裡的上限在設計上也對讀取安全：title 上限 200 個字元、description 上限 500、author 上限 120。這些是語法天花板，不是排名目標，超過上限的值會被表單拒絕，而不是靜默截斷，因此 head 區塊絕不會送出半編碼的項目。
上限、重複，以及工具不涵蓋的範圍
此產生器刻意不產出 canonical 連結、robots 指令、Open Graph 屬性或 Twitter Card 標記。每一項都表達獨立的頁面決策，與基本區塊混在一起，往往會在單一通用表單裡產生互相矛盾的項目。Canonical 連結產生、robots meta 標籤產生、Open Graph 標籤產生與 Twitter Card 產生各自有專用工具，Meta Tag Generator 的契約止於基本文件中繼資料。
這條界線也是 JavaScript 讀取保持可預期的原因：表單能輸出的每個欄位都恰好有一種 HTML 元素形狀、一個屬性名稱、以及一個 content 值。佈景主題若自行加上 description meta 標籤，會靜默打破這份契約，因為那個第二個標籤不是表單引入的。手動檢查實際送出的 head，是在 JavaScript 查詢回傳錯誤相符之前抓到重複的唯一方法。author 欄位為選填，只描述作者中繼資料；它不是已驗證身分、著作權聲明、rel=author 替代，也不是結構化資料，因此 JavaScript 取用者應把它當標籤，而不是身分訊號。
部署後驗證讀取
把 head 區塊貼進 CMS 範本或靜態 HTML 檔之後，在瀏覽器開啟頁面，並從瀏覽器主控台執行 document.title、document.charset，以及 document.querySelector('meta[name="..."]').getAttribute('content') 呼叫。每一項都應回傳表單裡輸入的確切值。請檢視頁面原始碼，而不是渲染後的 DOM，以確認只有一個 title 元素、一個 charset 宣告，以及一個 description meta 標籤。
最後做一次行動裝置檢查：以較窄的 viewport 寬度檢視頁面，確認響應式版面仍跟隨裝置寬度。viewport 的 content 固定為 width=device-width, initial-scale=1；刻意不加 maximum-scale 與 user-scalable 限制，因為它們會傷害無障礙，而且也不是可用響應式版面所必需。依賴 viewport 的 JavaScript 可透過上述選擇器模式讀取，並確認值相符。
頁面被重新抓取後，Search Console 檢查會顯示搜尋系統選擇呈現的 title 與 description。Meta Tag Generator 產出有效的來源中繼資料，而 Google 的 標題連結指引 說明了為什麼產生的標題並不保證任何搜尋引擎會顯示同一段文字。把 JavaScript 讀取檢查當成標記可稽核的確認，把 Search Console 檢查當成爬蟲有看到它的確認。
相關閱讀： Hreflang 產生器範例：從語系列到 Head 標籤.
相關閱讀： Meta Robots 產生器速查表：指令與語法.