OGPチェック・プレビューツールとは？
OGPチェックツールとは、Webページを Facebook・X（Twitter）・LINE などのSNSでシェアしたときに表示される「カード」（OGP：Open Graph Protocol）の見え方を、事前に確認できるツールです。タイトル・説明・画像が意図どおりに表示されるか、公開前に点検できます。
OGPチェックツールの使い方
- HTMLを貼り付ける対象ページを開いて「ページのソースを表示」でHTMLをコピーし、「HTMLを貼り付け」タブに貼り付けると、OGP・Twitterカードのタグを自動で読み取ってプレビューします。
- または手入力で試す「手入力で確認」タブで、タイトル・説明・画像URLを直接入力すると、公開前のデザイン案の見え方をシミュレーションできます。
- 各SNSの表示を比較するFacebook・X・LINE・Discord・はてなブックマークでのカード表示を並べて確認し、不足しているタグの警告もチェックできます。
URLから確認する仕組み
ブラウザのJavaScriptは、セキュリティ上の制限（CORS）により他サイトのHTMLを直接取得できません。そのため「URLから確認」では、当サイトのサーバーが対象ページを取得してOGP情報を解析します。サーバーがアクセスするのは入力されたURLのみで、内部ネットワークへのアクセスは遮断しています。取得を拒否するサイトや、ログインが必要なページは取得できないことがあります。その場合は「HTMLを貼り付け」や「手入力で確認」をご利用ください（こちらはブラウザ内で完結します）。
OGPの推奨設定
基本のタグは og:title・og:description・og:image・og:url・og:type です。画像（og:image）は絶対URLで指定し、サイズは 1200×630px（比率およそ1.91:1）が推奨されます。Xで大きな画像を出すには twitter:card に summary_large_image を指定します。
こんな場面で使えます
記事公開前の表示確認
ブログ記事のシェアカードが意図どおりか、公開前に点検できます。
OGP画像・文言のデザイン検証
手入力モードで、未公開の画像・タイトルの見え方を試作段階で比較できます。
リニューアル後のOGP点検
サイト改修後にOGP設定が崩れていないかを確認できます。
よくある質問
og:image が表示されないのはなぜですか？
画像が相対パスで指定されていると、SNS側で表示されないことがあります。絶対URL（https://〜）で指定してください。また実際のSNSではキャッシュの影響で反映に時間がかかる場合があります。
入力した内容はサーバーに送信されますか？
「HTMLを貼り付け」「手入力で確認」はすべてブラウザ内で処理され、外部に送信されません。「URLから確認」のみ、対象ページを取得するために当サイトのサーバーが入力されたURLへアクセスします（取得したデータは解析のため一時的に処理するだけで、保存や第三者への送信は行いません）。
プレビューは実際のSNS表示と完全に同じですか？
各SNSの仕様に近づけた再現表示です。実際の表示は各サービスのアップデートやキャッシュにより多少異なる場合があります。最終確認は各SNSの公式デバッガーもご利用ください。