URLやタイトルを入力するだけで、SNSでのOGP表示を事前にシミュレーションできます。 Web担当者・ブロガー・開発者に最適です。
domain.com
タイトルがここに表示されます
説明文がここに表示されます。
プレビューはイメージです。実際の表示確認には各SNS公式デバッグツールをご利用ください。
メタタグ（OGP）ジェネレーターとは？
本ツールは、WebサイトのSEO（検索エンジン最適化）とSNSシェア時の見え方を最適化するためのHTMLタグを即座に生成するツールです。 URLやタイトルを入力するだけで、X（旧Twitter）やFacebookでシェアされた際の「カード表示」をリアルタイムでシミュレーションできます。 「メタタグの書き方がわからない」「SNSで画像が表示されない」といった問題を解決し、クリック率（CTR）を最大化させるための必須ツールです。
こんなシーンで便利です
新規記事・LP公開時の表示テスト
公開前にSNSでの見え方をチェック。アイキャッチ画像が切れていないか、説明文が途切れていないかを事前にシミュレーションできます。
SNSからの流入数（CTR）改善
クリックされやすいタイトルや画像の組み合わせを検討。X（Twitter）カードの「Large Image」表示にも対応しています。
メタタグの実装ミス防止
「og:image」や「twitter:card」など、複雑なタグの記述ミスをゼロに。生成されたコードを headタグ内にコピペするだけで完了です。
クライアントへの表示案提示
Webディレクターや制作会社が、納品前に「SNSではこのように表示されます」というイメージを共有する際のデモとして活用できます。
使い方は簡単 3ステップ
- 「基本情報入力」欄にタイトル、説明文、画像URLを入力します。
- 「プレビュー」タブでFacebookやXでの見え方を切り替えて確認します。
- 「HTML」タブに切り替え、生成されたメタタグをコピーしてサイトの head 内に貼り付けます。
※画像の推奨サイズは 1200 x 630 ピクセル（1.91:1）です。
ご利用時の注意点
- キャッシュの影響：タグを設置した直後に表示が変わらない場合は、SNS公式デバッグツールでキャッシュを更新してください。
- 相対パスに注意：画像URLは必ず「https://」から始まる絶対パスで入力してください。
- 文字数の制限：X（Twitter）ではタイトルが約70文字、説明文が約200文字程度で省略される傾向にあります。
SNS別 OGP画像サイズ・表示文字数一覧
各SNSでカードが最適に表示される推奨サイズと、省略されない文字数の目安です。
| SNS / プラットフォーム | 推奨画像サイズ | タイトルの文字数 | 説明文の文字数 |
|---|---|---|---|
| X (Twitter) | 1200 × 630 px | 約70文字 | 約200文字 |
| 1200 × 630 px | 約60文字 | なし（タイトル優先） | |
| LINE | 1200 × 630 px | 約40文字 | 約60文字 |
| はてなブックマーク | 1200 × 630 px | 約100文字 | 約100文字 |
| Discord / Slack | 自由 (1.91:1推奨) | 制限なし | 数行程度 |
黄金比「1.91 : 1」の重要性
主要なSNSで共通して綺麗に表示されるサイズは 1200 × 630 px です。この比率を守ることで、Xの「Large Image」カードやFacebookのシェア時に画像が上下に切れるのを防ぐことができます。
更新が反映されない場合（キャッシュ）
タグを書き換えたのにSNSの表示が変わらない場合は、キャッシュクリアが必要です。Xは「Card Validator」、Facebookは「シェアデバッガー」を利用して、各社のサーバーに新しい情報を認識させてください。
※文字数は全角（日本語）での目安です。スマホアプリ版やデスクトップ版のアップデートにより、予告なく表示領域が変更される場合があります。
検索クローラーとクローリング制御を考慮したOGPメタタグのシステム最適化
静的なメタタグ作成にとどまらず、動的システムでの自動生成ロジック構築や、検索エンジンのクローラー負荷を低減しつつSNS波及効果を最大化するためのテクニックです。
動的WebサイトやSPAにおけるサーバーサイドレンダリングとメタタグの動的挿入
Next.jsのApp RouterやNuxtなどを用いたモダンなフロントエンド開発において、クライアントサイドのみでメタタグをレンダリングすると、SNSのクローラー（Twitterbotやfacebookexternalhit）がJavaScriptを実行できず、OGPの読み込みに失敗します。
これを防ぐには、Metadata APIを利用してサーバーサイド（SSR）でメタタグを完全にHTML内へインジェクションし、レスポンスの段階で100%メタデータがヘッド内にパースされている状態を担保する必要があります。
クローリング制限環境下におけるOGPインデックスとrobotsファイルの設定
ステージング環境や会員制ページにおいて、検索エンジンにはインデックスさせず（noindex）、特定のSNSシェア時のみOGPカードを有効化したい場合、robots.txtの記述に注意が必要です。
Googlebotをブロックしても各SNSの独自クローラーは別個のユーザーエージェントとして動くため、robots.txtでSNSクローラーのアクセス許可（Allow）を明示し、HTML側のメタタグにのみnoindexを付与することで、検索結果からの隠蔽とSNSプレビューの正常表示を両立できます。
構造化データとOGPメタタグの連携によるセマンティックウェブの構築
検索エンジンのアルゴリズムに対してページのエンティティを正確に伝えるためには、OGPメタタグの設定に加えて、同じヘッド内にJSON-LD形式の構造化データを併設するのが有効です。
og:titleやog:imageで記述した主要プロパティを、構造化データのArticleやWebPageエンティティの属性値と完全に同期させることで、セマンティックウェブとしての整合性が高まり、Googleによるコンテンツのトピック理解度向上に寄与します。
よくある失敗と対策
「og:image」の画像URLを相対パスで記述し、SNS側でアイキャッチ画像が全く表示されない
メタタグジェネレーターで作成した「og:image」の値を、CMSやサイト構築時に「/images/ogp.jpg」のような相対パスで記述してしまう失敗です。クローラーはSNSでシェアされた際にそのURLのドメインを特定できないため、プレビュー画像が表示されず、タイムライン上でテキストのみの地味な表示になってしまいます。
💡 対策・解決策を見る▼
X（旧Twitter）カードのタグ「twitter:card」を設定し忘れ、大画面表示（Large Image）にならない
Facebook共通の「ogpタグ」だけを設置し、X（Twitter）専用のメタプロパティである「twitter:card」を省略してしまうケースです。このタグが不足していると、X上でシェアされた際に画像が左側に小さくサムネイル表示されるだけになり、タイムライン占有率が下がってCTR（クリック率）が大幅に低下します。
💡 対策・解決策を見る▼
OGPの「og:title」や「og:description」を、通常のSEOメタタグ（title・description）と完全に重複させる
検索エンジン向けに記述したキーワード重視の長文タイトルや、SEO対策用の説明文を、そのままSNS用のOGPタグにも自動同期・コピーして設置する失敗です。検索結果とSNSタイムラインではユーザーの行動原理が異なるため、SNSで長すぎる説明文やSEO偏重のタイトルを表示させると、文字切れを起こして魅力が伝わらなくなります。
💡 対策・解決策を見る▼
タグ設置後にコンテンツや画像を修正したのに、SNS側のキャッシュで古い表示が残り続ける
メタタグジェネレーターを使って完璧なコードを公開・上書きしたものの、実際にXやFacebookでリンクをシェアすると、修正前の古いタイトルや差し替え前の画像がそのまま表示されてしまうトラブルです。これはSNS各社のクローラーサーバー側に古いキャッシュデータが保持されていることが原因です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.このツールで生成したメタタグをサイトに設置する方法を教えてください
A. 生成されたHTMLコードをすべてコピーし、WebサイトのHTMLソース内にあるヘッダー部分、つまり開始タグから終了タグの間に貼り付けるだけで設置が完了します。
Q.プレビュー画面の見え方は実際のSNSの表示と完全に一致しますか
A. 各SNSプラットフォームの仕様変更や閲覧環境により若干の差異が生じる場合がありますが、標準的な表示イメージや文字切れを事前に確認するためのシミュレーションとして十分対応しています。
Q.ツールに入力したタイトルや画像URLが外部に保存されるリスクはありますか
A. ありません。本ツールは完全ローカル処理型の安全設計を採用しており、入力されたデータはサーバーへ一切送信されず、データベースへの保存も行われません。処理はすべてブラウザ内で完結し、ページを閉じれば即座にデータは消去されます。
Q.メタタグの中に記述するOGP用の画像URLが相対パスだと機能しませんか
A. はい、機能しません。各SNSのクローラーが画像を正常に読み込むためには、必ず通信プロトコルから始まる絶対パスでの指定が必要です。入力欄にはフルURLを入力してタグを生成してください。
Q.サイトにタグを設置したのにSNSでの表示が変わらない場合はどうすればよいですか
A. SNS側に古いキャッシュデータが残っていることが原因です。XのカードバリジーターやFacebookのシェアデバッガーなど、各プラットフォームが提供する公式デバッグツールを利用して最新情報を再読み込みさせてください。
Q.スマートフォン向けとパソコン向けで別々のメタタグを作る必要はありますか
A. 必要ありません。本ツールで生成されるOGPタグは、レスポンシブ設計に対応した標準的な仕様に準拠しているため、1セットのコードを設置するだけでパソコンとスマートフォンの両方の表示に自動で対応します。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。