Shopify SEO · 商品発見

Shopify メタオブジェクトのルックブック画像 SEO チェックリスト(商品発見のために)

Shopify メタオブジェクトで作るルックブック画像を発見されやすくする方法。説明的な alt テキストとファイル名、サーバーサイドでのレンダリング、クロール可能な「商品を見る」リンク、メタオブジェクトページのメタデータ、画像の構造化データ、よくあるミス、測定計画をまとめます。

Prodofoto Team··10 min read
Shopify のメタオブジェクト ルックブック画像として演出され、商品ページへリンクするカジュアル スニーカーのライフスタイル写真
ルックブック画像は、各ルックに説明的な alt テキストと商品ページへのクロール可能なリンクがあって初めて発見につながります。

要点

Shopify のメタオブジェクトで作るルックブックは、画像が発見可能なコンテンツとしてレンダリングされて初めて商品発見に役立ちます。商品名を含む説明的な alt テキスト、アップロード前に付ける説明的なファイル名、各ルックから商品ページへのクロール可能な「商品を見る」リンク、そしてクローラーが見られるようにサーバーサイドでレンダリングされたマークアップが必要です。メタオブジェクトは入れ物にすぎず、画像とリンクの整備こそがシグナルです。

メタオブジェクトのルックブックと、SEO が漏れる場所

Shopify のメタオブジェクトはカスタムのコンテンツ構造で、ルックごとに画像・説明・掲載商品を持たせられるルックブックに適しています。問題は、SEO シグナルが見落とされやすい細部にあることです。各画像の alt テキストとファイル名、商品がリンクされているか、そしてそれらがクローラーの読む HTML に含まれているか。メタオブジェクトの画像は通常の img として描画されるため、Google の画像ガイドラインが商品写真と同じように適用されます。

Shopify Metaobjects · Google Images SEO · Google Crawlable Links

クロール可能な「商品を見る」リンクが発見のエンジン

装飾的なルックブックと発見の場を分けるのは、各ルックが実際のアンカー(href 付きの a 要素)で商品にリンクしているかどうかです。Google はクロール可能なリンクしかたどりません。クリックハンドラだけのホットスポットはクロールされず、発見の価値を渡しません。メタオブジェクトに商品参照フィールドを設けてテンプレートがリンクを描画できるようにし、商品名を含む説明的なアンカーテキストや alt を書きます。

ルックブック画像 SEO チェックリスト

各行はメタオブジェクト内の各ルックで確認する項目です。最初の項目ほど発見を失いやすい箇所です。

要素推奨避けること
ルック画像の alt テキストシーンを説明し、写っている商品名を含めるalt を空にする/ファイル名を自動で流用する
画像ファイル名linen-blazer-tan-trouser-studio-lookbook.webp撮影そのままの IMG_4821.JPG
「商品を見る」リンク各商品ページへの実際の a href リンクリンクなしのフラット画像/JS のみのホットスポット
サーバーサイドのマークアップ幅・高さ・リンクを含むサーバー描画の imgStorefront API からのクライアント描画のみ
メタオブジェクトページのメタデータ説明的なタイトル・メタディスクリプション・自己参照 canonicalテーマ既定のタイトル/説明なし
画像サイズと形式適切なサイズの .webp に幅・高さを指定幅・高さ未指定の巨大な元画像

制作ワークフロー

  1. ルックブックのメタオブジェクトを設計する(タイトル、ルック画像のファイルフィールド、説明、商品参照フィールド)。
  2. メタオブジェクトに追加する前に、各画像へ説明的なファイル名と alt テキストを付ける。
  3. 商品参照フィールドで各ルックを掲載商品に紐づけ、テンプレートがリンクを描画できるようにする。
  4. 幅・高さを指定したサーバー描画の画像として出力し、各商品ページへの実際の a href リンクを描画する。JavaScript 実行前にマークアップがあることを確認する。
  5. ルックブックに独自のクロール可能な URL を与え、タイトル・メタディスクリプション・自己参照 canonical を設定し、ナビゲーションとサイトマップに含める。

よくあるミス

  • 複数の商品を 1 枚の画像にまとめ、リンクを設けない。
  • alt が空、またはファイル名の流用になっている。
  • ヘッドレス構成でクライアント描画のみにする。
  • 実際のリンクではなく JS のみのホットスポットを使う。
  • ルックブックの URL にメタデータやサイトマップ登録がない。
  • メタオブジェクトを魔法の SEO 機能だと思い込む。

FAQ

Shopify のメタオブジェクトはそれ自体で SEO に効きますか?

それ自体では効きません。メタオブジェクトはコンテンツ構造であり、効果は中身の描画方法から生まれます。画像に説明的な alt とファイル名があり、「商品を見る」リンクが実際のクロール可能なアンカーで、全体がサーバーサイドで描画されているときに、ルックブックは順位と発見に貢献します。

ルックブック画像の alt テキストはどこにありますか?

Shopify 上の画像自体と、テーマがメタオブジェクトのファイルフィールドを描画する際に出力する内容です。アップロード前または時に説明的な alt を設定し、テンプレートが空のままにせずその alt を描画するようにします。商品写真の alt と同じく、シーンを説明し商品名を含めます。

メタオブジェクトのルックブックは独自の URL を持てますか?

はい。ストアフロントアクセスを有効にし対応するテーマテンプレートを用意すると、Shopify は条件を満たすメタオブジェクトエントリに独自のページを与えられます。URL を持てば、タイトル・メタディスクリプション・自己参照 canonical・内部リンク・サイトマップ登録を備えた、インデックス可能なページとして扱ってください。最新の手順は Shopify ヘルプセンターで確認してください。

ルックブックに必要なライフスタイル写真を生成する

ルックブックには各ルック向けのスタイリングされた画像が必要です。Prodofoto は 1 枚の商品写真から複数の Shopify 向けライフスタイル画像を生成できるので、撮影を予約せずに説明的で名付けの整った画像でメタオブジェクトのルックブックを満たせます。

Shopify に Prodofoto をインストール