用語解説

Open Graphとは?HTML共有・AI生成サイトでの意味をやさしく解説

SlackやLINEにWebサイトのURLを貼ったとき、タイトル・画像・説明文が自動的にカード表示される仕組みが「Open Graph(OGP)」です。HTMLの<head>に数行のmetaタグを追加するだけで機能し、AI生成サイトをURLで共有する際の第一印象を大きく左右します。設定内容と確認方法を把握しておきましょう。

ひとことで言うと

Open Graphプロトコル(OGP)は、FacebookがWebページのメタ情報を統一規格で記述するために策定した仕様です。<meta property="og:title">、<meta property="og:description">、<meta property="og:image">の3つが最低限必要なタグで、これらを<head>内に記述すると対応ツールがリンクカードを自動生成します。

Slack・Discord・Notion・LINE・Xなど現在の主要コミュニケーションツールはすべてOGPに対応しています。AI生成ツールで作ったHTMLにOGPタグが含まれていない場合、URLを貼ってもカードが表示されず、受け取った側がURLを開くかどうか判断しにくくなります。特に複数人での非同期レビューではカードの有無が開封率に影響します。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

HTML共有で関係する場面

ギガサイト便などのURL共有サービスでAI生成サイトを公開し、SlackやチャットでURLを送る場面が最もOGPの効果を実感できる状況です。og:imageに魅力的なサムネイル画像を設定すると、リンクカードに画像が表示され、テキストのみのカードより視認性が上がります。og:imageの推奨サイズは1200×630pxです。

メールでURLを共有するケースでは、GmailやOutlookはOGPカードを展開しないため、OGPの恩恵は薄いです。代わりに<title>タグと本文の冒頭説明をわかりやすく書く方が重要です。ただし受け取った側がURLをチャットツールに転送することを考えると、OGPは事前に設定しておく価値があります。

よくある誤解

「og:descriptionとmeta descriptionは同じで良い」と思われがちですが、目的が異なります。meta descriptionはGoogleの検索スニペット向け(160字以内推奨)、og:descriptionはSNS・チャットのカード向け(〜200字)です。同じ文章でも機能しますが、共有先のコンテキストに合わせて書き分けると効果的です。

「og:imageはページ上に表示している画像URLを書けばよい」というのも一部誤解です。アスペクト比が1.91:1(1200×630px)から大きく外れた画像はカードでトリミングされ、意図した見た目にならないことがあります。専用のOGP用サムネイル画像を別途用意し、そのURLをog:imageに指定するのがベストプラクティスです。

安全に使うための注意点

og:imageに社外秘の図や個人情報が写り込んだ画像を設定しないよう注意が必要です。SlackなどではURLを貼った時点でSlackのサーバーがog:imageにアクセスし画像をキャッシュします。アクセス制限のかかっていない画像URLを指定した場合、チャンネルの閲覧者全員が画像を見られる状態になります。

ローカルファイルとして作成したHTMLをブラウザで開いてもOGPカードのプレビューは確認できません。確認にはOpenGraph.xyzやOGP確認ツール(ogp.me)などの外部サービスにURLを入力する必要があります。ギガサイト便でURLを発行した後、このようなツールで確認してから社内共有を行うのが安全な手順です。

よくある質問

OGPタグを設定したのにSlackでカードが表示されません。なぜですか?

Slackは一度取得したOGPをキャッシュします。タグ修正後も古い表示が残る場合は、URLの末尾に?v=2のようなパラメータを加えて別URLとして再投稿すると新しいキャッシュで取得されます。

og:titleとog:descriptionの文字数はどのくらいが適切ですか?

og:titleは40〜60字、og:descriptionは80〜160字が目安です。Slackは長いtitleを途中で省略します。重要な情報は冒頭に配置し、後半に補足情報を入れる構成にすると見切れても伝わります。

og:imageをページの外部ドメインの画像URLにしても機能しますか?

技術的には機能しますが、外部ドメインの画像は将来削除・変更されるリスクがあります。共有するHTMLと同じドメイン(またはCDN)に画像を配置し、そのURLを指定する方が安定した運用になります。

関連記事

「用語解説」の記事をもっと見る →