リンクプレビュー確認ツール投稿する前に、カードを見ておく。
URLを貼り付けるだけで、Facebook、X、LinkedIn、WhatsApp、Discord、Slack、Telegram、iMessageがそれぞれどうシェアカードを表示するかを、ライトとダークの両方で確認できます。足りないものの一覧と、修正用にそのまま貼れるタグも付いてきます。
ブラウザは他人のサイトを代わりに読み込めないため、URLの取得はこちらのサーバーが行います。記録も保存もせず、第三者に渡すこともありません。
URLを貼り付けると、シェアカードが表示されます
Facebook、X、LinkedIn、WhatsApp、Discord、Slack、Telegram、iMessageがそれぞれどう表示するかに加えて、足りないものの一覧も出ます。
リンクのプレビューに違う画像が出るのはなぜ？
原因はほぼ次の5つのどれかです。このOGPチェッカーは、すでにog:imageがあるのに「og:imageを追加してください」と言う代わりに、どれが原因かを名指しします。
og:imageが複数ある
テーマが1つ入れ、プラグインがもう1つ入れる。そして各プラットフォームは、headの中で最初に見つけたものを採用することが圧倒的に多いです。あなたが期待した画像はたいてい後ろにあります。上のタグ表は候補をすべて並べ、実際に採用されるものに印を付けます。
画像が相対パスになっている
og:image="/img/card.png" はクローラーが取得できるURLではありません。絶対URLである必要があり、しかも入力したアドレスではなくリダイレクト後の最終アドレスから解決できなければいけません。サイトがwwwへリダイレクトしていると、ローカルでは動くパスが本番では何も指さないことがあります。
画像が直リンク対策で守られている
あなたのブラウザではセッションと正しいrefererがあるので普通に開きます。クローラーにはどちらもなく、403が返り、カードは画像なしに落ちます。このツールは他人と同じ条件で画像を読み込むので、投稿後ではなくここで失敗が見えます。
プラットフォームがまだキャッシュを見ている
1時間前にタグを直したのに、古い画像がまだ出ている。プレビューのキャッシュはプラットフォームごとに独立していて、数週間保持されることもあります。自分の側で何を変えても消えないので、そのプラットフォームのツールでURLを取得し直させる必要があります。
そもそもページにタグがなかった
サイトがクライアント側で描画される場合、タグは検証ツールの中にはあってもサーバーが返したHTMLにはありません。JavaScriptの実行を待つクローラーはいません。モダンな構成でいちばん多い原因であり、いちばん信じてもらえない原因でもあります。
OGPタグは、結局どれが必要なのか
カードを成り立たせるのは4つだけ。残りは仕上げであり、20個すべてを同じ緊急度で並べるメタタグ診断は役に立ちません。
og:title と og:description
見出しと、その下の2行です。og:titleがないとプラットフォームは<title>にフォールバックしますが、これは検索結果向けに書かれていることが多く、カードの見出しとしては読みにくくなります。説明がなければ、カードの本文はただの空欄です。
og:image、絶対URLで幅1200px以上
Facebookは下限を200x200、推奨を1200x630と示しています。LinkedInは1200x627を示し、幅401px未満の画像はバナーではなく小さなサムネイルとして表示されるとしています。1200x630の画像を1枚用意すれば、すべてを同時に満たせます。
twitter:card
Xがあなたに本当に求めている唯一のタグです。summary_large_imageにしておけば、あとはOGPタグが引き受けます。twitter:の各項目がない場合、Xはog:title、og:description、og:imageを読むので、重複して書く必要はありません。
og:url と、体裁を整えるだけのもの
og:urlは、計測パラメータ違いで共有された同じページが別ページとして数えられるのを防ぎます。og:image:widthとheightは、画像が届く前にカードのレイアウトを決めさせます。og:type、og:site_name、og:locale、og:image:altは仕上げです。
OGPがあれば、Twitter用のタグは要らない？
ほとんどの場合は要りません。重複したマークアップの多くはここから生まれます。ブログで見た15行のスニペットを丸ごとコピーする前に、2点だけ押さえておきましょう。
XはOGPに自動でフォールバックする
twitter:title、twitter:description、twitter:imageがなければ、Xは代わりにog:title、og:description、og:imageを読みます。つまり本当に追加が必要なのはtwitter:cardだけで、これが小さな正方形のsummaryを描くか、大きなバナーを描くかを決めます。残りを足す意味があるのは、Xだけ他と違う内容を出したいときだけです。
property= と name=、どちらも動く理由
OGPの仕様はタグをproperty=に置き、Xのカード仕様は自分のタグをname=に置きます。実際には両方のプラットフォームが両方を読むため、片方の書き方しか照合しないチェッカーは、あなたのタグの半分を「なし」と報告します。このツールは両方を解析し、どちらの書き方を使ったかをエラーではなく情報として伝えます。
プレビューが古い画像のままなのはなぜ？
プラットフォームがあなたのページを見ていないからです。見ているのは、誰かが最初にそのリンクを共有したときに取ったコピーで、見直す理由ができるまでずっとそれを使い続けます。
キャッシュはプラットフォームごとに別
タグを直しても誰にも通知されません。Facebook、LinkedIn、Xはそれぞれ自分のコピーを持つので、あるところでは正しく、同時に別の2か所では古いまま、ということが起きます。
公式ツールで取得し直させる
Facebook Sharing Debugger、X Card Validator、LinkedIn Post Inspectorには、いずれも取得をやり直させるボタンがあります。確実に消せる方法はこれだけで、しかも即座に反映されます。
メッセージアプリはほぼキャッシュしない
WhatsApp、Telegram、Discord、Slackは新しいメッセージごとに取得し直すのが一般的なので、誰かを待たずに修正を確認するいちばん速い手段になります。
新しいURLが最後の逃げ道
どうしても更新されないなら、そのプラットフォームがまだ見ていないURLを共有すればキャッシュを丸ごと回避できます。パラメータを1つ足すだけで足りることがほとんどです。
短縮リンクの本当の行き先が分からないときは？ QRコードリゾルバーで展開する
タグを直したあと、共有用のきれいなリンクが必要なら？ 無料のリンク短縮ツールで作る
プレビューは簡単な半分。クリックの先で何が起きたかを知るのが、もう半分です。
良いカードはクリックを取ってきます。その先で、素のURLは何も教えてくれません。訪問がどこから来たのかも、どのプラットフォームが実際に効いたのかも分からず、投稿後に行き先を変えることもできません。LinkScaleがあるのは、その空白のためです。
どこが効いたのかが分かる
流入元、国、デバイス別のクリック数で、働いたのがLinkedInの投稿かニュースレターかが分かります。
行き先を後から変えられる
すでに投稿されたリンクの飛び先を、誰にも共有し直してもらわずに差し替えられます。
カードはそのまま
LinkScaleのリンクは自前のシェアタグを持つので、短縮しても直したばかりのプレビューを失いません。
リンクプレビューのよくある質問
無料で、アカウントも不要、実用上気になる利用制限もありません。ブラウザは他人のサイトを代わりに読み込めないため、URLの取得はこちらのサーバーが行いますが、そのエンドポイントがすることはページを取得し、タグを抜き出し、返すことだけです。記録もせず、データベースにも書かず、第三者にも渡しません。自分の端末から何も出したくない場合は、HTMLを貼り付けるモードを使えば解析はすべてブラウザ内で完結します。
カードは直った。次は、そのクリックの価値を知る番です。
LinkScaleは、どのクリックがどこから来たのかを見せ、投稿したあとでもリンクの行き先を変えられるようにします。
Free 14-day trial on every plan