BlogBooth トップページ Updated: 2025.08.232025.08.23

28個の厳選ツール ・ MITライセンス ・ ブログ・サイト制作のための支援ツール集

OGP / Twitterカード
プレビュー生成ツール

URL・タイトル・説明・画像を入れるだけで、SNS上の表示を即時プレビュー。最適なmetaタグもワンクリックで生成できます。

ドキュメント ツール一覧を見る

※このプレビューはサンプル値で表示されています。本番利用時はページURL・タイトル・説明・画像URLを実際のページ情報に置き換えてください。

推奨: タイトル30〜60全角 / 説明70〜120全角 / 画像 1200×630（1.91:1）

プレビュー

X（Twitter）
Facebook / LINE

生成された meta タグ

※ローカル画像は不可。公開URLの画像を指定してください。

OGP/Twitterカードプレビュー生成ツールとは？

このツールは、ページURL・タイトル・説明文・画像URLを入力するだけで、X（Twitter）やFacebook、LINEなどSNS上でのOGP/Twitterカードの表示を即時にプレビューできるWebツールです。表示を確認しながら、最適なmetaタグをワンクリックで生成できるため、ブログやWebサイトのSNSシェア最適化に役立ちます。

主な用途

  • 記事や商品ページのOGP設定が正しく効いているかを事前に確認したいとき
  • X（Twitter）とFacebook／LINEで、タイトル・説明文・画像の見え方を比較したいとき
  • SEOのmeta descriptionとSNS用説明文を、全角文字数を見ながらバランスよく整えたいとき
  • コピペで使えるOGP/Twitterカード用metaタグを素早く作りたいとき

使い方

  1. ページ情報を入力：URL、サイト名、タイトル、説明文、画像URL、Twitterカード種別をフォームに入力します。
  2. 文字数・画像サイズを確認：タイトルと説明文は全角換算のカウンターが表示され、画像はサイズと縦横比が自動チェックされます。
  3. プレビューを確認：「プレビュー更新」ボタンを押すと、X（Twitter）とFacebook/LINEのカード表示を模したプレビューが更新されます。
  4. metaタグをコピー：問題なければ「metaタグをコピー」ボタンから、生成されたタグをそのままHTMLの<head>内に貼り付けて利用できます。

文字数と画像サイズの目安

このツールでは、一般的に推奨される以下の目安に合わせてカウンターとバッジ表示を行っています。

  • タイトル：全角換算 30〜60文字程度（PC/SPともに収まりやすい長さ）
  • 説明文：全角換算 70〜120文字程度（要点が伝わりつつ、長すぎない範囲）
  • 画像サイズ：1200×630px 前後（比率 1.91:1）を推奨

文字数や画像サイズが目安から外れると、バッジ色で「短め」「長め」「比率注意」などが表示されるため、調整の判断材料として利用できます。

よくあるつまずきポイントと対策

  • http画像を指定している：ブラウザやSNS側でブロックされるため、必ずhttpsの画像URLを指定してください。
  • ローカルファイルを使いたい：ローカルパス（C:¥…）や未公開URLはプレビューできません。検証用でも一度サーバーにアップロードしてから利用するのがおすすめです。
  • タイトルとdescriptionがほぼ同じ：検索結果やSNS上で冗長に見えるため、タイトル＝結論、説明文＝補足・ベネフィットという役割分担を意識するとクリック率改善につながります。
  • 画像の縦横比がバラバラ：縦長すぎる画像は上下がトリミングされます。カード用OGP画像は、見出しテキストを含めた専用デザインにすると安定します。

テストと検証におすすめの外部ツール

本ツールでひととおり整えたあと、以下の公式ツールで最終確認すると安心です。

関連ツール