利用JavaScript 產生結構化資料| Google 搜尋中心| 說明文件

使用Google 代碼管理工具動態產生JSON-LD. 在Google 代碼管理工具中使用變數. 利用自訂JavaScript 產生結構化資料; 採用伺服器端轉譯作業; 測試實作成果 ... Google 搜尋中心 說明文件 時間不夠嗎？ 快速入門導覽課程 讓Google顯示你的網站 為網站進行搜尋引擎最佳化調整 評估網站在Google搜尋中的成效 您需要聘請SEO嗎？ 初級搜尋引擎最佳化(SEO) 踏出第一步 搜尋引擎最佳化(SEO)入門指南 透過Google提供商家詳細資料 SearchConsole入門指南 進階搜尋引擎最佳化(SEO) 踏出第一步 指南規範 搜尋服務的運作方式 控制檢索及建立索引作業 變更搜尋外觀 針對網頁體驗進行最佳化調整 支援 網誌 最新消息 所有更新 說明文件更新 最新YouTube影片 近期Podcast節目 活動 個案研究 Language English BahasaIndonesia Deutsch Español Español–AméricaLatina Français Italiano Polski Português–Brasil TiếngViệt Türkçe Русский العربيّة हिंदी ภาษาไทย 中文–简体 中文–繁體 日本語 한국어 登入 說明文件 前往SearchConsole 簡介 基本概念 初級搜尋引擎最佳化(SEO) 進階搜尋引擎最佳化(SEO) Google 搜尋中心 說明文件 更多 簡介 基本概念 初級搜尋引擎最佳化(SEO) 進階搜尋引擎最佳化(SEO) 支援 網誌 最新消息 更多 活動 個案研究 踏出第一步 Google搜尋的運作方式 Google搜尋開發人員指南 SearchConsole進階指南 指南 指南及規範總覽網站管理員指南 一般指南 保持簡單的網址結構向Google說明您的連出連結限制插頁式廣告和對話方塊將網站標記為兒童導向內容瀏覽器相容性避免建立重複的內容使用有效的網頁中繼資料提供可檢索的連結確認Googlebot未遭到封鎖測試網站時避免干擾Google搜尋作業的最佳做法 特定類型內容規範 圖片和影片 Google圖片最佳做法影片最佳做法互動式多媒體檔案最佳做法安全搜尋和您的網站推薦給網誌作者的最佳做法網站代管服務避免Google搜尋顯示受遮蓋的資訊Google搜尋中的AMP指南 在Google搜尋中經營電子商務的最佳做法 總覽內容可以出現在何處分享產品資料加入結構化資料推出新網站撰寫優質產品評論設計網址結構電子商務網站架構分頁、分階段載入網頁和搜尋 COVID-19相關資源和提示 適用於所有網站適用於教育網站適用於政府和醫療網站 品質指南 自動產生的內容幕後重新導向連結配置內容空洞付費連結偽裝隱藏的文字與連結入口網頁剪輯的內容聯盟計畫不相關的關鍵字建立帶有惡意行為的網頁自動查詢使用者產生的垃圾內容防範垃圾留言的方法檢舉垃圾內容、付費連結或惡意軟體 控制檢索及建立索引作業 總覽 Sitemap 瞭解Sitemap建立並提交Sitemap分割大型Sitemap Sitemap擴充元素 影片Sitemap和替代方案圖片SitemapGoogle新聞Sitemap robots.txt robots.txt簡介建立並提交robots.txt檔案更新robots.txt檔案Google如何解讀robots.txt規格漫遊器常見問題 中繼標記 Google能夠解讀的中繼標記使用noindex禁止建立搜尋索引漫遊器中繼標記、data-nosnippet和X-Robots-Tag規格 檢索器管理 要求Google重新檢索網址降低Googlebot檢索頻率驗證Googlebot和其他Google檢索器的身分大型網站擁有者的檢索預算管理指南HTTP狀態碼、網路錯誤和DNS錯誤對Google搜尋有何影響 Google檢索器 總覽GooglebotGoogleReadAloud使用者代理程式APIs-Google使用者代理程式FeedfetcherDuplex網頁版使用者代理程式 移除網址 控管您與Google分享的資訊從Google搜尋結果中移除您網站上代管的網頁從搜尋結果中移除您網站上代管的圖片重複的網址 網站遷移與變更 重新導向與Google搜尋 網站遷移 什麼是網站遷移？遷移網站但保留網址遷移網站並變更網址暫停或停用網站轉址式404錯誤 國際版和多語言版本的網站 總覽管理多地區和多語言版本的網站向Google提供網頁的本地化版本Google如何檢索會自動調整語言代碼的網頁 JavaScript內容 瞭解JavaScript搜尋引擎最佳化(SEO)基礎知識修正會影響搜尋體驗的JavaScript問題修正延遲載入內容導入動態轉譯 變更搜尋外觀 搜尋外觀相關主題總覽管理標題連結管理摘要為網站啟用搜尋結果功能精選摘要和您的網站網站連結向Google搜尋提供發布日期定義要顯示在搜尋結果中的網站小圖示翻譯搜尋結果功能讓廣告聯播網能使用Google搜尋的翻譯相關功能 使用結構化資料 瞭解結構化資料的運作方式試用結構化資料程式碼研究室探索SearchGallery結構化資料一般指南利用JavaScript產生結構化資料 功能指南 ArticleBook導覽標記輪轉介面CourseCOVID-19公告DatasetEducationQ&AEmployerAggregateRating預估薪酬Event事實查核常見問題居家活動How-to圖片授權JobPosting職業訓練當地商家Logo數學解題工具Movie練習題Product問與答Recipe評論摘錄網站連結搜尋框軟體應用程式Speakable訂閱和付費牆內容Video多元化搜尋結果彈性試閱一般準則顯示熱門地點清單禁止區域搜尋結果和其他Google資源顯示您的內容在Google圖片中使用圖片版權中繼資料 使用搜尋運算子進行偵錯 總覽site:搜尋運算子cache:搜尋運算子Google圖片搜尋運算子 網路故事 讓網路故事顯示在Google上創作網路故事的最佳做法網路故事內容政策 早期採用者計畫 包裹追蹤行動加值 針對網頁體驗進行最佳化調整 瞭解網頁體驗針對Google搜尋開始使用SignedExchange 行動裝置 行動裝置相關主題總覽 行動裝置相容性 踏出第一步行動版內容優先索引系統的最佳做法 選擇設定 總覽回應式網頁設計動態提供內容獨立網址平板電腦和功能型手機避免設計行動版網站時的常見錯誤自訂網站軟體以適合行動裝置瀏覽開發適合行動裝置瀏覽的網頁時可利用的各項資源行動裝置瀏覽相關常見問題明確告知行動帳單費用資訊使用功能型手機瀏覽行動版網頁WebLight：Google搜尋提供的快速載入精簡版網頁Google搜尋中WebLight網頁的廣告聯播網支援Google探索和您的網站 安全性 安全性相關主題總覽使用HTTPS確保網站安全無虞什麼是駭客入侵或遭入侵的內容？惡意軟體和垃圾軟體防範惡意軟體感染社交工程(網路詐騙和詐欺網站)Google安全瀏覽累犯政策 AMP 瞭解AMP在搜尋結果中的呈現方式改進AMP內容驗證AMP內容移除AMP內容 Google搜尋的API SiteVerificationAPISearchConsoleAPIIndexingAPI 時間不夠嗎？ 快速入門導覽課程 讓Google顯示你的網站 為網站進行搜尋引擎最佳化調整 評估網站在Google搜尋中的成效 您需要聘請SEO嗎？ 初級搜尋引擎最佳化(SEO) 踏出第一步 搜尋引擎最佳化(SEO)入門指南 透過Google提供商家詳細資料 SearchConsole入門指南 進階搜尋引擎最佳化(SEO) 踏出第一步 指南規範 搜尋服務的運作方式 控制檢索及建立索引作業 變更搜尋外觀 針對網頁體驗進行最佳化調整 所有更新 說明文件更新 最新YouTube影片 近期Podcast節目 首頁 搜尋中心 說明文件 進階搜尋引擎最佳化(SEO) 提供意見 利用JavaScript產生結構化資料 新型網站會使用JavaScript顯示許多動態內容，本指南將說明相關最佳做法和實作策略，協助您瞭解在網站上利用JavaScript產生結構化資料時須留意哪些事項。

如果您是第一次使用結構化資料，請參閱這篇文章，進一步瞭解結構化資料的運作方式。

利用JavaScript產生結構化資料的方法有很多種，最常見的方法如下： Google代碼管理工具 自訂JavaScript 使用Google代碼管理工具動態產生JSON-LD Google代碼管理工具平台可讓您完全不必編輯程式碼，直接管理網站上的代碼。

如要透過Google代碼管理工具產生結構化資料，請按照下列步驟操作： 在您的網站上設定及安裝Google代碼管理工具。

在容器中新增自訂HTML標記。

將所需的結構化資料區塊貼到代碼內容中。

前往容器管理選單的「安裝Google代碼管理工具」部分，按照其中的說明安裝容器。

如要在網站上新增代碼，請透過Google代碼管理工具介面發布您的容器。

測試實作成果。

在Google代碼管理工具中使用變數 Google代碼管理工具(GTM)支援變數，能夠將網頁上的資訊當做結構化資料使用。

因此，請使用變數從網頁擷取結構化資料，不要直接複製GTM中的資訊。

如果複製GTM中的資訊，網頁內容就更有可能與透過GTM插入的結構化資料不符。

舉例來說，如要動態產生食譜JSON-LD區塊，並以網頁標題做為食譜名稱，則可以建立下列這個名為recipe_name的自訂變數： function(){returndocument.title;} 接著，您就能在自訂HTML標記中使用{{recipe_name}}。

建議您建立變數，藉此收集網頁上的所有必要資訊。

以下是自訂HTML標記內容的範例： { "@context":"https://schema.org/", "@type":"Recipe", "name":"{{recipe_name}}", "image":["{{recipe_image}}"], "author":{ "@type":"Person", "name":"{{recipe_author}}" } } 注意：上述範例假設您已在GTM中定義recipe_name、recipe_image和recipe_author變數。

利用自訂JavaScript產生結構化資料 另一種產生結構化資料的常見方法是使用自訂JavaScript，您可以透過這種方式產生所有結構化資料，或者為伺服器端轉譯的結構化資料增添更多資訊。

無論您採取哪種做法，Google搜尋在轉譯網頁時皆可解讀及處理DOM中提供的結構化資料。

如要進一步瞭解Google搜尋如何處理JavaScript，請參閱JavaScript基礎知識指南。

以下是JavaScript產生的結構化資料範例： 找出想採用的結構化資料類型。

編輯網站的HTML，按照以下範例加入JavaScript程式碼片段。

詳細做法請參閱CMS或主機供應商的說明文件，或者諮詢您的開發人員。

fetch('https://api.example.com/recipes/123') .then(response=>response.text()) .then(structuredDataText=>{ constscript=document.createElement('script'); script.setAttribute('type','application/ld+json'); script.textContent=structuredDataText; document.head.appendChild(script); }); 在複合式搜尋結果測試中檢測實作成果。

採用伺服器端轉譯作業 採用伺服器端轉譯作業時，您也可以在轉譯後的輸出結果中加入所需結構化資料。

請參閱您的架構說明文件，瞭解如何針對您想使用的結構化資料類型產生JSON-LD。

測試實作成果 為確保Google搜尋能夠檢索您的結構化資料並將其編入索引，請務必測試實作成果： 開啟複合式搜尋結果測試。

輸入您要測試的網址。

注意：建議您輸入網址而非程式碼，因為輸入程式碼時會有JavaScript相關限制，例如CORS限制。

按一下[測試網址]。

成功：如果您已確實完成所有操作，而且這項工具支援您的結構化資料類型，那麼系統就會顯示「網頁適合顯示複合式搜尋結果」訊息。

如果複合式搜尋結果測試不支援您要測試的結構化資料類型，請查看轉譯後的HTML。

只要轉譯後的HTML含有結構化資料，Google搜尋就能處理該資料。

再試一次：如果系統顯示錯誤或警告，最有可能的原因是語法有誤或缺少屬性。

請參閱相關結構化資料類型的說明文件，並確認您已添加所有屬性。

如果問題持續發生，請務必一併參閱這份指南，瞭解如何修正會影響搜尋體驗的JavaScript問題。

提供意見 Exceptasotherwisenoted,thecontentofthispageislicensedundertheCreativeCommonsAttribution4.0License,andcodesamplesarelicensedundertheApache2.0License.Fordetails,seetheGoogleDevelopersSitePolicies.JavaisaregisteredtrademarkofOracleand/oritsaffiliates. Lastupdated2022-04-21UTC. [{ "type":"thumb-down", "id":"missingTheInformationINeed", "label":"缺少我需要的資訊" },{ "type":"thumb-down", "id":"tooComplicatedTooManySteps", "label":"過於複雜/步驟過多" },{ "type":"thumb-down", "id":"outOfDate", "label":"過時" },{ "type":"thumb-down", "id":"translationIssue", "label":"翻譯問題" },{ "type":"thumb-down", "id":"samplesCodeIssue", "label":"示例/程式碼問題" },{ "type":"thumb-down", "id":"otherDown", "label":"其他" }] [{ "type":"thumb-up", "id":"easyToUnderstand", "label":"容易理解" },{ "type":"thumb-up", "id":"solvedMyProblem", "label":"確實解決了我的問題" },{ "type":"thumb-up", "id":"otherUp", "label":"其他" }] 想進一步說明嗎？ Podcast 收聽《SearchOfftheRecord》Podcast Twitter 在Twitter上追蹤@googlesearchc 提出問題 在產品討論社群發文提問 參加搜尋引擎最佳化(SEO)諮詢時間 說明文件 取得最新消息 網誌 Twitter YouTube 資源 您需要SEO嗎？ 搜尋引擎最佳化(SEO)入門指南 SearchConsole說明文件 個案研究 工具 SearchConsole 行動裝置相容性測試 複合式搜尋結果測試 PageSpeedInsights AMP測試 Android Chrome Firebase GoogleCloudPlatform 所有產品 條款 隱私權 訂閱GoogleDevelopers電子報 訂閱 Language English BahasaIndonesia Deutsch Español Español–AméricaLatina Français Italiano Polski Português–Brasil TiếngViệt Türkçe Русский العربيّة हिंदी ภาษาไทย 中文–简体 中文–繁體 日本語 한국어