サイト型トップページの作り方を公開しています!Check

【Cocoon】SNSでURLをシェアしたときの画像、ちゃんと設定できてる?OGP設定方法

アイキャッチ|ogp Cocoon
Cocoon
記事内に広告が含まれています

WordPressテーマ「Cocoon」を使っていて、SNS(X:エックス)で自分のサイトURLをシェアしたときに、なぜか毎回同じ画像が表示される……気になっていませんか?

実はそれ、OGP画像がデフォルト設定のままになっている可能性が大。

この記事では、CocoonのOGP設定を使ってXでシェアされたときに表示される画像をオリジナルに変更する方法を解説します。

Cocoon初期画像

(例:デフォルトのサンプル画像)

ogp

オリジナル画像

(例:自分のブログロゴやアイキャッチなど)

ogp

実際、X上でも「デフォルト画像のまま」という人が意外と多いです。

でも、SNSでの第一印象はとても重要。せっかくシェアするなら自分らしさを伝えるオリジナル画像でアピールしましょう。

「他の人と同じはイヤ」「クリックされやすくしたい」という方は、ぜひこの記事の方法をチェックしてみてください。

スポンサーリンク

About meこの記事を書いた人

はるみです
女性-1-gif

ブログ好きな40代主婦です。
2020年1月1日にWordPressを始め、
Cocoonをスキンなしでカスタマイズ。

  • ドメインパワー : 40
  • 2023年より有料記事公開
    累計520件(月間約20件)のご購入実績
    (2025年11月現在)
  • カスタマイズを丁寧にサポート

OGPとは?仕組みと役割

OGP(Open Graph Protocol)とは、WebページをSNSでシェアしたときに、正しいタイトル・画像・説明文を表示させるための仕組みです。

たとえば、自分のブログ記事をXなどにシェアしたとき、何も設定していないと「タイトルだけ」や「文字化けした説明文」になってしまうことがあります。Cocoonでは、デフォルトの共通画像が表示されるのもこのためです。

そこで、ページにOGPタグを設定しておくと、SNS側がその情報を読み取り見た目の整ったリンクカード(プレビュー)を自動で生成してくれます。

つまりOGPを設定することで、

  • リンクが視覚的に魅力的に見える
  • 投稿のクリック率がアップする
  • 自分のブログやブランドの印象を統一できる

というように、集客にも信頼性にも直結する大切な仕組みです。

スポンサーリンク

OGP画像の適切なサイズと形式

SNSで綺麗に表示させるには画像サイズと形式の設定が大切です。まずは、主要SNSごとの推奨サイズを確認しましょう。

推奨される画像サイズ

Facebook

推奨サイズ: 1200 x 630px
最小サイズ: 600 x 315px

X(旧:Twitter)

推奨サイズ: 1200 x 675px
最小サイズ: 600 x 335px

1200×630px」を基準に作れば、主要SNSでほぼ最適に表示されます。

画像形式とファイルサイズの目安

  • 形式
    • JPEG → 写真や風景などに最適
    • PNG → ロゴ、イラスト、透過画像に最適
  • 容量:1MB以下推奨(SNSによっては自動圧縮されます)

当サイトではページ読み込みを軽くするため、画像を50KB以下に圧縮して使用しています。

スポンサーリンク

CocoonでのOGP設定方法

ポイント

  • 個別記事
    • 「アイキャッチ画像」が優先でOGPに反映
  • サイト全体
    • Cocoonの「ホームイメージ」画像が使われる(※設定必須
  • Cocoonはプラグイン不要でOGPを設定可能
    → All in One SEO等のSEOプラグインとOGPを重複設定しない

つまり、記事単位の設定は不要。サイト全体のデフォルト画像(ホームイメージ)だけをCocoonで設定しておくのが基本です。

OGP設定手順(Cocoon)

  • Step1
    Cocoon設定を開く

    ダッシュボード → Cocoon設定 → OGPタブ を選択。

    ogp
  • Step2
    ホームイメージ設定

    画面下部にある「ホームイメージ」の項目から、任意の画像をアップロード。

  • ラベル
    保存して反映を確認

    設定を保存後、SNSのシェア機能を使って正しく表示されるか確認します。

すぐに反映されないことが多いので、キャッシュ削除や時間を置いて確認しましょう。

スポンサーリンク

OGPが反映されない場合の対処法

OGPを設定してもSNSに反映されないことがあります。特にXやFacebookは一度取得した情報をキャッシュとして保持するため、古い画像やタイトルが表示され続けるケースがよくあります。

焦らず、以下の手順を順番に試してみましょう。

  • ブラウザキャッシュをクリア
    まずは手元の環境をリセットします。ブラウザのキャッシュが残っていると、実際には更新されていても古い情報が見えてしまうことがあります。
  • Cocoonのキャッシュを削除
    Cocoonには独自のキャッシュ機能があります。更新後は一度キャッシュを削除して最新の状態を反映させましょう。
    • ダッシュボード → Cocoon設定 → キャッシュ削除
ogp
  • X(Twitter)のキャッシュを削除
    Xでは「カードバリデータ(Card Validator)」という公式ツールを使って、OGP情報を再取得できます。
  1. 自分のページURLを入力
  2. 「Preview Card」をクリック

新しい画像・タイトルが表示されれば更新完了です。

アイキャッチ画像を途中で変更した場合は、このツールで必ず再読み込みしておきましょう。

ogp

SNS側の反映にはタイムラグがある場合があります。数時間〜最大で1〜2日程度かかることもあるため、時間を置いて再確認しましょう。

私の場合は、設定後 約1時間で反映 されました。すぐに変わらなくても焦らず待つのがポイントです。

この流れを押さえておけば、OGP画像が正しく表示されないトラブルはほぼ解決します。特に「カードバリデータ」をブックマークしておくと、今後の画像更新時にもすぐ確認できて便利です。

スポンサーリンク

OGP設定のための追加情報

Cocoonでは、投稿や固定ページごとに個別のOGP画像を設定することができます。特に、固定ページをトップページにしている場合投稿ページと固定ページで異なるOGP画像を設定したい場合は、少し注意が必要です。

固定ページと投稿ページ個別のOGP設定

トップページを固定ページにしている場合のOGP設定方法は主に2つあります。

  1. アイキャッチ画像を設定する
    投稿ページと同じように、固定ページにもアイキャッチ画像を設定することで、OGP画像として自動的に反映されます。
  2. SNS画像を設定する
    投稿編集画面のサイドバー「投稿」タブで、SNS専用のOGP画像を設定することもできます。

ホームイメージの設定と優先度

OGP画像には反映される優先順位があります。複数設定がある場合は以下の順番で優先されます。

OGP画像の優先順位
  1. SNS画像(サイドバーで設定した画像が最優先)
  2. アイキャッチ画像(個別ページに設定した画像)
  3. 本文中に最初に出てくる画像
    • 「Cocoon設定 → 画像タブ」で『アイキャッチ自動設定』にチェックを入れている場合のみ反映されます
  4. NO IMAGE画像(Cocoon設定 → 画像タブの一番下で指定した画像)
  5. ホームイメージの画像(Cocoon設定 → OGPタブで設定したサイト全体の画像)

つまり、実際に表示されるのはSNS画像があればそれが優先されるため、個別記事や固定ページではSNS画像だけ設定すればOKです。(アイキャッチだけでも○)

ogp

Cocoon|OGP設定まとめ

以上、OGPの設定方法について解説しました。

初心者でも数分で設定できるので、まだの方はぜひ取り組んでみてください。OGPを整えるだけで、SNSシェア時のクリック率やサイトの印象がぐっと良くなりますよ。

Comment 記事の感想を書き込んでいただけると幸いです

タイトルとURLをコピーしました