「せっかく書いたブログ記事をSNSでシェアしたのに、画像が表示されなくて地味…」
「URLだけが表示されてしまって、なんだかクリックしたくない見た目になっている…」

Webサイトやブログを運営していると、こんな経験はありませんか？
一生懸命作ったコンテンツだからこそ、SNSでも魅力的に見せたいですよね。

実はそれ、HTMLに「OGP（オージーピー）」という設定を追加するだけで解決できるんです。OGPを設定すれば、サムネイル画像やタイトルがカード形式でリッチに表示されるようになります。

この記事では、HTML初心者の方でもすぐに使えるOGPのテンプレートや、各タグの書き方、画像サイズのルールなどをやさしく解説します。
SNSからのアクセスを増やすための第一歩、一緒に設定していきましょう。

OGPとは？HTMLに設定する意味とメリット

OGPとは？HTMLに設定する意味とメリット

OGP（Open Graph Protocol）とは、FacebookやX（旧Twitter）、LINEなどのSNSでWebページがシェアされた際に、そのページのタイトルや画像、説明文などを正しく伝えるための仕組みのことです。

通常、HTMLファイルにこの設定を記述しなくてもページ自体は表示されますが、SNS上での見え方が大きく変わります。ここでは、なぜOGP設定が必要なのか、そのメリットについて見ていきましょう。

SNSでシェアされた時の見え方がリッチになる

OGPを設定していない場合、SNSでURLをシェアしても、単なる文字列としてのリンクが表示されるだけだったり、意図しない画像が勝手に抽出されてしまったりすることがあります。

一方で、OGPを正しく設定しておくと、指定したサムネイル画像（アイキャッチ）やタイトルが大きなカード形式で表示されます。視覚的な情報量が増えるため、タイムライン上での存在感がぐっと増し、ユーザーに対して「どんな記事なのか」を一目で伝えられるようになります。

ユーザーの目に留まりやすくクリック率が向上する

タイムラインには日々たくさんの情報が流れてきます。その中で、文字だけの投稿と、魅力的な画像付きの投稿、どちらがつい見てしまうでしょうか？やはり画像付きの方が目を引きますよね。

OGPを設定して情報をリッチに見せることは、ユーザーの興味を惹きつけ、クリック率（CTR）を向上させるために非常に重要です。特にスマートフォンの小さな画面では、画像のインパクトがクリックするかどうかの判断に大きく影響します。

SEOへの直接的な効果はないが間接的な流入に貢献する

「OGPを設定するとGoogle検索の順位が上がるの？」と疑問に思う方もいるかもしれませんが、実はSEO（検索順位）への直接的な効果はありません。Googleの検索エンジンは、OGPタグを評価の対象にしていないからです。

しかし、SNSで見栄え良くシェアされることで拡散されやすくなれば、結果として多くの人がサイトを訪れます（サイテーションや被リンクの獲得）。このように、多くのアクセスを集めることはサイトの評価を高めることにつながるため、間接的にはSEOにも良い影響を与えるといえるでしょう。

【コピペOK】OGPの基本的なHTML記述テンプレート

【コピペOK】OGPの基本的なHTML記述テンプレート

「理屈はわかったけれど、具体的にどう書けばいいの？」という方のために、そのままコピー＆ペーストして使える基本的なHTMLテンプレートを用意しました。

ご自身のサイトに合わせて、内容を書き換えるだけで設定が完了します。ページの種類によって少し記述が異なるので、用途に合わせて使い分けてみてくださいね。

記事ページ（ブログ・コラム）用の記述例

ブログの記事やニュースリリースなど、Webサイト内の下層ページ（個別記事）には以下のコードを使用します。ポイントは og:type を article にすることです。

<!-- OGP設定（記事ページ用） -->
<meta property="og:title" content="記事のタイトル" />
<meta property="og:description" content="記事の概要・説明文" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/article-01/" />
<meta property="og:image" content="https://example.com/images/thumbnail.jpg" />
<meta property="og:site_name" content="サイト名" />Code language: HTML, XML (xml)

トップページ（Webサイト）用の記述例

Webサイトのトップページ（ホーム）の場合は、og:type を website に設定します。サイト全体を代表するページであることを示すためです。

<!-- OGP設定（トップページ用） -->
<meta property="og:title" content="サイト全体のタイトル" />
<meta property="og:description" content="サイト全体の説明文" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:image" content="https://example.com/images/top-ogp.jpg" />
<meta property="og:site_name" content="サイト名" />Code language: HTML, XML (xml)

headタグ内のどこに書くべきか

これらのOGPタグは、HTMLファイルの <head> から </head> の間に記述します。

<meta charset="..."> や <title> タグの近くにまとめて書いておくと、後から管理しやすくておすすめです。<body> タグの中に書いても正しく認識されないことが多いので、必ず <head> タグ内に配置するようにしましょう。

htmlタグへのprefix属性の設定方法

OGPを使うためには、HTMLファイルに「これからOGPを使いますよ」という宣言（prefix属性）をする必要があります。これを記述しないと、一部のツールで正しく認識されない場合があります。

基本的には head タグに以下のように記述するのが一般的です。

<head prefix="og: http://ogp.me/ns#">Code language: HTML, XML (xml)

もし article（記事ページ）や website（トップページ）などページの種類を明確に指定したい場合は、html タグや head タグに以下のように書くこともあります。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">Code language: HTML, XML (xml)

※難しく感じる場合は、まずはシンプルな <head prefix="og: http://ogp.me/ns#"> だけでも多くの場合は動作します。

これだけは必須！OGPの各タグの意味と書き方

これだけは必須！OGPの各タグの意味と書き方

テンプレートをコピペしただけでは、まだ不完全です。それぞれのタグがどんな意味を持っていて、何を書くべきかを理解しておくと、トラブルが起きた時にも対応しやすくなります。

ここでは、最低限設定しておきたい必須のOGPタグについて、一つひとつ詳しく解説していきます。

og:title（ページのタイトル）

ページのタイトルを指定するタグです。SNSでシェアされた際、一番目立つ太字で表示されるテキストになります。

HTMLの <title> タグと同じ内容でも構いませんが、SNS向けに少し短くしたり、キャッチーな言葉を入れたりして工夫するのも良いでしょう。文字数が多すぎると省略されてしまうことがあるので、20〜35文字程度に収めるのが理想的です。

og:description（ページの説明文）

ページの内容を要約した説明文を指定します。タイトルの下に小さく表示されるテキストです。

クリックを促すために、「この記事を読むと何がわかるのか」を簡潔に書きましょう。文字数は80〜90文字程度が目安です。PC版のFacebookなどでは長文も表示されますが、スマホでは短くカットされることが多いので、重要なことは冒頭に書くのがコツです。

og:type（ページの種類）

ページの種類をSNSに伝えます。記述内容は主に以下の2つを使い分けます。

  • website: サイトのトップページ
  • article: ブログ記事や下層ページ

これを間違えると、SNS側での表示形式が変わってしまうことがあるので、ページに合わせて正しく設定しましょう。

og:url（ページのURL）

そのページの正規のURLを指定します。「正規の」というのは、パラメータ（?id=123など）が付いていない、本来のURLのことです。

ここでは必ず絶対パス（https://～ から始まるURL）で記述してください。相対パス（./page.htmlなど）ではSNSのクローラーが画像を読み込めず、OGPが表示されない原因になります。

og:image（サムネイル画像）

SNSで表示されるサムネイル画像のURLを指定します。これがOGP設定の中で最も重要な要素と言っても過言ではありません。

画像URLも必ず絶対パスで記述します。ユーザーの目を引く魅力的な画像を設定しましょう。画像サイズや比率については、後ほど詳しく解説します。

og:site_name（サイト名）

Webサイト自体の名前を指定します。ページタイトルとは異なり、どのページでも共通の「サイト名（ブログ名）」が入ります。

これを設定しておくと、どのメディアからの情報なのかがユーザーに伝わりやすくなり、サイトの認知度アップにもつながります。

Twitter（X）カードの設定もあわせて記述する

Twitter（X）カードの設定もあわせて記述する

OGPの設定だけでも基本的な表示はされますが、X（旧Twitter）での表示を最適化するためには、Twitter専用の「Twitterカード」の設定も併せて行うのがベストです。

OGPと似ていますが、プロパティ名が twitter: から始まります。これを追加することで、Twitter上でのカードの大きさなどをコントロールできるようになります。

twitter:card（カードの表示タイプ）

Twitterのタイムラインで画像をどのように表示するかを指定します。主に以下の2種類が使われます。

  • summary: 小さい正方形の画像とテキストが横並びになるタイプ
  • summary_large_image: 大きな画像が横幅いっぱいに表示されるタイプ

最近は画像を大きく見せてインパクトを与える summary_large_image が主流です。特に理由がなければこちらをおすすめします。

<meta name="twitter:card" content="summary_large_image" />Code language: HTML, XML (xml)

twitter:site（アカウントID）

Webサイトやブログの運営者のTwitterアカウントID（@から始まるID）を指定します。

これを設定しておくと、カード内に「@usernameさんから」といった表記が出ることがあり、アカウントのフォローにつながりやすくなります。必須ではありませんが、アカウントを持っているなら設定しておきましょう。

<meta name="twitter:site" content="@Cocorograph_001" />Code language: HTML, XML (xml)

twitter:title（Twitter用のタイトル）

Twitter用のタイトルを指定します。基本的には og:title と同じ内容で問題ありません。

もしTwitter向けに別のタイトルを表示させたい場合（例：ハッシュタグを入れたい、より短くしたいなど）は、個別に設定することも可能です。

<meta name="twitter:title" content="Twitter用のタイトル" />Code language: HTML, XML (xml)

twitter:description（Twitter用の説明文）

Twitter用の説明文です。こちらも og:description と同じ内容で大丈夫ですが、Twitterユーザー向けに少し砕けた表現にするなど、工夫する余地があります。

<meta name="twitter:description" content="Twitter用の説明文" />Code language: HTML, XML (xml)

twitter:image（Twitter用の画像）

Twitterで表示させる画像のURLです。通常は og:image と同じ画像URLを指定します。

og:image があればTwitter側がそれを読み取ってくれることも多いですが、念のため twitter:image も記述しておくと確実です。

<meta name="twitter:image" content="https://example.com/images/twitter-card.jpg" />Code language: HTML, XML (xml)

OGP画像の最適なサイズと作成時の注意点

OGP画像の最適なサイズと作成時の注意点

OGP設定でよくある失敗が「画像が見切れてしまう」「画質が悪い」というものです。各SNSで推奨されるサイズや比率は微妙に異なりますが、すべてのSNSに合わせて画像を用意するのは大変ですよね。

そこで、主要なSNSで綺麗に表示される「最適な共通サイズ」と、画像作成時のポイントをご紹介します。

推奨サイズは1200px × 630px

現在、FacebookやTwitterなどで汎用的に使える推奨サイズは 1200px × 630px です。

このサイズで作っておけば、比率（1.91:1）が多くのプラットフォームに適応するため、大きく見切れることなく高画質で表示されます。Retinaディスプレイなどの高解像度端末でもきれいに見える大きさです。

画像内の文字が見切れないように配置する

推奨サイズで作っても、SNSによっては正方形（1:1）にトリミングされて表示される場合があります（例：LINEのトーク画面や、Twitterのsummaryタイプなど）。

そのため、重要な文字やロゴは画像の中央（正方形の範囲内）に配置するのが鉄則です。端の方に文字を配置すると、正方形に切り取られた時に文字が切れて読めなくなってしまうので注意しましょう。

ファイル形式はJPGまたはPNGを使用する

使用する画像のファイル形式は、JPG（ジェイペグ）または PNG（ピング）を使用しましょう。

WebP（ウェッピー）などの次世代フォーマットはWebサイトの表示速度向上には役立ちますが、一部のSNSや古い環境ではOGP画像として正しく認識されないことがあります。トラブルを避けるためにも、OGP画像に関してはJPGかPNGが無難です。

設定したOGPが正しく表示されるか確認するツール

設定したOGPが正しく表示されるか確認するツール

HTMLにコードを記述してアップロードしたら、実際にSNSでどう表示されるかを確認しましょう。

本番環境でいきなりシェアするのではなく、専用の確認ツール（デバッガー）を使うのがおすすめです。これらのツールを使えば、表示崩れがないかチェックできるだけでなく、SNS側の情報を更新することもできます。

ラッコツールズ（OGP確認）

「ラッコツールズ」のOGP確認ツールは、URLを入力するだけで、Facebook、Twitter、LINE、はてなブックマークでの表示イメージを一度にまとめて確認できます。

日本語対応で使いやすく、複数のSNSでの見え方を一括チェックできるので、時短にもなり非常に便利です。まずはここでざっくりと確認してみると良いでしょう。

Facebookシェアデバッガー

Facebook公式の「シェアデバッガー」は、Facebookでの表示を確認するためのツールです。

URLを入力して「デバッグ」ボタンを押すと、Facebookが認識しているOGP情報が表示されます。もし情報が古い場合や画像が出ない場合は、「もう一度スクレイピング」というボタンを押すことで、Facebook側のキャッシュをクリアし、最新の情報を取得し直すことができます。

Twitter（X）Card Validator

Twitter公式の「Card Validator」は、以前はカードのプレビューが表示されていましたが、現在はプレビュー機能が制限され、正しく表示されないことが多くなっています。

そのため、Twitterでの表示確認は、実際のTwitter投稿画面（ブラウザ版やアプリ）でURLを入力して確認するのが最も確実です。「下書き」として保存すれば投稿されずに確認できます。Card Validatorは、カード情報のログを確認したり、キャッシュを更新したい時に補助的に使用しましょう。

OGPが表示されない・更新されない時の対処法

OGPが表示されない・更新されない時の対処法

「設定したはずなのに画像が出ない」「画像を差し替えたのに古い画像のまま…」
OGP設定では、こうしたトラブルがよく起こります。

コードに間違いがないのに表示されない場合は、以下のポイントをチェックしてみてください。意外な落とし穴があるかもしれません。

各SNSのキャッシュをクリアする

画像を更新したのに反映されない原因の多くは、SNS側に残っている「キャッシュ（一時保存データ）」です。

SNSは一度読み込んだOGP情報を一定期間保存するため、HTMLを書き換えてもすぐには反映されません。この場合、先ほど紹介した「Facebookシェアデバッガー」や「Card Validator」などのツールを使って、明示的にキャッシュをクリア（再取得）させる必要があります。

画像パスが「絶対パス」になっているか確認する

OGPタグ内の画像URL（og:image）が「相対パス」になっていませんか？

  • NG: <meta property="og:image" content="./images/pic.jpg" />
  • OK: <meta property="og:image" content="https://example.com/images/pic.jpg" />

SNSのクローラーは外部からアクセスするため、ドメインから始まる「絶対パス」で記述しないと画像を見つけられません。ここを修正するだけで解決することがよくあります。

Basic認証がかかっていないか確認する

公開前のテストサイトなどで「Basic認証（IDとパスワード入力）」をかけている場合、SNSのクローラーもサイトの中に入ることができません。

そのため、OGP情報を読み取れず、画像もタイトルも表示されなくなります。OGPの確認は、Basic認証を解除するか、認証のかかっていない公開環境で行う必要があります。

クローラーのアクセスを拒否していないか確認する

WordPressの設定や robots.txt ファイルなどで、クローラーのアクセスを拒否していませんか？

例えばWordPressなら「検索エンジンがサイトをインデックスしないようにする」にチェックが入っていると、OGPも正しく取得できない場合があります。サイト全体や画像ディレクトリへのアクセス制限がかかっていないか確認してみましょう。

まとめ

まとめ 15

OGPは、SNS経由でのアクセスを増やすために欠かせない設定です。HTMLに数行のコードを追加するだけで、シェアされた時の見栄えが劇的に変わり、クリック率の向上が期待できます。

今回のポイントまとめ

  • 必須タグ: og:title, og:type, og:url, og:image は必ず設定する。
  • 画像サイズ: 1200px × 630px で作成し、重要な要素は中央に配置する。
  • パスの記述: 画像URLなどは必ず「絶対パス」で書く。
  • Twitter対応: twitter:card (summary_large_image) も設定するとベスト。
  • 確認方法: 設定後はデバッガーや実際の投稿画面で表示チェックを行う。

最初は難しく感じるかもしれませんが、テンプレートを使えば簡単に設定できます。ぜひあなたのサイトにもOGPを導入して、SNSでの発信力を高めてみてくださいね。

html ogpについてよくある質問

html ogpについてよくある質問

HTMLやOGPの設定に関して、初学者の方がよく疑問に思う点をQ&A形式でまとめました。設定時の参考にしてみてください。

  • Q1. OGP画像はページごとに変えたほうがいいですか？
    • はい、可能な限りページごとに変えることをおすすめします。記事の内容に合った画像（アイキャッチなど）が表示される方が、ユーザーの興味を惹きやすく、クリック率が高まるからです。もし用意できない場合は、サイト共通のデフォルト画像が適用されるように設定しておきましょう。
  • Q2. WordPressを使っている場合もHTMLを編集する必要がありますか？
    • WordPressの場合、テーマ自体にOGP設定機能が備わっていることや、「All in One SEO」や「SEO SIMPLE PACK」などのプラグインで簡単に設定できることが多いです。その場合、直接HTMLを編集する必要はありません。プラグインの設定画面から画像などを登録してください。
  • Q3. OGPを設定しても検索順位には影響しませんか？
    • Googleは「OGPタグを検索順位の決定要因には使用していない」としています。ですので、設定したからといって直接順位が上がるわけではありません。しかし、SNSでの拡散による流入増や認知拡大は、巡り巡ってサイトの評価にプラスに働く可能性があります。
  • Q4. 画像の容量（ファイルサイズ）に制限はありますか？
    • はい、あります。大きすぎる画像は読み込みに時間がかかったり、SNS側でエラーになったりすることがあります。目安として、5MB以下（できれば1MB〜2MB程度）に抑えるのが安心です。画質を保ちつつ、適切な圧縮を行って軽量化しましょう。
  • Q5. OGP設定を変更した後、過去の投稿の画像も変わりますか？
    • 基本的に、過去にシェアされた投稿の画像は自動的には変わりません。各SNSがその時点での情報をキャッシュ（保存）しているからです。ただし、再度シェアされた時や、デバッガーでキャッシュを更新した後にシェアされたものには新しい画像が適用されます。