リンクプレビュー確認ツール

リンクを貼ったときに起きること

投稿やチャットにアドレスを貼った瞬間、そのサービスのサーバーがページを要求します。表示はしません。HTMLの最初の部分を読んで、いくつかの <meta> タグを探し、その一つが指す画像をダウンロードして、それらの部品からカードを組み立てます。そしてカードを保存し、そのリンクを見る人は全員、保存された版を目にします。

これらのタグはOpen Graph（OGP）という規約に従っています。2010年にFacebookが導入し、今ではほぼすべてのSNSやメッセージアプリが読んでいます。どれも og: で始まります。Xも同じタグを読み、レイアウトを選ぶための独自タグ twitter:card を加えています。

タグを影響の大きい順に

og:image

画像です。リンクが目に留まるかどうかを、何よりもこれが決めます。アドレスは https:// で始まる絶対URLでなければなりません。

og:title

カードの見出しです。ないと、サービスは <title> タグを代わりに使います。こちらは、繰り返したくないサイト名で終わっていることがよくあります。

og:description

見出しの下に出る1〜2文です。ないとmeta descriptionが使われ、それもなければサービスが勝手に選んだ一節になります。

twitter:card

summary_large_image にすると、Xは画像を横幅いっぱいに表示します。ないと、テキストの横に小さな正方形が出るだけです。

og:url

いいねやシェアが集計されるアドレスです。ページのcanonical URLと同じにしてください。

og:site_name、og:type、og:locale、og:image:alt

補助的な情報です。SlackやDiscordで見出しの上に出るラベル、コンテンツの種類、言語、そしてスクリーンリーダーの利用者向けの画像の説明です。

画像の判定基準

当サーバーは og:image（それしかない場合は twitter:image）に書かれたファイルをダウンロードし、次の基準で測ります。

どこでも通用するレシピがほしいなら、1200 × 630ピクセル、300 KB未満のJPEGかWebPを一枚作り、文字は端から離して置いてください。チェックでは、タイトルや説明文がないこと、60文字を超える <title>、200文字を超える説明文、canonicalリンクと食い違う og:url も指摘します。

結果に描かれる6枚のカードは、あなたのタグから再現したものです。画像はブラウザが当サーバーから縮小版として読み込むので、テスト対象のサイトにあなたの訪問は伝わりません。

タグの追加と古いカードの更新

結果の最後に、見つかった内容をもとに埋めたブロックがあります。<head> の中に入れてください。

<meta property="og:title" content="How we made our builds twice as fast">
<meta property="og:description" content="Three changes to our pipeline, with the numbers before and after.">
<meta property="og:image" content="https://www.example.com/img/build-time-card.jpg">
<meta property="og:url" content="https://www.example.com/blog/build-time/">
<meta name="twitter:card" content="summary_large_image">

属性に注意してください。Open Graphのタグは property= を、Xのタグは name= を使います。CMSなら、これを手で書くことはまずありません。WordPressのSEOプラグイン、Shopifyのテーマ、Squarespace、Webflowには、どれもページごとの「SNS用画像」欄とサイト全体の既定値があります。

覚えておきたい制限が2つあります。レイアウトは変わるので、図が示すのはどの部品が出るかであって、正確なピクセルではありません。また、このチェックはスクリプトを実行せずにHTMLを読みます。これはプレビュー取得ボットと同じ動き方です。JavaScriptで挿入されるタグはここに出てきませんし、SNSでも出てきません。