適用於生產環境的 Blazor SEO 元資料元件
一個生產環境可用的 Blazor 元件，集中管理 SEO 元資料、社群預覽、JSON-LD 結構化資料及 AI 爬蟲控制，並可重複使用。
購買 約 $184 完整實作，解鎖整個 Blazor 應用的正規網址、hreflang 標籤、Open Graph、Twitter Cards 及自動 JSON-LD 生成。
目錄
元件概覽
Blazor Metadata 元件提供集中且生產環境可用的解決方案，管理 Blazor 應用中所有重要的 SEO 元資料，包括正規網址、hreflang 標籤、Open Graph 與 Twitter Card 元資料、JSON-LD 結構化資料及現代 AI 爬蟲指令。
基於強型別 PageMetaData 模型與依賴注入服務，消除重複標記，確保每頁符合搜尋引擎與社群平台規範。
生產環境 Blazor 應用必備的元資料功能
MetadataComponent 從單一可重複使用的組件處理所有重要 SEO 訊號。
正規網址與 hreflang 管理
自動生成正規網址及支援多語系的 hreflang 標籤，避免重複內容問題。
- 避免重複內容懲罰
- 內建多語系網站支援
- x-default 預設回退處理
Open Graph 與 Twitter Cards
豐富的社群預覽，包含 og:title、og:description、og:image 及 Twitter Card 元標籤，確保專業的連結分享效果。
- 專業社群媒體預覽
- 本地化標題與描述
- 圖片優化支援
JSON-LD 結構化資料
Schema.org 標記涵蓋文章、常見問題、麵包屑與組織資料，協助搜尋引擎理解內容。
- 強化搜尋結果呈現
- 知識面板資格
- 語音搜尋優化
了解 Blazor 中的 JSON-LD 結構化資料
JSON-LD（連結資料的 JavaScript 物件表示法）是網頁結構化資料的推薦格式，搜尋引擎利用此標記更好理解內容並呈現豐富結果。
JSON-LD 對 SEO 的重要性
結構化資料精確告訴搜尋引擎頁面內容，文章顯示發佈日期與作者，FAQ 頁面在搜尋結果展開問題，產品顯示價格與評分，MetadataComponent 全自動處理。
支援的 Schema 類型
- 文章 Schema: 標題、描述、作者、出版者、發佈日期及文章段落
- 常見問題頁面 Schema: 直接在搜尋結果顯示的問答對
- 麵包屑清單 Schema: 搜尋摘要中顯示的導覽階層
- 組織 Schema: 公司資訊、標誌與社群資料
JsonLdService 根據 PageMetaData 與元件參數建立符合規範的資料，每個 Schema 區塊以 type 為 application/ld+json 的 script 標籤呈現，標記與可見內容分離。
元件架構
元資料系統依賴分層服務，將內容定義集中管理並在整個 UI 中提供。
- PageMetaDataService 為每個路由保存型別化條目，包含標題、描述、社群圖片及 robots 指令。
- MetadataComponent 使用當前頁面條目，渲染 SEO 標記，並合併頁面提供的額外 JSON LD 資料。
- CultureService 提供當前文化資訊，確保 hreflang 連結與正規網址精確生成。
- JsonLdService 輔助方法建立符合 Schema 的文章、FAQ、麵包屑及產品重點資料。
由於層次分離，您可調整描述、功能標誌或 AI 使用政策，而無需修改視圖模板。
控制搜尋引擎與 AI 爬蟲
元件支援細緻的 robots 元標籤，包括 index、follow、noarchive、nosnippet 及現代 AI 專用指令如 noai 和 noimageai，精確控制搜尋引擎與 AI 系統對內容的互動。
標準指令
index/noindex- 控制搜尋引擎索引follow/nofollow- 連結爬行行為noarchive- 防止快取副本nosnippet- 禁用文字預覽
AI 專用控制
noai/ai- 控制 AI 訓練使用noimageai/imageai- 圖片 AI 權限- AllowAiIndexing 參數集中控制
- 支援每頁覆寫
設定流程
依照以下步驟將元件整合至現有 Blazor 解決方案。
- 請在您的依賴注入容器中註冊 ICultureService、PageMetaDataService 及 JsonLdService。
- 為每個路由填寫本地化標題、描述、正規網址及分享圖片的 PageMetaData 條目。
- 在版面配置或單頁中引用 MetadataComponent，並透過 PageLinks 常數綁定正確的元資料條目。
- 每頁組合可選的 JsonLd 集合，呈現文章、FAQ、麵包屑或產品 Schema 區塊。
- 使用 BuyButton 觸發軟體徽章下載或付款提示，讓訪客立即購買元件。
程式碼範例
以下範例示範如何註冊元資料條目並在共用版面中渲染。
定義頁面元資料
在版面中渲染元資料
附加元資料至頁面
測試與驗證
整合後執行以下檢查，確保標記符合 SEO 預期。
- 使用 Google Rich Results Test 的 Schema 驗證工具，確認 JSON LD 資料正確解析。
- 使用 Screaming Frog、Sitebulb 或類似爬蟲工具驗證正規網址與 hreflang 連結。
- 利用分享除錯工具檢查 Open Graph 與 Twitter Cards，確保預覽顯示正確標題與圖片。
- 使用瀏覽器開發者工具稽核 robots 指令，確認 AI 使用標籤與設定一致。
- 追蹤 Core Web Vitals，確保元資料更新不會造成版面位移或阻塞資源。