Open Graph プレビュー

Open Graph プレビューツールは、共有リンクを公開する前に、そのリンクがどのようなものになるかを示します。 og:title、og:description、og:image、og:url、Twitterカードのフィールドを入力します - または、すでに持っているメタタグのブロックを貼り付けます - そしてツールは、Facebook、X/Twitter、LinkedIn、Slack、Discordのおおよそのソーシャルカードを並べてレンダリングします。ページをライブでプッシュして共有し、タイトルが半分にカットされているか、画像がロードされないことを発見する代わりに、まだ修正できるうちに問題を確認します。

Open Graph プロトコルは、ほぼすべてのプラットフォームがそれらのカードを構築するために使用する共有語彙です。スクレーパーがあなたのページにアクセスし、<head> の og: メタタグを読み取り、そこからプレビューを組み立てます。キャッチは、各プラットフォームが同じタグを異なる方法でレンダリングすることです。X は説明をおよそ 110 文字で切り捨てますが、Facebook は 155 文字近くを表示します。LinkedIn は説明を一部の表面に完全に隠し、Slack はすべてをコンパクトな添付ファイルに折りたたみます。あるカードでは問題なく見えるフィールドが別のカードでめちゃくちゃにできるためです。

ここに実数を含むオープングラフプレビューがあります。 og:title を "How We Cut Our Page Load Time in Half Without a Rewrite" (55 文字、パス) に設定し、125 文字の og:description を与えます。 validation はタイトルを渡して説明に警告します: Facebook と LinkedIn では問題ありませんが、X は約 110 を切り捨てます。 X の大きな画像カードは「4.1 秒から...」の後にテキストをカットしますが、Facebook カードは文全体を表示します。 open グラフ画像プレビューは og:image を各カードにロードするため、壊れたリンクでは、誰かが共有する前に「画像が読み込まれませんでした」と表示されます。

このツールはクライアント側で実行され、ページをフェッチしたりスクレープしたりすることはありません。フォームに入力したり、生の HTML として貼り付けたりしてローカルで解析したりして、渡したタグから機能します。つまり、ログインの背後にあるページ、ステージング ドメイン上にあるページ、またはまったくデプロイされていないページのメタデータを検証できます。サーバーに対して行う要求の 1 つは、og:image URL をロードすることなので、ブラウザはカードに画像を表示できます。