share Open Graph & Twitterカード生成ツール star

仕組み

Open Graphプロトコルは2010年にFacebookが導入したもので、あらゆるウェブページが自らを「リッチなソーシャルオブジェクト」として説明できるようにするものです — フィードやチャットにリンクを貼り付けたときに、どのタイトル、ディスクリプション、画像、サイト名を表示すべきかを指定します。本ツールは根幹となる4つのタグ(og:title、og:description、og:image、og:url)に加え、対応するtwitter:のセットを生成し、公開する前に実際にFacebook、LinkedIn、WhatsApp、Xがどのように表示するかをライブプレビューで確認できるようにします。

og:typeフィールド(website、article、productなど)は単なる飾りではありません — 一部のプラットフォームはこの値によってカードの挙動を変えます。article型なら著者名や日付の行が表示されることがあり、product型ならOpen Graphのコマース拡張に対応したプラットフォームで価格表示が発動することもあります。具体例:レシピページをog:type=articleに設定し、1200×630のog:imageを指定すると、X上では(twitter:card=summary_large_imageを通じて)横幅いっぱいの写真カードになり、WhatsAppでも同様のプレビューが表示されます — 設定を誤ったり、og:imageを省いたりすると、多くのプラットフォームは推測に頼るしかなくなり、たいていはページ内の最初の画像を使うか、何も表示しません。

核となる4つのタグ以外にも、結果を微調整できる任意のフィールドがいくつかあります。og:site_nameは一部のプラットフォームでタイトルの隣にブランド名を表示し、og:localeは言語・地域(en_US、tr_TRなど)を指定して多言語サイトが正しいバリエーションで表示されるようにし、twitter:siteはカードをX上の特定アカウントに紐づけます。twitter:cardの値には、summaryとsummary_large_imageのほかに、動画や音声をタイムラインに直接埋め込むための「player」という第3の選択肢もありますが、これには本ジェネレーターでは扱っていない専用のプレイヤー用マークアップが別途必要です。キャッシュの保持期間もプラットフォームによって異なります。一部のデバッガーは再取得から1日以内に更新される一方、クロールごとではなくリンクごとにキャッシュする他のプラットフォームでは、古いプレビューが1週間以上保持されることもあります — そのため、デバッガーで強制的に再スクレイプさせることが、唯一の速い解決策になることが多いのです。

知っておくべきこと

• 1200×630px(1.91:1の比率)が、あらゆるプラットフォームで通用する安全な万能サイズです。ファイルはおよそ1MB以下に抑えて確実に読み込まれるようにし、URLは必ず絶対パス(https://...)を使ってください — 相対パスは何のエラーも出さずに失敗します。
• キャッシュは最もよくある不満の種です。一度プラットフォームがURLをスクレイプしてしまうと、タグを修正した後でも古いタイトルや画像が何日も表示され続けることがあります。FacebookのSharing DebuggerやLinkedInのPost Inspectorといったツールを使うと、強制的に再取得させることができます。
• Xはタイトル、ディスクリプション、画像についてはほとんどOpen Graphの値にフォールバックしますが、twitter:cardだけは独自の設定項目であり(summaryか、横幅いっぱいのsummary_large_imageか)、自動的には推測されません — 明示的に設定してください。
• タグが1つもないからといってプレビューが表示されないわけではありません — プラットフォームはページ内から見つけたものをもとに推測しますが、その推測が見栄え良く仕上がることはほとんどありません。
• og:urlはページの正規(canonical)バージョンを指すべきです — トラッキングパラメータ付きのURLやリダイレクト先を指定してしまうと、共有によるシグナルが1つに集約されず、2つの異なるアドレスに分散してしまいます。
• 公開前に複数のプラットフォームでテストしましょう。Facebook、LinkedIn、XはそれぞれOpen Graphの解釈が微妙に異なるため、あるプラットフォームで正しく見えるカードが、別のプラットフォームでは画像が切れたりディスクリプションが表示されなかったりすることがあります。