このツールについて
メタタグプレビューツールは、ページの <head> を解析し、検索エンジンやソーシャルプラットフォームがそのページをどのように表示するかを再現します。タイトル、メタ説明文、canonical リンク、favicon、viewport、そして Open Graph（og:）タグと Twitter（twitter:）タグを読み取り、実際のプラットフォームが用いるのと同じフォールバックの連鎖を適用します。Open Graph は基本のタイトルと説明文にフォールバックし、Twitter は Open Graph にフォールバックします。そのため、プレビューは入力した内容そのものではなく、ユーザーが実際に目にするものを反映します。
リンク共有を密かに壊してしまう小さなミスを見つけるのに役立ちます。たとえば、Google で約 60 文字を超えて切り詰められるタイトル、Facebook のカードを空白にしてしまう og:image の欠落、スクレイパーが取得する際に失敗する相対パスの og:image、誤ったレイアウトにデフォルトしてしまう twitter:card の欠落などです。head のマークアップを貼り付けて、Google、Facebook/LinkedIn、X のカードを並べて確認し、URL を公開または共有する前に監査チェックリストを順に確認しましょう。
すべては組み込みの DOMParser を使ってブラウザ内で解析されます。マークアップや URL は一切アップロードされず、リモート画像は正確なプレビューのためにそのソースから直接読み込まれます。
よくある質問
タイトルとメタ説明文の理想的な長さはどれくらいですか？
タイトルは 50〜60 文字、メタ説明文は 140〜160 文字を目安にしてください。これらの上限を超えると、Google は検索結果で省略記号を付けてテキストを切り詰めるため、メッセージの末尾が切れてしまうことがあります。
リンクを共有しても og:image が表示されないのはなぜですか？
最も多い原因は /og.png のような相対パスです。Facebook、LinkedIn、X はサイトの外部から画像を取得するため、og:image は絶対 https:// URL でなければなりません。このツールは監査で相対的な、または欠落した og:image の値を指摘します。
twitter:card の summary と summary_large_image の違いは何ですか？
summary はテキストの左側に小さな正方形のサムネイルを表示し、summary_large_image はカードの上部に大きな画像を表示します。twitter:card が欠落しているか認識できない場合、X はより小さい summary レイアウトにフォールバックします。