壊れたリンクのプレビューを発見する最悪の時期は、起動ツイートの後です。 ページに1 週間滞在し、アナウンスメントを書き、送信を押します - そして表示されるカードは、切り取られたタイトルと画像のない灰色の長方形であるためです og:image 指摘した /images/og.png 代わりに https://yoursite.com/images/og.png。 投稿はすでに出ています。 カードはすでにキャッシュされています。 修正してから、全員に再共有を依頼します。
あい オープングラフ プレビューは、チェックを前に移動することで、それを解決します。 publishing と hoping の代わりに、タグがまだ編集可能な状態でカードが何になるかを見ます。 ということが、の前提全体です グラフのプレビューを開く ツール: タグを入力するか、すでに持っているタグを貼り付けます。Facebook、X、LinkedIn、Slack、および Discord カードを並べて表示し、すべてのフィールドで合格/警告/不合格の評決を下します。
単一のプレビューだけでは不十分な理由は、すべてのプラットフォームが同じタグを読み、それらを異なる方法で表示するためです。 X は約 110 文字で説明を切り捨て、Facebook は 155 に近いことを示します。 LinkedIn は、説明を完全に削除し、画像、タイトル、およびドメインのみを表示することがよくあります。 Slack は、全体を色付きのレールでコンパクトなアタッチメントにまとめます。 Discord は、説明を目立つように埋め込みますが、画像を縮小します。 Facebook カードに美しく収まるタイトルは、X で単語の途中でカットできます。両方を見ないと気付かないでしょう。
私が造る Toolz.dev そして、ページを常に出荷し、公開チェック修正ループに飽きました。このツールは完全にブラウザーで実行され、ネットワーク呼び出しはまったく行われません。URL は決して取得されません。つまり、まだ展開されていないページでも動作します。ログインするか、公式プラットフォーム デバッガーが到達できないステージング ドメインで動作します。
tl;dr: 開いたグラフ タグは、リンクが共有されたときのリンクの様子を制御します。 すべてのプラットフォームは同じ読み込み
og:タグは切り捨てて別の方法でレイアウトするため、1 つのプラットフォームをプレビューしても、他のプラットフォームについては何もわかりません。 ザ・ グラフのプレビューを開く ツールは、1 セットのタグから 5 枚のプラットフォーム カードをレンダリングし、現在のプラットフォームの制限に対して各フィールドを検証し、既存のタグ ブロックを既に解析してコピーに対応したものを渡します。<meta>ブロック - すべてのクライアント側で、スクレイピングやアップロードはありません。
主な機能
1 セットのタグから 5 つのプラットフォーム プレビュー
このツールは、Facebook のおおよそのカードをレンダリングします。X は両方とも summary_large_image あんど summary styles、linkedin、slack、discord。これらはすべて同じフィールドから読み取るため、タイトルをトリミングすると、そのタイトルがいつでもどこでも更新されるのがわかります。ポイントはピクセルに完璧な忠実度ではなく、プラットフォームは警告なしにカードを再設計します。しかし、相対的な忠実度です。正しい比率、正しい切り捨て点、正しいフィールドの順序なので、どのプラットフォームが壊れているかがわかります。
すでに持っているタグの貼り付けと解析
ページが存在する場合、9 つのフィールドを再入力することはほとんどありません。 生のHTMLを貼り付けます - 全体 <head>、ビューソース ダンプ、または緩いブロック <meta> 行 - 解析ボックスに入力すると、組み込みのパーサーがすべてを抽出します og: あんど twitter: タグを付けて、それらを認識してフォームにロードします。 パーサーは DOM ベースではなく正規表現ベースであり、同じコードをブラウザ、ノード、デスクトップ ビルドで変更なしで実行できるようにします。
実際の制限によるフィールドごとの検証
すべてのフィールドには、合格、警告、または失敗のステータスがあります。 約 60 文字を超えるタイトルは失敗します。 110 から 155 文字の説明は、Facebook と LinkedIn では完全に読み取られますが、X ではカットされるため、警告します。 og:image パスは完全に失敗します - スクレーパーはそれらを解決しません。 an og:image プレーン上で提供 http いくつかのプラットフォームが非 https イメージのレンダリングを拒否するため、警告します。 あ twitter:site 有効なハンドルでない値が失敗します。 判決は、一般的な「見栄えがよく見える」というよりも、行動に移す具体的なものです。
実際に守れる画像ルール
すべての主要なプラットフォーム上の大きな画像カードは、1.91:1 の画像を想定; 1200x630 ピクセルは、一度にそれらのすべてを満たすサイズです ツールは、明示的にターゲットを設定し、画像を静かに消す障害モードにフラグを立て、 - 壊れた画像を持つカードは、単一の最も一般的なオープングラフバグであるため - あなたの実際のレンダリングします og:image 画像を読み込めない場合は、各プレビューで URL をクリア プレースホルダーに戻します。
コピー準備完了の、正しくエスケープされたメタブロック
生成された出力は完全なタグブロックであり、フラグメントではありません。 それは含まれます og:image:width あんど og:image:heightほとんどの人が認識している以上に重要です。一部のスクレーパーは、最初のフェッチでテキストのみのカードをレンダリングし、ダウンロードして測定した後にのみ画像を表示します。これは、数時間後に表示される可能性があります。 値は HTML エスケープされているため、説明のアンパサンドまたは引用符が属性を抜けてマークアップを破損することはありません。
100% クライアント側で、スクレイピングはありません
ツールは決してあなたのURLを要求しません これは意図的であり、その理由を理解する価値があります: ブラウザは同一オリジンポリシーのために任意のサードパーティページをフェッチできず、サーバー側のフェッチャーはあなたの未リリースのURLを誰かに出荷することを意味します else' s ログ あなたが供給するタグから作業することは、両方の問題を回避し、公式デバッガがサービスを提供できないケースをロック解除します - まだライブではないページを検証するを参照してください オンライン ツールのデータ プライバシー より広い推論のために。
グラフのプレビューを開くツールの使い方
ステップ 1: タグをロードする
2 つのパスがあります。 メタデータを最初から作成する場合は、次のフォームに入力します。 og:title、 og:description、 og:image、 og:url、 og:site_name、次に選択します og:type そして twitter:card スタイルを決めて追加 twitter:site あんど twitter:creator ハンドル。
ページにすでにタグがある場合は、代わりにタグを貼り付けます。ページを開き、ソースを表示します (ブラウザのインスペクターではありません - 以下のその区別について詳しく説明します)。 をコピーします <head>を、それを解析ボックスにドロップします。 タグの解析をクリックすると、認識されたすべてのものがフォームに読み込まれます。 パーサーは別名も理解しています。 og:image:secure_url あんど og:image:url どちらもイメージ フィールドにフィードし、 twitter:title、 twitter:description、そして twitter:image フォールバックとして使用されます。 og: 同等のものは存在しません。これは、プラットフォーム自体がタグをどのように解決するかを反映しています。
ステップ 2: 検証パネルを読む
検証リストは、フィールドが重要な方法で順序付けられます。 最初に失敗を修正する: 欠落している og:image、相対画像パス、制限を超える20 文字のタイトル 次に、警告を見て、これは主にプラットフォーム間のギャップについてです - Facebookには問題ありませんが、Xには長い説明、欠落しています og:site_name つまり、カードにはブランドではなく、むき出しのホスト名が表示されます。
パネルの上部にあるカウンターで、すぐに読み取れます。 ゼロは失敗し、いくつかの警告は完全に出荷可能な状態です。警告はバグではなくトレードオフです。
ステップ 3: カードを比較する
これは人々がスキップするステップであり、実際の問題をキャッチするものです 6 つのプレビューをすべてスキャンします タイトルはXサマリーカードでカットされていますか? LinkedInでは説明が消えますか (それは通常そうします - それは予想されます) 画像は1.91:1 で右に見えますか、それとも正方形のグラフィックをデザインし、カードがそれを広くするのでロゴはトリミングされていますか?
すべてのカードがきれいに読めるまでトリムして再確認します。 便利な規律: 最も厳しい制約に書きなさい。 説明が 110 文字で完全に読み取られている場合、すべての場所で完全に読み込まれます。 タイトルが 55 で機能する場合、すべてのカードとすべてのモバイル レイアウトが存続します。
ステップ 4: メタ ブロックをコピーして出荷する
生成されたブロックを自分のページにコピーします。 <head>.フレームワーク - Next.js、Nuxt、SvelteKit、Astro - では、生のまま貼り付けません <meta> タグですが、フレームワークのメタデータ API にどのフィールドに入力するかについては、ブロックが真実の源泉です。
次に、誰もが忘れている手順を実行します。各プラットフォームのデバッガーで URL を再スクレイピングします。 フィックスを出荷しても、キャッシュされたカードはクリアされません。 ザ・ メタ タグ ジェネレーター ソーシャル タグと並行して動作する標準の SEO タグ (タイトル、説明、正規、ロボット) も必要な場合は、こちらがコンパニオン ツールです。
オープン グラフ プロトコルが実際にどのように機能するか
2010 年に Facebook で Open Graph が開始されました。これは、Web ページをソーシャル グラフ内のノードに変える方法です。 野心は薄れ、タグの語彙は定着し、Facebook、LinkedIn、Slack、Discord、WhatsApp、Pinterest、iMessage、Signal などのほとんどのリンク ソフトウェアが読み取れる事実上の基準となっています。
仕組みは簡単です リンクが共有されると、プラットフォームはURLにボットを送ります - facebookexternalhit、 LinkedInBot、 Slackbot-LinkExpanding、 Discordbot、 Twitterbot。 そのボットは生の HTML を要求し、 <head>、抽出します og: あんど twitter: メタ タグを付けて、カードを作成します。 これは、単一の HTTP GET と解析です。 ボットはブラウザではありません。これらのクローラのほとんどは、バグのジャンル全体の根本原因である JavaScript を実行しません。
タグ自体
プロトコルで必要な 4 つのタグについて説明します。 og:title、 og:type、 og:image、そして og:url。 練習で og:description あんど og:site_name カードは、むき出しであるか、スクレーパーがページで見つけたテキストにフォールバックするため、同様に耐荷重になります。 タグは、 property 属性ではない nameー <meta property="og:title" content="..." />- Twitter タグは逆の動作をするため、人々を興奮させます name。 ほとんどのパーサーはこれについて許していますが、プラットフォーム自身のバリデーターは常にそうではないので、正しく理解する価値があります。
OG: 対 Twitter: 優先順位
X は、最初に Twitter カード タグを読み、不在のときにはフォールバックして Open Graph にします。 つまり、ページのみがある og:title、 og:description、そして og:image それでも機能する X カードが生成されます。フォールバックは設計上です。
では、実際に必要なものは何ですか twitter: タグ? 3つのこと。 twitter:card レイアウトを決定し、それに相当するオープン グラフはありません。X は、見つけたものに基づいてカード スタイルを選択します。これは、委任する決定ではありません。 twitter:site カードをブランド アカウントに属性します。 twitter:creator 作者の功績を認めます。 それ以外はすべて、オープン グラフから安全に入手できます。
実用的なルール: 完全に開いたグラフ タグを作成してから、正確に 3 つを追加します。 twitter: タグ。 重複 twitter:title あんど twitter:description x 上に他の場所とは異なるコピーを本当に必要としなければ、無害ですが無意味です。X' のより厳密な切り捨ては、より短くパンチの効いた説明を正当化する場合があるため、これは正当な選択である場合もあります。
画像の寸法、比率、およびトリミングの問題
アスペクト比 1.91:1 は、内面化する数です。 1200x630 ピクセルがヒットし、Retina ディスプレイに十分な大きさで、Facebook、LinkedIn、X が大型カードの歪みなくレンダリングするものです。
失敗モードは微妙です。プラットフォームは通常、比率外のイメージを拒否せず、トリミングします。 1000x1000 の正方形のグラフィックをアップロードすると、Facebook が 1.91:1 に中央揃えで切り取られ、上下の約 3 分の 1 が切り替わります。 見出しのテキストが垂直方向に中央揃えになっていれば、それは生き残り、上部にロゴを入れても問題はありません。 異なる表面はわずかに異なる量で切り取られるため、意味のあるコンテンツは安全な領域内にあり、端から離して保管してください。
コンパクトな× summary カードは例外です 正方形の画像、最小144x144 を望んでおり、それは1.91:1 のバナーを正方形に中央に切り取ります - 通常、それを破壊します あなたが意図的に使うならば summary、正方形の画像を指定します。バナーを指定する場合は、 summary_large_image。
ファイル サイズを約 5 MB 未満に保ち (Facebook's の天井は文書化されています; 他のプラットフォームは実際にはより厳格です)、PNG、JPEG として機能します ウェブP、 と常に絶対 HTTPS URL を使用します。 relative paths と protocol-relative // URL は、画像が黙って表示されない最も一般的な 2 つの方法です。
スクレーパー キャッシュの理由とキャッシュの破損方法
すべてのプラットフォームは、ページをスクレイピングした結果 - 通常約7 日間、時にはそれ以上 - をキャッシュします これは頑固ではありません: 人気のリンクは1 時間に何千回も共有でき、共有ごとにページを再フェッチすると、プラットフォームによって実行されるサービス拒否攻撃になりますので、彼らは一度スクレイピングして再利用します。
その結果、タグを修正してもカードは修正されません。 キャッシュの有効期限が切れるまで、既存の共有と新しい共有に対して古いプレビューが保持されます。 強制的に更新するには:
- フェイスブック: [スクレイプ 再びスクレイプ] ボタンを使用して、共有デバッガー。 これにより、Instagram と WhatsApp で使用されるキャッシュもクリアされます。
- リンクイン: ポストインスペクター。 URL を入力すると、新たなスクレイプが発生します。
- ×: カードのバリデーターが廃止され、アクセスが不整合です。 実際には、リンクを投稿するだけで信頼できる更新が行われます。
- たるみ: キャッシュのアンフォールは、それ自体で期限切れになります。無害なクエリ パラメータを追加すると、すぐに新しい展開が発生します。
- 不和: 類似 - 変更されたクエリ文字列が実際的な回避策です。
クエリ文字列のトリックは、ユニバーサル エスケープ ハッチです。 https://example.com/page?v=2 スクレーパーにとって、キャッシュされたエントリのない別の URL です。 実際に公開する正規のリンクではなく、テストに使用して保管してください og:url クリーンな正規のアドレスを指して、パラメータ化されたバリアントの共有が正しく統合されます。 ザ・ URL エンコーダ/デコーダ これらのパラメータが複雑になる場合に便利です。
タグが見つからない場合の動作
スクレーパーが後退し、フォールバックは期待よりも悪くなります。
いやー og:title そして彼らは <title> タグ - これは通常、検索結果のために書かれ、しばしばパイプとあなたのブランド名で終わることがよくあり、カードの見出しとしてぎこちなく読んでいます。 いいえ og:description そして、クッキー バナーやナビゲーション ラベルを引っ張ることができるメタ ディスクリプション、つまりスクレイプ ボディ テキストを使用します。 いやー og:image ほとんどのプラットフォームでは、テキストのみのカードが表示されますが、ページ内の任意の画像を探して、ロゴ、アバター、または追跡ピクセルを見つけることができます。 いやー og:url そして、共有アドレスはそのまま使用されるので、 ?utm_source=twitter バリアントは個別のページとして扱われ、共有カウントのフラグメントが断片化されます。
通常のデバッグでは非表示であるため、名前を付ける価値のある失敗クラスがもう 1 つあります。 クライアント側の JavaScript によって挿入されたタグ。 メタタグが水和後に React によって設定されている場合、ブラウザ インスペクタはそれらを完全に表示し、スクレーパーは JavaScript を実行しなかったため、スクレーパーは何も表示しません。 常にビューソースで確認するか、 curl、これは、サーバーが実際に返した生のHTMLを表示します - アプリが起動した後のDOMではありません。 401、ログインリダイレクト、または認証されていないリクエストにボットブロック403を返すページにも同じことが当てはまります:スクレーパーは、コンテンツではなく、エラーページを取得します。
よくある使用例
起動前の検証
コアケース。 ページが公開される前に、発送する予定のタグを貼り付け、すべてのカードがレンダリングすることを確認します。 これは、公式プラットフォームのデバッガーが実行できないことの 1 つです。ライブ URL を取得する必要があるからです。 ローンチ前のチェックには 30 秒かかり、打ち上げ日の再共有を保存します。
壊れたカードのデバッグ
リンクが間違っているので、その理由を知る必要があります。 ページの現在のタグを貼り付け、検証パネルを読み、通常は原因がすぐに発生します。相対的な画像パス、 http 画像、説明の 2 倍の限界、欠落している twitter:card。 修正、プラットフォーム デバッガーで再スクレイプ、完了。
サイトのメタデータを大規模に監査する
サイトをページごとに操作し、それぞれを貼り付けます <head> 判決を読むと、複数の貢献者プロジェクトで蓄積されるドリフトが浮かび上がる。1 ページに Twitter タグがあり、1 つのページには 300 文字、3 ページは同じ一般的なものを共有する og:image。 このツールは、ページごとの推測ではなく、簡単な一貫性チェックになります。
共有イメージのデザイン
選択または委託を行うとき og:image、プレビューは、トリミングが実際にどのようなものであるかを、正方形のカードと比較して、広いカードで表示します。 デザイナーは、1.91:1 の収穫によって解体される美しい正方形のグラフィックを日常的に引き渡します。出荷前に確認すると、その後の方が安くなります。
最も厳しい制約へのコピーの書き込み
プレビューは Facebook の横にある X の切り捨てを示しているため、抽象的な文字数の制限を目に見えるものに変えます。 110 文字で完全に読み取る説明を書くことは、入力したときに省略記号が表示されると、はるかに簡単に保持できる規律です。 ザ・ スラッグジェネレーター クリーン URL を作成する隣接するジョブをカバーします。 og:url を指す必要があります。
ステージングまたはログインの背後で作業中
内部ツール、NDA でのクライアント作業、および認証ウォールの背後にあるページはすべて、プラットフォーム デバッガーでは到達できません。 ツールはフェッチではなくタグから機能するため、パブリック ページと同じようにそれらを処理します。
プラットフォームの比較
現在最もよく知られているガイダンス プラットフォームはアナウンスなしでこれらの数値を変更し、切り捨て点は文字ではなくピクセルで測定されます - 幅の広い文字でいっぱいのタイトルは、狭い文字でいっぱいのタイトルよりも早くクリップされ、これらを仕様ではなく安全なターゲットとして扱います。
| プラットフォーム | おすすめの画像 | 割り合い | タイトルが表示されています | 説明が表示されています | 注意事項 |
|---|---|---|---|---|---|
| フェイス | 1200x630 | 1.91:1 | ~60文字 | ~155 文字 | 200x200 以上、中央作物の外の画像 |
| X / Twitter (大) | 1200x628 | ~1.91:1 | ~60文字 | ~110 文字 | 必要 twitter:card=summary_large_image |
| X / Twitter (要約) | 800x800 | 1:1 | ~50文字 | ~90 文字 | 最低 144x144 で、正方形の画像が必要です |
| リンクイン | 1200x627 | ~1.91:1 | ~100文字 | しばしば隠されている | 説明がカードから頻繁に削除される |
| たるい | 1200x630 | 1.91:1 | ~60文字 | ~140 文字 | コンパクトな添付ファイル、アンフォール キャッシュの有効期限は単独で |
| 不一致 | 1200x630 | 1.91:1 | ~60文字 | ~160 文字 | 説明を目立つようにレンダリングし、画像を小さく表示します |
テーブルからの要点は、1200x630 の画像、55 ～ 60 文字以下のタイトル、および 110 未満の説明で、プラットフォームごとのチューニングなしでどこでも正しくレンダリングできるカードを提供します。
フェイク
正しいオープン グラフ イメージ サイズは?
1200x630 ピクセルを使用する - 1.91:1 の比率 これは、大きな画像カードの場合、Facebook、LinkedIn、X、Slack、およびDiscordを同時に満たし、高密度ディスプレイでシャープな状態を維持するのに十分な大きさです ファイルを約5 MB未満に保ち、絶対URLでHTTPSで提供し、表面がわずかに異なる量でトリミングされるため、重要なテキストをエッジから遠ざけます コンパクトなXサマリーカードの場合は、代わりに少なくとも144x144の正方形の画像を提供します。
タグを修正した後も、リンク プレビューに古い画像が表示されるのはなぜですか?
なぜなら、プラットフォームは、通常約1 週間、その以前のスクレイプの結果をキャッシュしたからです. tagsを更新しても、そのキャッシュは無効になりません. platform' s debuggerを通じて強制的に新鮮なフェッチを行います - Facebook Sharing Debugger' s Scrape Againボタン、またはLinkedIn Post Inspector SlackとDiscordの場合、URLにクエリパラメータを追加すると、キャッシュされていないプレビューがすぐに生成され、これが修正を検証する最速の方法です。
OG: と Twitter: タグの両方が必要ですか?
Twitter に相当するものが見つからない場合、X がフォールバックしてグラフを開いて、完全なページが表示されます。 og: タグは、動作する X カードを生成します。 開いているグラフが表現できないのはカードのレイアウトなので、追加する必要があります twitter:card 大きなバナーとコンパクトな要約と、さらに、さらに、まとめを選択するには twitter:site あんど twitter:creator カードを属性化します。 これら 3 つのプラス完全オープン グラフ タグは、効率的な組み合わせです。
og:title と og:description はどのくらいの期間であるべきですか?
キープ og:title 約 60 文字以下。 のため og:description プラットフォームは分岐します。X はおよそ 110 文字を表示します。Facebook と LinkedIn は 155 から 200 に近いことを示します。 より狭い X 制限に書き込むということは、その説明がすべての場所で完全に読み取れることを意味します。 限界を超えたテキストは失われることはなく、省略記号の後ろに隠されているだけなので、重要な言葉を前にロードします。
プレビューが空白になっているのか、または URL のみが表示されているのはなぜ
一般的な原因、大まかな頻度の順序: og:image は絶対 URL ではなく相対パスです。画像はプレーンで提供されます http; タグは、 <head>; タグは、スクレーパーが実行しないクライアント側の JavaScript によって注入されます。または、ページは、非 200 ステータスまたはボットへのログイン リダイレクトを返します。 view-source または view-source で生の HT curl ブラウザのインスペクターではなく、インスペクターは JavaScript が実行された後に DOM を表示しますが、これはスクレーパーが見ているものではありません。
このツールは私の URL を取得してタグを読み取るのですか?
いいえ ネットワーク要求は全くしません 入力または貼り付けたタグから動作し ブラウザーですべてが解析され レンダリングされます ブラウザーは CORS のせいで 任意のサードパーティーページをフェッチできません サーバーサイドフェッチャーは 未公開のURLをどこか別の場所に 送ることになるでしょう トレードオフはタグを供給することです - そして利点は localhostやステージング上のページや ログイン裏のページが パブリックと全く同じように動作することです。
まだ公開されていないページをプレビューできますか?
はい、そしてそれがプラットフォームデバッガではなくこれを使用する主な理由です 公式デバッガはライブURLをフェッチする必要があるため、展開前に役に立たない ここでは、出荷する予定のタグ - テンプレート、フレームワークメタデータオブジェクト、またはローカルビルドから - を貼り付け、プレビューはすぐにレンダリングされます。
グラフ タグを開いていると、検索ランキングに役立ちますか?
直接ではありません。 それらはソーシャル プラットフォームやチャット プラットフォームで読み取られ、検索エンジンによるランキング ファクターとして使用されません。 それらが影響するのは、リンクのすべてのシェアのクリック率で、トラフィックと、重要なシグナルを誘導します。 それらは、SEO レバーとしてではなく、共有リンクの変換最適化と考えてください。 検索スニペットに影響を与えるタグについては、 メタ タグ ジェネレーター。
