【手順】Studioのファビコン・OGP設定｜推奨サイズとSNSに反映されない時の確認

Studioで作ったサイトのURLをSNSに貼ったら、画像が出ない。ブラウザのタブに、自分のロゴではないアイコンが表示されている。公開直前になって、こうした細かい表示に気づく方は多いはずです。ファビコンとOGPは、設定する場所さえ分かれば数分で終わる作業です。ただ、名前が「ソーシャルカバー」だったり、反映に時間差があったりして、迷いやすいところでもあります。私たちは、150名以上が参加する国内最大級のStudio学習コミュニティ「ノーコードサロン」を運営しています。この記事では、Studio公式ヘルプの記載に沿って、設定場所・推奨サイズ・ページごとの切り替えを整理します。反映されないときの確認順もまとめました。

結論：右パネルの[サイト]タブと[ページ]タブで設定する

Studioでは、ファビコンもOGP画像も、エディタの右パネルで設定します。ボックスなどの要素を何も選択していない状態にすると、右パネルに[ページ]タブと[サイト]タブが表示されます。

項目	役割	公式ヘルプの推奨（2026年9月時点）
ファビコン	ブラウザのタブやブックマークに出るアイコン	48×48ピクセル以上
ソーシャルカバー（OGP画像）	SNSでURLを共有したときや検索結果に出る画像	1200×630ピクセル、5MB未満
ページタイトル・説明文	検索結果やSNSで、画像と一緒に出るテキスト	タイトルは全角30文字前後、説明文は70〜120文字程度

[サイト]タブで設定した内容はサイト全体に効きます。[ページ]タブで設定した内容はそのページだけに効き、サイト設定より優先されます。まずサイト全体の既定値を入れ、変えたいページだけページ設定で上書きする、と考えると迷いません。

ファビコンの設定手順

ファビコンは、ブラウザのタブやブックマークの一覧に表示される、サイトを象徴する小さなアイコンです。公式ヘルプによると、スマートフォンのホーム画面にサイトを追加したときも、このファビコンがアイコンとして使われます。

手順1：要素を選ばずに右パネルを開く

キャンバス上のボックスを何も選択していない状態にして、右パネルを開きます。サイト全体のファビコンなら[サイト]タブ、特定のページだけ変えたいなら[ページ]タブを選びます。

手順2：[ファビコン]に画像をアップロードする

[ファビコン]の項目にある画像アップロードボタンをクリックし、画像ファイルを選びます。推奨サイズは48×48ピクセル以上です。これはGoogle検索セントラルの推奨に合わせたものだと、ヘルプに明記されています。

ファイルサイズが大きすぎると、画像が正しく読み込まれないことがあります。差し替えたいときは、アップロード済みの画像にカーソルを合わせ、右上に出る[×]で削除してから入れ直します。

手順3：サイトを公開・更新する

設定しただけでは、公開中のサイトは変わりません。公開済みのサイトでファビコンを変えた場合、サイトを更新するまで外部には反映されません。エディタ上で表示が変わっていても、公開中のサイトは古いままなので注意してください。

サイズは48の倍数にしておく

公式ヘルプの「反映されません」の記事では、ファビコンのサイズが48×48ピクセルの倍数になっていない場合は変更を検討するよう案内しています。96×96や144×144のように、48の倍数の正方形で書き出しておくと安心です。

OGP画像（ソーシャルカバー）の設定手順

StudioではOGP画像のことを「ソーシャルカバー」と呼んでいます。SNSでURLを共有したときや、検索結果に表示される画像です。ヘルプには、未設定だとSNSでの共有時に画像が表示されないと書かれています。

手順1：要素を選ばずに右パネルを開く

ファビコンと同じく、ボックスを何も選択していない状態で右パネルを開きます。サイト全体の画像は[サイト]タブ、ページごとの画像は[ページ]タブで設定します。

手順2：[ソーシャルカバー]で画像を選ぶ

[ソーシャルカバー]の項目で[画像をアップロード]を選び、画像ファイルを指定します。推奨サイズは1200×630ピクセル、ファイルサイズは5MB未満です。サイズが大きすぎると、SNSや閲覧環境によっては画像が正しく読み込まれないことがあります。

同じ項目には[CMSプロパティから選択]もあり、記事に紐づく画像を選べます。こちらは後の見出しで説明します。

手順3：サイトを公開・更新する

ファビコンと同じで、公開済みのサイトはサイトを更新するまで外部に反映されません。画像を差し替えたら、そのまま更新まで済ませておきましょう。

SNSに出るタイトルと説明文は「ページタイトル」と「説明文」

SNSのカードには、画像と一緒にタイトルと説明文も表示されます。Studioでは、これらは同じ右パネルの[サイトタイトル]／[ページタイトル]と[説明文]で設定します。公式ヘルプでも、タイトルと説明文は検索結果やSNSでの表示に使われる情報だと説明されています。

注意したいのは、ページパネルで付ける「ページ名」との違いです。ページ名はエディタ内で管理するための名前で、公開サイトには出ません。検索結果やSNSに出るのは「ページタイトル」のほうです。タイトルの文字数や書き方の考え方は、StudioのSEO対策の設定手順で詳しく扱っています。

ページごと・CMS記事ごとに画像を変える

サイト全体で同じ画像でも困りはしませんが、サービス紹介や採用ページなど、共有されやすいページは専用の画像にしておくと中身が伝わりやすくなります。

固定ページは[ページ]タブで上書きする

変えたいページを開き、要素を選ばない状態で右パネルの[ページ]タブを開きます。そこでファビコンやソーシャルカバーを設定すると、そのページだけサイト設定より優先されます。ページ設定が空欄のページには、サイト設定の内容が使われます。

CMSの記事ごとに画像・タイトルを切り替える

ブログやお知らせなど、CMSの記事を表示する動的ページでは、記事ごとに画像を変えられます。公式ヘルプの手順は次のとおりです。

1. ページパネルで対象のページを選び、右パネルの[ページ]タブで[タイプ]が[動的ページ]になっているかを確かめる
2. [ソーシャルカバー]のサムネイルをクリックし、[プロパティを選択]から、記事に紐づく画像のプロパティを選ぶ
3. [ページタイトル]や[ページ説明文]も、入力欄の左の[+]からCMSプロパティを選べる

タイトルは、固定の文字列とプロパティを組み合わせることもできます。記事タイトルのあとにサイト名を固定で付ける、といった使い方です。OGP専用の画像や説明文を記事ごとに持たせたいなら、CMSのモデル側に専用のプロパティを追加しておきます。動的ページの作り方そのものは、StudioのCMS・ブログの作り方を先に読むと流れがつかめます。

モーダルには設定できない

公式ヘルプには、モーダルにはファビコン・ソーシャルカバー・タイトル・説明文のいずれも設定できないと書かれています。モーダルの中身をSNSで個別に共有させたい場合は、ページとして作る必要があります。

変更が反映されないときの確認順

画像を差し替えたのに、SNSや検索結果の表示が古いまま。この症状は、原因がStudio側にあるか、外部サービス側にあるかで対処が変わります。次の順で切り分けてください。

1. サイトを「更新」したか

最初に確かめるのは、エディタで変えたあとにサイトを更新したかどうかです。公開済みのサイトは、更新するまで外部サービスに反映されません。公開URLをブラウザで開き、ページのソースを表示して、og:image の画像URLが新しいものになっているかを見ると確かめやすくなります。

2. サイト設定が空欄のままになっていないか

Studioの公開基盤によって、未設定のときの挙動が違います。新基盤では、サイト設定のサイトタイトルとソーシャルカバーが未設定だと、空欄のまま出力されます。旧基盤では、未設定のときプロジェクト設定のプロジェクト名とカバー画像が代わりに使われていました。

旧基盤のころはプロジェクトのカバー画像がOGPとして出ていたサイトでも、新基盤では画像なしになりえます。基盤を切り替えたあとは、[サイト]タブのサイトタイトルとソーシャルカバーが埋まっているかを見直してください。プロジェクト設定のカバー画像と、[サイト]タブのソーシャルカバーは別の設定です。

3. SNS側のキャッシュ

Studio側が正しくても、SNSは一度読み込んだページの内容を一時的に保存（キャッシュ）しています。そのため変更がすぐには反映されません。公式ヘルプでも、この反映までの時間はStudio側の設定では制御できず、待つ必要があると案内されています。

Facebookには、Metaが公開している「シェアデバッガー」（developers.facebook.com/tools/debug/）があります。URLを入れると、ページを読み直させて表示を確かめられます。

4. 検索結果のファビコンは再クロールを待つ

検索エンジンは、ページを定期的に巡回して情報を保存しています。そのため、検索結果に出るファビコンの変更もすぐには反映されません。Googleの場合は、サーチコンソールから再クロールをリクエストすると反映が早まることがあります。サーチコンソールの連携がまだなら、先にStudioのGA4・サーチコンソール設定を済ませておくと、こうした確認がしやすくなります。

よくある質問

Q1OGPを設定するのに、コードやプラグインは必要ですか？

必要ありません。Studioでは、右パネルの[ソーシャルカバー]に画像を入れ、[ページタイトル]と[説明文]を入力すれば、OGPとして出力されます。公開・更新すれば設定が反映されます。

Q2ページごとにファビコンを変えられますか？

変えられます。公式ヘルプでは、ファビコンはサイト全体でもページごとでも設定できると案内されています。変えたいページで右パネルの[ページ]タブを開き、[ファビコン]に画像を入れてください。ページ設定はサイト設定より優先されます。

Q3ブログ記事ごとにOGP画像を自動で切り替えられますか？

CMSの記事を表示する動的ページなら可能です。[ページ]タブの[ソーシャルカバー]で[プロパティを選択]から、記事のサムネイル画像などのプロパティを選びます。記事を追加するたびに、その記事の画像がOGPとして使われます。

Q4画像を変えたのに、LINEやXでは古い画像のままです。

まずサイトを更新したか、公開ページのソースで新しい画像URLが出ているかを確認してください。そこが正しければ、SNS側のキャッシュが原因です。Studioの公式ヘルプでも、SNS側の反映時間はStudioの設定では制御できないとされています。時間をおいて改めて確認してください。

まとめ

Studioのファビコンとソーシャルカバー（OGP画像）は、要素を選ばない状態で開く右パネルの[サイト]タブと[ページ]タブで設定します。推奨サイズは、ファビコンが48×48ピクセル以上、ソーシャルカバーが1200×630ピクセル・5MB未満です（2026年9月時点の公式ヘルプ）。CMSの動的ページなら、記事ごとに画像やタイトルを切り替えられます。反映されないときは、サイトの更新、サイト設定の空欄、SNSと検索エンジンのキャッシュ、の順に確かめてください。

ファビコンとOGPは、公開後に人がURLを共有して初めて目に入る部分なので、作り手が見落としやすい設定です。Studioでサイト制作案件を納品する方法とあわせて、公開前のチェック項目に入れておくと安心です。ノーコードサロンでは、こうした公開まわりの細かな設定も、チャットで質問しながら一つずつ確かめられます。