Open Graph と Twitter Card タグをライブのソーシャルプレビューで作成。
最終更新
Coddy teaches you by writing real code in your browser - interactive lessons, instant feedback, and AI help when you get stuck.
最近のアプリ - 投稿、DM、Slackチャンネルなど - でリンクを共有すると、そのプラットフォームはURLを取得し、ごく一部のメタデータを抽出して*シェアカード*を描画します。タイトル、説明、画像、サイト名の組み合わせです。これらは表示中のページから取られるのではなく、<head> 内の特定の <meta> タグから読まれます。これらの大半を定義しているのが、2010年にFacebookが考案したOpen Graphプロトコルです。X（旧Twitter）は twitter: プレフィックスでいくつかの拡張を追加し、LinkedIn、Discord、Slack、iMessage、WhatsApp、Pinterestも、わずかな差はあるものの同じタグを読み取っています。
これらのタグを正しく設定するのはページごとに一度だけの作業ですが、効果の大きさは作業量を上回ります。Open Graph画像がないページはシェアされたときに壊れて見えますし、長すぎるタイトルは単語の途中で切れてしまいます。og:image のアスペクト比を間違えると、どのプラットフォームでもレターボックスがかかります。このツールを使えば、リアルタイムプレビューでこれらの値を調整できるので、ページを公開する*前に*切り詰めやクロップの問題に気付けます。
すべてはローカルで動作します。フォームの状態、プレビュー、生成されたHTMLが、ブラウザの外に出ることはありません。公開前のURLや未発表のコピーを貼り付けても、漏洩の心配は無用です。
property 属性（<meta property="og:title">）を使いますが、標準的なSEOタグやTwitter Cardタグは name 属性（<meta name="description">、<meta name="twitter:card">）を使います。title、meta description）、Open Graph（og:title、og:description）、そしてTwitter（twitter:title、twitter:description）です。og:image は1200×630px、HTTPSで配信、絶対URLで指定するのが鉄則です。相対パスは、他社サーバーがページを取得しに来たときに失敗します。目安は50〜60文字。Facebookは約95文字、Xは約70文字で切ります。ブランドではなく価値を先頭に置きましょう -「Coddy Blog · Deployment Guide」より「How to deploy with Cloudflare Workers」のほうが伝わります。
目安は120〜155文字。ほとんどのプラットフォームは200文字前後で切ります。タイトルの下に表示されるので、途中で切れた断片はだらしなく見えます。完結した1文で書きましょう。
トラッキングやリダイレクトのリンクではなく、そのページ自体の絶対URL（https://）を指定します。Open Graphのクローラーはシェアの重複排除で og:url を参照するので、正規URLを揃えておくとシェア数とプレビューが一貫します。
1200×630がXの summary_large_image カードや、Facebook・LinkedInの標準カードでのベストサイズです。PNGまたはJPEGで、約5 MB以下。ソーシャルクローラーは自分のサーバーからURLを叩くので、必ず絶対URLを使ってください - 相対パスは失敗します。
**Generated <head> tags** パネルのブロックを、ページの <head> に貼り付けます。デプロイ後は、各プラットフォームのデバッガー（Facebook Sharing Debugger、X Card Validator、LinkedIn Post Inspector）で検証し、後で画像を変更したときは再クロールを強制しましょう。
以下のタグで、現代のソーシャルプラットフォームが読み取るものをほぼ網羅できます。property= はOpen Graphプロトコル、name= は標準SEO / Twitter Cardのバリアントです。仕様の参照先: Open Graph、X Cards。
| タグ | 使用元 | 推奨値 | メモ |
|---|---|---|---|
og:title | FB、LinkedIn、Slack、Discord | 50〜60文字 | 未指定の場合は <title> にフォールバックしますが、必ず設定しましょう。 |
og:description | FB、LinkedIn、Slack、Discord | 120〜155文字 | 未指定の場合は meta description にフォールバックします。 |
og:image | 全プラットフォーム | 1200×630、5 MB未満、HTTPS、絶対URL | 絶対URL必須 - 相対パスは失敗します。 |
og:image:alt | アクセシビリティ | 画像の説明文 | スクリーンリーダーや一部プラットフォームが利用します。 |
og:url | FB、LinkedIn | 正規のhttps:// URL | クエリ文字列違いのシェアを重複排除するために使われます。 |
og:type | FB、LinkedIn | website または article | article を指定すると article:published_time、article:author が使えるようになります。 |
og:site_name | FB、Discord | ブランド名 | カードの上部または下部に小さく表示される帰属表記です。 |
twitter:card | X | summary_large_image | summary は小さな正方形のサムネイル、summary_large_image はバナーレイアウトです。 |
twitter:title | X | og:titleと同じ | 未指定の場合はXがog:titleにフォールバックしますが、両方設定しておくと安全です。 |
twitter:description | X | og:descriptionと同じ | 未指定の場合はog:descriptionにフォールバックします。 |
twitter:image | X | og:imageと同じ | 未指定の場合はog:imageにフォールバックします。 |
twitter:site | X | @yourbrand | 発行元のXハンドル - 一部のアナリティクスで利用されます。 |
**og:type** を article に設定し、article専用セクションで**Author**と**Published time**を追加し、1200×630のカバー画像を指定します。プレビューが更新され、各プラットフォームでのカードの見え方を確認できます。
og:type=article を指定すると、article専用タグ（article:published_time、article:author）が使えるようになり、一部のプラットフォーム（Discord、LinkedIn）はこれらを使って著者情報を表示します。Twitterは無視しますが、エラーにはなりません。
**og:type** は website のままにします。タイトルにはプロダクト名、説明には1文のバリュープロポジション、画像にはヒーロー画像やスクリーンショットのクロップを使います。
ランディングページにはarticleメタデータは必要ありません。シェアされたランディングページのカードで最もクリックされる要素は画像であることが多いので、1200×630の洗練されたビジュアルに力を入れる価値があります。
タイトル: "概念 - セクション · Docs"。説明: 概念を1文で説明。画像: 汎用的なドキュメントカバー、または関連UIのスクリーンショット。
ドキュメントページはSlackチャンネルやXスレッドでシェアされがちです。一貫したドキュメント用カバー画像があれば、タイトルが読まれる前から、賑やかなフィードの中でも一目で見分けが付きます。
/images/cover.png のような相対パスを og:image に指定すること。ソーシャルクローラーは*ソーシャル側*のサーバーからページを取りに来るので、相対パスはソーシャルプラットフォーム自身のドメインを指してしまい404になります。必ず絶対URL（https://）を使いましょう。twitter:card を忘れること。指定しないと、Xは画像なしの最小限のカードでフォールバックします。twitter:card=summary_large_image を追加して、ほぼすべてのブランドが望むバナーレイアウトを手に入れましょう。og:image:alt を省略すること。コストはゼロで、スクリーンリーダーのユーザーに役立ち、一部プラットフォームは描画されたカードの代替テキストとしてそのまま表示します。<meta> タグで記述できるようにするものです。現在ではすべての主要なソーシャルプラットフォームとチャットプラットフォームがこれを読むため、シェアカード向けメタデータの事実上の標準になりました。twitter: タグが未指定のときに対応する og: タグへフォールバックするので、技術的にはOpen Graphだけで済ませることもできます。ただし twitter:card、twitter:site、twitter:creator を追加すると、Xでのカードの見え方をより細かく制御できます。<title>、meta description を読みます。画像検索やDiscoverサーフェスでは og:image を拾うことがありますが、ランキングシグナルにはなっていません。