【コピペどうぞ】Google構造化データ「記事(Article)」〜検索結果の表示をリッチにしたい〜

[ひとことで言うと、こんな記事]

SEO対策で「記事(Article)」の情報を準備しなければいけない場合、記事の一番下にあるサンプルコードのコピペして、ラクしてください!


[ひとことで言うと、こんな記事]

  • Googleの検索結果に出てくるものを、少しリッチに表示してみたい方
  • Google構造化データの「記事」を手っ取り早く導入したい方
  • 記事系のサイトをよく制作していて、毎度要件にSEO対策を盛り込まれる方

私の備忘的に記述していきますので、よろしくお願いいたします。(2020-03-16 現在の執筆)


[目次]

  • Google構造化データとは
  • 構造化データ「記事(Article)」に設定する値一覧
  • Google構造化データ作成に便利なツール
  • 【コピペどうぞ】 「記事(Article)」 のマークアップ

Google構造化データとは

Googleの検索ページの結果としてたまにでてくる、特別感のある表示をさせたい場合に、Webサイトに埋め込んで置かなければならない情報のことです。

種類に関しては 「記事」「書籍」「映画」「ローカルビジネス」… などたくさんございます。

記事 | Google 検索デベロッパー ガイド | Google Developers

構造化データ「記事(Article)」に設定する値一覧

必須の値

  • auther(記事の著者の情報たち)
    • .name(著者の名前)
  • datePublished(記事公開日): ISO8601準拠
  • headline(見出し)
  • image(代表画像): 1つはマストで指定する必要がある / 画像の幅は1200px以上にする必要がある / 適切なものを選んでほしい場合、16x9,4x3,1x1の3枚指定
  • publisher(記事の公開元の情報たち)
    • .logo(公開元のロゴの情報たち): ロゴは長方形である必要があります / ロゴは60x600ピクセルの長方形に収まるようにする / 高さを60pxにする or 横幅を600pxにする /背景が無地のロゴの場合、margin:6px 0; で 文字サイズ48px でないとだめ
    • .logo.height(ロゴの高さ)
    • .logo.url(ロゴのURL)
    • .logo.width(ロゴの幅)
    • .name(記事の公開元の名前)

推奨の値

  • dataModified(データ更新日) : ISO8601準拠
  • description(記事の説明)
  • mainEntityOfPage(記事ページの正規URL)

記事 | Google 検索デベロッパー ガイド | Google Developers

Google構造化データ作成に便利なツール

Googleが公式で準備してくれている、構造化データ作成の補助ツールが2つございます。

Google 構造化データマークアップ支援ツール

Google 構造化データ マークアップ支援ツールなるものがあります。

すでに存在しているブログ記事などから、Google構造化データに適応する箇所を抜き出すことで、必要なscriptタグないしJSONのデータを準備してくれる 素晴らしいツールです。

Google 構造化データ テストツール

Google 構造化データ テストツールなるものがあります。

自分のサイトにGoogle構造化データを適応した後、その値の設定が問題ないことを確認できるツールです。確認に便利ですね。

【コピペどうぞ】 「記事(Article)」 のld-jsonサンプル

以下、このサイトで利用しているld-json部分のサンプルを掲載させていただきます。そのld-jsonを以下タグで挟めば完成です。

<script type="application/ld+json"></script>

埋めるべき箇所を[埋めるべき内容]で、適切な値を入れるべき箇所は 1234567890 で記載しております。

{
  "@context": "http://schema.org",
  "@type": "Article",
  "name": "[タイトル名]",
  "headline": "[タイトル名]",
  "author": {
    "@type": "Person",
    "name": "[著者名]"
  },
  "image": {
    "@type": "ImageObject",
    "url": "[横幅1200px以上の画像とのこと]",
    "height": 1234567890,
    "width": 1200
  },
  "description": "[ディスクリプション]",
  "articleSection": "[記事の内容の文字列]",
  "url": "[記事のURL]",
  "mainEntityOfPage": "[記事の正規URL]",
  "publisher": {
    "@type": "Organization",
    "name": "[サイト名]",
    "logo": {
      "@type": "ImageObject",
      "url": "[縦幅60pxで横幅600pxにおさまるものがよいとのこと]",
      "width": 1234567890,
      "height": 60
    }
  },
  "datePublished": "[yyyy-MM-dd]",
  "dateModified": "[yyyy-MM-dd]"
}

__一緒に様々なことを学んでいく仲間を募集__しています。

このサイトのお問い合わせなどからご連絡いただけると幸いです。