Google構造化データ「記事（Article）」よく使うのでコピペ用

以下ページの転載になります。ご了承ください。

[【コピペどうぞ】Google構造化データ「記事（Article）」〜検索結果の表示をリッチにしたい〜 - Yuto Hongo Portfolio](https://hongo.dev/blog/structured-article-data-for-google)


---


[<u>ひとことで言うと、こんな記事</u>]


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


---


[<u>ひとことで言うと、こんな記事</u>]


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


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

---


[<u>目次</u>]

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

---

## Google構造化データとは

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

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

> [記事  |  Google 検索デベロッパー ガイド  |  Google Developers](https://developers.google.com/search/docs/data-types/article?hl=ja "記事  |  Google 検索デベロッパー ガイド  |  Google Developers")


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

- auther(記事の著者の情報たち)
  - .name（著者の名前）
- datePublished（記事公開日）： [ISO8601](https://en.wikipedia.org/wiki/ISO_8601 "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](https://en.wikipedia.org/wiki/ISO_8601 "ISO8601")準拠
- description（記事の説明）
- mainEntityOfPage（記事ページの正規URL）

> [記事  |  Google 検索デベロッパー ガイド  |  Google Developers](https://developers.google.com/search/docs/data-types/article?hl=ja "記事  |  Google 検索デベロッパー ガイド  |  Google Developers")

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

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

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

[Google 構造化データ マークアップ支援ツール](https://www.google.com/webmasters/markup-helper/ "Google 構造化データ マークアップ支援ツール")なるものがあります。


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

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

[Google 構造化データ テストツール](https://search.google.com/structured-data/testing-tool "Google 構造化データ テストツール")なるものがあります。


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

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

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

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

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

```javascript
{
  "@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]"
}
```

---

最後までお読みいただき、誠にありがとうございます。様々なことを学んでいきたいと思っていますので、アドバイス等いただけると幸いです。