メインコンテンツにスキップ

ソーシャルカバー画像

SNSでURLをシェアした際に表示されるソーシャルカバー(サムネイル / OGP)画像の設定方法と注意点を解説します。正しいサイズや反映タイミングを理解し、意図したビジュアルを表示できるようにします。

今日アップデートされました

ソーシャルカバー画像とは

ソーシャルカバー画像は、サムネイル/ OGP画像 とも言われ、SNSなどでURLを共有したときや、検索結果上に表示される画像です。

ページごとに内容に合った画像を設定することで、投稿の視認性が高まり、ユーザーにとって分かりやすくなります。

注意:モーダルにはソーシャルカバー画像を設定できません。


この記事では、ソーシャルカバー画像の設定手順を紹介します。

(1) サイト設定パネル・ページ設定パネルを開く

要素(ボックス)を何も選択していない状態で、右パネルを開きます。

ページごとの設定は[ページ]タブ、サイト全体の設定は[サイト]タブで行います。

Point:サイト設定とページ設定の違い

Studioでは、タイトルとディスクリプションをサイト単位とページ単位の両方で設定できます。

  • サイト設定:サイト全体に適用されます。ページ設定が未入力のページにはサイト設定の内容が適用されます。

  • ページ設定:個別のページのみに適用され、サイト設定より優先されます。

(2) 画像をアップロードする

[ソーシャルカバー]の項目で、画像アップロードボタンをクリックし、使用する画像ファイルを選択します。

  • 推奨サイズ:200px × 630px

  • 推奨ファイルサイズ; 5MB 未満

ファイルサイズが大きすぎる場合、SNSや利用環境によっては画像が正しく読み込まれないことがあります。

画像を削除するには、画像をホバーし、右上に出る[×]をクリックします。

CMSプロパティの画像を使う場合

動的ページのページ設定では、ソーシャルカバー画像をホバーすると、記事に紐づいたプロパティ一覧が表示されます。クリックすることで、記事に紐づく画像を選択できます。

(3) サイトを公開・更新する

画像の設定や変更を行った後は、サイトを公開または更新して設定内容を反映します。

すでに公開済みのサイトでOGP画像を変更した場合は、サイトを更新するまで外部サービスには反映されません。

注意:公開サイトへの反映のタイムラグについて

サイト公開後にOGP画像を変更しても、検索結果やSNSにはすぐに反映されません。これは、URLとカバー画像の紐付けを各SNSが独自に管理し、キャッシュを利用しているためです。変更後は反映までしばらくお待ちください。

thumbnail サムネイル サムネ カバー カバーイメージ

こちらの回答で解決しましたか?