More than 3 years have passed since last update.

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

Posted at 2021-03-23

はじめに

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

Google仕事検索とは？

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

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

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

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

構造化データ

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

構造化データとは、ページに関する情報を提供し、ページコンテンツを分類するための標準化されたデータ形式です。
構造化データについて | 検索 | Google Developers

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


    <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公式

plugins/jsonld.js

import Vue from 'vue'
import NuxtJsonld from 'nuxt-jsonld'

Vue.use(NuxtJsonld)

plugins配下にjsonld.jsファイルを作成します。

nuxt.config.js

 plugins: ['~/plugins/jsonld'],

あとはnuxt.config.jsに記載するだけ。

これで下準備完了です！

求人内容の記載

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>