タグを更新した後、リンクプレビューに古い画像が表示されるのはなぜですか?

すべての主要なプラットフォームは、ページをスクレイピングした結果を、多くの場合 1 週間以上キャッシュするため、修正前に共有したリンクには古いカードが表示され続けます。タグを更新しても、そのキャッシュは単独で無効になるわけではありません。再 - URL をプラットフォームデバッガー — Facebook 共有デバッガー、LinkedIn 投稿インスペクター、または Slack で再共有することによってスクレイプします — は、新しいフェッチを強制します。 URL に無害なクエリ文字列を追加すると、テスト用のキャッシュを使用しないプレビューも生成されます。

OG: と Twitter: タグの両方が必要ですか?

いつもではありませんが、両方を含める方が安全です。 Twitter: 同等の機能が見つからない場合、X はグラフタグを開いて、Og:title、Og:Description、og:image のみのページでもカードを生成します。オープングラフでは表現できないのは、カードスタイルです。Twitter:Card は大きなバナーとコンパクトな要約レイアウトの間で決定し、twitter:site と Twitter:creator は自分のアカウントに属性を属性付けます。これら 3 つを追加し、OG: タグで残りをカバーします。

og:title と og:description はどのくらいの期間でよいですか?

og:title を約 60 文字以内に保つ — ほとんどのカードは切り捨てられ、モバイルカードの狭いクリップはすぐに切り取られます。 og:description の場合、制限は異なります。X はおよそ 110 文字を示し、Facebook と LinkedIn は 155 から 200 に近いことを示します。よりタイトな X に書き込むと、説明がすべてどこでも完全に読み取れます。過去のものはすべて失われていなく、省略記号の後ろに隠されているだけなので、重要な言葉を前にロードします。

プレビューが空白になっているのか、または URL だけが表示されているのはなぜ

通常の原因は、絶対 URL ではなく相対パスである og:image、プレーンな HTTP で提供される画像、の外側に配置されたタグです。、スクレーパーが実行しないクライアント側の JavaScript によって挿入されたタグ、またはページが非 200 ステータスまたはスクレーパーにリダイレクトするページを返します。 JavaScript の実行後にインスペクタが DOM を表示するため、サーバーが返す生の HTML にタグが表示されていることを確認してください。ブラウザインスペクタではなくソースを表示します。

このツールは私の URL を取得してタグを確認しますか?

いやー。ネットワークリクエストはまったく行いません。入力したタグからフォームに入力するか、HTML として貼り付け、すべてが解析され、ブラウザーでレンダリングされます。これは意図的な設計の選択です。CORS のため、ブラウザは任意のサードパーティのページを取得できません。サーバー側のフェッチは、未公開の URL を他のユーザーに送信することになります。何も取得されないため、ローカルホスト、ステージング、またはログインの背後のページを検証できます。

まだ公開されていないページをプレビューできますか?

はい、それがプラットフォームデバッガーではなく、このようなツールを使用する主な理由です。公式デバッガーは、あなたのライブ URL を取得する必要があるため、展開されていないページには役に立たない。ここでは、テンプレート、フレームワークメタデータオブジェクト、またはローカルビルドから、出荷する予定のタグを貼り付けるだけで、プレビューはすぐにレンダリングされ、展開は必要ありません。

タグを残すとどうなりますか?

スクレーパーが後退し、フォールバックは予測できません。 og:title がない場合、通常はタグを使用し、og:description を使用しない場合、メタ記述またはスクレイプボディテキストを使用できます。 og:image を使用しないと、ほとんどのプラットフォームでテキストのみのカードが表示されますが、ページから任意の画像 (多くの場合、ロゴやトラッキングピクセル) を取得するものもあります。 og:url を持たない場合、共有アドレスはそのまま使用されます。つまり、トラッキングパラメータが共有数をフラグメント化できることを意味します。タグを明示的に設定することが、結果を制御する唯一の方法です。

グラフのマークアップを開くと、検索ランキングに役立ちますか?

直接ではありません。オープングラフタグは、ソーシャルプラットフォームやチャットプラットフォームで読み取られ、検索エンジンによるランキングファクターとして使用されません。それらが影響を与えるのは、リンクのすべてのシェアのクリック率で、トラフィックと、時間の経過とともに重要な信号を動かします。 SEO ランキングレバーとしてではなく、共有リンクの変換最適化としてそれらを扱います。

グラフのプレビューツールは無料でプライベートですか?

はい。サインアップなしで完全に無料で、すべての解析、検証、およびプレビューは、ブラウザー内の JavaScript で行われます。入力したタイトル、URL、および画像リンクはサーバーに送信されず、ページがロードされると、ツールはオフラインで動作します。

グラ

グラフのプレビューを開く

Q: 正しいオープン グラフ イメージ サイズは?

1200x630 ピクセル、1.91:1 の縦横比を使用します。 これは、Facebook、LinkedIn、X のサイズで、大型カード用にきれいにレンダリングされ、高密度画面でもシャープな状態を保つのに十分な大きさです。 ファイルを約 5 MB 未満に保ち、絶対 URL で HTTPS を介して提供し、一部のサーフェスがわずかに切り取られるため、重要なテキストをエッジから離します。 コンパクトな X サマリー カードの場合、代わりに少なくとも 144x144 の正方形の画像を提供します。

Q: OG: と Twitter: タグの両方が必要ですか?

いつもではありませんが、両方を含める方が安全です。 Twitter: 同等の機能が見つからない場合、X はグラフ タグを開いて、Og:title、Og:Description、og:image のみのページでもカードを生成します。 オープン グラフでは表現できないのは、カード スタイルです。Twitter:Card は大きなバナーとコンパクトな要約レイアウトの間で決定し、twitter:site と Twitter:creator は自分のアカウントに属性を属性付けます。 これら 3 つを追加し、OG: タグで残りをカバーします。

Q: og:title と og:description はどのくらいの期間でよいですか?

og:title を約 60 文字以内に保つ — ほとんどのカードは切り捨てられ、モバイル カードの狭いクリップはすぐに切り取られます。 og:description の場合、制限は異なります。X はおよそ 110 文字を示し、Facebook と LinkedIn は 155 から 200 に近いことを示します。 よりタイトな X に書き込むと、説明がすべてどこでも完全に読み取れます。 過去のものはすべて失われていなく、省略記号の後ろに隠されているだけなので、重要な言葉を前にロードします。

Q: プレビューが空白になっているのか、または URL だけが表示されているのはなぜ

通常の原因は、絶対 URL ではなく相対パスである og:image、プレーンな HTTP で提供される画像、 の外側に配置されたタグです。 、スクレーパーが実行しないクライアント側の JavaScript によって挿入されたタグ、またはページが非 200 ステータスまたはスクレーパーにリダイレクトするページを返します。 JavaScript の実行後にインスペクタが DOM を表示するため、サーバーが返す生の HTML にタグが表示されていることを確認してください。ブラウザインスペクタではなくソースを表示します。

Q: このツールは私の URL を取得してタグを確認しますか?

いやー 。 ネットワーク リクエストはまったく行いません。 入力したタグからフォームに入力するか、HTML として貼り付け、すべてが解析され、ブラウザーでレンダリングされます。 これは意図的な設計の選択です。CORS のため、ブラウザは任意のサードパーティのページを取得できません。サーバー側のフェッチは、未公開の URL を他のユーザーに送信することになります。 何も取得されないため、ローカルホスト、ステージング、またはログインの背後のページを検証できます。

Q: まだ公開されていないページをプレビューできますか?

はい、それがプラットフォーム デバッガーではなく、このようなツールを使用する主な理由です。 公式デバッガーは、あなたのライブ URL を取得する必要があるため、展開されていないページには役に立たない。 ここでは、テンプレート、フレームワーク メタデータ オブジェクト、またはローカル ビルドから、出荷する予定のタグを貼り付けるだけで、プレビューはすぐにレンダリングされ、展開は必要ありません。

Q: タグを残すとどうなりますか?

スクレーパーが後退し、フォールバックは予測できません。 og:title がない場合、通常は タグを使用し、og:description を使用しない場合、メタ記述またはスクレイプ ボディ テキストを使用できます。 og:image を使用しないと、ほとんどのプラットフォームでテキストのみのカードが表示されますが、ページから任意の画像 (多くの場合、ロゴやトラッキング ピクセル) を取得するものもあります。 og:url を持たない場合、共有アドレスはそのまま使用されます。つまり、トラッキング パラメータが共有数をフラグメント化できることを意味します。 タグを明示的に設定することが、結果を制御する唯一の方法です。

Q: グラフのマークアップを開くと、検索ランキングに役立ちますか?

直接ではありません。 オープン グラフ タグは、ソーシャル プラットフォームやチャット プラットフォームで読み取られ、検索エンジンによるランキング ファクターとして使用されません。 それらが影響を与えるのは、リンクのすべてのシェアのクリック率で、トラフィックと、時間の経過とともに重要な信号を動かします。 SEO ランキング レバーとしてではなく、共有リンクの変換最適化としてそれらを扱います。

Q: グラフのプレビュー ツールは無料でプライベートですか?

はい。 サインアップなしで完全に無料で、すべての解析、検証、およびプレビューは、ブラウザー内の JavaScript で行われます。 入力したタイトル、URL、および画像リンクはサーバーに送信されず、ページがロードされると、ツールはオフラインで動作します。

Facebook、X、LinkedIn、Slack、Discord でリンクがどのように見えるかをプレビューし、OG: タグを検証し、正しいメタブロックをコピーします。

Paste existing meta HTML (optional)

Nothing is fetched or uploaded. Paste the tags from your page source and they are parsed in your browser.

og:title53/60

og:description127/200

og:image

og:url

og:site_name5/40

twitter:site

twitter:creator

og:type

twitter:card

Validation

8 1 0

og:title 53 characters — displays in full on every platform.
og:description 127 characters — fine for Facebook and LinkedIn, but X truncates past ~110.
og:image Absolute HTTPS image URL. Serve it at 1200x630 (1.91:1) for the best result.
og:url Absolute canonical URL set.
og:type Set to "website".
og:site_name 5 characters — shown above the title on most cards.
twitter:card Large banner card. Best when your image is 1200x630 or wider.
twitter:site Valid handle (@toolz).
twitter:creator Valid handle (@toolz).

Generated meta tags

<!-- Open Graph / Facebook / LinkedIn / Slack / Discord -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta property="og:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta property="og:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta property="og:site_name" content="Toolz" />
<meta property="og:image" content="https://toolz.dev/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph Preview: Test Social Cards Before You Ship" />

<!-- X / Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta name="twitter:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta name="twitter:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta name="twitter:image" content="https://toolz.dev/og-image.png" />
<meta name="twitter:site" content="@toolz" />
<meta name="twitter:creator" content="@toolz" />

Social card previews

Approximations of each platform's layout — exact rendering changes over time.

Facebook