給 Blogger 用的 meta tag 產生器是一個小型、基於瀏覽器的工具，會產生一段跳脫過的 HTML head 區塊，內容包含 UTF-8 字元集宣告、響應式 viewport meta tag、文件標題、頁面描述以及一個可選的作者名稱。對於 Blogger 範本來說，一個刻意精簡的產生器比所謂完整的 SEO 包裝更安全，因為 Blogger 佈景主題和第三方 SEO 小工具常常會注入自己的中繼資料。當你貼上一段很長的內容，把 canonical 連結、robots 指令、Open Graph 屬性和 Twitter Cards 連同基本標籤一起放進去時，那些值可能會與佈景主題或 All-in-One SEO 小工具已經寫入的內容相衝突，而搜尋引擎最終讀到的就會是互相矛盾的標記。Meta Tag Generator 的設計正好相反：它只輸出每個部落格頁面都需要的基礎文件 head 標籤，並把 canonical、robots、Open Graph 和 Twitter Cards 當作各自獨立的決策，交由各自的工具處理。這個區塊在你的瀏覽器中執行，從不把標題或描述送到伺服器，並在你複製之前對每個值進行修剪、長度限制以及 HTML 跳脫。這讓輸出範圍小到可以一行一行檢視，並在貼到佈景主題後與你實際發佈的 Blogger 原始碼相互對照。
Blogger 部落格實際需要哪些基礎 Meta 標籤
一個 Blogger 頁面只需要五項基礎 head 中繼資料，就能被視為符合標準且在行動裝置上可存取。第一項是 UTF-8 字元編碼宣告，它能防止含有變音符號、長破折號或非拉丁字元的標題和描述出現亂碼。第二項是設為 width=device-width 並搭配 initial-scale=1 的響應式 viewport meta tag，它讓版面 viewport 符合裝置寬度，同時不禁用使用者縮放。第三項是 title 元素——根據 WHATWG HTML 語意規範，它代表文件標題或名稱，也就是瀏覽器在分頁、書籤和歷史記錄中顯示的內容。第四項是 description 中繼資料，一段簡短的、人類可讀的摘要，相容的消費者可以用它來豐富搜尋結果片段。第五項是可選的 author 中繼資料，當一個值得信賴且適當的作者名稱存在時，用以記錄該作者。
這個工具不需要、也不應該為 Blogger 範本產出 canonical URL 標記、robots 索引指令、Open Graph 屬性或 Twitter Card 標籤。Canonical 連結和 robots 指令屬於索引決策，取決於實際 URL、網站地圖和網站的檢索政策，且各自都有專屬的產生器。Open Graph 和 Twitter Cards 描述的是一個 URL 在社群平台上分享時的呈現方式，這是一套獨立的詞彙，若與基礎 head 混在同一個複製貼上的步驟中，就可能產生衝突。把每套詞彙視為各自的區塊，每個區塊就能單獨被審查——這就是一個拒絕變成「萬用瑞士刀」的小型產生器存在的意義。
| 標籤 | 是否包含於基礎區塊 | 理由 |
|---|---|---|
| UTF-8 charset | 是 | 必須在前面宣告，以防止標題和描述中出現字元損壞。 |
| Viewport (width=device-width, initial-scale=1) | 是 | 常見的響應式基準，且不會禁用使用者縮放。 |
| Title 元素 | 是 | 在分頁、書籤中顯示的文件名稱，也是搜尋結果建構時的一項輸入。 |
| Description 中繼資料 | 是 | 相容消費者使用的一段簡短、人類可讀的摘要。 |
| Author 中繼資料 | 選用 | 當作者名稱合適且值得維護時使用，否則省略。 |
| Canonical link 元素 | 否 | 屬於獨立的索引決策，由專屬產生器處理。 |
| Robots meta tag | 否 | 屬於獨立的檢索政策，由專屬產生器處理。 |
| Open Graph 屬性 | 否 | 屬於社群分享詞彙，由專屬產生器處理。 |
| Twitter Card 標籤 | 否 | 屬於社群分享詞彙，由專屬產生器處理。 |
如何為 Blogger 文章產生基礎 Meta 標籤
- 開啟 Meta Tag Generator，輸入一個準確的文件標題（用自然語言描述這個頁面）、一段簡潔的頁面描述（概述讀者能獲得的內容），以及一個選用的、可維護的作者名稱。標題盡量接近自然語句；描述則控制在一到兩句話，凸顯這篇文章與部落格中鄰近文章的不同之處。
- 產生區塊並從工具中複製。區塊依序包含 UTF-8 charset meta tag、響應式 viewport meta tag、title 元素、description 中繼資料，以及在有提供作者時的 author 中繼資料。每個值都會被修剪、長度限制以及 HTML 跳脫——& 會變成 &、屬性引號會被編碼、角括號會被編碼，控制字元會被拒絕。
- 將區塊貼到你的 Blogger 範本的 document head 中，然後在瀏覽器中開啟發佈後的原始碼，移除佈景主題、SEO 小工具或部署層可能已經寫入的衝突內容。產生器不會擷取頁面、不會更新 Blogger 也不會發佈任何東西，所以驗證步驟必須由你來執行。
區塊在 Blogger 佈景主題中的放置位置
在經典的 Blogger 佈景主題編輯器中，把產生的程式碼貼在 <head> 開頭標籤下方、<b:skin><![CDATA[...]]></b:skin> 區塊上方；若你的佈景主題有使用 <b:include data='blog' name='all-head-content'/>，則直接貼在這一行上面。all-head-content include 本身就會輸出多項 Blogger 代管的中繼資料，所以目標是只補上缺少的部分，或修正不正確的部分。在較新的、基於 v3 版面編輯器的 Blogger 佈景主題中，請開啟佈景主題 HTML，找到結尾的 </head> 標籤，並將區塊緊貼在它上方，讓注入的中繼資料盡可能晚出現，又不跨越結尾標籤。
如果你的佈景主題在文章編輯器中提供「搜尋描述」或「Meta 描述」欄位，那麼當個別文章的描述很重要時，請把該欄位留空，因為 Blogger 會自己輸出 description 中繼資料，最後會出現重複。這種情境下，產生的區塊是用於全站通用的標題與描述，讓它出現在每一頁；個別文章的描述則應由 Blogger 自己的片段欄位處理，或透過自訂的條件式 b:if 區塊，在存在專屬值時替換。
Blogger 特有的衝突與注意事項
Blogger 佈景主題通常會內建 All-in-One SEO 小工具或較舊的「Meta Tags」小工具，這兩者都可能輸出 description、robots meta tag 或 Open Graph 屬性，與 Meta Tag Generator 寫入的內容重複。如果兩個來源都產生描述，搜尋引擎讀到的會是瀏覽器在 head 中先遇到的那一個（通常是小工具的輸出），另一個就變成無效標記。請開啟發佈後的原始碼，計算 title 元素數量（應該剛好一個）以及 description meta tag 數量（沒有刻意要備援的話，也應該剛好一個）。
如果你發現重複，請為每種中繼資料決定哪個來源為主，並移除另一個。乾淨的規則是：基礎 head 中繼資料——charset、viewport、title、description、author——由 Meta Tag Generator 輸出；canonical URL 由 canonical tag 產生器輸出；robots 指令由 meta robots 產生器輸出；Open Graph 和 Twitter Cards 則分別由各自的專屬產生器輸出。把每套詞彙各自獨立為一個區塊的理念，在取得沒有 SEO 膨脹的 meta tag 區塊指南中有更完整的說明，其中解釋了為什麼把所有東西混在同一個長表單中，正是造成矛盾的主因。
產生器內建的限制與驗證
Meta Tag Generator 套用了三項長度限制，目的在於讓輸出保持可審查，並非宣稱這些上限是排名目標。title 元素最多接受 200 個字元，description 最多接受 500 個字元，選用的作者名稱最多接受 120 個字元。超過這些限制的輸入會被表單拒絕，這正是預期行為：你無法複製含有表單未接受之值的區塊。每個文字值在驗證前都會被修剪，因此結尾空白不會膨脹計數；HTML 跳脫會把 title 中的 & 轉為 &，並把角括號編碼，避免破壞標記。
另一項屬於內容品質的規則歸作者本人，而非工具：避免堆砌關鍵字的標題、避免在不相關的頁面之間複製相同的描述、避免做出頁面無法兌現的承諾。Meta Tag Generator 產出的是語法正確的來源中繼資料；它不會衡量關鍵字品質、點擊率或搜尋需求，也無法保證文字會在任何搜尋結果中原樣顯示。正如 Google 的標題連結說明文件所指出的，搜尋系統在建構結果時可能會選用頁面中其他可見文字，因此對待標題與描述的正確態度，是把它們視為準確、能區分頁面的來源內容，而不是保證會出現的搜尋片段。
部署後檢查已發佈的原始碼
將區塊貼進 Blogger 佈景主題並儲存後，請在瀏覽器中開啟實際 URL、查看原始碼，並確認 head 中剛好只有一個 <meta charset> 宣告、剛好一個 <meta name="viewport"> 標籤、剛好一個 <title> 元素、在有提供描述的情況下剛好一個 <meta name="description"> 標籤，以及在有提供作者的情況下剛好一個 <meta name="author"> 標籤。然後透過瀏覽器的開發者工具檢查 HTTP 回應標頭，確認伺服器沒有宣告一個互相衝突的編碼。如果你的 Blogger 自訂網域是透過 CDN 或 Cloudflare worker 以 HTTPS 提供服務，請確認沒有中介層在產生器輸出之前注入 X-UA-Compatible 標籤或重複的 description。
請以行動裝置寬度（或在行動裝置模擬面板中）造訪頁面，確認響應式 viewport 的行為正確。版面應在常見斷點下貼合裝置寬度且不出現橫向捲動，而兩指縮放功能仍應正常運作，因為 viewport tag 刻意省略了 maximum-scale 與 user-scalable 限制。最後，在重新檢索後使用搜尋控制台的檢查工具，看看搜尋引擎檢視下的頁面摘要；這個檢視才是搜尋引擎認定哪段文字為權威內容的依據，而影響它的方式，是讓基礎 head 中繼資料與頁面上實際可見的內容保持一致。產生器的職責是產生語法正確的來源；其餘則是內容紀律。