一個基本的 meta 標籤區塊,適用於 HTML 頁面,由五個 HTML 元素組成,放置於 head 內:字元集宣告、viewport 指令、title 元素、description 元素,以及一個選用的 author 元素,全部都以跳脫標記的形式撰寫,方便直接貼入文件。這五個標籤涵蓋了瀏覽器、搜尋引擎與社群平台在渲染、建立索引與預覽任何網頁時所依賴的詮釋資料,而且它們仍然是每個現代 HTML 文件中最小可行的 head 區塊。此區塊刻意維持精簡:它不包含 Open Graph、Twitter Card、canonical、hreflang、robots 或其他專門指令,因為那些標籤屬於各自獨立的專屬產生器,讓每條規則都能單獨驗證。將基本區塊視為一個小型的可重複使用片段,可讓標記保持可預測性、加快稽核速度,並避免 CMS 主題、外掛與框架在注入自家版本的中介資料時所引發的標籤衝突問題。
多數團隊在處理 meta 標籤時都會遇到困難,因為頁面的 head 區段會被多人接觸。CMS 主題可能已經輸出一個 viewport 標籤,SEO 外掛可能會注入自己的 description,而頁面編輯器可能會用 H1 片段覆寫 title。在沒有一個乾淨基準的情況下,每一位新的協作人員要不是再新增一個重複項目,就是不小心移除了另一個系統仍在使用的繼承標籤。只要產生一次基本區塊,將其視為唯一真實來源,然後在其上疊加專門標籤,就能建立出所有人都能閱讀與維護的結構。這正是 HTML 規範在將 head 區分為 metadata、links、scripts 與其他類別時所推薦的「關注點分離」原則。
基本 Meta 標籤區塊應包含哪些內容
基本區塊恰好包含五個元素,每一個都解決特定的渲染或索引問題。charset 元素告訴瀏覽器如何解碼文件的位元組;UTF-8 是通用選擇,也是 HTML 現行標準隱含的預設值。viewport 元素控制頁面在行動裝置上的縮放方式,若沒有它,手機會以桌面螢幕的方式來渲染頁面。title 元素是顯示在瀏覽器分頁與搜尋引擎結果中的可點擊標題。description 元素是一段簡短段落,常會出現在搜尋結果摘要中標題的下方,即使它本身並非排名因子。author 元素雖然是選用,但對於記錄內容維護者相當實用,特別是在說明文件網站與多人撰寫的部落格上。
| 標籤 | 用途 | 是否必要 |
|---|---|---|
| meta charset | 宣告文件的文字編碼 | 必要 |
| meta viewport | 控制行動裝置的縮放與寬度 | 必要 |
| title | 設定分頁與搜尋的頁面標題 | 必要 |
| meta description | 提供搜尋結果的摘要說明 | 必要 |
| meta name author | 識別內容維護者 | 選用 |
專門標籤刻意被排除在此區塊之外。Open Graph 與 Twitter Card 標籤控制社群預覽,由專屬的 Open Graph 產生器 處理。Canonical 標籤可避免重複內容造成的混淆,屬於 Canonical 標籤產生器 的範疇。Robots 指令需要自己的驗證工具,因為很容易產生互相矛盾的值,而 hreflang 標籤則必須與語系策略一致。將每個類別保留在各自的產生器中,代表你可以一次稽核並更新一條規則,而不會干擾其他規則。
如何使用產生器建立 Meta 標籤
產生乾淨基本區塊的最快方式,是使用 Lizely 的 Meta Tag 產生器,它能從上述五個欄位輸出一段跳脫過的 HTML head 片段。此產生器會為你處理 HTML 跳脫,這一點很重要,因為 title 或 description 中的撇號、& 符號與引號都必須編碼為實體,以免破壞標記。下方步驟會逐步帶領你完成從開啟工具到將區塊插入頁面的完整流程。
- 開啟 Meta Tag 產生器,在 title 欄位中輸入一個準確的文件標題。請控制在約六十個字元以內,以免在搜尋結果中被截斷,並寫一個與可見 H1 對應的唯一值。
- 撰寫一段約 150 到 160 個字元的簡潔頁面 description,摘要頁面的實際內容,並避免塞入關鍵字的誘惑。description 是摘要,而非排名欄位,因此清晰勝過密度。
- 在 author 欄位中新增選用的維護者姓名。請使用負責維持內容更新的個人或團隊名稱,而不是品牌名稱。
- 點擊產生並複製跳脫過的區塊。輸出內容應恰好包含上述五個標籤,順序相同,且不附加額外的 SEO 或社群標籤。
- 將區塊貼到 HTML 文件的 head 內,理想上是放在 head 元素的最頂端,讓解析器第一個讀取。如果你使用的是 CMS,請將它放在控制原始 head 輸出 的區段,而不是放在內文內容欄位中。
- 在瀏覽器中開啟頁面,檢視原始碼,並確認你的主題、外掛或框架沒有輸出重複的 title、description 或 viewport 標籤。移除或停用任何自動注入的重複項目。
- 將最終的 URL 透過 SERP 片段預覽 檢視,確認 title 與 description 的呈現方式符合預期,若有任一被截斷,請調整用字。
撰寫有力的 Title 與 Description
title 元素是整個區塊中權重最高的,因為它是分頁、書籤與搜尋結果中頁面的主要標籤。一個有力的 title 應與可見的 H1 對應,以平實的語言點出主題,並避免其他網站常用的罐頭模式。品牌名稱應使用連字號或分隔號等符號附加在最後,但頁面的主題永遠應放在最前面。搜尋引擎通常只顯示前五十到六十個字元,因此超過的部分屬於軟性上限,而非硬性限制。
description 元素最理想的做法是將其視為一句邀請讀者閱讀頁面的引言。它應該描述讀者將看到的內容,提及一個能讓此頁面有別於競爭對手的具體細節,並避免填充式用語。有些平台會完全忽略 description,改為從頁面內容自行合成摘要,這也是為何 description 應保持誠實摘要,而不是一串關鍵字。由 W3C 與 WHATWG 發布的 HTML 現行標準,將 title 與 description 都視為建議性的詮釋資料,瀏覽器與爬蟲可以選擇遵循與否。
Head 區段常見的衝突
插入基本區塊後,最常見的失敗模式就是重複的詮釋資料。CMS 主題經常會輸出自己的 viewport 標籤與預設 description,而 SEO 外掛通常也會寫入自己的 title 與 description 欄位。當產生器的區塊與這些重複項目並存時,搜尋引擎必須從中擇一,而被選中的版本不一定是你預期的版本。修正方法是使用瀏覽器的檢視原始碼工具檢查渲染後的 head,識別每一個重複項目,並從源頭移除衝突,或停用產生衝突的功能。將 viewport 標籤寫死的主題與框架是最嚴重的違規者,改用無頭主題或移除重複項目的子主題,通常是最乾淨的解法。
另一種衝突來自框架自動注入社群標籤,特別是在基本區塊之外另外注入 Open Graph 與 Twitter Card 詮釋資料。這些標籤很有價值,但屬於不同的類別,應使用像是 Open Graph 產生器這類工具單獨檢視。嘗試將它們與基本區塊合併為單一字串,會產生冗長且脆弱的片段,只要一個錯字就會破壞所有社群預覽。當多個外掛各自輸出 author meta 時,作者資訊也可能會衝突,這也是該欄位在產生器中保留為選用的另一個原因。
發布前驗證結果
驗證是個小步驟,卻能防止大問題。請開啟渲染後的頁面,檢視原始碼,確認 head 中恰好包含一個 charset、一個 viewport、一個 title、一個 description,以及最多一個 author。確認 title 與 description 與你輸入的值一致,沒有實體跳脫的殘留痕跡外漏。確認 title 的字元數與 description 的字元數落在建議範圍內,並透過 SERP 預覽檢視頁面在搜尋結果中的呈現。最後,將頁面通過結構化資料與社群標籤稽核,確認專門標籤位於各自的專屬產生器中,且沒有任何一項與基本區塊相矛盾。
如果你維護的是多語系網站,基本區塊也是確認每個語言版本都有各自 title 與 description 的正確位置,而不是同一字串的翻譯副本。請搭配 hreflang 準確度指南 進行 hreflang 檢查,讓搜尋引擎能為每位使用者對應到正確的語言版本。對於同時依賴 canonical URL 的網站,請確認 canonical 標籤指向首選版本,且 canonical 頁面上的基本區塊本身不會與 canonical 目標相互矛盾。
何時應改用 CMS 外掛
當你撰寫原始 HTML、管理靜態網站,或希望擁有保存在版本控制中的文件化基準時,產生器就是合適的工具。當你想要編輯畫面中的欄位、對詮釋資料進行角色型存取、自動改寫分類法,並與其他發佈流程整合時,CMS 外掛就是合適的工具。實務上,這兩種做法相輔相成:產生器產生一個保存在文件中的標準區塊,外掛則從編輯器填入相同欄位,同時停用主題層級的任何重複項目。許多 SEO 外掛也提供設定,可移除主題輸出的重複 viewport 或 description 標籤,這正好就是前面所建議的清理步驟。
對於在基本 meta 標籤之外還維護 sitemap 的團隊,建立 XML sitemap 的實用指南 詳細說明如何列出每個已發佈的 URL 並提交給搜尋引擎,補上基本 meta 標籤區塊所開啟的可被探索性故事的最後一塊拼圖。結合乾淨的 head 區塊、維護良好的 sitemap,以及經過驗證的專門標籤,能為搜尋引擎與社群平台提供一致的網站面貌,免於手動編輯詮釋資料時常見的雜訊。
若你正在權衡各種方案,如何為靜態網站建立 Nginx 設定 有詳細說明。
若你正在權衡各種方案,如何建立 Robots.txt 檔案:實用指南 有詳細說明。