検索結果にフェア情報を出すための構造化について

こんにちは
プラコレの高木でございます！

主にプラコレ自社メディアを日々よくするために
色々な部署から出てくるアイデアをまとめて

実装するというエンジニア的な部分を携わらさせていただいております！
プラコレにはブレストという文化があるので、日夜メディアやサービスを
よくしようとそこら中でブレストが行われているので、アイデアが尽きることが
ありません！

そんなワクワクな冒険が絶えないプラコレですが、
今回お知らせしたいことは、先日から会場ページの検索結果に
ブライダルフェス（フェア）情報が表示されるように
構造化されましたので、その実装方法を構造化について少し書かせていただければ
と思います！

構造化マークアップとは？

構造化マークアップはセマンティックWebを実現するためのテキスト情報を
マークアップすることで効率よくデータを収集や理解をできる仕組みを言います。
※セマンティックWebとはコンピュータに文字をただの文字列ではなくて
これはなんでこういう意味のものと理解できるようにするもののことです。

この構造化についてはGoogleは随分前から取り組んでおり、
主に検索結果などでも構造化をすることで、より詳細な情報を
検索画面から出せるようになっています！

リッチリザルトとは

みなさんはもうもはや日常的に日々検索エンジンを使って調べ物を
してるのではないでしょうか。
その中でこんな検索結果を見たことはないでしょうか？

画像

こんな評価が載っているものだったり

イベント情報が載っているものだったり

一般的には下記のようにサイトのタイトルとディスクリプション
そしてURLで構成されているものが検索結果として出てきます。

構造化マークアップをすることで、検索エンジンにプラスの要素が
追加されて、ユーザーにより詳細な情報を検索結果に表示することが
だけでなく興味関心も促せるのでとてもよい施策になるかと思います！

さて実際にはどのように構造化をすればいいのという技術的なお話を
していければと思います！

検索エンジンに構造化の情報を提供するために必要なものは
Schema.orgというものを利用します！

Schema.orgは、「インターネット上、Webページ上、電子メールメッセージ内など、構造化されたデータのスキーマを作成、管理、および促進する」というミッションを持つ共同コミュニティ活動です。[1] Webマスターはこの共有語彙を使用して、Webサイト上にメタデータを構造化し、検索エンジンが公開コンテンツを理解するのを助けます。これは検索エンジン最適化として知られている手法です。(schema.org wikipedia)

これをタグに埋め込んだり、jsonとして表示させることで、
検索エンジンに意味の持った情報を送ることができます。

・ぱんクズでの階層の情報
・会社の情報
・商品やサービスの情報
・評価やレビュー
・イベントの情報

など多様な情報を送ることができるのです！

イベント構造化の書き方例

今回、行いましたフェア（イベント）の構造化を例に
実装の記述の仕方を見ていきましょう！

それでは一般的なイベントの構造化について
jsonを使った記述例がこちらになります！

こんな形で、普通のHTMLタグとは別にjsonという言語を使って
検索エンジンに情報を提供することができます！

そうして認識がしっかりされることで、検索結果にイベント情報が
出てくるようになります！

今年はGoogleは構造化を徹底していく年だと言われています。

Googleがそうするからではなくとも、ユーザーが求めそうな情報は
なるべく早い段階で表示されることでユーザービリティを高めることが
検索エンジンの最適化にもつながります。

まずは調べるユーザーさんのことを思ってプラコレも使いやすさや
デザインの向上を含めてファインダビリティなども高めていきたいと
思います！