Open Graphタグ:リンクプレビューを自在にコントロールする方法

要点: Open Graphタグは、リンクがシェアされたときにSNSやチャットアプリが何を表示するかを指定します。すべてのページに og:title、og:description、og:image、og:url が必要で、X向けには twitter:card も加えます。画像は絶対URLのHTTPSで、約1200 × 630 px、5 MB未満、重要な部分は中央付近に配置してください。タグはサーバーが返すHTMLに出力し、変更後は各プラットフォームのキャッシュ済みプレビューを更新しましょう。古いカードは残り続けるためです。

リンクプレビューは、サイトの第一印象になることがよくあります。同僚が料金ページをSlackに貼る、顧客がWhatsAppで商品を共有する、パートナーがLinkedInで記事を投稿する。ページにOpen Graphタグがなければ、各アプリが推測で表示します。Cookieバナーの文言が説明文になり、画像は小さなロゴか空白、タイトルはたまたまページの <title> だった内容になります。

このガイドでは、各タグの役割、プラットフォームごとに読み取られるタグ、どこでも通用する画像サイズ、プレビューが更新されない理由、そして無料のOpen Graphチェッカーが不足タグを見つける方法と、それぞれの修正方法を解説します。

Open Graphとは

ogp.me によると、「The Open Graph protocol was originally created at Facebook.」とあります。これはWebページを、タイトル、タイプ、画像、URLを持つ「リッチオブジェクト」として、他のサービスが表示できるようにするものです。作ったのはFacebookですが、LinkedIn、Slack、ほとんどのメッセージアプリが同じタグを読み取り、Xも独自タグのフォールバックとして利用します。

タグは <head> 内の通常のmeta要素で、property 属性で記述します。

<meta property="og:title" content="Waterproof Hiking Boots for Women">
<meta property="og:description" content="Leather boots tested on 40 km of wet trail. Sizes 36 to 43.">
<meta property="og:image" content="https://www.example.com/images/boots-share.jpg">
<meta property="og:url" content="https://www.example.com/hiking-boots/women/">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

重要なタグ

プロトコルが必須とするプロパティは、タイトル、タイプ、画像、正規URLの4つです。実際には、いくつかの任意タグも重要です。

仕様について知っておきたい点が2つあります。タグが重複した場合、「the first tag (from top to bottom) is given preference during conflicts」とあり、プラグインのタグより上にあるテーマのタグが優先されます。また、og:image:width のような構造化プロパティは、直前の og:image に属します。

どのプラットフォームが何を読むか

各プラットフォームにはそれぞれルールがあります。要点は次のとおりです。

• FacebookとMetaのアプリ: Metaのウェブマスター向けガイドでは、og:url、og:title、og:description、og:image、og:type が挙げられています。画像はURL単位でキャッシュされます。シェアデバッガー(Sharing Debugger)でクローラーが取得した内容を確認し、再取得も実行できます。
• LinkedIn: ヘルプページでは、「must exist」とされるタグが4つあります。og:title、og:image、og:description、og:url です。画像は1200 × 627 px以上、比率1.91:1、最大5 MBが必要です。Post Inspectorで、LinkedInがURLをどう認識しているかを確認でき、コピーも更新できます。
• X: twitter: タグを使い、ない場合は対応するOpen Graphタグにフォールバックします。そのため、通常は og:title、og:description、og:image でカバーできます。twitter:card はレイアウトを決め、summary_large_image は横長の大きな画像を表示します。Xはこのカードに2:1の比率、最小300 × 157 px、5 MB未満、JPG・PNG・WebP・GIF(SVGは不可)を定めています。
• Slack: ドメインに対応するアプリがない場合、Slackは「crawls the URL, looks for common OpenGraph and X (formerly known as Twitter) Card metadata」します(Slackのドキュメント)。
• Google: SNSではありませんが、Googleはタイトルリンクの情報源の一つとして og:title を挙げており、検索結果に表示されるサイト名の選定では og:site_name を考慮します。

og:imageの選び方

画像次第で、プレビューは丁寧に作られたものにも、壊れたものにも見えます。要件はプラットフォームごとに少しずつ違うため、すべてを満たす画像を目指しましょう。

重要なページごとに専用の画像(商品写真、記事のイラスト)を用意し、それ以外には丁寧にデザインしたデフォルト画像を使いましょう。白い正方形にロゴだけという画像は最も効果が弱く、多くのアプリでは小さく表示されたり、不自然にトリミングされたりします。

プレビューが更新されない理由

プラットフォームは、URLが最初にシェアされたときに作ったプレビューを保存します。Metaは「Images are cached based on the URL and won't be updated unless the URL changes」と明記しており、share.jpg を同じ名前の新しいファイルに差し替えても何も変わらない場合があります。確実な手順は次のとおりです。

1. 新しい画像を新しいファイル名でアップロードする(またはURLにバージョンパラメータを付ける)。
2. ページのタグを更新してデプロイする。
3. MetaのSharing DebuggerとLinkedInのPost InspectorにURLを入力し、再取得を強制する。
4. リンクをもう一度シェアする。すでに投稿済みのものは、通常は古いカードのままです。

ページタイプ別のタグ

基本のタグはどこでも同じですが、ページタイプによっては追加すると効果的なものがあります。

• 記事・ブログ投稿: og:type に article を使います。このタイプには、article:published_time、article:modified_time、article:author、article:section などの追加プロパティがプロトコルで定義されています。
• 商品ページ: メインの商品写真を og:image にし、og:title にはストア名ではなく商品名を入れます。価格や在庫状況は、構造化データのガイドで解説しているProduct構造化データに記述します。
• ホームページとカテゴリページ: シェアされる頻度は低くても、見られる機会は多いページです。ランダムな写真よりも、名前と事業内容を一言添えたデザイン済みのデフォルト画像のほうが効果的です。
• シェアされるべきでないページ(決済ページやアカウントページなど):特別なタグは不要ですが、デフォルト画像が非公開のものを指していないことを確認してください。

クローラーに見えているものを確認する方法

プラットフォームのせいにする前に、クローラーが受け取るHTMLを確認しましょう。ページを「ソースを表示」で開き(スクリプト実行後の状態を表示するDevToolsの要素インスペクターではなく)、og: を検索します。Metaのガイドにはクローラーのユーザーエージェント facebookexternalhit/1.1 も記載されているので、ターミナルからFacebookと同じようにページを取得できます。

curl -s -A "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" https://www.example.com/ | grep -i 'og:'

ブラウザでは表示されるのにこの出力に出てこない場合、タグがJavaScriptで追加されているか、サーバーやファイアウォールがボットに対して異なる応答を返しています。

SearviaのOpen Graphチェッカーの仕組み

無料のOpen Graphチェッカーは、ウェブサイトSEOチェッカーと同じエンジンを使い、ソーシャルシェア用タグ、titleタグ、メタディスクリプションの3つのチェックを先頭に表示します。ドメインまたはページのアドレスを入力すると、次のように動作します。

1. そのページをリダイレクトをたどって取得します。ドメインだけを入力した場合はホームページがチェック対象になるため、プレビューを確認したい記事や商品ページはそのアドレスを貼り付けてください。
2. サーバーが返すHTMLを、JavaScriptを実行せずに読み取ります。多くのリンクプレビュー用クローラーと同じ見え方です。
3. 4つのタグ(og:title、og:description、og:image、twitter:card)を探し、それぞれ最初の空でない値を記録します。

結果は、タグごとにチェックマークまたはバツ印と正確な値を表示する表です。

このチェックは失敗を表示することはなく、全体スコアでの優先度も低めです。ソーシャルタグが不足していても、ページが見つからなくなるわけではないためです。ただし、シェアのたびに見栄えが悪くなるので、このツールでは最初に表示しています。

タイトルと説明文のチェック(合格は30〜60文字、70〜160文字)はそのすぐ下に表示されます。Open Graphタグがない場合、多くのアプリがそれらにフォールバックするためです。レポートにはGoogle検索結果のプレビューも含まれ、og:site_name を設定していればサイト名に使われます。

チェッカーが行わないこと:画像をダウンロードしてサイズを測定すること、og:url、og:type、og:image:alt のチェック、各プラットフォームのクローラーとしてページを取得することです。最終確認には各プラットフォームのデバッガーを使ってください。

結果の読み方

• 4つすべてにチェック: 基本は整っています。値をクリックして内容を確認しましょう。実際のタイトルか、Cookie通知ではない説明文か、画像URLが https:// で始まっているかなどです。
• og:image がない: 最優先で修正してください。人が最初に気づくのはこの部分です。
• twitter:card だけがない: XはOpen Graphタグを読み取りますが、小さなサマリーカードで表示する場合があります。大きな画像にするにはタグを追加してください。
• 下にあるタイトルと説明文の警告: GoogleやフォールバックするアプリのSEO表示に影響します。

不足タグの修正方法

og:titleがない

検索エンジン向けではなく、フィードをスクロールする人に向けた見出しを追加します。ブランド名の接尾辞を除いた <title> と同じ内容でもかまいません。

<meta property="og:title" content="Waterproof Hiking Boots for Women">

og:descriptionがない

具体的な情報を含む1〜2文を書きます。メタディスクリプションの流用でも問題ありません。

<meta property="og:description" content="Leather boots tested on 40 km of wet trail. Sizes 36 to 43, free returns.">

og:imageがない

1. 被写体を中央に配置した1200 × 630 pxの画像(JPG、PNG、WebP)を作成する。
2. 公開された場所にアップロードし、完全なHTTPS URLをコピーする。
3. 画像タグに、サイズと代替テキストを加えて追加する。

<meta property="og:image" content="https://www.example.com/og/boots-share.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A pair of brown leather hiking boots on a wet rock">

1. プライベートブラウジングウィンドウで画像URLを開き、ログインなしで読み込めることを確認する。

twitter:cardがない

<meta name="twitter:card" content="summary_large_image">

name 属性に注意してください。慣例として、Twitterのタグは name、Open Graphのタグは property を使います。

プラットフォーム別の設定

変更後はチェッカーをもう一度実行し、そのあとでプラットフォームのデバッガーを実行してください。

よくある間違い

• 相対パスの画像URL: /images/share.jpg はブラウザでは動作しますが、完全なURLを前提とするクローラーでは動作しません。常に https://… を使ってください。
• JavaScriptで挿入されるタグ: ブラウザ上でタグを設定するシングルページアプリは、空のプレビューになることがよくあります。タグはサーバーまたはビルド時に出力してください。GoogleもメタタグをJavaScriptで変更することを避けるよう案内しています。
• 画像がブロックされている: ログイン画面、ボット対策ルール、robots.txtの記述により、クローラーが画像を取得できない場合があります。LinkedInは、サイトが「may be blocking us from pulling the image」の可能性があると説明しています。
• 全ページで同じ画像: 機能はしますが、商品や記事を専用画像でシェアしたほうが注目されます。
• タグの重複: テーマとプラグインの両方が og:image を出力すると、最初のものが優先され、意図しない画像になることがあります。ソースを表示して og:image を検索してください。
• 同じURLで画像を差し替える: キャッシュには古い画像が残ります。新しいファイル名を使ってください。
• SVGや巨大なファイル: Xでは非対応で、どのプラットフォームでも表示が遅くなります。

実例(仮想)

以下は実データではなく、仮想の例です。架空のプロジェクト管理アプリFernwayは、自社サイトへのリンクをSlackに貼ると、灰色のボックスと「We use cookies to improve your experience.」というテキストしか表示されないことに気づきます。

Open Graphチェッカーでは、og:title と og:description はあるものの、og:image と twitter:card がないと表示されます。説明文の値はCookieバナーのテキストでした。プラグインがHTML内の最初の段落から og:description を生成しており、バナーが先頭にあったためです。

修正内容は次のとおりです。ページテンプレートに手書きの og:description を設定し、被写体を中央に置いたプロダクトのボードビューを見せる1200 × 630 pxの画像を用意し、og:image:width、og:image:height、og:image:alt を追加し、twitter:card を summary_large_image に設定します。チェッカーの2回目の実行は合格です。そのあとチームはURLをSharing DebuggerとPost Inspectorに通し、Slackでリンクをもう一度投稿すると、新しいカードが表示されます。

15分でできるチェックリスト

1. 自分のドメインでOpen Graphチェッカーを実行する。
2. og:title、og:description、og:image、twitter:card のうち不足しているものを追加する。
3. テンプレートを編集するついでに、og:url、og:image:width、og:image:height、og:image:alt も追加する。
4. 画像が1200 × 630 px、5 MB未満、公開状態で、HTTPSで配信されていることを確認する。
5. タグはクライアントサイドのJavaScriptではなく、サーバーのHTMLに出力する。
6. 各プラットフォームのデバッガーでキャッシュ済みプレビューを更新し、あらためてシェアする。

Searviaでプレビューと表示を良好に保つ

無料のOpen Graphチェッカーは、ホームページまたは入力した任意のアドレス1ページを約20秒でチェックします。登録は不要で、同じレポートに当社のウェブサイト監査の残り37項目も含まれます。プレビューはページの見え方の一部にすぎません。タイトル、ディスクリプション、canonicalについてはメタタグのガイドで解説しており、メタタグチェッカーではGoogleでのプレビューを確認できます。

サイト全体については、無料のSearviaアカウントで毎週のサイト監査を利用できます。全ページをクロールし、不足または重複しているタイトルとディスクリプションを検出するので、アプリがフォールバックするテキストを正確に保てます。タイトルやディスクリプションに問題がある場合は、監査内のWrite with AIがすぐ使える候補を提案します(1クレジット)。監査は毎週再実行されるため、テーマやプラグインの更新でタイトルやディスクリプションが壊れても、次のレポートで気づけます。