OGP画像を設定してSNSのサムネを整える方法

og:imageとは何か

og:imageは、SNSやチャットにURLを貼ったときに表示されるサムネイル画像を指定するOGPタグです。ページのhead内にメタタグとして書き、画像のURLを値に指定します。

X、Facebook、LinkedInなど多くのサービスがこのog:imageを参照してカードの画像を決めます。つまり1つ整えておけば、複数のSNSで共通のサムネイルが使われます。

画像が指定されていないと、サービスはページ内の適当な画像を拾うか、画像なしで表示します。意図した見せ方をするには、明示的にog:imageを設定するのが確実です。

og:imageの書き方

基本は、画像の公開URLを値に持つメタタグをheadに置くだけです。画像URLは絶対URLで指定し、外部からアクセスできる場所を指します。

あわせてog:titleやog:descriptionも入れておくと、カード全体の見栄えが整います。画像だけでなくテキストもセットで考えるのがコツです。

• 画像URLは絶対URLで指定する
• HTTPSで配信される場所に画像を置く
• og:titleとog:descriptionも一緒に設定する

最短手順：まずこの3ステップで完了

OGP画像を設定してSNSのサムネを整える方法は、最初に全体像を押さえると迷いません。細かな設定に入る前に、ファイルを準備し、共有条件を決め、公開後に相手と同じURLで確認する流れを作ります。

手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 1. 共有するHTML/ZIPを整理し、不要ファイルや秘密情報を除く
• 2. 認証方式、公開期限、差し替え有無を決めてURLを発行する
• 3. シークレットウィンドウとスマホで開き、相手への依頼文を添えて送る

推奨サイズと作り方の手順

見栄えのよいOGP画像を用意する流れは次のとおりです。

カードのトリミングはサービスによって少しずつ異なります。重要な要素を中央に寄せておけば、端が多少切れても意図が伝わり、どのSNSでも破綻しにくくなります。

1. 横長の画像を用意する（多くのSNSが横長カードを採用している）
2. 中央に重要な要素を置き、端が切れても伝わる構図にする
3. 文字を入れる場合は大きめにして、小さく表示されても読めるようにする
4. 画像を公開URLに配置し、ブラウザで直接開けるか確認する
5. そのURLをog:imageに指定してページを公開する

画像が表示されないときの確認

og:imageを設定したのにサムネイルが出ない場合、まず画像URLをブラウザで直接開いて表示されるかを確かめます。開けないなら、配置場所やパスが間違っています。

次に、画像が外部からアクセスできる場所にあり、HTTPSで配信されているかを確認します。社内ネットワークなど限定環境にある画像は、SNS側から取得できません。

設定自体は正しいのに古い画像が出る場合は、SNS側がキャッシュしている可能性があります。各サービスのデバッグツールで再取得すると更新されます。

ギガサイト便でOGP画像を確認する

ギガサイト便はHTMLやCSS・JS・画像を含むZIPをドロップするだけで 〇〇.giga-site.com の共有URLを発行します。ZIPに画像を含めておけば、その画像もCDN経由でHTTPS配信されるため、og:imageの到達性を確かめやすくなります。

og:imageには、この公開URL上の画像パスを絶対URLで指定すれば、SNSのカード表示をそのまま試せます。表示が思ったとおりでなければ、同じURLのままファイルを差し替えて再確認できます。

公開URLにはnoindexが付くため、調整中のページが検索に出る心配はありません。なお、関係者以外に見せたくない場合はnoindexだけに頼らず認証を併用してください。