Open Graph プレビュー

タイトル、説明、URL、画像を先に整えて、SNSやメッセージアプリで共有されたときの見え方を公開前に確認できます。

Open Graph 項目

左側で metadata を編集すると、右側のカードプレビューとコピー用 meta タグがすぐに更新されます。

短く具体的に保つのがおすすめです。多くのプラットフォームでは 60〜90 文字前後で省略され始めます。
長い一文に多くを詰め込むより、要点を一つに絞った説明の方が伝わりやすくなります。
完全な URL でもドメインだけでも入力できます。出力前に正規化されます。

生成された Meta タグ

確認後、そのままページの head や CMS の SEO 入力欄へ貼り付けられます。

ライブプレビュー

横長カードとコンパクトカードの両方を見て、異なる共有状況での読みやすさを確認できます。

タイトル文字数 0
説明文字数 0
画像状態
  1. 公開予定のタイトル、説明、サイト名、canonical URL、画像 URL を入力します。
  2. 大きいカードとコンパクトカードの両方を見て、同じ metadata が異なる共有状況でも読みやすいか確認します。
  3. 文字数カウンターでタイトルや説明が長すぎないかを確認し、SNS やメッセージアプリでの早すぎる省略を防ぎます。
  4. まだ方向性を固めていない場合は、まずサンプルを適用してから自分の文案に差し替えていくと効率的です。
  5. 見え方が整ったら、生成された meta タグをコピーして、ページ head や CMS の SEO 欄へ貼り付けます。

ヒント: このツールは一般的なカード形式を再現しますが、最終的な切り抜き、キャッシュ、文字省略は各プラットフォームに依存します。公開前 QA の一工程として使うのが適切です。

どんな時にこのツールを使いますか?

LP、記事、商品ページ、キャンペーン URL などを公開する前に、Open Graph の情報が共有時に読みやすく魅力的に見えるか確認したいときに役立ちます。

公開済みページの metadata を自動取得しますか?

いいえ。この版はクライアントサイド専用です。実際のページがまだ存在しなくても、試したい値を入力して事前に共有カードを確認できます。

最終的な共有カードが少し違って見えるのはなぜですか?

各プラットフォームには独自のキャッシュ、画像トリミング、文字省略ルールがあります。このツールは大きな可読性の問題を見つけるのに向いていますが、最終表示はプラットフォーム側で決まります。

og:title とページ title は同じである必要がありますか?

必ずしも同じである必要はありません。SEO 向けのページ title を維持しつつ、共有向けにはより短く伝わりやすい og:title を別に用意するケースも一般的です。

og:image:alt は入れた方がいいですか?

可能なら入れるのがおすすめです。アクセシビリティ面だけでなく、記事やキャンペーン素材の metadata 管理を丁寧に行う習慣にもつながります。

どんなページ種類に向いていますか?

記事、商品ページ、キャンペーンページ、ブランド紹介ページ、プロフィールページに向いています。コンテンツ種別を切り替えることで対応する Open Graph タグを生成できます。

QRコード 短縮URL リンク共有
2026-04-08

QRコード × 短縮URL:生徒がツールに瞬時につながる2つの方法

タイマー、ルーレット、スコアボードはすべて準備完了——でも生徒はどうやって自分のデバイスからアクセスするの?QRコード生成ツールと短縮URLを使えば、クラス全員が30秒以内に指定ページへアクセスできます。長いURLを入力する必要はありません。

画像編集 SNS運用 コンテンツ制作
2026-03-25

SNS投稿の画像編集フロー:サイズ設計・ビジュアル統一・書き出し設定

SNS用クリエイティブの品質は、アイデアだけでなく制作フローで決まります。サイズ、構図、ブランド統一、書き出し設定まで、再現性のある画像編集手順を解説します。

画像フォーマット JPG PNG
2026-04-14

画像フォーマットの選び方:JPG・PNG・WebP・GIF の違いと使い分け完全ガイド

なぜ PNG はJPGより何倍も大きくなるのか?WebP はいつ使うべきか?GIF はもう古いのか?圧縮の仕組みから解説し、状況別に最適なフォーマットを選ぶ判断軸を整理します。

Emoji デジタルコミュニケーション クロスプラットフォーム
2026-03-17

Emoji 完全ガイド:意味・マナー・クロスプラットフォーム運用

Emoji は単なる飾りではなく、現代テキストコミュニケーションのトーンを調整する手段です。意味のずれ、ビジネスマナー、運用ルール、表示差異まで実践的に解説します。

PDF 文書整理 PDF結合
2026-04-14

PDF の結合・分割・圧縮ガイド:日常の文書整理を完全攻略

大きな PDF から必要なページだけ取り出したい、複数のレポートを1つにまとめたい、ファイルが大きすぎてアップロードできない――よくある PDF の悩みを、インストール不要で解決する方法を解説します。

短縮URL リンク共有 マーケティング
2026-03-29

URL が長すぎるときは?無料の短縮ツールと実践ポイント

長い URL は見づらく、共有時に改行や欠けが起きやすくなります。この記事では無料で使える短縮ツールの選び方と、安全に運用するためのコツをまとめます。

他のツールもどうぞ