OS 3.0 テーマでのカスタムページカバーの設定方法

ストアの検索結果の視覚的な魅力を高め、ブランドの一貫性を維持するために、SHOPLINEはカスタムページのカスタムページカバーをサポートするようになりました。カスタムページに独自のカバー画像を設定することで、予測検索や検索結果ページで目立たせることができ、顧客のエンゲージメント向上につながります。

この記事では、管理画面での特集画像の設定方法とストアフロントでの表示方法についてご案内します。

カスタムページカバーの機能

特集画像は、さまざまなストアフロントのセクションでカスタムページの視覚的表現を柔軟に管理する方法を提供します。この機能を活用することで、検索結果やページレイアウトの両方でカスタムコンテンツをプロフェッショナルに表示できます。

• 強化された検索体験：顧客がカスタムページに関連するキーワードを検索すると、カスタムページカバーが予測検索のドロップダウンやメインの検索結果に表示されます。
• 視覚的一貫性：テキストのみのリンクではなく、顧客に視覚的な手がかりを提供し、ルックブック、会社概要、プロモーションページなどのカスタムコンテンツがブランドの美学に調和します。

• SEOとアクセシビリティ：検索エンジンが画像コンテンツを理解し、ストア全体のSEOランキングを向上させるためのALTテキスト専用フィールドが含まれています。

  注：画像を検索エンジン向けに最適化する方法の詳細については、"ファイルライブラリの画像にALT属性を追加する方法"をご参照ください。

カスタムページカバー機能の設定

カスタムページカバーの設定は、SHOPLINE管理画面のページ管理セクションから始まります。この画像は検索結果やOS 3.0テーマブロックの「ソース」として機能します。

方法1：ページ設定から

この方法では、検索結果およびすべてのテーマブロックの主要な「ソース」として機能するグローバルカバーを設定します。

1. SHOPLINE管理画面から、オンラインストア > ページ に移動します。新しいページを開始するには ページを作成 ボタンをクリックするか、修正したい既存の カスタムページ のタイトルをクリックします。
   
2. 右側のサイドバーで、カスタムページカバー エリアを見つけます。
   
3. デバイスから画像をアップロードするか、ファイルライブラリ から選択します。
   • 画像を選択した後、目のアイコン をクリックしてカバーの表示プレビューを確認できます。
     
4. アップロード後、画像にカーソルを合わせて管理できます：
   
   • 変更： 現在の画像を別のものに差し替えます。
   • 削除： ページから画像を削除します（確認のプロンプトが表示されます）。

   • ALT： SEOとアクセシビリティのために、ファイルライブラリ で画像の代替テキストを修正します。

     注： 詳細な手順については、"ファイルライブラリの画像にALT属性を追加する方法" をご参照ください。

技術仕様と制限事項

最適なパフォーマンスとSEOインデックスを確保するために、以下の技術要件とテーマの制限事項にご注意ください。

• 画像の要件： 
  • 対応フォーマット：JPGおよびPNG。
  • ファイルサイズ：4MB未満であること。
  • 推奨サイズ：1200px x 1600px。
• テーマの対応状況：この機能は、Bottleテーマを除くすべての公式SHOPLINE OS 3.0テーマでサポートされています。
• データの永続性と表示ロジック：
  • グローバルデータ共有：カスタムページ設定で設定されたカバー画像はページのコアデータに保存されます。つまり、異なるOS 3.0テーマに切り替えても画像は自動的に同期され、利用可能なままです。
  • セクション固有の上書き：テーマエディターのセクション内で特定のカバー画像を直接アップロードした場合、その画像はそのテーマの設定に紐づきます。テーマを切り替えると、新しいテーマでそのセクションの画像を再度選択またはアップロードする必要があります。
• 開発者向けカスタマイズ：他のOS 3.0テーマ（例：Bottle）やプライベートテーマの場合、開発者はfeatured_image Slineオブジェクトにアクセスしてこの画像を手動で表示できます。このオブジェクトにはalt、src、height、およびwidth属性が含まれています。
• 検索インデックス：これらのページのカスタムURLもインデックス化されており、URL内のキーワードが検索結果での画像表示をトリガーすることがあります。