こんにちは！
川口市のWEB屋テダスクのSeitoです。
構造化データマークアップの簡易生成ツール作成しました！
手っ取り早く作りたい方はこちらにどうぞ↓
前回、前々回とリッチリザルト対応の記事を書いてきました。
前々回はローカルビジネス、前回は企業ロゴの書き方と実装方法を書いてきましたが、今回はリッチリザルト対応でも求人情報のリッチリザルト対応の書き方を説明していきたいと思います。
求人情報のリッチリザルトはこんな感じで検索結果に表示されることがあります。
検索クエリで「仕事名＋求人」という検索をすると、上の画像のような結果が表示されます。
結果表示の下の方には「他100件以上の求人情報」とありますが、これをクリックすると更に一覧で表示されます。
このように表示されるように、今回はコードの書き方を説明していきます。
どのリッチリザルト対応の説明ページでも言っていることですが、正しく設定したからといって確実に表示される保証はありませんので、そういった質問に関してはGoogleの質問用のサイト等でアドバイスをいただくようお願い致します。
求人情報を表示するための構造化データ
早速ですが、求人情報を表示するための構造化データマークアップはこちらです。
今回も前回同様JSON-LDの記法で記述しています。
<script type="application/ld+json">
{
"@context" : "https://schema.org/",
"@type" : "JobPosting",
"title" : "WEBプログラマー",
"description" : "<p>ABC株式会社ではWEBプログラマーを募集しております。<br><br>【仕事内容】<br>仕事内容の中身仕事内容の中身<br><br>【給与】給与の中身給与の中身給与の中身給与の中身給与の中身【勤務時間】勤務時間の中身</p>",
"identifier": {
"@type": "PropertyValue",
"name": "ABC株式会社",
"value": "1234567"
},
"datePosted" : "2022-02-03",
"validThrough" : "2022-05-03T00:00",
"employmentType" : "FULL_TIME",
"hiringOrganization" : {
"@type" : "Organization",
"name" : "ABC株式会社",
"sameAs" : "https://www.abc.com",
"logo" : "https://www.abc.com/images/logo.png"
},
"jobLocation": {
"@type": "Place",
"address": {
"@type": "PostalAddress",
"streetAddress": "本町４丁目３番地１４",
"addressLocality": "川口市",
"addressRegion": "埼玉県",
"postalCode": "3320012",
"addressCountry": "JP"
}
},
"baseSalary": {
"@type": "MonetaryAmount",
"currency": "JPY",
"value": {
"@type": "QuantitativeValue",
"value": 500000,
"unitText": "MONTH"
}
}
}
</script>
“@context” : “http://schema.org”
“@type” : “JobPosting”
この二つの@の項目は必須です
それ以降については、各プロパティを見ながら記述します。
title：求人情報のタイトル
description：求人情報の本文（コードはhtmlタグで入力するので、基本はpタグで改行はpタグ内でbrタグを使う。）
identifier（運営管理情報）
“@type”: “PropertyValue”
name: 企業名
value: 管理ID（運営側が設定する任意のID）
datePosted : 投稿日
validThrough : 求人の有効期限日時
employmentType : 雇用形態（FULL_TIME,PART_TIME,CONTRACTOR,TEMPORARY,INTERN,VOLUNTEER,PER_DIEM,OTHER）から選択（複数入力可）
hiringOrganization（採用企業）
“@type” : “Organization”
name : 企業・店舗名
sameAs : 企業・店舗サイトURL
logo : ロゴが配置されているURL
jobLocation（就業場所）
“@type”: “Place”,
address（住所）
“@type”: “PostalAddress”,
streetAddress:市町村より先の住所
addressLocality: 市町村
addressRegion: 都道府県
postalCode: 郵便番号
addressCountry: 国
baseSalary（基本給与情報）
“@type”: “MonetaryAmount”,
currency: 通貨コード
value（金額）
“@type”: “QuantitativeValue”,
value: 給与額
unitText: 給与制度（HOUR,DAY,WEEK,MONTH,YEARから選択）
この例以外にも細かい設定ができますので、プロパティについては公式サイトを参考にして下さい。
作ったJSON-LDを実装
前回の「【リッチリザルト対応】構造化データのマークアップの実装方法（ローカルビジネス編）」でも書きましたが、テンプレートを直接編集するのはオススメしませんので、今回もHeader Footer Code Managerを使います。
プラグインの検索画面から、「Header Footer Code Manager」と検索します。
Header Footer Code Managerが出てきたら、インストールして有効化します。
左メニューに現れた「HSCM」というメニューをクリックして、「All Snippets」をクリックするとこの画面になります。
「Add New Snippet」をクリック。
各項目に適宜入力します。
「Snippet Name」：スニペット（コード）名（自分が分かる名前ならなんでもOK）
「Snippet Type」：スニペットの種類（HTML、CSS、JavaScriptから選択）
「Site Display」：どのページで表示するか（Site Wideは全てのページ、Postは投稿記事、Pageは固定ページから指定。企業ロゴはトップページまたは会社情報のどちらかが推奨*）
「Exclude Pages」：除外する固定ページ
「Exclude Posts」：除外する投稿記事
「Location」：表示する位置（wp-haed()で表示するか、wp-footer()で表示するか）
「Device Display」：表示するデバイス（全て、PC、スマホから選択）
「Status」：表示の有効・無効設定
今回のJSON-LDでは<script>タグを使いますので、「Snippet Type」はJavaScriptになります。
*Googleの鈴木謙一さんのコメントより。（https://bit.ly/3fZ6HzL）
下の段にスクロールすると、コードを入れる所がありますので、先程準備したコードを、<script>の所から閉じの</script>までまるっと貼り付けます。
今回はお客様のコードを使っているため、黒塗りにしましたが、用意したコードをそのまま貼り付けているだけです。
貼り付けが完了したら、「Update」をクリックして作業を終了します。
実装したJSON-LDをソースから確認
実装したコードが問題なく実装出来るかをホームページのソースから確認します。
WEBブラウザによっても表示の名前が変わりますが、ホームページが表示されている画像以外のところで、「マウス右クリック」、「ページのソースを表示」*をクリックします。
*お使いのブラウザがChrome、Firefoxの場合「ページのソースを表示」、Microsoft Edgeの場合は「ページのソース表示」という項目名になっていると思います。
表示すると沢山コードが出てくるのですが、先程作ったスニペットの名前を検索するとすぐに見つかります。
上の例は実際にホームページに実装している物ですが、このように先程登録した内容がコードとして表示されれば問題なく登録ができています。
もしこのとき表示されていない場合は、いくつか原因がありますが、スニペットの表示ページの指定が間違っている、もしくはWordPressテーマを自作しており、テーマのhaed.phpファイルなどにwp_head()というWordPressの必須のテンプレートタグが実装されていないなどが考えられます。
リッチリザルトテストで最終試験
コードは無事表示されましたが、それがGoogleの規約に合っているかどうか文法のチェックする必要があります。
いつものようにリッチリザルトテストというページで試験をします。
URLには構造化データを実装したサイトのトップページURLを入力します。
検査方法として、「スマートフォン用Googlebot」と「パソコン用Googlebot」とありますが、対象のサイトが個人のお客さん向けならスマートフォン用、対象のサイトが企業向けであればパソコン用を選ぶと良いかなと思います。
設定が完了したら、「URLテスト」をクリックします。
試験が始まりますので、しばらく待ちます。
そうするとこのように結果が表示されます。
問題が無ければ緑色のチェックマークで表示されますが、不備があると黄色いマーク、エラーがあると赤い警告エラーマークが表示されます。
もしエラーがでた場合は、詳細を見るとエラーの場所が表示されますので、ダブルクォーテーションが消えていたり、カンマが消えていたりしないか確認しましょう。
「求人情報」をクリックしてもう少し詳しく見てみましょう。
また黒塗りで分かりにくくて申し訳ないのですが、黒塗りの部分に設定したタイトルや本文が表示されていれば大丈夫です。
これで問題なく、構造化データの求人情報の設定ができました。
まとめ
今回はリッチリザルト対応として構造化データの求人情報のコードの実装についてお伝えしました。
前回に続いて3回目は構造化データでしたが、また次も構造化データについて書いていきたいと思っています。
もし構造化データについて実装をお願いしたいなどご相談があれば、WordPressカスタマイズサービスからご依いただけます。
以上、「【リッチリザルト対応】構造化データのマークアップの実装方法（求人情報編）」でした！
この記事で紹介した記事
https://web.tedask.jp/schemaorg-localbusiness/
コメント