Shopifyの商品ページOGP画像をメイン画像のみにする方法

OGP画像がメイン画像にならない

刀部のオンラインショップは、Shopify（ショッピファイ）というECプラットフォームを使っています。 海外発のシステムなので戸惑うこともありますが、慣れてしまえば分かりやすく割と満足しています。
しかし最近になって各商品の商品画像点数を増やしたところ、メイン画像と異なる画像がOGP画像として表示されるようになってしまいました。
原因を調べたところ、かんたんに改善することができたのでその方法をご紹介します。

OGP画像とは？

あるWebページをSNSでシェアしたとき、そのページのタイトル、URL、サムネイル画像などがカードのようにまとめられて表示されるのをご覧になったことがあると思います。
このようにさまざまな情報を自動的にまとめて表示する仕組みをOGPといい、それに含まれる画像をOGP画像といいます。

OGP画像は複数設定することができ、シェアした人がどの画像を表示するか選択することができるようになっています。
しかしこの画像選択はどんな時でもかならず行えるものではなく、シェア先によって扱いはバラバラだということが分かりました。
たとえばOGP画像を複数設定したとき、Facebookならば常に最初の画像が表示され、Twitterならば最後の画像を表示する仕様になっているようです。

Shopifyの仕様

Shopifyで１つの商品に複数の画像を登録した場合、最大で３枚の画像がOGP画像として設定されることが分かりました。
たとえば [写真１（メイン画像）、写真２、写真３、写真４、写真５] と５枚の写真を登録した場合、写真１（メイン画像）、写真２、写真３の３枚がOGP画像として設定されるわけです。

ここでこの商品ページがシェアされた場合、Facebookならば常に写真１（メイン画像）がOGP画像として表示されるのでとくに問題はありません。
しかしTwitterだと写真３がOGP画像になってしまいます。

一般的に、商品ページのメイン画像には、その商品の魅力がもっとも伝わる画像が設定され、その他の画像で情報を補足することが多いと思います。
ですからせっかくシェアしてもらえた時に表示されるOGP画像には、つねにメイン画像が使用されるように工夫をしてみます。

コードの編集

工夫といっても、複数画像のなかからメイン画像のみを常にOGP画像として表示させるように制御するわけではありません。
１商品に複数の画像を登録しても、OGP画像として設定するのはメイン画像のみにするようコードを編集します。

{% for media in product.media limit:3 -%}

limit:3

limit:1

編集結果の確認

無事、メイン画像がOGP画像として表示されるようになりました。

誰かのお役に立てれば幸いです。