WebサイトをSNSでシェアした際に表示される「OGP（Open Graph Protocol）」。画像が途切れていたり、古いタイトルのままだったりすると、せっかくのシェアもクリック率が下がってしまいます。

今回、URLを入力するだけで「SNSでの見え方」を瞬時にプレビューし、設定漏れや改善点をチェックできる実用ツールを公開しました。自分のブログや開発中のサイトの最終確認にぜひ活用してください。

このツールでできること

  • SNSシェア時のカードをリアルタイム表示
  • og:title / description などのメタタグ抽出
  • 画像サイズや設定漏れの自動チェック

OGP画像チェッカー

URLを入力して、OGP情報を確認できます。

このツールで確認できる項目

📱
SNSプレビュー

TwitterやFacebookでのカード表示を再現。見た目の違和感をチェック。

🔍
メタタグ詳細

og:titleやog:descriptionの生データを抽出。設定が反映されているか確認。

💡
改善ヒント

画像の有無やサイズ、絶対パスの指定など、SEOに役立つアドバイスを表示。

OGPチェッカーの使い方

以下の手順で簡単にウェブページのOGP情報を検査できます。

  1. URLの入力: 調査したいページのURLを正確に入力してください。
  2. 解析の実行: 「OGP情報を確認する」ボタンをクリックします。
  3. 表示の確認: SNSプレビューで画像やタイトルの見え方を、メタ情報詳細で実際のタグ内容を確認します。
  4. 改善の検討: 警告やアドバイスが表示された場合は、内容に合わせてOGP設定を見直しましょう。

※本ツールは取得時点のHTMLを解析します。SNS側のキャッシュ状況により、実際の表示と異なる場合があります。

OGP設定を改善するためのヒント

OGP（Open Graph Protocol）を適切に設定することで、SNSからの流入を最大化できます。以下のポイントをチェックしてみてください。

  • 画像サイズ: 1200 x 630 px（比率 1.91:1）を推奨します。多くのSNSで綺麗に表示されるサイズです。
  • タイトルの文言: ページの主題がひと目で伝わるように、30文字程度にまとめましょう。
  • 簡潔な説明文: og:description はSNSで読まれることを前提に、内容を凝縮して記述します。
  • 絶対URLの指定: og:image 等のパスは、必ず https://... から始まる絶対URLで指定してください。
  • キャッシュの更新: 設定変更後はSNS各社が提供するデバッガーを使用して、最新情報に更新（キャッシュクリア）してください。

※本ツールで確認できるのはメタ情報そのものです。SNS側の最終的なレイアウトは各プラットフォームの仕様に依存します。