Open Graph / Twitter Card / ソーシャルプレビュー検査
Open Graph meta tags を生成、検査、プレビュー
URL を入力すると、OpenGraphy がサーバー側で HTML を取得し、Open Graph と Twitter Card の metadata を解析し、各プラットフォームのカードと修正案を表示します。
公開前に共有プレビューを確認
Facebook、LinkedIn、Slack、メッセージアプリで一貫した分かりやすいリンクカードを表示します。
リンクが実際に共有される場所に対応
安全な取得、正確な解析、信頼できるプレビュー
OpenGraphy は利用者のブラウザではなくバックエンドで crawler に近い動作を行い、DNS、リダイレクト、プライベートネットワーク、HTML、画像の到達性を確認します。
SSRF 保護取得ごとに DNS、IP 範囲、リダイレクトを検証し、localhost、内部ネットワーク、予約アドレスへのアクセスを防ぎます。
4 時間キャッシュmetadata とプレビュー結果は Redis に一時保存され、URL 履歴や個人情報を長期保存しません。
診断提案不足タグ、相対画像 URL、画像サイズ、HTTP 状態、タイトル長、説明文長を確認します。
共有リンクを設計された広告枠のように見せる
Open Graph は、ソーシャルプラットフォームやメッセージアプリがページプレビューを読むための共通言語です。
Open Graph とは？
OG タグは crawler 向けの metadata です。多くのサービスは og:title、og:description、og:image を読んでリンクプレビューを生成します。
推奨画像サイズ
安全なプレビュー画像サイズは 1200 x 630、比率は約 1.91:1 です。軽量な画像ほどメッセージアプリで素早く表示されます。
なぜバックエンドで取得するのか？
多くの crawler は JavaScript を実行せず、SPA の描画を待ちません。サーバー側取得のほうが実際の crawler の見え方に近くなります。
最小限必要な Open Graph タグ
まず title、description、image、canonical URL を補うと、多くのプレビュー問題を解消できます。
<meta property="og:title" content="你的頁面標題" />
<meta property="og:description" content="一段清楚、有吸引力的頁面摘要。" />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta name="twitter:card" content="summary_large_image" />プラットフォームごとに metadata の解釈は異なります
Facebook は og:title、og:description、og:image を重視します。変更後は Sharing Debugger で再取得を促せます。
X / Twitter
X は OG metadata にフォールバックできますが、twitter:card と twitter:image を追加すると大きな画像カードが安定します。
LinkedIn は最初の取得結果をキャッシュしがちです。公開前に確認し、変更後は Post Inspector で更新してください。
WhatsApp / iMessage
画像が大きすぎると失敗や切り抜きが起きやすくなります。圧縮し、幅と高さの情報も明示しましょう。
Discord / Slack / Telegram
チャットアプリは初期 HTML にある metadata を好みます。フロントエンド JavaScript だけでタグを挿入しないでください。
Pinterest / Reddit
EC、ポートフォリオ、記事ページでは、横長画像に加えて正方形や縦長の候補も用意すると目立ちます。
主要な技術スタックでの導入
Next.js / Nuxt / Astro
フレームワークの metadata API または SSR/SSG を使い、サーバーが返す HTML に OG タグを直接含めます。
WordPress
SEO プラグイン、またはテーマの head hook で投稿タイトル、抜粋、アイキャッチ画像、canonical URL を出力します。
シングルページアプリ
完全にクライアント側で描画すると、多くの crawler は metadata を見落とします。SSR、事前レンダリング、共有用の静的 HTML を用意してください。
よくある質問
Open Graph は SEO ランキングに直接影響しますか？
多くの場合、直接のランキング要因ではありません。ただし共有時のクリック率、流入、引用、ブランド露出を改善できます。
画像を変えたのに古い画像が表示されるのはなぜ？
各プラットフォームは取得結果をキャッシュします。Facebook Sharing Debugger や LinkedIn Post Inspector で再取得し、必要なら画像 URL にバージョンを付けます。
OG タグがないとどうなりますか？
プラットフォームは title、meta description、ページ内の大きな画像から推測します。結果は不安定で、壊れた見た目になりがちです。
タグの大文字小文字は重要ですか？
はい。OG:Title ではなく og:title のような標準の小文字名を使ってください。多くの crawler は表記に厳密です。
