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

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

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

常にではありませんが、両方を含める方が安全です。 x は、twitter: 相当のものが欠落しているときに Open Graph タグに戻ります。そのため、og:title、og:description、og:image だけを含むページではカードが作成されます。 Open Graph で表現できないのは、カードのスタイルです。 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: 画像、プレーン http 上で提供される画像、の外側に配置されたタグ、スクレーパーが実行しないクライアント側の JavaScript によって挿入されたタグ、またはページが 200 以外のステータスまたはスクレーパーへのログインリダイレクトを返すことです。サーバーが返す生の HTML にタグが表示されることを確認します。ブラウザーインスペクターではなくソースを表示します。インスペクターは JavaScript が実行された後に DOM を表示するためです。

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

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

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

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

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

スクレーパーはフォールバックし、フォールバックは予測できません。 og:title がない場合、通常はタグを使用し、og:description がない場合、メタ記述を使用したり、本文テキストをスクレープしたりすることがあります。 og:image がない場合、ほとんどのプラットフォームはテキストのみのカードを示しますが、一部のプラットフォームはページから任意の画像をつかみます。多くの場合、ロゴや追跡ピクセル。 og:url がない場合、共有アドレスはそのまま使用されます。つまり、追跡パラメーターによって共有カウントが断片化される可能性があります。タグを明示的に設定することが、結果を制御する唯一の方法です。

Open Graph マークアップは検索ランキングに役立ちますか?

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

Open Graph プレビューツールは無料でプライベートですか?

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

Open Graph プレビュー

Q: 正しい Open Graph 画像サイズは?

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

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

og:title を約 60 文字以下に保ちます - ほとんどのカードはそれを過ぎると切り捨てられ、狭いモバイル カードはより早くクリップされます。 og:description の場合、制限は発散します。X はおよそ 110 文字を示し、Facebook と LinkedIn は 155 ～ 200 文字に近いことを示します。よりタイトな X 制限に書くと、説明はどこにでも完全に読み取れます。失われていない過去のものはすべて、省略記号の後ろに隠れているだけなので、重要な単語を前倒しします。

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

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

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

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

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

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

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

スクレーパーはフォールバックし、フォールバックは予測できません。 og:title がない場合、通常は タグを使用し、og:description がない場合、メタ記述を使用したり、本文テキストをスクレープしたりすることがあります。 og:image がない場合、ほとんどのプラットフォームはテキストのみのカードを示しますが、一部のプラットフォームはページから任意の画像をつかみます。多くの場合、ロゴや追跡ピクセル。 og:url がない場合、共有アドレスはそのまま使用されます。つまり、追跡パラメーターによって共有カウントが断片化される可能性があります。タグを明示的に設定することが、結果を制御する唯一の方法です。

Q: Open Graph マークアップは検索ランキングに役立ちますか?

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

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

はい。 サインアップなしで完全に無料で、すべての解析、検証、およびプレビューは、ブラウザー内の 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