みなさま、こんにちは！
株式会社ホワイトボードのフロントエンジニアの末ちゃんこと、末吉です。

お盆休みまっただ中な方や、暦通りに営業されている方、
いやいや、かき入れ時ですよ！というかたもいらっしゃると思います。

さて今回はHTMLに記述するマイクロデータについてちょっとお話してみたいと思います。

マイクロデータとは

マイクロデータとはコンピュータが読むためのデータを書くための仕様です。私たちの言語は特に理解が難しいことが多いので、今何について書いているのか、つまりロボットに対して教えてあげます。そうすることで、よりGoogleなどのロボットが何について書いているページなのか判断しやすく、検索順位最適に効果的です。

たとえば自己紹介ページを作る前提で例をみていきましょう。

itemscope の宣言

<section itemscope>
</section>

itemscopeはアイテムの範囲の宣言です。この中にマイクロデータを書いていきます。

itemprop

itempropはプロパティの定義で、itempropに対して値を宣言します。例に名前と年齢、自己紹介を書いてみました。

<section itemscope>
  <p itemprop="name">末ちゃん</p>
  <p itemprop="age">24歳</p>
  <p itemprop="desc">フロントエンジニアの末ちゃんです。</p>
</section>

このように、私たちはただ読むだけで名前と年齢と、自己紹介していると分かる文章に対して、ロボットのために具体的に記述していきます。

なお、今回はpタグで区切っていますが、spanで区切りながら文章中にマイクロデータを追加してもOKです。

 

使えるマイクロデータは恐ろしい程たくさんあります。

下記リンクを参考に、どんなマイクロデータが使えるか調べてみてください。

Microdata

 

あなたのサイトにはマイクロデータありましたか？？

それではまた来週！