担当メディアで記事及び求人ページの構造化データを導入した実例を元に構造化データの導入例を紹介します。
構造化データとは
検索エンジンがページ内容を理解しやすくなるデータ形式のことです。 正しく記述することで検索エンジンがページの内容をより理解できるようになります。 構造化データの種類によっては検索結果のリッチ化(リッチリザルト)につながるものもあります。
構造化データのメリット
・検索エンジンがサイトコンテンツを認識しやすくなる
・検索結果にリッチスニペットが表示されることがある
構造化データのデメリット
・構造化データのデメリットは、デザインの改修などの工数がかかる
記事ページの構造化データ
記事ページに Article 構造化データを追加すると、Google 検索結果での表示を強化することができます。 ページのコーディング方法に応じて下記の機能を利用可能です。
AMP(Accelerated Mobile Pages)とは
Googleが推進しているモバイルページを高速に表示させるための手法によって作成されているコンテンツです。
構造化データを含むAMPウェブページ
トップニュース カルーセル、リッチリザルトのホスト カルーセル、映像ニュース、モバイル検索結果のリッチリザルト内に表示できます。 検索結果には、画像、ページのロゴ、その他の魅力的な検索結果機能を含めることができます。
構造化データを含む非AMPウェブページ
非 AMPページにArticle 構造化データを含めると、Googleがウェブページの詳細を理解し、Article リッチリザルトで記事の見出しテキスト、画像、および公開日を適切に表示できるようになります。
実装例
今回はLaravelで構築された非AMPサイトで構造化データを導入した例を紹介します。
ControllerでJSON-LDに渡す記事データを用意します。 app/Controllers/BlogController.php
<?php class BlogController extends Controller { public function detail(Blog $blog){ $this->view = 'blog.detail'; return $this->view('blog' => $blog); } }
bladeにJSON-LDコードをincludeします。
resources/views/blog/detail.blade.php
<?php @section('script') @parent @include('seo.blog_json') @stop
Article構造化データを含む非AMPページのJSON-LDコードの例です。
resources/views/seo/blog_json.blade.php
<?php <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "{{$blog->title}}", ←記事タイトル "image": [ "{{$imgUrl}}" ←記事画像 ], "datePublished": "{{$blog->publishedDate}}", ←公開日 "dateModified": "{{$blog->modifiedDate}}", ←更新日 "author": { "@type": "Person", "name": xxxxx" }, "publisher": { "@type": "Organization", "name": "OrganizationName", ←ウェブサイトの運営会社 "logo": { "@type": "ImageObject", "url": "$blog->logo_url", ←ロゴ } }, "description": "{{$blog->description}" ←現在表示されているページの概略 } </script>
構造化データタイプの定義
以下のプロパティが適用されます。
推奨プロパティ
・dateModified (DateTime) 記事が最後に変更された日時（ISO 8601 形式）
・datePublished(DateTime) 記事が最初に公開された日時（ISO 8601 形式）。
・headline(Text) 記事の見出しは半角110 文字（全角 55 文字）を超えないようにします。
・image(ImageObject または URL) 記事を表す画像の URLです。記事に直接属するマークアップされた画像のみを指定する必要があります。 画像の幅は 696 ピクセル以上にする必要があります。
リッチリザルト テスト
Googleにインデックスされるまでは時間がかかるので、下記のURLで事前にリッチリザルトテストを使用して構造化データのテストが可能です。
https://search.google.com/test/rich-results
記事詳細ページのURLを入力後、「URLをテスト」ボタンを押すと下記のようなテスト結果が表示されます。
対象外のものや、実装が正しくなかったりした場合は下記の対象外のページというテスト結果になるので修正が必要です。
上記以外に下記のテストツールもあります。
https://search.google.com/structured-data/testing-tool/u/0/
URLだけでなく、「コード スニペット」にコードを貼り付けてもテストが可能です。
求人ページの構造化データ
ControllerでJSON-LDに渡す記事データを用意します。 app/Controllers/JobController.php
<?php class JobController extends Controller { public function detail(Job $job){ $this->view = 'job.detail'; return $this->view( 'job' => $job); } }
bladeにJSON-LDコードをincludeします。
resources/views/job/detail.blade.php
<?php @section('script') @parent @include('seo.job_json') @stop
構造化データを含む求人ページのJSON-LDコードの例です。
resources/views/seo/job_json.blade.php
<?php <script type="application/ld+json"> { "@context" : "http://schema.org/", "@type" : "JobPosting", "title" : "{{$job->title}}", ←職種 "description" : "{{$job->description}}", ←求人について詳細を説明 "identifier": { "@type": "PropertyValue", "name": "companyName", "value": "xxxxx" }, "datePosted" : "{{$job->posted_at}}", ←投稿日 "validThrough" : "{{$job->valid_at}}", "employmentType" : "{{$job->employment_type}}", "hiringOrganization" : { "@type" : "Organization", "name" : "{{$job->organization_name}}", ←会社名 "sameAs" : "https://xxxxx.com/", ←会社HPのURL "logo" : "{{$job->logo_url}}" ←会社ロゴのURL }, "jobLocation" : { "@type" : "Place", "address" : { "@type" : "PostalAddress", "streetAddress" : "{{$job->street}}", ←番地 "addressLocality" : "{{$job->Locality}}", ←市区町村等 "addressRegion" : "{{$job->Region}}", ←都道府県 "postalCode" : "{{$job->postal_code}}", ←郵便番号 "addressCountry": "JP" ←国名 } }, "baseSalary": { "@type": "MonetaryAmount", "currency": "JPN", ←通貨 "value": { "@type": "QuantitativeValue", "value": "{{$job->salary}}", ←金額 "unitText": "MONTH" ←給与形態:HOUR:時給 DAY:日給 WEEK:週給 MONTH:月給 YEAR:年俸 } } } </script>
記事と同じくGoogleにインデックスされるまでに時間がかかるので、事前にリッチリザルトテストを行い構造化データがで正しく実装できたかを確認します。
数日後Google検索結果で記事及び求人ページに構造化データが導入されていることが確認できます。
さいごに
Wizではエンジニアを募集しております。 興味のある方、ぜひご覧下さい。
