OG Preview はすべてブラウザ内で動作します。タグの値を手動で入力するか、公開中の URL からツールに読み取らせるだけで、そのページが Facebook、X（Twitter）、LinkedIn でどのように表示されるかをすぐに確認できます。
ステップ 1: ツールを開く
ホームページにアクセスします。デフォルトでは手動入力モードで開きます。このモードは、まだ公開されていない下書きやログインが必要なページも含め、あらゆるページで利用できます。
ステップ 2: タグの値を入力する（手動入力）
各項目を入力します:
- URL / ドメイン — プレビューのソース行として表示されます。
- タイトル（og:title） — 見出しです。60 文字未満を目安にします。
- 説明（og:description） — 短い要約で、150〜160 文字程度が目安です。
- 画像 URL（og:image） — プレビュー画像への絶対
https://リンクです（理想は 1200×630px）。
Facebook、X（Twitter）、LinkedIn のプレビューは、入力に合わせてリアルタイムで更新されます。アップロードはありません。画像は URL で参照されます。
ステップ 3（任意）: URL からタグを取得する（ベータ版）
URL から取得（ベータ版）に切り替え、公開ページの URL を貼り付けて「プレビュー」を押します。ツールは公開 CORS プロキシ経由でページを取得し、すでに設定されている OG/Twitter タグを読み取り、プレビューと、見つかったタグ・不足しているタグの一覧を表示します。このモードはベストエフォートです。一部のサイトはプロキシをブロックするため、その場合は手動入力が確実な代替手段になります。
ステップ 4: 思いどおりになるまで調整する
プレビューが望みどおりに見えるまで、タイトル・説明・画像を調整します。画像が表示されていないか、タイトルが途中で切れていないかを確認しましょう。
ステップ 5: ページにタグを追加する
OG Preview はコードファイルを書き出しません。タグは自分のサイトの <head> に追加します。決定した値を使うと、マークアップは次のようになります:
CMS を使用している場合、ほとんどの SEO プラグイン（例: WordPress の Yoast SEO や Rank Math）に、まさにこれらの値を入力する項目が用意されています。
ステップ 6: 実際のプラットフォームでテストする
タグを公開したら、公式のデバッガーで確認します。これらのツールでは、プラットフォームのキャッシュをクリアすることもできます: