2026-06-14
SNSシェア時の見た目を確認｜OGPプレビュー
ブログのリンクをSNSに貼ったときの見た目を、公開前に確かめたいなら、OGPプレビューが便利です。HTMLを貼るだけでX・Facebook・LINEのカード表示を並べて確認できます。
この記事の要点
- HTMLを貼るだけでSNSの見た目を再現する
- X・Facebook・LINEのカードを並べて確認できる
- 公開前やログインが要るページでも確かめられる
- 足りないOGPタグを一覧と印で教えてくれる
- HTMLはブラウザ内で解析し外部に送らない
ブログのリンクをSNSに貼ったとき、タイトルや画像がどう出るか気になる。 そんなときは、HTMLを貼るだけで見た目を再現するOGPプレビューを使います。
X・Facebook・LINEのカード表示を、その場で並べて確認できます。 公開してから「画像が出ない」と気づく失敗を、前もって防げます。
ページを公開する必要はありません。 ソースを貼るだけなので、下書きの段階でも確かめられます。
「リンクの見た目、出してみないと分からない」あるある3つ
SNSでの表示は、貼ってみるまで分かりにくいものです。
- 公開後にシェアしたら、画像が出ずに文字だけになっていた
- タイトルが途中で切れて、伝えたい言葉が隠れてしまった
- 設定したつもりのタグが抜けていて、後から貼り直すはめになった
確認のたびに公開・シェアを繰り返すのは、手間も時間もかかります。
OGPプレビューの使い方
確認したいページのHTMLを用意し、貼り付けるだけです。 あとはプラットフォームを切り替えながら見比べます。
1. ページのHTMLを貼り付ける
確認したいページで「ページのソースを表示」を開き、全体をコピーします。 それを入力欄に貼り付けます。
ページ全体でなくても、<head>内のメタタグだけでも確認できます。
2. 解析してカードを確認する
「OGPを解析する」を押すと、SNSでの見た目が再現されます。 タイトル・説明・画像が、実際のカードに近い形で並びます。
下のタグ一覧では、各項目が設定済みか一目で分かります。 チェックマークと注意マークで、過不足を見分けられます。
3. プラットフォームを切り替える
タブでX・Facebook・LINEを切り替えると、それぞれの見え方を確認できます。 同じページでも、サービスによって画像の比率や情報量が変わります。
足りないタグを見つけたいとき
OGPタグが不足していると、解析結果が知らせてくれます。 どのタグが抜けているかが一覧に並び、補う目安になります。
提案されたタグをページの<head>に足せば、表示が安定します。
貼ってから直すより、公開前にそろえておくほうが確実です。
こんな場面で使える
OGPの事前確認は、リンクを広める多くの場面で役立ちます。
- ブログ公開前: 記事を出す前に、シェア時の画像とタイトルを確かめる
- キャンペーン告知: 拡散してほしい投稿のカードを、見栄え良く整える
- 社内ステージング: 外部に出ていないページの見た目を、URLなしで確認する
- デザイン調整: タイトルの長さや画像比率を変えて、見え方を比べる
使用例
たとえば、キャンペーンページを公開する前の担当者の場合。 完成したHTMLを貼り、X・Facebook・LINEの順に表示を見比べます。
タイトルが切れていないか、画像が想定どおり出るかを確かめてから公開します。
安心して使えるポイント
貼り付けたHTMLは、すべてブラウザの中だけで解析されます。 未公開ページのソースを扱うときも、外部に送られる心配がありません。
🔒 入力したHTMLはサーバーへ送信されません。解析はブラウザ内で完結します。
関連ツール
サイト運営の作業には、こちらも合わせてどうぞ。
- 文字画像メーカー — シェア用の文字画像を手早く作る
- 画像リサイズ — OGP画像を推奨サイズに整える
- URLエンコード・デコード — シェアURLのパラメータを確認する
まとめ
OGPプレビューなら、HTMLを貼るだけで、SNSでのリンクの見た目を公開前に確かめられます。 画像やタイトルの抜けに気づけるので、貼り直しの手間が減ります。
タグの過不足も一覧で分かるため、整えてから自信を持って公開できます。
補足: 開発者の方へ
このツールはHTML文字列をDOMParserで解析し、og:系とtwitter:系の<meta>を抽出します。
URL取得型のチェッカーと違い、ステージングやBASIC認証下のページでも、ソースさえ手元にあれば確認できます。
twitter:cardにはsummary_large_imageとsummaryがあります。どちらを指定したかで、カードの画像比率が変わる点も再現します。