HTML5

Google が Microdata による組織ロゴの意味づけに対応したそうなので

Google が Microdata （schema.org） による、組織ロゴの意味づけをサポートしたとのことですので、実際に使用する際のサンプルソースを挙げてみます。

公開日
更新日

GoogleGoogle ウェブマスター向け公式ブログで紹介されていましたが、Microdata （schema.org） による、組織ロゴの意味づけをサポートし、組織を象徴する画像と Web サイトを関連づけることで、Google 検索結果で使用される組織ロゴの画像を指定できるようになったそうです。

ということで、実際に使用する場合のサンプルソースなど挙げてみようと思います。

このたび、Google では組織のロゴについての schema.org マークアップのサポートを開始いたしました。このマークアップによって、組織を象徴する画像とサイトを結び付けることができます。ウェブマスターの皆様は、Google 検索結果で組織のロゴとして使用される画像を指定することができます。

組織のロゴの schema.org マークアップのサポートを開始しました ： Google ウェブマスター向け公式ブログ から引用

Microdata って何？

Microdata ってそもそも何ですか？ とか、基本的な使い方を知りたいっていう方は、まずは下記の記事をご覧ください。

今回、Google さんがサポートを開始したのは、この Microdata のうち、Organization 型を使用した、組織ロゴの指定です。Microdata 自体には Google は数年前から対応していて、検索結果のリッチスニペットや、Google+ でのリンク投稿時や、+1 ボタンでのメタデータ取得などに利用されています。

Google+ での Microdata の利用に関しては下記に関連エントリーがあります。

Microdata による組織ロゴの指定 サンプルソース

基本的な話はこの辺にして、実際のサンプルソースをいくつか。

まず、例えばすでに Web サイト内のヘッダなどに組織ロゴを使用していて、この画像をそのまま組織ロゴ画像として指定すればいいやっていう話であれば下記のようになるかもしれません。

まずは Microdata 追加前の HTML ソースの例。普通です。

<header>
 <div id="header">
  <h1>
   <a href="/"><img src="/img/logo.png" alt="サンプル株式会社" /></a>
  </h1>
 <div>
</header>

これに、Microdata で組織ロゴの意味づけをしてみます。最もシンプルなのが下記のような感じ。

<header>
 <div id="header" itemscope="itemscope" itemtype="http://schema.org/Organization">
  <h1>
   <a href="/"><img itemprop="logo" src="/img/logo.png" alt="サンプル株式会社" /></a>
  </h1>
 <div>
</header>

Organization は会社だけではありませんので、団体、グループで作っている Web サイトでも同じですよ。下記のような感じ。

<header>
 <div id="header" itemscope="itemscope" itemtype="http://schema.org/Organization">
  <h1>
   <a href="/"><img itemprop="logo" src="/img/logo.png" alt="1日1回ゼリーを食べる会" /></a>
  </h1>
 <div>
</header>

簡単ですね。

次に、Web サイト上では使っていない画像を、組織ロゴとして指定したいという場合は、link 要素などを使ってあげれば大丈夫。

ヘッダーで使っているロゴはデザインの関係上、背景色が付いているけど、実際のロゴは背景が白なんですよね～ なんて場合が該当するかと思いますが、その時は、正式なロゴ画像を別で用意し、サーバにアップロードしたら、下記のように link 要素を追加してあげればよいでしょう。

<html lang="ja" >
 <head itemscope="itemscope" itemtype="http://schema.org/Organization">
  <meta charset="utf-8" />
  <title>サンプル株式会社</title>
  <link itemprop="logo" href="/img/organization-logo.png" />
 </head>

ついでに、会社の概要文とか、URL もあわせて Microdata で指定しておきたければ、下記のように付け足してもいいかもしれません。

<html lang="ja" >
 <head itemscope="itemscope" itemtype="http://schema.org/Organization">
  <meta charset="utf-8" />
  <title itemprop="name">サンプル株式会社</title>
  <meta itemprop="description" content="サンプル株式会社はサンプル専門会社です。" />
  <link itemprop="url" href="http://example.com/" />
  <link itemprop="logo" href="/img/organization-logo.png" />
 </head>

この時、meta 要素には、name 属性と itemprop 属性は同時に使えませんから注意しましょう （参考エントリー）。

また、head 要素内じゃない方がよければ、下記のようにしてページ内のどこかに入れてもよいかもしれません。HTML5 なら、itemprop 属性を持った meta 要素や、link 要素は、head 要素以外の場所でも使えます （参考エントリー）。

<div itemscope="itemscope" itemtype="http://schema.org/Organization">
 <meta itemprop="name" content="サンプル株式会社" />
 <meta itemprop="description" content="サンプル株式会社はサンプル専門会社です。" />
 <link itemprop="url" href="http://example.com/" />
 <link itemprop="logo" href="/img/organization-logo.png" />
</div>

最初に出した、header 要素のサンプルとあわせて下記のようにしてもよいかもしれません。

<header>
 <div id="header" itemscope="itemscope" itemtype="http://schema.org/Organization">
  <h1>
   <a href="/"><img src="/img/logo.png" alt="サンプル株式会社" /></a>
  </h1>
  <meta itemprop="name" content="サンプル株式会社" />
  <meta itemprop="description" content="サンプル株式会社はサンプル専門会社です。" />
  <link itemprop="url" href="http://example.com/" />
  <link itemprop="logo" href="/img/organization-logo.png" />
 <div>
</header>

ということで、これが実際にどのように表示されるのか、まだ見ていないのでわかりませんが、企業や組織のロゴをきちんと Web サイトと関連づけておきたい場合には追加しておくとよいでしょう。

関連エントリー

参考リンク

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか？

Ofuse でおやつをおごる

関連記事