【Google 직업 검색】 Nuxt.js (Vue.js)로 구조화 된 데이터를 만드는 방법

소개

인재 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>

필수 항목

title(구인 제목)

description(구인 세부정보)

datePosted(구인공개일)

hiringOrganization(고용자 정보)

jobLocation(근무지)

validThrough(구인 모집 마감일)

위의 6개 항목은 필수입니다! !
그 밖에도 상당히 자세한 정보를 올릴 수 있으므로, 공식 문서 를 참고로 하면서 커스터마이즈 해 보세요.

확인 방법

브라우저의 검증 화면에서 확인해 보면, 제대로 구조화 데이터가 만들어지고 있군요! !

리치 결과 테스트

Google에서 제공하는 테스트 도구에서 구조화된 데이터가 유효한지 테스트해 봅시다.


URL이든 코드이든 둘 다 괜찮습니다.
이번에는 코드로 해보겠습니다.

방금 전의 코드를 복사하여 붙여 봅시다.


녹색 체크가 나오면 OK입니다!
이제 크롤러가 돌아가면 Google 작업 검색에 마음대로 게재됩니다.
나는 2~3일 정도에 게재되었습니다! !

결론

꽤 간단합니다! !
집객 간구가 늘어날 수밖에 없기 때문에, 인재계의 회사는 적극적으로 Google 일 검색을 활용해 나가면 좋다고 생각합니다