Googleの検索結果でサムネイルを表示させるPageMapとは？

公開日

最近、Googleの検索結果で、正方形のサムネイルが表示されるのを見かけるようになりました。

そこで、サムネイルを表示させる方法を調べてみると、「PageMap」という聞きなれない単語が出てきました。

今回は、この「PageMap」について考察していきます。

PageMapとは？

PageMapについて調べると、Googleのドキュメントで、次のように説明されていました。

PageMap は、ウェブページにデータや情報を埋め込めるようにするために Google が開発した構造化データ形式です。

つまり、マイクロデータやOGPと同じような構造化データのようです。

構造化データとは？

ウェブページの本体であるHTMLファイルは、HTMLという、文章を構造化する記述言語で書かれています。

「文章を構造化する」と聞くと難しそうな印象を受けるかもしれませんが、要は「文章中のこの部分は見出しだよ」「その部分は段落だよ」「あの部分は箇条書きだよ」といったように、文章を構成する部分が何であるかを示してあげるということです。

構造化データは、そこからもう一歩踏み込み、「これは記事の著者の名前だよ」「それは記事が公開された日付だよ」「あれは記事のサムネイル画像のURLだよ」といったように、サーチエンジン等のウェブサービスが有効活用できそうな情報を示してあげるものです。

マイクロデータ (Microdata) とは？

マイクロデータは、現行のHTMLの仕様 (HTML Standard) にも記載されている構造化データです。

HTMLのタグに、itemscope属性、itemtype属性、itemprop属性等を埋め込みます。以下は「パンくずリスト」の例です。

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/books">
      <span itemprop="name">Books</span></a>
      <meta itemprop="position" content="1" />
    </a>
  </li>
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/books/sciencefiction">
      <span itemprop="name">Science Fiction</span></a>
      <meta itemprop="position" content="2" />
    </a>
  </li>
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <span itemprop="name">Award winners</span>
    <meta itemprop="position" content="3" />
  </li>
</ol>

OGP (Open Graph Protcol) とは？

OGPは、FacebookやTwitterといったSNSに、ウェブページの情報を伝えるものです。Twitterのカード (情報の見せ方) を設定するには、以下のようにします。

<html prefix="og: http://ogp.me/ns#">
  <head>
    …
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@nytimesbits" />
    <meta name="twitter:creator" content="@nickbilton" />
    <meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" />
    <meta property="og:title" content="A Twitter for My Sister" />
    <meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." />
    <meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />
    …
  </head>
  …
</html>

PageMapの場合

PageMapはXMLフォーマットです。HTMLのhead要素内に記述する場合、XMLを直接記述することができないためコメントアウトします。

<html>
  <head>
    …
    <!--
    <PageMap>
      <DataObject type="thumbnail">
        <Attribute name="src" value="http://www.example.com/recipes/applepie/applepie.jpg"/>
        <Attribute name="width" value="100"/>
        <Attribute name="height" value="130"/>
      </DataObject>
    </PageMap>
    -->
    …
  </head>
  …
</html>

XMLフォーマットなので、サイトマップ (sitemap.xml) にも記述できます。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:content="http://www.google.com/schemas/sitemap-content/1.0">
  <url>
    <loc>http://www.example.com/foo</loc>
    <PageMap xmlns="http://www.google.com/schemas/sitemap-pagemap/1.0">
      <DataObject type="document" id="hibachi">
        <Attribute name="name">Dragon</Attribute>
        <Attribute name="review">3.5</Attribute>
      </DataObject>
    </PageMap>
  </url>
  <url>
    <loc>http://www.example.com/bar</loc>
    <PageMap xmlns="http://www.google.com/schemas/sitemap-pagemap/1.0">
      <DataObject type="document" id="biggreenegg">
        <Attribute name="name">Ribs</Attribute>
        <Attribute name="review">4.0</Attribute>
      </DataObject>
    </PageMap>
  </url>
</urlset>

というより、サイトマップに埋め込むことを前提としているようにも感じられます (SiteMap > PageMap)。

PageMapの正直なところ

2022年7月現在、Googleで「PageMap」を検索すると、検索結果にサムネイル画像を表示させる方法に関することばかり表示され、それ以外の使い方は見かけません。

また、PageMapでサムネイル画像を設定したとしても、必ず表示される訳ではなく、逆に、PageMapが無くても、サムネイルが表示される場合もあります。

例えば「ピカチュウ」で検索したところ、「ピカチュウ – ポケモンずかん」にはピカチュウのサムネイルが表示されました。

Googleで「ピカチュウ」を検索した結果、サムネイルも表示されました。

そこで、「ピカチュウ – ポケモンずかん」にアクセスしてHTMLソースを見たところ、head要素内にはPageMapはなく、OGPが設定してありました。

<html lang="ja" prefix="og: http://ogp.me/ns#">
  <head>
    …
    <meta property="og:title" content="ピカチュウ｜ポケモンずかん">
    <meta property="og:url" content="https://zukan.pokemon.co.jp/detail/025">
    <meta property="og:type" content="game">
    <meta property="og:image" content="https://zukan.pokemon.co.jp/zukan-api/up/images/index/33f214938d56d4402c06ce8e34f2f768.jpg">
    <meta property="og:description" content="『ポケットモンスター』シリーズに登場するポケモンの情報を見ることができる、「ポケモンずかん」。">
    <meta property="fb:app_id" content="196376567077608">
    <meta property="og:site_name" content="ポケモンずかん">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@Pokemon_cojp">
    <meta name="twitter:image" content="https://zukan.pokemon.co.jp/zukan-api/up/images/index/33f214938d56d4402c06ce8e34f2f768.jpg">
    …
  </head>
  …
</html>

OGPやマイクロデータがPageMapと同じ様に機能するのであれば、PageMapを無理に設定する必要はないかと思います。

PageMapの存在意義

いままで、構造化データには3種類ありました。

1つ目は、OGPのようにmeta要素をhead要素内に埋め込む方法。

2つ目は、マイクロデータのようにHTMLのタグに埋め込む方法。

3つ目は、マイクロデータの代わりにJSON-LD (JSONフォーマット) を埋め込む方法。先程の「パンくずリスト」をJSON-LDに置き換えると次のようになります。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Books",
    "item": "https://example.com/books"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Science Fiction",
    "item": "https://example.com/books/sciencefiction"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Award Winners"
  }]
}
</script>

そして、これらと異なる選択肢として、XMLフォーマットのPageMapがあります。

先の3種類は主に、HTMLに埋め込むことを前提としていますが、PageMapはサイトマップ (sitemap.xml) のような外部のXMLファイルにも埋め込むことができます。これは、大きな変化を起こす可能性を持っています。

例えばサーチエンジンは、ウェブページをクロール (巡回) し、情報を収集・解析して検索結果に反映します。ウェブページを作ったとしても、サーチエンジンがクロールしなければ、検索結果には反映されません。

しかし、サーチエンジンに送信できるサイトマップにウェブページの情報を付加できれば、クロールする前に情報が精査でき、結果として素早く検索結果に反映してもらえるようになるかもしれません。

ということで、PageMapの動向はチェックする必要がありそうですね。

〆

というか、いつからPageMapってあったんだろう？知らなかった。そして、最近、暑すぎ。

関連記事