こんにちは。
三重県でホームページ制作をしているMYコンサルティング株式会社、代表の宮本です。
当社は初期費用0円・月額2,880円からのHP制作を行っていて、この記事も、お客様のサイトのOGP設定を日々行っている制作の現場から書いています。
OGPとは、LINEやSNSでURLを共有したときに表示される「画像・タイトル・説明文」の設定のことです。
正式名称は Open Graph Protocol（オープン・グラフ・プロトコル）。
これを設定しておくと、あなたのサイトのリンクが「画像付きのきれいなカード」で表示されます。
この記事では、実際の表示例を見ながら、OGPの役割・画像の推奨サイズ・作り方・HTMLとWordPressそれぞれの設定方法・確認ツールまで、専門知識がない方にもわかるように解説します。
OGPはどこに表示される？
まず、実物を見るのが一番早いです。
LINEで当社サイトのURLを送ったときの画面がこちら。
URLを貼っただけで、画像・タイトル・サイト名のカードが自動で付いてきます。
これはLINEだけでなく、X（旧Twitter）・Instagram・Facebook・Slack・Discordなど、URLを共有できるほぼすべてのサービスで同じ仕組みが動いています。
設定しないとどうなる？【比較】
「設定してもしなくても大差ないでしょ」と思うかもしれません。
並べて見ると、差は一目瞭然です。
未設定だと、ただの文字のリンクがぽつんと表示されるだけ。
正直、ちょっと怪しいリンクに見えてしまうことすらあります。
お客様や知人があなたのお店を紹介してくれる場面を想像してください。
「ここ良かったよ」とLINEでURLを送ってくれたとき、画像付きのカードが出るかどうかで、受け取った人がタップする確率は大きく変わります。
OGPは、口コミの威力を最大化する設定なんです。
OGP画像の推奨サイズ【1200×630が基本】
OGP用の画像は、横1200px × 縦630pxで作るのが基本です。
主要なSNSすべてできれいに表示される、事実上の標準サイズです。
ひとつだけ注意があります。
Xなど一部のサービスでは、カードが正方形に近い形で切り抜かれることがあります。
そのため、重要な文字やロゴは中央の630×630pxの範囲に収めておくのが安全です。
| 項目 | 推奨 |
|---|---|
| サイズ | 1200×630px（比率 1.91:1） |
| 重要要素の配置 | 中央630×630pxの範囲内 |
| ファイル形式 | PNG または JPG（WebPは一部サービスで非対応） |
| ファイルサイズ | 1MB以下が目安（重いと表示が遅れる） |
| 文字の大きさ | スマホの小さいカードでも読めるよう大きめに |
OGP画像の作り方
方法1. Canvaで自作する
無料デザインツールのCanvaに「1200×630」のカスタムサイズを指定して作ります。
- 「デザインを作成」→「カスタムサイズ」→ 1200×630pxを指定
- お店の写真やブランドカラーを背景に、店名とひとことキャッチを大きく配置
- 重要な文字は中央に寄せて、PNG形式でダウンロード
方法2. ChatGPTやGeminiに生成してもらう
画像生成AIに頼む方法です。プロンプト（指示文）の例をどうぞ。
ウェブサイトのOGP画像を作ってください。
・サイズは1200×630px（横長）
・「◯◯（店名）」のホームページ用（←変更）
・背景はネイビー、アクセントにオレンジ（←ブランドカラーに変更）
・重要な要素は中央に配置、シンプルで清潔感のあるデザイン
・文字なしで、あとから文字を載せる前提の背景としてAIは日本語の文字入れが苦手なことがあるので、背景だけAIに作らせて、文字はCanvaで載せるのが失敗しないコツです。
実は当社のOGP画像もこの合わせ技で作っています。
方法3. 制作会社に任せる
ホームページを制作会社に依頼している場合は、「OGP画像を設定してほしい」と伝えるだけでOKです。
当社の場合は、サイトのデザインに合わせたOGP画像を最初から標準で制作・設定しています。
OGP画像には何を載せる？【業種別のヒント】
「サイズはわかったけど、何を載せればいいの？」という方のために、当社が制作現場で使っている考え方を紹介します。
基本の型は「一番おいしい写真 ＋ 店名 ＋ ひとこと」。
受け取った人が0.5秒で「なんのお店か」わかることがゴールです。
- 飲食店：看板メニューの写真が最強です。湯気や断面など「シズル感」のあるカットを大きく
- 美容室・サロン：店内の雰囲気カットか、施術のビフォーアフター。世界観がそのまま伝わります
- 工務店・士業など：施工事例や事務所の写真＋「◯◯市の外構専門」のような一言。信頼感重視で文字は少なめに
- 写真がない場合：ブランドカラーの背景＋店名＋キャッチコピーだけでも、未設定よりはるかに良い印象になります
逆にやりがちな失敗は、情報を詰め込みすぎることです。
OGPカードはスマホでは幅300px程度の小ささで表示されます。
チラシのように文字を並べると、何も読めない画像になってしまいます。
タイトルと説明文にもコツがある
OGPは画像だけでなく、タイトル（og:title）と説明文（og:description）もセットで表示されます。
- タイトル：「店名｜何のお店か＋強み」の形が定番です。例：「◯◯食堂｜伊勢の海鮮ランチ・行列のできる地魚丼」
- 説明文：80文字前後で、場所・特徴・ひとこと誘い文句。長すぎると途中で切られます
当社の実案件でも、この「画像＋タイトル＋説明文」の3点セットを業種に合わせて設計しています。
たとえば外構会社のお客様なら施工写真＋「三重県全域対応」、老舗の米屋さんなら店構え＋「創業1927年」——その店の一番の武器を最初に見せるのが鉄則です。
設定方法（HTML／WordPress）
HTMLで直接設定する場合
画像をサーバーにアップロードし、HTMLの<head>内に次のように書きます。
そのままコピーして、URLと文言を書き換えて使えます。
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:type" content="website">
<meta property="og:url" content="https://あなたのドメイン/">
<meta property="og:image" content="https://あなたのドメイン/ogp.png">
<meta name="twitter:card" content="summary_large_image">ポイントは2つだけ。
og:imageは「https://から始まる完全なURL」で書くこと。
最後のtwitter:cardの行を入れると、Xで大きな画像カードになります。
WordPressの場合
WordPressなら、コードを書かずに設定できることがほとんどです。
- テーマに機能がある場合：カスタマイザーやテーマ設定に「OGP」「SNSシェア」の項目があれば、そこに画像を登録するだけ
- プラグインを使う場合：SEO系プラグインのソーシャル設定からOGP画像を登録できます
- ブログ記事：記事ごとの「アイキャッチ画像」がそのままOGP画像として使われるテーマが多いです
表示を確認する方法・反映されない時の対処
設定できたら、実際にどう表示されるか確認しましょう。
- 手軽な確認：自分ひとりのLINEグループを作って、そこにURLを貼ってみるのが一番簡単です
- ツールでの確認：「OGP確認 シミュレータ」で検索すると、各SNSでの見え方を一括チェックできる無料ツールが見つかります
「設定を変えたのに、古い画像のまま表示される」場合は、SNS側のキャッシュ（一時保存）が原因です。
- X：Card Validator（カード検証ツール）にURLを入れると更新されます
- Facebook：シェアデバッガーで「もう一度スクレイピング」を実行
- LINE：ツールがないため、反映まで時間を置くのが基本です（数時間〜1日程度）
よくある質問
OGP画像のおすすめサイズは？
1200×630pxが基本です。
Xでは正方形に切り抜かれる場合があるため、重要な文字やロゴは中央の630×630pxに収めるのが安全です。
設定したのにLINEで画像が出ません
SNS側が古い情報をキャッシュしていることがほとんどです。
デバッグツールで更新するか、時間を置いてから再度試してください。
WordPressでも設定できますか？
できます。
テーマの標準機能かSEO系プラグインで、コードを書かずに設定できます。
ページごとに違う画像を設定すべきですか？
理想はページごとですが、まずはトップページ用に1枚あれば十分です。
ブログは記事ごとのアイキャッチがそのまま使われることが多いです。
まとめ
OGPは、あなたのサイトが「共有されたとき」の顔です。
- 画像は1200×630px、重要な要素は中央630×630pxに
- 作り方はCanva／AI生成＋文字入れ／制作会社への依頼
- HTMLならコピペ6行、WordPressならテーマかプラグインで
- 反映されないときはSNS側のキャッシュを疑う
口コミ・紹介・SNSシェア——URLが人から人へ渡る場面すべてで効いてくる、費用対効果の高い設定です。
ちなみに、タブに出る小さなアイコンの設定はファビコンの解説記事で詳しく書いています。あわせてどうぞ。
「自分のサイトがどう表示されるか分からない」という方は、お気軽にご相談ください。
現状を無料で確認いたします。