検索エンジンは驚くほど強力です。彼らは、私たちが探しているものを見つけるためにしばしば不明瞭な言葉を解釈し、私たちの質問に答えるために最適なリソースを特定し、それを私たちに瞬時に示すことができます。

Googleは、検索結果ページで質問に答えるのがとても上手で、もはや何もクリックする必要がないくらいです。検索結果をパーソナライズすることも可能です。これにより、人々は欲しい情報をより早く見つけることができます。

しかし、検索エンジンは自分たちだけで仕事ができるわけではなく、サイトオーナーや開発者の協力が必要です。スキーマ・マークアップは、自分のサイトでヘルプを提供するための1つの方法です。

スキーママークは何ですか？

スキーママーカーは、特定の構造化データセグメントを強調するための方法です。

構造化データとは？機械がより理解しやすいように整理され、タグ付けされた情報です。つまり、スキーママークアップとは、検索エンジンがWebページ上の特定の種類の情報を見つけやすくするための情報です。例を見るのが一番わかりやすいと思います。

Googleは、アップルパイのレシピを詳しく説明したインタラクティブなスキーママーカーの独自の例を持っています：。

上図には、準備時間、合計時間、レシピの収量、さまざまな栄養成分を定義したJavaScriptが表示されています。

この時点で、構造化データをマークアップする方法には、JSONを使用する方法とインラインHTMLマークアップの方法の2つがあることに留意する必要があります。

ここでは、Googleが具体的な栄養情報を抽出する方法を紹介します。

Architecture.orgにあなたがよりよく検索エンジンにあなたのページの情報を表示するのに使用することができるたくさんの異なったタイプの札がある。例えば、TechArticleタイプには以下の属性があります。

• プロフィシェンシー
• 単語数
• オーディエンス
• クリエイター
• 作成日
• 変更日
• 発売日
• 出版物の原則
• カラグランシェの典型例

図書館、宿泊業、フラット、映像イベント、放送チャンネル、配信方法、ゲームサーバーの状況など、完全なモデルが用意されています。

これは、検索エンジンが、あなたのページ上の各情報が実際に何を表しているかを把握し、それを探している人に表示できるようにするためのものです。

パターンマーキングのメリット

スキーママークアップは、あなたのページに何があるのかを検索エンジンに伝えます。

Googleはこのように言っています。

"情報が高度に構造化され予測可能であれば、検索エンジンはより簡単に情報を整理し、創造的な方法で表示することができます。"

での検索結果に、今後予定されている**のツアー日程が直接表示されることがあります。

または、検索する際に映画の具体的な情報を得ることができる。

Googleは常にこの情報を独自に探し出すことを進めていますが、スキーママークアップを正しく使用することで、プロセスを容易にし、ページ上の情報が表示される可能性が高くなります。

検索エンジンは、あなたのページの内容を正確に把握することで、それを探している人に検索結果で表示することができるのです。これは誰にとっても良いことです。

構造化データ入門

architecture.orgを使ったマークアップを見たところで、いよいよ実践です。まずは最もシンプルなツール、Googleのデータハイライターから始めましょう。

GoogleのSearch Console（旧ウェブマスターツール）に接続されているウェブサイトが必要です。この設定にお困りの方は、Yoastの便利なチュートリアルをご覧ください。

終了後、Search Consoleにログインし、「検索外観」 > 「データハイライト」をクリックします。画面右側の「ハイライト開始」ボタンをクリックします。

次に、マークアップしたいページのURLを入力し、マークアップの種類を選択する必要があります。今回は、マークアップタイプ「Articles（アーティクル）」を使用します。

多くの記事が掲載されているサイトで記事にマーカーを引いたので、このページや他の類似のページではマーカーを選択したままにしておきます。

左側がページ、右側が利用可能なタグのフィールドというように画面が分割されます。

ここからは簡単です。ハイライト開始テキストをハイライトする（または画像をクリックする）たびに、小さなメニューが表示され、ハイライトする情報の種類を選択することができます。

ここでは、ページタイトルをハイライトしているので、あとはメニューの「タイトル」をクリックするだけです。

右ペインにタイトルが入力されるようになりました。

続けて、著者、投稿日、メイン画像、カテゴリー（投稿上部のマーカーを強調しましたが、この3つはすべてカテゴリーとして取り込まれます）を強調表示します。

もう終わり！ それだけです。

Finish」をクリックすると、Data Highlighterがこのマークアップをサイト上の他の類似したページに適用する手助けをします。

詳細を見る

Data Highlighterは、構造化データマークアップの表面にしか触れることができません。上にあるように、その記事にはいくつかのプロパティしか追加できないのです。architecture.orgのプロジェクトタイプには、設定可能なプロパティが他にもたくさんあります。

スキーマタグに詳細を追加したい場合は、どうすればよいのでしょうか。

この時点で、コードを掘り下げる必要があるのです。前述のように、構造化データの表現方法には、JSONを使う方法とインラインHTMLタグを使う方法の2つが主にあります。HTMLタグはもう少し直感的に理解しやすいので、まずタグについて説明します。

architecture.orghtmlのタグをインライン化

例として、"I live in Denver "という簡単な文章をマークアップすると、HTMLでは以下のように簡単に表現される。

<p>I live in Denver.</p>

タグ付けを開始するには、この特定の文章が人に関するものであることを指定する必要があります（人項目タイプで示されます）。

<div itemscope itemtype="http://schema.org/Person"> <p>I live in Denver.</p></div>

検索エンジンは、このタグに含まれるすべてのものが人物に関連するものであると認識するようになる。

次に、marker 属性を追加します。

homeLocation

... architecture.orgでは、homeLocationは "人の家の連絡場所 "と定義されています。

この特定の属性をHTMLに追加する必要があります。

<div itemscope itemtype="http://schema.org/Person"> <p>I live in <span itemprop="homeLocation">Denver</span>.</p></div>

現在、「デンバー」は以下のように特定されています。

homeLocation

Googleは、このパラグラフで言及している人物がそこに住んでいることを知っています。

I live and work in Denver」という文章に変えると、次のような証明もできます。

<div itemscope itemtype="http://schema.org/Person"> <p>I live and work in <span itemprop="homeLocation workLocation">Denver</span>.</p></div>

デンバーの両方が確認されました

homeLocation

と

workLocation

.(この例を概説してくれたLloyd BankのunorとStack Exchangeに感謝します)。

これはかなり単純なパターンのマークアップの例ですが、これを理解するために

<div>

と

<span>

タグを使用すると、ページ上の任意のコンテンツに属性やプロパティを追加することができます。

Architecture.orgはjsonマークアップを使用します。

Googleは、スキーママークアップにJSON-LD（JavaScript Object Representation of Linked Data）を使用することを推奨しています。この方法の大きな利点は、よりきれいなHTMLが得られるということです。ページの編集に戻ったとき、マークアップされた何十ページものコードを目にしたら、ハッピーにはなれないでしょう。

JSONのマークアップはまだ多くのスペースを必要としますが、HTMLと分離されているため、メンテナンスが容易です。

Harker'sという書店があり、コンタクトページに次のような情報があるとします。

Phone number: 555-8710Address: 749 Stoker St., Boulder, ColoradoHours: 10–9 Monday through Friday, 11–8 Saturday, 12–5 Sunday

以下は、JSON-LDでの表現方法である。

<script type="application/ld+json">{ "@context": "http://schema.org", "@type": "BookStore", "telephone": "555-8710", "address": "749 Stoker St., Boulder, Colorado", "openingHours": [ "Mo-Fr 10:00-21:00", "Sa 11:00-20:00", "Su 12:00-17:00" ],}</script>

ページのタイトルに表示されます。このように、このコンテンツはほぼ間違いなくHTML形式でもページ上に表示されるため、多くのスペースを取ることになります。そのため、ポイントを追加したいものは2回書き込むことになります。

このように重複はあるものの、スキーママークアップをHTMLから切り離すことができるため、JSONのアプローチの方が望ましい場合が多いのです。HTMLのベストプラクティスの多くは、サイトの保守を容易にすることに気づくまで、少し奇妙に思えるかもしれません。同じです。

建築マーカーをサイトに追加する

構造化データ表現をサイトに追加するいくつかの方法について学んだので、いよいよ始めましょう。まずはデータのハイライトから始めて、次に進むのがベストです。このarchitecture.orgの文書は究極のリソースですが、ナビゲートが少し難しいです。

基本を学びたい人も、目の前にあるものに印をつけたい人も、今なら必要な資料が揃っていますよ。

architecture.orgのマークアップをご自身のWebサイトで利用されたことはありますか？Webサイトのオーナーや開発者に向けて、何かアドバイスがあれば教えてください。以下のコメントであなたの考えを共有してください。

画像引用元：iinspiration via Shutterstock.com ウェブサイト