在 SharePoint 頁面中加入 meta 標籤,意味著在 SharePoint 為網站層級或頁面層級 HTML 所開放的位置,插入一段符合標準的 head 區塊,然後再確認佈景主題、頁面配置,以及任何 SEO 網頁組件並未複製或覆寫你所插入的標籤。現代的 SharePoint Online 本身只開放少數幾項 SEO 屬性——通常是網站標題、網站描述,以及網站標誌——而每頁的屬性面板並不允許作者直接編輯 HTML <head>,這正是貢獻者轉而使用傳統網站替代方案、SharePoint Framework,或以屬性包驅動的配置作為注入媒介的原因。在煩惱該把標記放在哪裡之前,先建立一個語法正確的區塊:Meta Tag Generator會產生正好符合需求的精簡、跳脫、UTF-8 head 區塊,能夠在 SharePoint 主版頁面渲染過程中存活,而不會產生多餘的角括號、不對稱的屬性引號,或是平台有時從貼上的 Office 內容繼承而來的控制字元。本文將逐步說明 SharePoint 專屬的放置選項、你會遇到的標籤重複衝突,以及驗證步驟,確認部署後的原始碼實際包含的是你所撰寫的內容,而不是編輯者悄悄改寫的版本。
Meta 標籤在 SharePoint 頁面中的意義
meta 標籤是位於文件 <head> 內的單一 HTML 元素,帶有關於該頁面的機器可讀資訊,這些資訊並不屬於可見的網頁主體。本產生器所輸出的五個元素——UTF-8 字元集宣告、回應式視窗中繼資料、<title> 元素、description 中繼資料,以及一個選用的 author 中繼資料——代表一個 SharePoint 頁面應具備的最小且符合標準的基礎。字元集宣告告訴瀏覽器應使用哪種字元編碼來解析整份文件;視窗中繼資料告訴行動瀏覽器比對裝置寬度,但不關閉使用者縮放;title 元素是瀏覽器在分頁與書籤中顯示的內容,也是搜尋系統在組合結果標題時可能重複使用的項目;description 中繼資料提供一段簡短的頁面摘要,可由相容的消費者取用;而選用的 author 元素則記錄一個受維護的署名名稱,但並不宣稱已驗證的身分。WHATWG HTML 標準定義了上述每個元素及其所屬的脈絡,這在 SharePoint 中特別重要,因為該平台經常會透過主版頁面與頁面配置注入它自己變體的相同元素。
為何 SharePoint 原生 SEO 設定仍有不足
SharePoint Online 內建的 SEO 設定涵蓋網站集合層級——網站標題、網站描述、網站標誌,以及少數搜尋引擎指令——但它並未提供對現代頁面上 <title> 或 description 的逐頁控制。現代版的頁面屬性面板接受頁面標題與英雄區摘要,但兩者皆不會以符合標準的 <title> 元素或 <meta name="description"> 標籤呈現,因此搜尋系統只能退而採用 SharePoint 自行合成的內容。傳統的 SharePoint 網站則提供更多操作槓桿——可在 SharePoint Designer 中編輯的網站主版頁面、可接受原始 HTML 的指令碼編輯器網頁組件,以及較舊的發佈配置所顯示的 SEOTitle 樣式欄位——但這些媒介各有其陷阱:主版頁面的編輯可能會被功能更新所覆寫,而指令碼編輯器在現代體驗中則已被停用。共同的限制在於,沒有單一的 SharePoint UI 控件可以處理那五個基本元素的 head 區塊,因此每個想要乾淨 title 與 description 中繼資料的團隊,最終都只能在他處產生該區塊,然後將其貼入 SharePoint 可接受的位置。
先建立一個乾淨的基本 Head 區塊
在開始與 SharePoint 的放置位置搏鬥之前,先產生你打算貼上的區塊。開啟 Meta Tag Generator,輸入一個準確的文件標題、一段簡潔的頁面描述,以及一個選用的受維護作者名稱,然後複製跳脫後的輸出。該工具會修剪每個值的前後空白、拒絕控制字元、編碼 & 符號與角括號,並在可能影響剖析的地方編碼屬性引號。它將 title 限制為 200 個字元、description 為 500、author 為 120——這個上限大到足以容納合法的文案,小到足以讓區塊保持在可控範圍。視窗中繼資料固定為 width=device-width, initial-scale=1,以保留可存取性,因為該工具刻意省略 maximum-scale 與 user-scalable 的限制。UTF-8 宣告會在任何文字中繼資料之前輸出,以避免瀏覽器在稍後宣告編碼時必須重新剖析文件。所有輸入皆保留在瀏覽器中——不會傳送至 Lizely——這在 SharePoint 環境中格外重要,因為作者經常在受限制的租用戶中作業,並希望使用不需要對外網路呼叫的工具。
參考:產生器所輸出的內容
複製的區塊在設計上相當精簡,僅包含下方五個元素。這些元素皆非裝飾用途——每一個都對應 WHATWG HTML 規格中記載的行為,而 SharePoint 本身的渲染管線會以特定方式與它們互動。
| Element | Purpose | Value source | Bound | How SharePoint tends to interact with it |
|---|---|---|---|---|
| <meta charset="utf-8"> | 向瀏覽器剖析器宣告文件的字元編碼 | Fixed string | Always emitted | 主版頁面有時會在 head 後段再發出第二個字元集;HTTP 回應標頭不得與之相左 |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | 設定會自動跟隨裝置度的回應式版面視窗 | Fixed string | Always emitted | 回應式網頁組件或行動附加元件可能會注入自己的視窗設定,進而產生重複 |
| <title> | 為文件命名;顯示於瀏覽器分頁與書籤中 | Your title input | 200 characters | 頁面配置經常會從內部屬性自行渲染一個 title 元素,這是最常見的重複來源 |
| <meta name="description"> | 簡短、人可讀的摘要,可供相容的消費者使用 | Your description input | 500 characters | SEO 網頁組件與由中繼資料驅動的搜尋配置,經常會新增第二個 description 標籤 |
| <meta name="author"> | 記錄一個受維護的署名名稱;選用 | Your author input | 120 characters | SharePoint 本身很少注入 author 中繼資料,因此此處的重複通常來自自訂佈景主題 |
Canonical 連結、robots 指令、Open Graph 屬性,以及 Twitter Card 標記皆刻意自此區塊中排除。每一項都各需單獨決策,並有專屬的工具,將所有詞彙混在同一份表單中,只會讓人更容易複製到互相矛盾的標記。請將複製的區塊視為單一可稽核的單元,任何額外的詞彙請於頁面其他位置,或於其他產生器中另行處理。
在 SharePoint 中加入 Meta 標籤的位置與方式
由於 SharePoint 提供多個注入媒介,而非單一明顯的位置,為你的環境選擇正確的媒介便成為最關鍵的決策。下列步驟假設你已使用 Meta Tag Generator 產生一個乾淨的 head 區塊,並已將其複製到剪貼簿。
- 確認你的 SharePoint 體驗。請確認目標網站是現代的 SharePoint Online 網站、傳統發佈網站,或是同時兼具兩者的混合網站。現代網站需要 SharePoint Framework (SPFx) 擴充功能或由屬性包驅動的配置;傳統網站則可接受 Script Editor 網頁組件或主版頁面編輯;混合網站則可能兩種路徑皆需。
- 選擇注入媒介。針對現代網站,可部署透過共用 UserCustomActions 位置注入 head 區塊的 SPFx 應用程式自訂工具,或是將值儲存於網站屬性包,並透過搜尋驅動的配置加以渲染。針對傳統網站,請將區塊貼入放置於隱藏網頁組件區中的 Script Editor 網頁組件,或——為了網站範圍的覆蓋——將其加入網站主版頁面的頁首。
- 如實貼上所複製的區塊。在編輯模式下開啟所選的媒介,將游標置於 <head> 區域內(針對主版頁面與 SPFx 擴充功能)或網頁組件的 HTML 內容區內,然後直接貼上,不要重新排版。請勿將其貼成可見的內文文字,也勿將貼上的區塊再次送進會對標記做第二次跳脫處理的「RTF 編輯器」。
- 透過正確的範圍進行儲存與發佈。儲存主版頁面、簽入 SPFx 擴充功能,或儲存網頁組件。若為全網站部署,請將主版頁面發佈為使用中版本;若為逐頁部署,請確認 SPFx 自訂工具的範圍已正確設定於目標網站集合。
- 記下你所使用的 title 與 description 值。請記錄你實際注入的確切字串,以便在驗證時於線上原始碼中搜尋,並讓未來的移轉或功能更新可依據同一基準進行稽核。
驗證部署後的原始碼並解決衝突
發佈後,請於瀏覽器中開啟線上頁面,檢視頁面原始碼,並確認你所注入的標籤確實出現在送出的 <head> 中。SharePoint 的佈景主題、頁面配置,以及第三方 SEO 網頁組件經常會注入自己的 <title> 元素、自有的 description 中繼資料,或是重複的視窗中繼資料,而實際生效的是渲染後的原始碼——而非編輯器的預覽。請留意是否出現多個 <title> 元素、多個 <meta name="description">、相互衝突的字元集宣告,或是與 UTF-8 宣告不一致的 Content-Type HTTP 標頭。當衝突出現時,解決方式取決於其來源:由佈景主題注入的 title 通常需要編輯頁面配置或更換主版頁面;由外掛注入的 description 通常需要調整該外掛自身的設定面板;SPFx 的衝突通常代表兩個自訂工具正在爭奪同一個 UserCustomActions 位置,此時必須將其中之一的範圍排除。請在每次修正後重新渲染頁面並重新檢查。你所貼上的區塊只是正確的起始語法,並非收錄、排名或特定搜尋結果片段的保證——Google 的標題連結指引即明確指出,搜尋系統可能會根據頁面與查詢重寫標題。
Best Practices for SharePoint Meta Tags
Treat the title and description as content decisions, not syntax decisions. Write a title that names the page accurately rather than stuffing keywords; write a description that summarizes what a visitor will actually see rather than promising what the page does not deliver. Avoid duplicating descriptions across unrelated pages, because SharePoint's search and any external crawler will see those duplicates and treat them as low-value. Keep the author field populated only when the site maintains a meaningful value across pages; if author names vary per contributor, omit the field and rely on visible bylines plus appropriate structured data instead. Do not paste canonical link elements, robots directives, Open Graph properties, or Twitter Card markup into this block — those tags carry separate decisions and have dedicated generators, and mixing every vocabulary into one block is exactly how contradictory markup ends up in production. Finally, after every SharePoint feature update, master-page change, or theme upgrade, re-inspect the live source: SharePoint upgrades are a common silent source of duplicate tags, and a five-minute view-source check is cheaper than a week of unexplained search-result drift.
If you're weighing options, Create Facebook Graph Metadata With Open Graph Tags covers this in detail.
If you're weighing options, How to Get a Meta Tag Block (Without the SEO Bloat) covers this in detail.