Article

您可以在新聞、網誌和體育相關文章網頁中加入 Article 結構化資料,藉此改善網頁在 Google 搜尋結果中的呈現效果。視網頁程式碼的編寫方式而定,網頁可採用的功能會有所不同:

  • 含有結構化資料的 AMP 網頁:在行動版搜尋結果中,包含結構化資料的 AMP 網頁能夠以焦點新聞輪轉介面、複合式搜尋結果的代管輪轉介面、影像故事和複合式搜尋結果等形式呈現。這類搜尋結果可包含圖片、頁面標誌以及其他有趣的複合式搜尋結果功能。
  • 含有結構化資料的非 AMP 網頁:如果在非 AMP 文章網頁中加入 Article 結構化資料,有助於 Google 進一步瞭解網頁內容,並在 Article 複合式搜尋結果中針對該文章顯示更合適的標題文字、圖片與發布日期。

範例

以下示範如何在具有 Article 結構化資料的 AMP 網頁上採用 JSON-LD 程式碼。


<html amp>
  <head>
    <title>Article headline</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://google.com/article"
      },
      "headline": "Article headline",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00",
      "dateModified": "2015-02-05T09:20:00+08:00",
      "author": {
        "@type": "Person",
        "name": "John Doe",
        "url": "http://example.com/profile/johndoe123"
      },
      "publisher": {
        "@type": "Organization",
        "name": "Google",
        "logo": {
          "@type": "ImageObject",
          "url": "https://google.com/logo.jpg"
        }
      }
    }
    </script>
  </head>
  <body>
  </body>
</html>

以下是具有 Article 結構化資料的非 AMP 網頁範例。 非 AMP 網頁與 AMP 網頁有著不同的建議屬性。


<html>
  <head>
    <title>Article headline</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "datePublished": "2015-02-05T08:00:00+08:00",
      "dateModified": "2015-02-05T09:20:00+08:00",
      "author": [{
          "@type": "Person",
          "name": "Jane Doe",
          "url": "http://example.com/profile/janedoe123"
        },{
          "@type": "Person",
          "name": "John Doe",
          "url": "http://example.com/profile/johndoe123"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

實作流程

包含結構化資料的 AMP 網頁

新聞報導的 AMP 結果輪轉介面。

包含結構化資料的 AMP 網頁可顯示在搜尋結果的焦點新聞輪轉介面中。 如果沒有結構化資料,AMP 網頁就只會在 Google 搜尋結果中顯示為標準藍色連結。 如要進一步瞭解搜尋結果中的 AMP,請參閱關於 Google 搜尋結果中的 AMP 一文。

如何建立包含結構化資料的 AMP 網頁:

  1. 遵循 AMP 專案規格
  2. 遵循其他網頁規範,確保 Google 可檢索您的網頁。
  3. 新增結構化資料元素,說明網頁上的文章。
  4. 使用複合式搜尋結果測試檢驗您的結構化資料。

包含結構化資料的非 AMP 網頁

顯示在搜尋結果中,包含 Article 結構化資料的非 AMP 網頁

在非 AMP 網頁中新增 Article 結構化資料後,您可以更完整地建議正確的標題、發布日期及圖片等資訊,讓 Google 顯示在搜尋結果中。

如何為非 AMP 文章網頁新增結構化資料:

  1. 在網頁中新增結構化資料元素,說明網頁上的文章。
  2. 閱讀相關規範,確保 Google 可檢索您的網頁。
  3. 使用複合式搜尋結果測試檢驗您的結構化資料。

指南規範

您必須按照下列規範啟用結構化資料,才能讓網站顯示在 Google 搜尋結果中。

技術指南

  • 如果您的網站內容是以訂閱的方式開放瀏覽,或者使用者必須註冊才能瀏覽內容,建議您加入訂閱和付費牆內容的結構化資料。
  • 如果有包含多個部分的內容,請確保將 rel=canonical 指向每個獨立網頁或是能夠「查看全部」的總覽網頁,而非分段系列中的第 1 頁。進一步瞭解標準化程序。

AMP 標誌規範

下列規範適用於所有 AMP 網頁的標誌,包括 AMP 故事的標誌。

下列規範適用於一般 AMP 網頁所用的標誌,不適用於 AMP 故事。AMP 故事有另外的標誌規範

  • 標誌必須是矩形,不得為正方形。
  • 標誌不得超出 60x600px 矩形範圍,且要剛好 60px 高 (建議) 或剛好 600px 寬。 例如,450x45px 雖然未超出 600x60px 矩形範圍,但並不符合規定。

    標誌範例

  • 發布者只能針對每個品牌使用一個標誌,且標誌在所有的一般 AMP 網頁中要一致。
  • 請使用完整文字商標或完整標誌,不要使用圖示。
  • 文字標誌中的文字高度上限為 48px,並要垂直放置於整張圖片高度 (60px) 的中間。請加入額外的空間,將高度補到 60px。

  • 背景非空白的標誌應在圖像周圍加上至少 6px 的邊框間距。

結構化資料類型定義

以下說明 Article 結構化資料的屬性規範。AMP 和非 AMP 網頁對屬性有不同的規範和建議:

  • AMP 網頁:您必須加入必要屬性,才能讓內容以複合式搜尋結果的形式呈現。您也可以加入建議的屬性,為內容新增更多相關資訊,提供更優質的使用者體驗。
  • 非 AMP 網頁:為了讓 Google 更瞭解您的網頁,建議您為非 AMP 網頁加入建議屬性。

Article 物件

Article 物件必須以下列其中一種 schema.org 類型為基礎:ArticleNewsArticleBlogPosting

AMP

下列屬性適用於 AMP 網頁。

必要屬性
author

PersonOrganization

文章的作者。為了讓 Google 更瞭解不同內容的作者,建議您遵循作者標記最佳做法

如有多位作者,請在陣列中指定所有作者:


"author": [{
    "@type": "Person",
    "name": "Jane Doe",
    "url": "http://example.com/profile/janedoe123"
  },{
    "@type": "Person",
    "name": "John Doe",
    "url": "http://example.com/profile/johndoe123"
}]
author.name

Text

作者的名稱。

datePublished

DateTime

文章首次發布的日期和時間,採 ISO 8601 格式

最佳做法:

  • 日期不應隨著時間改變。
  • 建議您除了日期以外,在時間戳記中另外加入小時資訊。
  • dateModified 的值要晚於 datePublished 的值。
headline

Text

文章的標題。標題不得超過 110 個字元。如果是 AMP 故事,標題應與 AMP 故事中第一頁 (即封面) 的文字一致。

image

ImageObjectURL 的重複屬性

可代表文章或 AMP 故事的圖片網址。

基於搜尋結果中的格式差異,下列圖片規範僅適用於一般 AMP 網頁,而不適用於 AMP 故事。AMP 故事有另外的圖片規範

  • 只能指定已加上標記且直接屬於該文章的圖片。
  • 圖片寬度至少要 1200 像素。
  • 每個網頁都必須包含至少一張圖片 (無論是否已加上標記)。Google 會根據長寬比和解析度選擇最適當的圖片顯示在搜尋結果中。
  • 圖片網址必須可供檢索和建立索引
  • 圖片必須能代表標記的內容。
  • 檔案必須使用 Google 圖片支援的格式
  • 為獲得最佳效果,請提供多張高解析度圖片 (寬度乘以高度至少要 80 萬像素),長寬比分別為 16x9、4x3 和 1x1。

例如:


{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
  ]
}
publisher

Organization

文章的發布者。

publisher.logo

URLImageObject

發布者的標誌。請參閱 AMP 標誌規範,進一步瞭解圖片內容的相關資訊。

如果您使用 ImageObject 類型,請將 url 欄位設為標誌網址。

例如:


{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "publisher": {
    "@type": "Organization",
    "name": "Google",
    "logo": {
      "@type": "ImageObject",
      "url": "https://google.com/logo.jpg"
    }
  }
}

以下是使用 URL 類型的範例:


{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "publisher": {
    "@type": "Organization",
    "name": "Google",
    "logo": "https://google.com/logo.jpg"
  }
}
publisher.name

Text

發布者的名稱。

建議屬性
author.url

URL

可明確識別文章作者的網頁連結,例如作者的社群媒體頁面、「關於我」頁面或簡介頁面。

dateModified

DateTime

文章最近修改的日期和時間,採 ISO 8601 格式

mainEntityOfPage

URL

文章網頁的標準網址。如果文章是文章網頁的主題,請指定 mainEntityOfPage。

非 AMP

下列屬性適用於非 AMP 網頁。

建議屬性
author

PersonOrganization

文章的作者。為了讓 Google 更瞭解不同內容的作者,建議您遵循作者標記最佳做法

author.name

Text

作者的名稱。

author.url

URL

可明確識別文章作者的網頁連結,例如作者的社群媒體頁面、「關於我」頁面或簡介頁面。

dateModified

DateTime

文章最近修改的日期和時間,採 ISO 8601 格式

datePublished

DateTime

文章首次發布的日期和時間,採 ISO 8601 格式

headline

Text

文章的標題。標題不得超過 110 個字元。

image

重複的 ImageObjectURL

可代表文章的圖片網址。只能指定已加上標記且直接屬於該文章的圖片。圖片寬度至少要 696 像素。

其他圖片規範:

  • 每個網頁都必須包含至少一張圖片 (無論是否已加上標記)。Google 會根據顯示比例和解析度,選擇最適當的圖片顯示在搜尋結果中。
  • 圖片網址必須可供檢索和建立索引
  • 圖片必須能代表標記的內容。
  • 圖片檔案必須使用 Google 圖片支援的格式
  • 為獲得最佳效果,請提供多張高解析度圖片 (寬度乘以高度至少要 30 萬像素),長寬比分別為 16x9、4x3 和 1x1。

例如:


{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
  ]
}

作者標記最佳做法

為了讓 Google 更瞭解內容作者並以適當的方式呈現作者資訊,建議您在標記中指定作者時,採用下列最佳做法:

作者標記的最佳做法

在標記中納入所有作者

確定在網頁上顯示為作者的所有作者都納入標記中。

指定多位作者

指定多位作者時,請為每位作者使用專屬的 author 欄位:


"author": [
  {"name": "Willow Lane"},
  {"name": "Regula Felix"}
]

請勿將多位作者合併在同一 author 欄位中:


"author": {
  "name": "Willow Lane, Regula Felix"
}

使用其他欄位

為了讓 Google 更瞭解作者是誰,強烈建議您使用 typeurl (或 sameAs) 屬性。請為 urlsameAs 屬性使用有效網址。

舉例來說,如果作者是某人,您可以連結至作者網頁,提供作者詳細資訊:


"author": [
  {
    "@type": "Person",
    "name": "Willow Lane",
    "url": "http://www.example.com/staff/willow_lane"
  }
]

如果作者是機構,您就可以連結到該機構的首頁。


"author":
  [
    {
      "@type":"Organization",
      "name": "Some News Agency",
      "url": "https://www.example.com/"
  }
]

僅在 author.name 屬性中指定作者名稱

author.name 屬性中,僅指定作者的名稱。請勿加入任何其他資訊。更明確地說,請勿加入下列資訊:

  • 發布者的名稱。這項資訊請改用 publisher 屬性。
  • 作者的職稱。如要指定這項資訊,請改用適當的屬性 (jobTitle)。
  • 前後或後置敬語。如要指定這項資訊,請改用適當的屬性 (honorificPrefixhonorificSuffix)。
  • 引導字詞 (例如「發文者」這類字詞就不應放入)。

"author":
  [
    {
      "name": "Echidna Jones",
      "honorificPrefix": "Dr",
      "jobTitle": "Editor in Chief"
    }
  ],
"publisher":
  [
    {
      "name": "Bugs Daily"
    }
  ]
}

請使用適當的 Type

一般使用者應使用 Person 類型;機構應使用 Organization 類型。不要使用 Thing 類型,也不要使用錯誤的類型 (例如為個人使用 Organization 類型)。

以下為採用作者標記最佳做法的範例:

"author":
  [
    {
      "@type": "Person",
      "name": "Willow Lane",
      "jobTitle": "Journalist",
      "url":"https://www.example.com/staff/willow-lane"
    },
    {
      "@type":"Person",
      "name": "Echidna Jones",
      "jobTitle": "Editor in Chief",
      "url":"https://www.example.com/staff/echidna-jones"
    }
  ],
"publisher":
  {
    "name": "The Daily Bug",
    "url": "https://www.example.com"
  },
  // + Other fields related to the article...
}

疑難排解

如果無法順利導入結構化資料,或是偵錯時遇到困難,請參考下列資源。