[Hugo] モバイル検索結果へサムネイル画像を表示 - PageMapデータ

Hugo minify により HTMLコメントが削除されてしまうなかで PageMap 構造データをコメント表示するためのハック
Categories:
Tags:

Google 検索結果をちょっとリッチにするためのサムネイル画像の指定方法。

Google 検索結果でのサムネイルの指定

Google 検索結果にサムネイルを表示したいケースでは、いくつかの指定方法がある。

  • PageMap データを <head> に記載する
  • thumbnail metaタグを記載する
https://support.google.com/programmable-search/answer/1626955?hl=en

参照サイト

https://support.google.com/programmable-search/answer/1626955?hl=en

404 Not Found: ページが存在していません

By support.google.com

meta thumbnail の場合

普通のタグ操作と変わらないので特に困らない。表示したい画像を指定できるようにする。

<meta name="thumbnail" content="http://example/foo.jpg" />

PageMap データを使う場合

サンプルでは以下の通り記載されている。コメント内に <PageMap> を記載することになる。

<!--
  <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>
-->

ここで Hugo の場合、ちょっとした問題が生じる。ビルドしたデータを公開する際に、データサイズを小さくするための圧縮（ hugo --minify ）を用いられるケースの方が多いのではないだろうか（デメリットがないため）。

しかし、 <PageMap> データはHTMLコメント内に記載しなければならないことから、この情報が --minify によって取り除かれてしまう。

Hugo でHTMLコメントを残す方法

まず最初に、Hugo の HTMLテンプレート（Goテンプレート）にて HTMLコメントを出力するには、 {{"<!--" | safeHTML}} を利用すればよい。

{{"<!--" | safeHTML}}
  <PageMap>
   ....
  </PageMap>
{{"-->" | safeHTML}}

この状態だと開発モードでは表示できるが、 hugo --minify して公開用データを生成したタイミングでは削除されてしまう。

Hugo の --minify 実装

Hugo 公式ドキュメントの Configuration ページによると、コメントを残す条件を指定できる。ここで『 <head> タグ内だけ残す』という実装が可能であれば都合よいのだが、そううまくはいかない。

minify:
  tdewolff:
    html:
      keepComments: false
      keepConditionalComments: true
      keepDefaultAttrVals: true
      keepDocumentTags: true
      keepEndTags: true
      keepQuotes: false
      keepWhitespace: false

ここで、 keepConditionalComments 設定の挙動を確認する。 tdewolff/minify ライブラリによると、IE Conditional comments を残す実装となっている。

KeepConditionalComments preserve all IE conditional comments such as <!--[if IE 6]><![endif]--> and <![if IE 6]><![endif]>

次に、 IE Conditoinal comments にはどのような表現ができるのかを確認する。

About conditional comments (Internet Explorer)

参照サイト

About conditional comments (Internet Explorer)

By learn.microsoft.com

もちろん今回、条件分岐をしたいわけではなく、Hugo の minifier を回避することが目的である。そうなると以下の2種類が候補として挙がる。

Item Example Comment
true [if true] Always evaluates to true.
false [if false] Always evaluates to false.

最終コード

以下のコードで完成。

{{"<!--[if true]>" | safeHTML}}
  <PageMap>
    <DataObject type="thumbnail">
      <Attribute name="src" value="{{ $metaThumbnailImage | absURL }}"/>
      <Attribute name="width" value="{{ $width }}"/>
      <Attribute name="height" value="{{ $height }}"/>
    </DataObject>
  </PageMap>
{{"<![endif]-->" | safeHTML}}

免責

  • IEのサポートが終了したことで実質存在を無視できることから、このコードで害が生じることはないと考えているが、厳格にどう影響するかは未調査のため不明。
  • Google のアルゴリズムがどのように解釈するかまでは不明。もともと IE向けのコードであるため、無視される可能性もある。
  • 人間に伝えることを目的としたコメントの場合は true / false のいずれにおいても全くの実害はなく、ちょっと目障りな程度で目的は十分に達成できると考えられる。
  • 上記 PageMap データが意味をなさない可能性もあるため、 <meta thumbnail と併用すべきである。