データハイライターの使い方

データハイライターとは？

Webページに書かれている内容、配置されているモノには、それぞれきちんと意味があります。

例えば、映画の紹介ページでや商品の販売ページに書かれている星のマークは、その映画や商品に対するレビュワーの評価ですし、イベント紹介ページに書かれている日付は、そのイベントが開催される日付だったりします。

こういった、Webページに書かれている「意味を持ったデータ」について、Googleはだいぶ理解ができるようになってきていますが、残念ながら完璧ではありません。

そこで、Googleのアルゴリズム（プログラム）でも、そういった重要な意味を持っているデータについて、それがどんな意味なのかを伝える方法が、Webページの構造化（構造化マークアップ）です。

先ほどの例で言えば、「この星マークはこの映画のレビュワーの評価です」「この日付はイベントの開催日です」といった事を、プログラムでも理解できるようにする事です。

通常このようなページの構造化は、HTML上に決められたルールに従って記述します。
一般的に、Schema.orgというボキャブラリーで定義し、実装にはJSON-LDかmicrodataを使います。

正直言って、ここまでの説明で理解できる、実装できるという方にはデータハイライターは不要です。

なぜかというと、データハイライターは構造化データを実装する事が難しい場合に、データの構造化パターンをGoogleに伝えるモノだからです。

データハイライターを使えば、HTML上に構造化マークアップを行わなくても、それぞれのデータがどんな意味を持つのかをGoogleに伝える事ができます。

構造化マークアップの利点

Googleの検索結果画面で、下のように星マークのついた検索結果を見たことがないでしょうか。

構造化マークアップで「この星はレビュワーの評価です」と定義しておくと、このように検索結果ページにその評価が表示されるようになります。

また、Webサイトには必ずと言っていいほど設置してあるパンくずリストも、きちんと構造化マークアップしておけば、下のように検索結果画面でパンくずリストが表示されます。
（検索クエリによっては表示されない事もあります）

パンくずリストの構造化マークアップの方法は、パンくずのSEO効果と構造化マークアップの方法で解説しています。チャレンジしてみたいという方はぜひご覧ください。

データハイライターの活用シーン

適切な構造化マークアップができる場合には、HTML中に実装したほうが良いです。しかし、CMSの都合でHTMLが修正できない場合や、構造化マークアップそのものが難しい場合も考えられます。
そのような時に、サーチコンソールの「データハイライター」を利用すれば、ページ上のコンテンツをマウスでドラッグするだけで、それぞれのデータに意味付けをする事ができます。

さらに、データハイライターでタグ付けをしたページと類似したページは自動的にタグ付けしてくれます。

例えば映画の紹介ページをデータハイライターでタグ付けすれば、同じレイアウトをしたページも自動でタグ付けされます。（ページセットを作成して類似ページのコントロールをする事も可能です）

データハイライターはサーチコンソールの「検索での見え方 > データハイライター」で、誰でも利用する事ができます。

以下のコンテンツがデータハイライターでタグ付けできるようになっています。

• イベント
• ソフトウェア アプリケーション
• テレビ番組のエピソード
• レストラン
• 商品
• 地域のお店やサービス
• 映画
• 書評
• 記事

データハイライターの使い方

それでは実際に書籍のレビューページに、データハイライターを使ってタグ付けをしながら使い方を解説します。

1. データハイライターの画面から「ハイライト表示を開始」と書かれたボタンをクリックします。
2. タグ付けをしたいURLを入力して「ハイライト指定する情報のタイプ」を選択します。ここでは「記事」を選びます。

   類似ページにもタグ付けを適用させるため、「このページをタグ付けし、他のページも同様にタグ付けする」を選択してOKボタンをクリックします。

3. ページ上をドラッグするとタグ付けできる項目が表示されますので、適切なタグを選択します。

   ここでは記事のタイトルが書かれている箇所を選択し、「タイトル」をタグ付けしています。
   他の部分もタグ付けをします。

4. タグ付けをしたページの類似ページを「ページセット」として作成します。「カスタム」を選べば、自分でURLルールを指定してページセットをコントロールする事ができます。

   ページセットの下に表示されたURLの「*」はワイルドカードと言って、何の文字にでもなれるジョーカーのようなモノだと考えてください。

   例えば「/sfn/attract/wmt/」以下のURLでページセットを作る場合には「/sfn/attract/wmt/*/」と入力します。ページセットの指定が終わったら、ページセット名を指定して「ページセットを作成」をクリックします。

5. 他のページが表示され、最初のページで指定されたタグ付けが反映された状態になっています。

   もし別のページでタグ付けが間違っていれば、適宜正しい状態に修正していきます。

   確認と修正は4ページ行います。

6. すべてのタグ付けが完了したら、最終確認画面の右上にある「公開」ボタンをクリックします。

   これでページ内のコンテンツのタグ付けは完了です。
   次回Googleのロボットがクロールしたタイミングで、タグ付けされた内容が反映されるはずです。

画面を見ながら作業ができるので、JSON-LDなどで構造化マークアップをするよりも楽だと思います。
ただ、この記事を執筆している時点では、Webページのパンくずリストの構造化マークアップなど、一部のデータには利用できません。

また、データハイライターのデータを読み込むのは、構造化マークアップが行われていないページのみです。
すでに一部分でも構造化マークアップが行われている場合には、データハイライターでタグ付けをしてもその内容が読み込まれませんので注意が必要です。

参考
データ ハイライター – Search Console ヘルプ

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

WebCampPro（3ヶ月の超ガッチリ型）

3ヶ月の実践カリキュラムと3ヶ月のキャリアサポートで「転職・就職を保証してくれる」スクール。来校型のスクールですが、平日は毎日13:00以降、講師が常駐しているので質問や疑問もすぐに解消できるのが良いです。それぞれの学習スピードに合わせてカリキュラムが組まれますが、3ヶ月間という短期で一人前のエンジニアになるのが目標なので、かなりきつい部分もあるかと思います。

しかし裏を返せば「本気でキャリア形成をしたい」、「プログラムを仕事にしたい」という方にはピッタリなスクールです。

WebCamp（1か月の集中型）

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp（2〜6か月のカスタマイズ型）

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします