給初學者的 meta tag 產生器應該只輸出恰好五個 HTML head 標籤——一個 UTF-8 字元集宣告、一個響應式 viewport meta 標籤、頁面 title 元素、description meta 標籤，以及一個選用 author meta 標籤——而且不應再包含更專業的內容，因為 canonical 連結、robots 指令和社群卡片各自代表不同的決策，值得使用各自的工具來處理。大多數初學者其實不需要一個把各種詞彙混在一起的「完整」產生器;他們需要的是一個乾淨、已驗證的基本區塊，可以貼到文件 head 中逐行檢視。Meta Tag 產生器刻意採取了這種做法。它會修剪並跳脫每個值，套用固定的長度限制，完全在瀏覽器中執行，並回傳一個可供審核的區塊，讓你直接貼到頁面 head 中。專業的 SEO 與社群標籤會刻意排除，讓初學者先學會基礎，之後再透過專屬工具加入 canonical、Open Graph、Twitter Card 和 robots 設定。這份白話文逐步說明涵蓋了這五個標籤各自的用途、表單要填什麼、輸出要貼到哪裡，以及發佈後如何在頁面原始碼中驗證結果。
Meta Tag 在網頁上實際的作用
Meta tag 是放在 HTML 文件頂端 <head> 元素內的短短幾行 HTML。head 位於可見的 body 內容之上，因此 meta tag 本身不會顯示在頁面上;相反地，它的作用是告訴瀏覽器、輔助工具和搜尋系統如何解讀與呈現這個頁面。一小組格式正確的 head 標籤，能為每個消費者提供一致的起點:一個字元集宣告讓文字能正確解碼、一個 viewport 讓行動瀏覽器能正確調整版面、一個 title 用於分頁和書籤、一個 description 用於摘要，以及一個選用的 author 標記。
初學者經常會在網路上看到長長的「meta tag 包」流傳，把 canonical 連結、Open Graph 屬性、robots 指令和 Twitter Cards 全部塞進同一個表單。這些詞彙確實存在，但每一行都代表一個獨立的決策。一個頁面可以在沒有 canonical 標籤、沒有 Open Graph、沒有 Twitter Cards 的情況下發佈;但若沒有編碼宣告、viewport 和 title，就不能安全地發佈。先學會基礎，之後要加入專業層級就會更容易，因為你已經知道每一行該放在哪裡，以及如何偵測重複的內容。Meta Tag 產生器正是為了這個入門層級而存在，而另一份關於如何為任何 HTML 頁面建立 meta tag的指南，則會逐步說明在更多類型文件中的放置位置。
產生器涵蓋的五個標籤
這個產生器刻意將範圍限制在每個頁面都該具備的基本文件 metadata。以下是輸出中每一行的快速參考:它的作用，以及表單如何處理它。
| 標籤 | 作用 | 產生器行為 |
|---|---|---|
| Charset | 宣告頁面使用 UTF-8 編碼，這是支援所有書面語言的通用字元集 | 永遠作為第一行輸出，在任何文字型 metadata 之前，以便瀏覽器能正確解析 head 的其餘內容 |
| Viewport | 告訴行動瀏覽器將版面 viewport 調整為裝置寬度，且不限制縮放 | 固定為 width=device-width, initial-scale=1;為了無障礙考量，刻意省略 maximum-scale 與 user-scalable |
| Title | 設定文件標題，用於瀏覽器分頁、書籤、歷史紀錄，並可作為搜尋結果標題的其中一個輸入 | 在表單中會修剪、拒絕控制字元、進行跳脫，並限制在 200 字元以內 |
| Description | 提供一段簡短摘要，相容系統可在搜尋結果或其他介面中，將其顯示在標題下方 | 會修剪、跳脫，並限制在 500 字元以內;表單會拒絕過長或空白的值，而不是默默截斷語意 |
| Author | 選用的作者 metadata，描述誰負責維護這個頁面 | 會修剪、跳脫，並限制在 120 字元以內;只有在你填入值時才會輸出，而且絕不能取代可見的署名或結構化資料 |
這五行全部來自同一個簡短的表單。沒有關鍵字欄位、沒有 canonical 欄位、沒有社群欄位，也沒有 robots 欄位，因為這些各自代表不同的頁面決策，而且各自有專屬的工具。
逐步執行 Meta Tag 產生器
這個表單刻意做得精簡:一個 title、一個 description，以及一個選用的 author。按照下列步驟操作，即可產生一個能貼到文件 head 的區塊。
- 輸入一個精確的文件標題。在 title 欄位輸入頁面的確切名稱。表單會修剪空白、拒絕控制字元，並將值限制在 200 字元以內，這已遠超過任何瀏覽器分頁或搜尋結果標題能顯示的實際長度。
- 輸入一段簡潔的頁面描述。寫一兩句話，如實摘要訪客會看到的內容。表單會修剪並跳脫文字，將長度限制在 500 字元以內，並拒絕空白或過長的值，這樣你就不會不小心發佈空白的描述。
- 視需要新增作者名稱。如果頁面沒有意義的作者值，請將此欄留空。填入時會進行修剪、跳脫，並限制在 120 字元以內。它只是 metadata，並非已驗證的身分，也不是 rel=author 的替代品，所以只在你打算維護這個值時才使用它。
- 產生並複製已跳脫的區塊。點擊產生按鈕。在貼上之前先讀一次輸出:UTF-8 宣告應該在第一行，所有 & 符號和角括號都應該已經編碼完成，而在可能影響屬性的地方，引號也應該已經跳脫。
- 將區塊貼到文件 head 中，然後進行驗證。把這些行直接插入 HTML 的 <head> 內，重新載入實際運作的頁面，檢視原始碼，並確認文件中恰好有一個 <title> 元素和一個 description meta 標籤。儲存之前，先移除由佈景主題、外掛或框架所新增的重複項目。
輸出要貼到 HTML 的哪裡
這個區塊應該放在 <head> 元素內，在任何依賴文件標題或字元集的 <script> 或 <link> 標籤之前。如果是普通的 HTML 檔，請開啟文件、找到 <head>，並把這些行貼在開頭標籤的正後方。如果是 WordPress、SharePoint 或靜態網站產生器這類 CMS，也存在相同的 head 區域，但佈景主題或平台可能已經自行注入 title 和 description。
兩個檢查就能抓到大多數初學者會遇到的問題。第一，貼上之後檢視實際運作頁面的渲染原始碼，數一下出現了幾個 <title> 元素和幾個 description meta 標籤;答案應該是各恰好一個。第二，確認伺服器的 HTTP 回應沒有在 Content-Type 標頭中宣告衝突的編碼，因為標頭層級的編碼優先於任何 meta 宣告。產生器無法讀取 HTTP 標頭或樣板輸出，因此這個驗證必須由你在部署後自行執行。根據 WHATWG HTML 規格，字元集宣告應該出現在文件的前 1024 個位元組之內，這就是為什麼產生器會先輸出 UTF-8 那行，也說明了為什麼把它貼在 head 頂端附近很重要。
提早抓到的常見新手錯誤
初學者往往會遇到同一批少數幾個問題，而這些問題一旦知道要留意，都很容易預防。
- 貼到可見的 body。這個區塊是給 head 用的。如果它以文字形式顯示在頁面上，代表它被放到了 <body> 裡，或是被某個會移除 head 標記的編輯器處理掉了。請把它移回 head，並清除頁面上可見的那份。
- 讓編輯器把標記再次跳脫。如果你的 CMS 或程式碼編輯器處於「視覺」模式，並在儲存時把 & 轉成 &，那每個已經跳脫過的字元都會被編碼兩次。請用純文字或程式碼檢視模式貼上，這樣產生器原本套用的跳脫才能完整保留下來。
- 留下由佈景主題或 SEO 外掛產生的重複項目。框架通常會自己新增 title 和 description meta 標籤。貼上產生器的輸出後，請檢視原始碼，並移除重複的項目，讓文件中每種標籤各只有一個，而不是兩個。
- 假設 title 會原樣出現在搜尋結果中。搜尋系統在組合結果時，可能會重寫、縮短，或忽略 title 元素。根據 Google 的標題連結指引，渲染出來的標題會依據查詢內容、頁面內容和其他準則，而可能與原始 title 不同。一個有效的 title 是起點輸入，並非它在搜尋結果中實際顯示方式的保證。
- 忘了檢查 viewport。viewport meta 標籤設定為 width=device-width, initial-scale=1，並刻意不包含 maximum-scale 或 user-scalable=no，因為停用使用者縮放會損害無障礙性。發佈之後，請用較窄的 viewport 寬度開啟頁面，確認版面能透過一般 CSS 正確響應，而不是依賴 meta 標籤來強制行為。
通過這些檢查之後，你就有一個乾淨的基本 head 區塊就定位了。接下來，canonical 標籤、robots 指令、Open Graph 屬性和 Twitter Cards 都可以在各自變得與該頁面相關時，透過各自的工具逐一加入，而不是全部混在一個難以審核的冗長表單中。這個產生器會持續專注在基礎上，讓初學者能在第一次嘗試時就發佈出有效、可審閱的文件 head。