React(Gatsby)でGoogle検索時に公開日を表示させる方法

# 公開日がGoogleによってどのように判断されるのか

Googleによって、適切に日付が判断されると以下のように検索結果一覧に日付が表示される。


![2f3e9c3e-644a-8394-d7b6-2354d3a8061d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483460/cc3b8364-d16d-d44b-807c-152451b437c6.png)


### Googleが判定できる日付情報を指定する方法は次の通り

- 明確な日付を記事上に表示する: ページ上で明確な日付を目立つように表示する

- 構造化データを使用する: datePublished および dateModified スキーマを使用し、AMP または非 AMP ページの正しいタイムゾーン指定子を指定する(talentgateは非AMPページ)。構造化データを使用する場合は、ISO 8601 形式(2019-08-14T09:00:00+09:00のような)を使用する。

- 日付は必須、時刻は任意


参考:[ウェブページを最適な日付をGoogle検索に知らせるには](https://webmaster-ja.googleblog.com/2019/03/help-google-search-know-best-date-for.html)
[Google検索に対して公開日を指定する](https://support.google.com/webmasters/answer/9253249)

以下に記事上に日付を表示させる方法と構造化データの作成方法を記す。

# 記事上に日付を表示させる方法

今回は下図の赤枠のように時計アイコンの横に日付を表示した

![184e81d4-5d48-c807-d38f-b3f4670fc4b1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483460/5379d43d-a99a-9a01-58ed-d634da9ae30b.png)

1. 各記事のmetaDataに新たにdateというデータを追加する。dateには公開日を2019.08.14のようなわかりやすい形式で記述する。

2. 以下のようにactivity-report-detail-text.js内のタイトルと画像のコンポーネントの間に日付表示のコンポーネントを追加して、dateを渡すだけ
ちなみにこの時計アイコンはCSSでできており、[CSS ICON](https://cssicon.space/#/)から用いた。

```javascript:activity-report-detail-text.js
<TitleDesign>
...
</TitleDesign>
<div>
{this.props.articleData.metaData.date && (
    <div>
        <Clock date={this.props.articleData.metaData.date} />
    </div>
)}
</div>
<ImageArea>
...
</ImageArea>
```


# 構造化データの作成方法

今回作成した構造化データは下図の赤枠のようになる。
![8879dbb4-6fee-ee24-a9be-467468bb72e5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483460/6701838b-52eb-1da2-8944-26ea93d67c37.png)

ページがAMP対応か非AMPかによって、構造化データの必須プロパティと推奨プロパティが異なるが、talentgateは非AMPなので非AMPの構造化データの構成を以下に記す。

| 非AMPページの推奨プロパティ | |
| ----------------------------------- | ---------- |
| dateModified | 記事が最近変更された日時。 ISO 8601 形式(2019-08-14T09:00:00+09:00のような)を使用する。|
|datePublished|記事が最初に公開された日時。ISO 8601 形式(2019-08-14T09:00:00+09:00のような)を使用する。|
|headline|記事の見出し。見出しは半角 110 文字（全角 55 文字）以下|
|image|記事を表す画像のURL。幅は696ピクセル以上。|

AMP対応の場合は必須プロパティが存在するが、非AMPの場合は存在しない。

参考:[記事 | 検索 | Google Developers](https://developers.google.com/search/docs/data-types/article#non-amp)

### 実際の構造化データの作成方法

今回はGoogleが推奨するJSON-LDで作成した

1.各記事のmetaDataにまた新たにdatepublishedを追加する。datepublishedには公開日をISO 8601 形式(2019-08-14T09:00:00+09:00のような)で記述する。

2.ReactHelmet.jsのReactHelmet内に以下を追加

```javascript:ReactHelmet.js
const dateModified = metaData.datepublished == null ? "" : metaData.datepublished;

const datePublished = metaData.datepublished == null ? "" : metaData.datepublished;

const headline = metaData.title == null ? "" : metaData.title;

const image = metaData.ogImage == null ? "" : metaData.ogImage;
  
const jsonLdConfigs = {
    '@context': 'http://schema.org',
    '@type': 'Article',
    dateModified,
    datePublished,
    headline,
    image,
  }
```

上記からわかるようにmetaDataのdatepublished,title,ogImageを渡した。

そしてHelmet内に

```javascript:ReactHelmet.js
<script type="application/ld+json">{JSON.stringify(jsonLdConfigs)}</script>
```

を記述すれば完了。

デプロイ後に[構造化データ テストツール](https://search.google.com/structured-data/testing-tool)で構造化データが適切かどうかを確認する。


# この記事について
この記事は[Thinkings株式会社](https://thinkings.co.jp/)にて長期インターンの業務として社内Qiitaに投稿したものを、私の個人用Qiitaに再投稿したものになります。許可を受けて再投稿しております。
また、この記事はThinkings株式会社が運営している[talentgate](https://talentgate.jp/)のための調査で、2019/08/16に社内Qiitaに投稿されたものです。