メタタグ・OGP生成ツール
フォームに入力するだけで、SEO用のtitle・description・OGP・Twitter Cardのmetaタグを生成。検索結果とSNSカードのプレビューもリアルタイム表示します。
プレビュー
プレビュー
Google検索結果
example.com
ページタイトルがここに表示されます
meta descriptionの内容がここに表示されます。検索結果での見え方を確認できます。
Facebook / OGP
画像なし（og:image / twitter:image 未設定）
example.com
ページタイトルがここに表示されます
meta descriptionの内容がここに表示されます。検索結果での見え方を確認できます。
X（Twitter）カード
画像なし（og:image / twitter:image 未設定）
example.com
ページタイトルがここに表示されます
meta descriptionの内容がここに表示されます。検索結果での見え方を確認できます。
生成されたmetaタグ（<head>内に貼り付け）
上のフォームに入力すると、ここにmetaタグが生成されます。
使い方
1
タイトル・説明を入力
「基本SEO」タブでページのタイトルとディスクリプションを入力します。文字数カウンターで推奨の長さを確認できます。
2
OGP・Twitter情報を設定
「OGP」「Twitter Card」タブで画像URLやカード種別を設定。自動反映をオンにすればタイトル・説明をワンタッチで共有できます。
3
プレビュー確認とコピー
検索結果・SNSカードのプレビューで見え方を確認し、生成されたmetaタグをコピーして<head>内に貼り付けます。
メタタグ・OGP生成ツールとは
title・description・canonical・OGP（Open Graph Protocol）・Twitter CardなどのHTML metaタグを、フォーム入力だけで正確に生成できるWebツールです。Google検索結果とSNSシェア時のカード表示をリアルタイムでプレビューできるため、公開前に見え方を確認できます。基本meta（charset / viewport）からOGP・Twitter Cardまで一括生成し、ワンクリックでコピーできます。タイトルとディスクリプションには文字数の目安カウンターを表示し、SEOに最適な長さへ調整できます。すべての処理はブラウザ内で完結し、入力内容がサーバーに送信されることはありません。
あわせて、SNSシェア画像の見栄えを高めるOGP画像生成ツール、ブラウザタブのアイコンを作るファビコン生成ツール、URLを最適化するスラッグ生成ツールもご利用ください。OGPの仕組みを基礎から学びたい方は、解説記事「OGPメタタグの基礎」もあわせてご覧いただけます。
機能・特徴
- リアルタイムプレビュー入力と同時にmetaタグを生成。Google・Facebook・Xのカード表示も即座に確認できます。
- OGP・Twitter Card対応og:title / og:image / twitter:card など主要プロパティを網羅。自動反映で入力も時短。
- 文字数ガイド付きtitleとdescriptionの推奨文字数をカウンターで表示。SEOに最適な長さに調整できます。
- プライバシー保護すべての処理はブラウザ内で完結。入力内容はサーバーに送信されません。
活用シーン
- 新規ページ公開前のmetaタグ一括作成
- OGP画像・説明文のSNSシェア表示チェック
- title / descriptionの文字数最適化（SEO）
- LP・記事ごとのcanonical URL設定
- X（Twitter）カードの種別・表示確認
よくある質問
メタタグ・OGP生成ツールは無料で使えますか？
はい、完全無料でご利用いただけます。会員登録も不要で、ブラウザを開くだけですぐにお使いいただけます。
入力した内容はサーバーに送信されますか？
いいえ、すべての処理はお使いのブラウザ内（JavaScript）で完結します。入力したタイトルやURL、画像URLなどがサーバーに送信・保存されることはありません。
titleタグとmeta descriptionの推奨文字数は？
一般的にtitleは全角30〜35文字（半角60文字程度）、meta descriptionは全角80〜120文字（半角120〜160文字程度）が目安です。検索結果での表示はデバイスや表示幅により変動するため、重要なキーワードは前方に配置するのがおすすめです。
OGP（Open Graph Protocol）とは何ですか？
OGPは、FacebookやX（Twitter）、LINEなどのSNSでページがシェアされた際に、タイトル・説明・画像などを正しく表示させるための仕組みです。og:title・og:description・og:image・og:urlなどを設定することで、リッチなカード表示になりシェア時のクリック率向上が期待できます。
og:imageに最適な画像サイズは？
推奨は1200×630px（アスペクト比1.91:1）です。Twitter Cardをsummary_large_imageにする場合も同サイズが推奨されます。ファイルサイズは8MB以下、形式はPNGまたはJPEGが一般的です。画像URLは必ず絶対URL（https://〜）で指定してください。
canonical（正規URL）は必ず設定すべきですか？
重複コンテンツが存在する場合（パラメータ付きURLなど）は、検索エンジンに正規ページを伝えるためcanonicalの設定を強く推奨します。重複がない場合でも、自己参照canonicalを設定しておくと安全です。
生成したmetaタグはどこに貼り付ければいいですか？
HTMLの<head>〜</head>の中に貼り付けてください。WordPressなどのCMSをお使いの場合は、SEOプラグイン（Yoast SEO・All in One SEOなど）の各設定欄に対応する値を入力する方法もあります。
スマートフォンでも使えますか？
はい、スマートフォン・タブレット・PCなど、すべてのデバイスでご利用いただけます。
SNSシェアのプレビューは実際の表示と完全に同じですか？
プレビューはGoogle検索結果・Facebook（OGP）・X（Twitter）カードの見え方を再現した目安です。実際の表示は各プラットフォームの仕様変更・キャッシュ・画像の読み込み状況により変わる場合があります。og:imageは1200×630px（1.91:1）の絶対URLを推奨します。公開後はFacebookのシェアデバッガーやXのCard Validatorで最終確認することをおすすめします。
title・descriptionの文字数カウンターはどう使えばいいですか？
入力欄の横に表示されるカウンターは、推奨の目安（titleは60文字前後、descriptionは120〜160文字前後）を超えると色が変わります。検索結果での見切れを防ぐため、重要なキーワードは前方に配置し、目安内に収めるとSEO・クリック率の面で効果的です。基本meta・OGP・Twitter Cardは入力に応じて自動でまとめて生成され、コピーボタンでワンクリックでコピーできます。