「マークアップ」というと、デザインされたデータをもとに、
実際にWebブラウザで「文書(テキスト)」や「画像」や「見出し」を作ったり見出しを「装飾」したりするために「タグ」と呼ばれる言語を使って構築していく作業になります。

ちょっと分かりにくいと思いますが、
たとえば、見出しを書く時、Wordを使う時に「見出し1」とかを選択して、
設定画面で「見出し1」の装飾を決めます。

そういった一連のことを、直接「タグ」という言葉を使ってプログラムを書くような感じで構築していきます。

例えば、文字を赤くするといった時、Wordであれば範囲選択して「文字色」のボタンから赤を選びます。

これをタグを使って書くとすると、<span style=”color:#ff0000″>文字を赤くする</span>と言った書き方をします。

 

タグの中にもそれぞれに意味がありまして、
例えば<p>というのは「段落」を意味します。
<strong>は強調、<h1>は「見出し1」などなど、、、
これまでのSEO対策としては、上述の「タグ」を正しい意味で正しい順序と使い方で記述するというのが有効とされてきました。

もちろんそれは今でもそうですし、これからも大事になる事だと思います。

そんな中、もう一歩踏み込んだ「構造化マークアップ」と呼ばれる技術が注目され始めてきました。

例えば、レシピを紹介するサイトにおいて

【ビーフカレーの作り方】

カロリー:700kcal

材料
・牛肉 300g
・玉ねぎ 2個
・にんじん 1個
etc…

などといったページがあったとします。

これを普通にマークアップしたら、、

<h1>【ビーフカレーの作り方】</h1>
<p><img src=”◯◯.jpg” alt=”ビーフカレーの作り方”></p>
<p>カロリー:700kcal</p>
<h2>材料</h2>
<ul>
<li>牛肉 300g</li>
<li>玉ねぎ 2個</li>
<li>にんじん 1個</li>
</ul>
といった風に記述すると思います。

それぞれ文書としての役割は「見出し」や「段落」「リスト」といったタグを使って構築して、
クローラーが巡回した時に、この内容を読み込みます。

 

これを構造化マークアップをするとさらに情報が深掘りできます。

<div itemscope=”” itemtype=”http://data-vocabulary.org/Recipe”>
<h1 itemprop=”name”>【ビーフカレーの作り方】</h1>
<p itemprop=”photo”>画像</p>
<p itemprop=”calories”>カロリー:700kcal</p>
<h2>材料</h2>
<ul>
<li itemprop=”ingredient” itemscope itemtype=”http://data-vocabulary.org/RecipeIngredient”><span itemprop=”name”>牛肉</span> <span itemprop=”amount”>300g</span></li>
</ul>
</div>

data-vocabulary」という形式で書きましたが、
普通のh1やliになんだか複雑なものが追加されましたよね?

これが構造化マークアップと呼ばれるものの一種で、例えば
<h1 itemprop=”name”>【ビーフカレーの作り方】</h1>

この見出し部分の「itemprop=”name”」とあります。これは「ビーフカレーの作り方」が「レシピの名前」だよ!
とクローラーに教える記述なんです。

 

いまいち意味が分かりませんよね?
確かに、人間が見ると
【ビーフカレーの作り方】
と書いてあれば、それがレシピ名なんだなーって分かります。

でもクローラーは、「このページがレシピのことを言っていて、レシピ名が何か」までは認識出来ないんです。

通常の書き方だと、
あくまで「このページの見出し」が「ビーフカレーの作り方」で文字情報として「材料とかレシピ」がある。
としか分からないんです。

ここからさらに踏み込んで、

レシピ」について書かれたこのページの名前は「ビーフカレーの作り方」で、
さらに「このレシピ」についての「画像」はこれで、
材料」は「牛肉」で、「カロリー」は「700kcal」なんだ、

ということをデータとして表現出来るんです。

では、構造化マークアップをするとどうなるんでしょうか。
試しにGoogleで「ビーフカレー レシピ」と検索してみてください。

 

 

このように、検索結果の中に画像やカロリーが出ている記事がありますよね?

これは、クローラーに対してきちんとレシピの情報を構造化データとして渡せているから表示されています。
これからのマークアップは、ただタグを書くだけではなく、構造化されたデータをクローラーに渡す記述も書いていくということが大事になってくるでしょう。

 

ただし、まだまだGoogleも試行錯誤しているみたいで、構造化データを書いたから必ず画像とかカロリーとかが出るかどうかは分かりませんし、全ての情報を構造化データとして使えるわけでもありません。

SEOに有利とうわけでも現状は無さそうですので、優先的にやったほうがいいのかと言われると、まだこれからかな?
と言った印象ではありますが、いずれ導入してみるのもいいかもしれませんね。

この記事を書いた人

野末 泰裕
野末 泰裕制作課 テクニカルディレクター

制作部では更新やマークアップやWordPressの実装などを担当。
WordPressと酒と音楽とガンダムとももクロが好きです。
実は音大卒でピアノとトランペットやってました。
【WordPressコミュニティ活動歴】
WordFes Nagoya 2014 – 2016 副実行委員長
WordFes Nagoya 2013 実行委員長