記事(Articles)の構造化データをマークアップする方法

記事(Articles)の構造化データをマークアップする方法

Photo by Austin Moncada via Unsplash

記事(Articles)の構造化データをマークアップする方法を紹介します。

記事の構造化データのサンプル

Googleは検索結果の上部にトップニュースというカルーセル枠を表示することがあります。通常の検索結果よりも上部に、画像つきの目立つレイアウトで表示されます。

記事がトップニュースに表示されるためには、ニュース記事やブログ記事の構造化データをマークアップしておくことが必要です。

記事(Articles)の構造化データは、AMP対応のページの場合と、非AMPページの場合で、マークアップする属性が若干異なります。

JSON-LDでマークアップする

記事(Articles)をJSON-LDでマークアップする方法です。JSON-LDはページのどこに記述しても問題ありませんが、通常は<head>タグ内に記述します。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://google.com/article"
  },
  "headline": "Article headline",
  "image": {
    "@type": "ImageObject",
    "url": "https://google.com/thumbnail1.jpg",
    "height": 800,
    "width": 800
  },
  "datePublished": "2015-02-05T08:00:00+09:00",
  "dateModified": "2015-02-05T09:20:00+09:00",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
   "publisher": {
    "@type": "Organization",
    "name": "Google",
    "logo": {
      "@type": "ImageObject",
      "url": "https://google.com/logo.jpg",
      "width": 600,
      "height": 60
    }
  },
  "description": "A most wonderful article"
}
</script>

Microdataでマークアップする

MicrodataでHTMLタグに直接マークアップする方法です。

<div itemscope itemtype="http://schema.org/NewsArticle">
  <meta itemscope itemprop="mainEntityOfPage"  itemType="https://schema.org/WebPage" itemid="https://google.com/article"/>
  <h2 itemprop="headline">Article headline</h2>
  <h3 itemprop="author" itemscope itemtype="https://schema.org/Person">
    By <span itemprop="name">John Doe</span>
  </h3>
  <span itemprop="description">A most wonderful article</span>
  <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
    <img src="https://google.com/thumbnail1.jpg"/>
    <meta itemprop="url" content="https://google.com/thumbnail1.jpg">
    <meta itemprop="width" content="800">
    <meta itemprop="height" content="800">
  </div>
  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
      <img src="https://google.com/logo.jpg"/>
      <meta itemprop="url" content="https://google.com/logo.jpg">
      <meta itemprop="width" content="600">
      <meta itemprop="height" content="60">
    </div>
    <meta itemprop="name" content="Google">
  </div>
  <meta itemprop="datePublished" content="2015-02-05T08:00:00+09:00"/>
  <meta itemprop="dateModified" content="2015-02-05T09:20:00+09:00"/>
</div>

属性の解説

記事(Articles)の構造化データの属性は次のようになります。

属性 必須 説明
mainEntityOfPage AMP:必須 non-AMP:無視 正規ページ(canonical)のURL
headline AMP:必須 non-AMP:推奨 記事のタイトル
image AMP:必須 non-AMP:推奨 記事を代表する画像
image.url AMP:必須 non-AMP:推奨 画像のURL
image.height AMP:必須 non-AMP:推奨 画像の高さ
image.width AMP:必須 non-AMP:推奨 画像の横幅
696ピクセル以上推奨
publisher AMP:必須 non-AMP:無視 記事の発行者
publisher.name AMP:必須 non-AMP:無視 記事の発行者の名前
publisher.logo AMP:必須 non-AMP:無視 記事の発行者のロゴ
publisher.logo.url AMP:必須 non-AMP:無視 記事の発行者のロゴのURL
publisher.logo.height AMP:必須 non-AMP:無視 記事の発行者のロゴの高さ
publisher.logo.height AMP:必須 non-AMP:無視 記事の発行者のロゴの横幅
datePublished AMP:必須 non-AMP:無視 記事の公開日
dateModified AMP:推奨 non-AMP:無視 記事の更新日
author AMP:必須 non-AMP:無視 著者
author.name AMP:必須 non-AMP:無視 著者の名前
description AMP:推奨 non-AMP:無視 著者の短い紹介文

参考

人気の記事

2017年、人気の無料WordPressテーマ100選
2017年、人気の無料WordPressテーマ100選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ11選
アドセンス運用に最適なWordPressテーマ11選

コメント

  • Posted on
  • Updated on
  • Views 113