オープン・グラフ・プレビュー

Open Graphとは実際に何か

Open Graphプロトコルは、2010年にFacebookによって、任意のウェブページをソーシャルグラフ内の「rich object」に変える方法として作成されました、他のアプリケーション(元々はFacebook、現在はLinkedIn、Slack、Discord、Microsoft Teams、iMessage、WhatsApp、その他多数)が誰かがあなたのURLを貼り付けたときにプレビューカードをレンダリングするために読み取ることができる構造化されたメタデータのセットです。公式仕様はogp.meにあり、プロトコルは事実上ウェブ上のリンク共有のリングア・フランカになりました。

OGタグがないと、ソーシャルプラットフォームはあなたのページをスクレイプして推測します:見出しを選び、見つけられる最初の画像をつかみ、それをカードと呼びます。結果はあなたが望むものになることは稀です。OGタグを使うと、タイトル、説明、画像をコントロールでき、これは洗練されたリンクと壊れたように見えるリンクの違いです。

4つの必須タグ(ogp.meによる)

公式のOpen Graph仕様は4つの必須プロパティを定義しています。Open Graphオブジェクトとして適格となるためには、ページはすべての4つを宣言する必要があります:

推奨されるオプションタグにはog:description(1〜2文の要約)、og:site_name(あなたのサイトの名前をラベルとして)、og:locale(言語と地域)、および画像寸法ヒントog:image:width / og:image:height / og:image:altが含まれます。寸法ヒントを含めることで、ソーシャルクライアントは適切な量のスペースを事前に割り当てることができ、画像が読み込まれる間のレイアウトシフトを回避します。

Twitter / X Cards:同じアイデア、少し異なるタグ

X(以前のTwitter)は独自のメタデータ名前空間を持っています、twitter:card、twitter:title、twitter:description、twitter:image、twitter:site、twitter:creator、しかし重要なことに、Twitter固有のタグがないとき、XはOGタグにフォールバックします。したがって、OGタグのみを出荷するページもX上でカードを取得します。2つが異なるのはカードタイプです:

• twitter:card = summary、小さな正方形のサムネイル、タイトル、説明。
• twitter:card = summary_large_image、カードの上部にフル幅の画像。フィードでより視覚的な注目を集めるため、コンテンツ共有のモダンなデフォルト。
• appとplayer、それぞれアプリインストールとインラインビデオ用。

注:cards-dev.twitter.com/validatorのスタンドアロンTwitter Card Validatorプレビューは、2022年8月2日にXによって削除されました。カードを確認する現在の方法は、Tweet Composerで新しいツイートを開始し、URLを貼り付け、プレビューがレンダリングするのを待つことです、実際にツイートを投稿する必要はありません。一部のサードパーティツール(これを含む)は、レンダリングされたカードを近似し、ライブにする前に反復できるようにします。

実際に機能する画像寸法

完璧な単一のサイズはありませんが、1200×630の画像(1.91:1のアスペクト比)が最も信頼できる単一の賭けです、主要なクロッピングなしですべてで機能します。プラットフォーム別の推奨事項:

重要なテキストと顔は画像の中央近くに保ちます、すべてのプラットフォームは異なる方法でクロップし、角のロゴはプラットフォームのUIオーバーレイの後ろに消える可能性があります。

なぜあなたのカードが時々表示されないのか

OGタグを追加したがプレビューがまだ壊れているか空の場合、通常の容疑者:

• HTTPSが必要。Facebookとほとんどのモダンプラットフォームはhttp://画像URLを拒否します。og:imageをHTTPSで提供します。
• 画像が公にアクセスできない。認証の後ろ、IP allowlistによってブロック、またはプラットフォームのクローラーに403を返す。プライベートブラウザウィンドウで画像URLを開いてテストします。
• 画像が小さすぎる。プラットフォームの最小値(Facebook 200×200、LinkedIn 1200×627)未満では、カードは小さなサムネイルまたは画像なしにフォールバックします。
• 間違ったアスペクト比。1:1の正方形画像がX上でsummary_large_imageとして送信されると、中央でクロップされ、しばしば悪く。
• キャッシュ。ソーシャルプラットフォームは、あなたのOGメタデータを積極的にキャッシュします。タグを修正した後、FacebookのSharing Debuggerを訪問し、「Scrape Again」をクリックして更新します;LinkedInのPost Inspectorも同じことをします;Xは、誰かがURLを次に貼り付けたときに変更を取り上げます。
• Robots.txtがソーシャルクローラーをブロック。facebookexternalhit、Twitterbot、LinkedInBot、Slackbotのようなユーザーエージェントがあなたのページと画像を取得できることを確認してください。
• サーバーが2xx以外を返すクローラーに。ソーシャルボットのユーザーエージェントについてサーバーログを確認してください。
• 相対画像URL。og:imageは絶対URL(https://yoursite.com/og.jpg)である必要があり、決して/og.jpgではありません。

キャッシュの問題

ソーシャルプラットフォームがあなたのページをスクレイプすると、メタデータは一定期間キャッシュされます、コミュニティの伝承ではFacebookとLinkedInで約7日とされていますが、どちらのプラットフォームも正確なTTLを文書化していません。OGタグを更新しても、キャッシュは自動的に更新されません。再スクレイプを強制するには、公式ツールを使用します:Facebook Sharing Debugger、LinkedIn Post Inspector。Xは、URLが次に共有されたときに新しいメタデータを取得します。SlackとDiscordは、フェッチ時のOGタグに基づいてプレビューを更新するため、Facebookよりも速く更新されます。

一般的なog:type値

og:typeタグは、ページがどのようなオブジェクトを表しているかをソーシャルプラットフォームに伝えます。ほとんどのページはwebsite(デフォルト)またはarticleです;垂直特有の値により、プラットフォームはより豊かなカードをレンダリングできます。仕様から:

• website、一般的なページのデフォルト。
• article、ブログ投稿、ニュース。article:published_time、article:author、article:section、article:tagとペア。
• book、book:author、book:isbnとペア。
• profile、ユーザープロファイルページ用。
• video.movie / video.episode / video.tv_show / video.other、ビデオコンテンツ用。
• music.song / music.album / music.playlist / music.radio_station、音楽用。

実践での長さ制限

タイトルや説明の長さに厳しい上限を強制するプラットフォームはありませんが、すべてのプラットフォームはある時点で切り捨てます:

• タイトル、すべてのプラットフォームで安全であるために~60文字以下に保ちます;~70はほとんどで切り捨てられます。重要なメッセージは最初の50に。
• 説明、切り捨ての前に~155-200文字未満。モバイルではより少ない(約100)。重要な情報を前置きします。
• 画像altテキスト、スクリーンリーダーやアクセシビリティを意識したクライアントのために存在すべき(og:image:alt);100文字未満。

JSON-LD vs Open Graph(これらは異なるもの)

よくある混乱:JSON-LD構造化データ(schema.orgの語彙を使用)とOpen Graphメタタグは異なる仕事をします。OG / Twitter Cardsはソーシャル共有プレビューをコントロールします、誰かがあなたのURLをSlackやFacebookに貼り付けたときに表示されるもの。schema.orgとJSON-LDは、Googleがリッチ検索結果、レシピカード、製品情報、Google SearchのFAQスニペット用にページを解析するのを助けます。両方が推奨され、お互いを置き換えません。

よくある間違い

1. 相対og:image URLを使用する。仕様は絶対URLを必要とします。相対パスは静かに削除されます。
2. すべてのページに汎用サイトロゴを使用する。OG画像はあなたのカードのヒーローです、すべてのページはユニークな画像に値します、理想的にはページのコンテンツに結びついています。
3. og:image:widthとog:image:heightを忘れる。一部のクライアントはスペースを事前に割り当て、これらのヒントなしでは画像を見逃します。
4. twitter:cardタイプsummary_large_imageがない。それなしでは、Xはより小さなsummaryカードを正方形のサムネイルでデフォルトにします、しばしばあまり魅力的ではありません。
5. 画像の角に重要なテキストを置く。異なるプラットフォームは異なる方法でクロップします。被写体と重要なテキストは中央80%にあるべきです。
6. タグを更新するがキャッシュをリフレッシュしない。すべての変更後に公式のSharing Debugger / Post Inspectorを訪問してください。
7. HTTP画像URLを送信する。ほとんどのプラットフォームは非HTTPS画像を拒否します;カードは画像なしで表示されます。
8. og:titleとog:descriptionのみを使用する。og:imageがないと、カードはほとんどのプラットフォームでスパースなテキストのみのスタブとしてレンダリングされます。

よくある質問

<meta property="og:title"       content="Your Page Title" />
<meta property="og:type"        content="website" />
<meta property="og:url"         content="https://yoursite.com/page" />
<meta property="og:image"       content="https://yoursite.com/og.jpg" />
<meta property="og:description" content="A short summary of the page." />

関連ツール