ASP.NET 2.0 動態控制頁面 Meta 標籤：Title、Keywords、Description 完整實作

ASP.NET 2.0 強化 Page.Header 控制項集合，讓開發者在 Page_Load 階段以程式碼動態新增/修改 <title>、<meta>、<link> 等頭部元素，完美支援單一頁面多內容 (如 CMS、商品詳情) 的 SEO 需求。本文提供完整、可直接複製的實作範本。

核心物件模型

• Page.Title：直接設定頁面標題。
• Page.Header.Controls：ControlCollection，可 Add() 任意 HtmlControl。
• HtmlMeta：對應 <meta>，屬性 Name、HttpEquiv、Content。
• HtmlLink：對應 <link>，屬性 Href、Attributes (rel, type 等)。

完整動態 Head 建構範例

protected void Page_Load(object sender, EventArgs e)
{
    // 1. 標題
    Page.Title = "商品詳情 - 我的購物網";

    // 2. 編碼宣告 (建議在 MasterPage 或 PreInit 更早設定)
    var metaCharset = new HtmlMeta { HttpEquiv = "Content-Type", Content = "text/html; charset=utf-8" };
    Page.Header.Controls.AddAt(0, metaCharset); // 插入最前

    // 3. 語言
    var metaLang = new HtmlMeta { HttpEquiv = "Content-Language", Content = "zh-TW" };
    Page.Header.Controls.Add(metaLang);

    // 4. Description
    var metaDesc = new HtmlMeta { Name = "Description", Content = "最新款輕量筆記型電腦，搭載 Intel i7 處理器，16GB 記憶體，512GB SSD。" };
    Page.Header.Controls.Add(metaDesc);

    // 5. Keywords
    var metaKw = new HtmlMeta { Name = "keywords", Content = "筆記型電腦,購物,優惠,Intel,i7,SSD" };
    Page.Header.Controls.Add(metaKw);

    // 6. CSS 連結
    var cssLink = new HtmlLink { Href = "~/Styles/product.css" };
    cssLink.Attributes.Add("rel", "stylesheet");
    cssLink.Attributes.Add("type", "text/css");
    Page.Header.Controls.Add(cssLink);

    // 7. Favicon
    var icoLink = new HtmlLink { Href = "~/favicon.ico" };
    icoLink.Attributes.Add("rel", "shortcut icon");
    Page.Header.Controls.Add(icoLink);

    // 8. Open Graph / Twitter Card (社群分享優化)
    AddMetaProperty("og:title", Page.Title);
    AddMetaProperty("og:description", metaDesc.Content);
    AddMetaProperty("og:image", "https://myshop.com/images/product-main.jpg");
    AddMetaProperty("og:url", Request.Url.AbsoluteUri);
}

private void AddMetaProperty(string property, string content)
{
    var meta = new HtmlMeta { Name = property, Content = content };
    Page.Header.Controls.Add(meta);
}

進階技巧與注意事項

SEO 檢查清單 (動態頁必檢)

• ✅ 唯一、描述性 <title> (含關鍵字，< 60 字元)
• ✅ 精準 meta name="description" (150-160 字元，含行動呼籲)
• ✅ meta name="keywords" (雖權重低，仍建議保留 5-8 核心詞)
• ✅ rel="canonical" 指向標準化 URL
• ✅ Open Graph / Twitter Card 完整 (標題、描述、圖片、URL)
• ✅ viewport、charset=utf-8 正確

結語

善用 Page.Header.Controls 動態建構 Head 區塊，是 Web Forms 時代實現 SEO 友善動態頁面的標準做法。配合 MasterPage 集中管理共用標籤，內容頁專注差異化資料，即可構建完整、可維護的 SEO 基礎設施。