OGPタグの設定方法：リンクプレビューを思いどおりに表示する
Facebook、LinkedIn、WhatsApp、Slack、Xでリンクがシェアされたとき、どのタイトル・説明文・画像が表示されるかは、ページのheadにある数行で決まります。
チャットや投稿にリンクを貼ると、少しして画像と見出し、1行の説明文が入ったカードが表示されます。このカードはページから推測されているのではなく、Open Graphのタグ、つまりページの<head>にあるいくつかのmeta要素から作られています。OGP（Open Graph Protocol）とも呼ばれます。タグがないページには、SNSが拾えたものが何でも使われるため、ロゴやCookieのバナーが表示されたり、画像がまったく出なかったりします。このガイドでは、重要なタグ、画像のルール、更新されないプレビューの直し方を説明します。
OGP（Open Graph）とは
Open Graphは、どんなWebページでもシェアされたときに自分自身を説明できるように、2010年にFacebookが導入した小さな取り決めの集まりです。この仕組みはFacebookの外にも広く普及し、LinkedIn、WhatsApp、Telegram、Slack、Discord、Microsoft Teamsなど多くのサービスが同じタグを読み取ります。Xも独自のtwitter:タグとあわせてこれらを読み取ります。そのため、一度書いておけば、リンクがシェアされるほぼすべての場所に対応できます。
タグは次のような形です。
<meta property="og:type" content="article">
<meta property="og:title" content="How to Make Cold Brew at Home">
<meta property="og:description" content="The grind, the ratio and the steeping time.">
<meta property="og:url" content="https://example.com/cold-brew">
<meta property="og:image" content="https://example.com/images/cold-brew.jpg">
<meta property="og:site_name" content="The Coffee Blog">重要なタグ
| タグ | 設定する内容 | アドバイス |
|---|---|---|
og:title | カードの太字の見出し | 検索用のタイトルと違ってもよい。短く、思わずクリックしたくなるものに |
og:description | 見出しの下の1行 | 1〜2文で。多くのアプリは最初の1行しか表示しない |
og:image | 画像 | https://から始まる完全なアドレスで。サイズのルールは下記を参照 |
og:url | シェア数を数える対象のアドレス | トラッキング用パラメーターを除いた正規のアドレス |
og:type | ページの種類 | ほとんどのページはwebsite、記事はarticle |
og:site_name | タイトルの上か下に表示されるサイト名 | 自分のブランド名 |
og:locale | 言語と地域 | en_USなど。省略可能 |
Open Graphではnameではなくpropertyを使う点に注意してください。ほとんどのプラットフォームはどちらでも受け付けますが、仕様で定められているのはpropertyです。
og:imageの画像：サイズと形式
画像は最初に目に入る部分であり、プレビューがうまくいかない原因の多くもここにあります。
- サイズ：1200×630ピクセル、つまり縦横比1.91対1なら、どこでも問題なく表示されます。600×315より小さい画像は、小さなサムネイルで表示されたり、表示されなかったりすることがあります。
- 形式：JPGかPNGなら安全です。WebPはほとんどのプラットフォームで使えますが、すべてではありません。GIFは静止画として表示されます。
- ファイルサイズ：数MBを大きく下回るようにしてください。一部のアプリ、特にWhatsAppは、重い画像を表示しません。
- アドレス：誰でも開けるhttps://の絶対アドレスにします。相対パス、ログインが必要な画像、robots.txtでブロックされたアドレスは使えません。
- 安全領域：アプリによっては画像を正方形や細長い帯にトリミングするため、文字や顔は端に寄せないでください。
画像変換ツールを使えば、画像をアップロードせずにこのサイズに縮小・圧縮できます。
X（Twitter）のカード
Xはタイトル、説明文、画像をOpen Graphのタグから読み取りますが、1つだけ専用のタグが必要な設定があります。twitter:cardです。summary_large_imageにすると画像がテキストの上に横長で大きく表示され、summaryにするとテキストの横に小さな正方形で表示されます。このタグがないと、リンクがただのURLとして表示されることがあります。twitter:siteでは、サイトを運営しているアカウントを指定できます。Twitterカード作成なら、両方のタグをまとめて書き出せます。
OGPと検索エンジン
検索エンジンは、Open Graphのタグでページの順位を決めてはいません。検索結果の見え方を決めるのは<title>要素とメタディスクリプションです。2組のタグは似たテキストになることが多いものの、読み手が異なります。検索用のタイトルには人が検索する言葉を入れるべきですが、シェア用のタイトルはタイムラインをスクロールしている人に向けて書けます。検索結果での見え方はGoogle検索結果プレビューで確認できます。
プレビューが間違っている・表示されない原因
| 症状 | 考えられる原因 | 対処法 |
|---|---|---|
| 変更後も古い画像やテキストが出る | プラットフォームが最初のプレビューをキャッシュしている | Facebookのシェアデバッガー（Sharing Debugger）やLinkedInのPost Inspectorなどで、ページを読み直させる |
| 画像がまったく出ない | 画像のアドレスが相対パスか、アクセスできない | 公開されたhttps://の完全なアドレスを使う |
| 横長の画像ではなく小さなサムネイルになる | 画像が小さすぎる、またはXでtwitter:cardがない | 1200×630の画像を使い、summary_large_imageを追加する |
| タイトルが違う | ページの読み込み後にJavaScriptでタグを追加している | サーバーが送るHTMLにタグを入れる。ほとんどのクローラーはスクリプトを実行しない |
| 特定のページだけ何も出ない | そのページがボットをブロックしているか、ログインが必要 | クローラーがページを取得できるようにする |
JavaScriptの問題は、多くのシングルページアプリケーション（SPA）でつまずくポイントです。スクリプトが実行されてはじめてタグが現れるなら、SNSのクローラーはそのタグを一度も目にしません。タグをサーバー側でレンダリングするか、よくシェアされるページを事前レンダリングしてください。
タグを書く
メタタグ生成ツールは、1つの短いフォームから検索用のタグ、Open Graphのタグ、Xのタグを書き出し、入力に合わせて更新されるGoogle・Facebook・X向けのプレビューも表示します。既存のページのHTMLからタグを読み込むこともできるので、手持ちのページを点検するにはこれがいちばん手早い方法です。OGPタグ作成を開くと、SNSのプレビューを中心にした状態で始められます。