これらは、Open Graph マークアップを手動または CMS で記述するための一般的なベストプラクティスです。OG Preview 自体はビューアであり、タグがどのように表示されるかを描画し、URL から取得モードではページがすでに公開しているタグを報告します。
ページタイプごとに固有のタグを使う
ページが異なれば、ふさわしいプレビューも異なります。ブログ記事は og:type を article に設定するのが最適で、商品ページは説明的なタイトルと画像が効果的です。ホームページはブランドアイデンティティを強調すべきです。あらゆる場所で同じ汎用プレビューを使い回すと、クリック率が下がります。
画像を速度向けに最適化する
数メガバイトの PNG は避けましょう。適切なサイズに圧縮し、各プラットフォームで機能する 1200×630px（1.91:1）の寸法を維持し、クローラーがすばやく読み込めるようにします。
og:site_name を必ず設定する
これにより、タイトルが切り詰められた場合でも、プレビューにブランド名を表示し続けられます:
プラットフォームをまたいでテストする — 思い込みは禁物
Facebook、LinkedIn、X（Twitter）は、それぞれメタタグの扱いが少しずつ異なります。まずここでプレビューし、その後、公式ツールで実際のプラットフォーム上で確認してください:
より豊かなコンテンツのために og:type を使う
ブログには article、商品には product を使います。適切なタイプを設定すると、一部のプラットフォームで著者名や公開日などのより豊かな表示が有効になることがあります。
絶対画像 URL を設定する
ソーシャルクローラーは相対パスを解決しません。常に完全な URL を使ってください: /img/og.jpg ではなく https://yoursite.com/img/og.jpg です。
更新した画像のためのキャッシュバスティング
OG 画像を差し替えても、プラットフォームは古い画像を配信し続けることがあります。ファイル名を変更する（例: og-v2.jpg）か、?v=2 のようなバージョンクエリを付加し、その後プラットフォームのデバッガーを再実行してキャッシュを更新してください。
OG タグを JSON-LD と組み合わせる
<script type="application/ld+json"> による構造化データは検索エンジンに役立ち、OG タグはソーシャル共有を担います。両者は互いを補完します。両方を維持しましょう。