【Googleお仕事検索】Nuxt.js(Vue.js)で構造化データを作成する方法

## はじめに
人材系ITベンチャーでエンジニアとして働いております:raised_hand:
今回、*「Google仕事検索を利用して、集客数増加させよう！」*となったので、そのやり方を記載していきます。
ちなみに弊社プロダクトはNuxt.js(Vue.js)を使用しております〜

## Google仕事検索とは？
Google仕事検索とは一言で言うと**「求人票のデパート」**です！

Googleの検索エンジン内で利用できる求人サービスのことで、
ありとあらゆる仕事の求人・案件がそこにGoogle仕事検索と思ってください。
類似サービスで言うとIndeedとかがそれに当たりますね。

求職者は日本中の人材紹介会社の案件を見ることができ、人材会社はそこに求人を乗せることができます:ok_woman_tone2:

Googleしごと検索の詳しい説明やその仕組みについては今回は割愛させていただきますね！
詳しく知りたい方は以下の記事を読んでください〜

https://en-gage.net/content/google-for-jobs-published

## 構造化データ
Google仕事検索に案件を掲載する場合は
**自社のサイトの求人詳細ページに構造化データを設置しなければなりません。**

>構造化データとは、ページに関する情報を提供し、ページ コンテンツを分類するための標準化されたデータ形式です。
[構造化データについて | 検索 | Google Developers](https://developers.google.com/search/docs/guides/intro-structured-data?hl=ja)


簡単に言うと**検索エンジンが理解しやすいよう作成されたデータ**のことです。
こんな感じのデータですね。

```javascript

    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Party Coffee Cake",
      "author": {
        "@type": "Person",
        "name": "Mary Stone"
      },
      "datePublished": "2018-03-10",
      "description": "This coffee cake is awesome and perfect for parties.",
      "prepTime": "PT20M"
    }
    </script>
```

これを案件ページのhtmlファイルのheadもしくはbodyに埋め込む必要があります。

## Nuxt.jsで構造化データを実装

### nuxt-jsonldの導入

```:ターミナル
$ yarn add nuxt-jsonld
or
$ npm install nuxt-jsonld
```

jsonld構造化データの面倒な処理を自動的にまとめてやってくれるプラグイン「nuxt-jsonld」を入れます。
[nuxt-jsonld公式](https://github.com/ymmooot/nuxt-jsonld)

```javascript:plugins/jsonld.js
import Vue from 'vue'
import NuxtJsonld from 'nuxt-jsonld'

Vue.use(NuxtJsonld)
```
plugins配下にjsonld.jsファイルを作成します。


```javascript:nuxt.config.js
 plugins: ['~/plugins/jsonld'],
```
あとはnuxt.config.jsに記載するだけ。

これで下準備完了です！

### 求人内容の記載

```javascript:nuxt.config.js
<template>
  ...
</template>

<script>
export default {
 data() {
  ...
 },
 jsonld() {
    return {
      '@context': 'https://schema.org',
      '@type': 'JobPosting',
      title: '高単価案件',  //求人のタイトル
      description : "モダンな自社開発企業でのフロントエンジニアの募集です。",  //求人の詳細
      datePosted: '2021-03-20',  //求人公開日
      validThrough : '2021-03-21T00:00',  //求人の募集締切日
      employmentType : 'CONTRACTOR',  //雇用形態

      jobLocation: {  //勤務地
        '@type': 'Place',
        address: {
          '@type': "PostalAddress",
          postalCode: '000-0000',
          addressCountry: 'JP',
          addressRegion: '東京都',
          addressLocality: '品川区',
          streetAddress: '◯◯ビル1F'
        }
      },

      baseSalary: {  //報酬
        '@type': 'MonetaryAmount',
        currency: 'JPY',  //通貨
        value: {
          '@type': 'QuantitativeValue',
          value: '1000000',  //値段
          unitText: 'MONTH'  //報酬体系
        }
      },

      hiringOrganization: {  //雇用者情報
        '@type': 'Organization',
        name: 'テスト株式会社',  //社名
        logo: 'https://◯◯//logo.png'  //ロゴ
      },

      identifier: {  //サイト情報
        '@type': 'PropertyValue',
        name: 'テストサービス',  //サービス名
        value: '1'  //管理番号
      }
    }
  }
}
</script>

```

#### 必須項目
- **title**（求人のタイトル）
- **description**（求人の詳細）
- **datePosted**（求人公開日）
- **hiringOrganization**（雇用者情報）
- **jobLocation**（勤務地）
- **validThrough**（求人の募集締切日）

**上記の6項目は必須です！！**
他にも結構詳しく情報を載せられますので、[公式ドキュメント](https://developers.google.com/search/docs/data-types/job-posting?hl=ja#structured-data-type-definitions)を参考にしながらカスタマイズしてみてください。

### 確認方法
ブラウザの検証画面で確認してみると、しっかり構造化データが作られていますね！！

![スクリーンショット 2021-03-20 16.45.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501638/05a98504-3561-e057-a4ad-1590766f005d.png)


#### リッチリザルトテスト

https://search.google.com/test/rich-results?hl=ja

Googleが提供している[テストツール](https://search.google.com/test/rich-results?hl=ja)にて構造化データが有効かテストしてみましょう。
![スクリーンショット 2021-03-20 16.49.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501638/118f8a05-8ae5-fe32-5b6a-ffda2ee4607a.png)

URLでもコードでもどちらでも大丈夫です。
今回はコードでやってみます。
![スクリーンショット 2021-03-20 16.51.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501638/19c12f7a-effa-768a-81aa-156a4103b0ed.png)
先程のコードをコピペして貼り付けてみましょう。

![スクリーンショット 2021-03-20 16.51.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501638/1c7fd396-66fd-0148-e13b-98fcf11db7aa.png)
**緑色のチェックが出ればOKです！**
**これでクローラーが回ってこれば、Google仕事検索上に勝手に掲載されるようになります。**
私は2~3日くらいで掲載されました！！

## おわりに
結構かんたんですね！！
集客間口が増えることは得しかないので、人材系の会社は積極的にGoogle仕事検索を活用していくと良いと思います:v: