Webサイトやブログの記事をSNSでシェアしたとき、
タイトル・説明文・画像がきれいに表示されるページと、
文字だけで味気ないページを見たことはありませんか？
その表示の違いを決めているのが OGP（Open Graph Protocol） です。
この記事では、
- OGPとは何か
- なぜSEOや集客に重要なのか
- どんな設定をすればいいのか
を、初心者の方にもわかるように丁寧に解説します。
おねしゃす
OGPとは？一言でいうと「SNS用の名刺」
OGP（Open Graph Protocol） とは、
WebページがSNSでシェアされたときの表示内容を指定する仕組みです。
たとえば、X（旧Twitter）やFacebook、LINEでURLを貼り付けたときに表示される、
- 記事タイトル
- 説明文
- サムネイル画像
これらは OGPタグ によって制御されています。
例えるなら…
OGPは、SNSに渡す「ページの名刺」のようなものです。
- 名刺が整っていれば → 内容が一瞬で伝わる
- 名刺がなければ → 相手に興味を持ってもらえない
そんな役割を果たしています。
OGPが重要な理由｜SEOと間接的に関係する
「OGPってSEOに直接関係あるの？」
と疑問に思う方も多いですが、結論から言うと、
👉 直接のランキング要因ではないが、間接的に重要です。
OGPがSEOに与える影響
OGPを適切に設定すると、
- SNSでのクリック率が上がる
- シェアされやすくなる
- アクセス数が増える
結果として、
- 滞在時間の向上
- 被リンク獲得のチャンス増加
といった SEOに良い影響を与える行動データにつながります。
OGPで設定できる主な項目
OGPでは、主に以下の情報を指定します。
| 項目 | 内容 |
|---|---|
| og:title | SNS上で表示されるタイトル |
| og:description | ページの説明文 |
| og:image | サムネイル画像 |
| og:url | ページのURL |
| og:type | ページの種類（article など） |
OGPタグの基本的な書き方【サンプル付き】
OGPはHTMLの <head> 内に記述します。
<head>
<!-- ページのタイトル -->
<meta property="og:title" content="OGPとは？初心者でもわかる基本解説">
<!-- ページの説明文 -->
<meta property="og:description" content="OGPの意味や設定方法、SEOとの関係を初心者向けに解説します。">
<!-- サムネイル画像 -->
<meta property="og:image" content="https://example.com/ogp.jpg">
<!-- ページURL -->
<meta property="og:url" content="https://example.com/ogp-article">
<!-- ページの種類 -->
<meta property="og:type" content="article">
</head>
ポイント解説
- og:title
→ 検索結果用タイトルとは別に、SNS向けに最適化できる - og:description
→ 120文字前後が読みやすい - og:image
→ 1200×630px 推奨（SNSで崩れにくい）
Twitter（X）専用のOGP設定も忘れずに
X（旧Twitter）では、Twitter Cards という独自仕様があります。
<meta name="twitter:card" content="summary_large_image">
これを入れることで、
- 大きな画像付きカード表示
- クリック率アップ
が期待できます。
OGPが正しく設定されているか確認する方法
設定後は、必ずチェックしましょう。
おすすめ確認ツール
- Facebook Sharing Debugger
- X Card Validator
URLを入力するだけで、
実際にどう表示されるかを確認できます。
OGP設定でよくある失敗例
初心者の方がつまずきやすいポイントも押さえておきましょう。
- 画像サイズが小さすぎる
- https ではなく http の画像URLを指定している
- キャッシュの影響で変更が反映されない
「設定したのに変わらない…」という場合は、
デバッガーでキャッシュクリアを試してみてください。
まとめ｜OGPは「SNS共有時代の必須設定」
OGPは、
- 検索順位を直接上げるものではない
- でも、アクセスを増やすために欠かせない仕組み
です。
特に、
- ブログ運営
- Webサービス紹介
- 個人開発・ポートフォリオ
をしている方にとっては、
OGPの有無で第一印象が大きく変わると言っても過言ではありません。
まずは og:title / og:description / og:image の3つから、
ぜひ設定してみてください。
OGP大事やね
