Metaタグ生成 (Meta Tag Generator)
SEO・OGPタグを一括作成
サイト情報
0 文字 (推奨: ~60文字)
0 文字 (推奨: ~160文字)
Google Search Preview
Generated HTML
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />Metaタグ生成ツールの使い方
サイトのタイトル・説明文・URL・OGP画像URLなどをフォームに入力すると、検索エンジン向けの基本メタタグ（title / description / keywords / author / viewport）、Facebook などが読み取る Open Graph（og:）タグ、X（旧Twitter）向けの Twitter Card（twitter:）タグを 1 つの HTML スニペットとしてまとめて生成します。入力欄が空の項目はタグ自体を出力しないため、不要なタグが混ざりません。生成はブラウザ内の文字列結合だけで行われ、入力内容がサーバーへ送信されることはありません。
情報の入力
Title と Description を入力すると、右側の「Google Search Preview」に検索結果風の表示が即時反映されます。各欄の下の文字数カウンタで長さの目安を確認できます。
設定の選択
Website URL・OGP Image URL・Keywords・Author は任意項目です。Twitter Card Type は summary_large_image（横長の大きな画像）・summary（小さな正方形画像）・app の 3 種類から選びます。
コピー
「Copy」ボタンで生成された HTML をクリップボードにコピーし、各ページの <head> 内に貼り付けます。og:image などの URL は https:// から始まる絶対 URL で指定してください。
主要メタタグの役割と長さの目安
このツールが出力するタグを「誰が読むか」「何に使われるか」で整理しました。文字数はいずれも仕様上の上限ではなく、表示領域に収まりやすい慣行上の目安です。
| タグ | 主な読み手 | 役割 | 長さの目安 |
|---|---|---|---|
| <title> | 検索エンジン・ブラウザのタブ | 検索結果のタイトルリンクの主な材料。ページごとに固有の内容にします | 半角 60 文字前後（全角はより短く） |
| meta description | 検索エンジン | 検索結果スニペットの候補。Google はページ本文から別の文を採用することもあります | 半角 160 文字前後 |
| meta keywords | 一部の検索エンジン・社内検索 | Google のウェブ検索ランキングには使われないと公式に表明されています | 任意（空欄なら出力されません） |
| meta viewport | モバイルブラウザ | 表示幅を端末幅に合わせ、初期ズームを 1 にします。モバイル対応の基本設定で、常に出力されます | 固定値 |
| og:title / og:description | Facebook・LINE・Slack など | リンク共有時のカードに表示される見出しと説明文 | カード幅で省略されるため短めに |
| og:image / og:url / og:type | Facebook・LINE・Slack など | カード画像・正規 URL・コンテンツ種別。og:type は website 固定で出力されます | 画像は絶対 URL |
| twitter:card 〜 twitter:image | X（旧Twitter） | カード種別と表示内容。twitter:card 以外は og:* にフォールバック可能 | og:* と同様 |
出典:Google 検索セントラル「タイトルリンク」、同「スニペット」、The Open Graph protocol、X Developer Platform「Cards markup」、MDN「ビューポートメタタグ」
OGP と Twitter Card のフォールバック関係と画像サイズ
X のカードパーサーは twitter:* タグが無いときに対応する og:* タグを読みます。このツールは両方を出力しますが、どのタグが省略可能で、画像はどのサイズを用意すべきかを把握しておくと、SNS ごとの表示崩れを減らせます。
| Twitter Card 側 | 無い場合に参照される OGP | 補足 |
|---|---|---|
| twitter:card | なし（必須） | カード種別を決める唯一のタグ。このツールは常に出力します |
| twitter:title | og:title | X 向けだけ別の見出しにしたいときに twitter:title を使います |
| twitter:description | og:description | 同上 |
| twitter:image | og:image | カード種別によって推奨の縦横比が異なります（下表） |
| twitter:url | og:url | X の公式マークアップ例には含まれていませんが、出力しても読み取りに支障はありません |
| 用途 | 縦横比 | サイズの目安 |
|---|---|---|
| og:image（Facebook） | 1.91 : 1 | 1200 × 630 px 推奨（Meta のシェア画像ガイド） |
| twitter:card = summary_large_image | 2 : 1 | 最小 300 × 157 px、最大 4096 × 4096 px、5 MB 以下（X Cards ドキュメント） |
| twitter:card = summary | 1 : 1 | 最小 144 × 144 px、最大 4096 × 4096 px、5 MB 以下（同上） |
1 枚の画像を Facebook と X の両方で使い回す場合は、1200 × 630 px（約 1.91 : 1）で作成し、上下が少し切り取られても支障のない構図にしておくと、2 : 1 の summary_large_image でも大きな破綻なく表示されます。 対応形式は JPG・PNG・WEBP・GIF が一般的で、SVG はカード画像として扱われません。
実際の使用例
サイトのトップページ：タイトル・説明文・URL・画像を指定
基本項目をすべて埋めた標準的な例です。Twitter Card Type は既定の summary_large_image のままにしています。Keywords と Author は空欄なので、対応するタグは出力されません。
INPUT
Title: 無料Webツール集 Description: ブラウザだけで使える無料ツール Website URL: https://example.com/ OGP Image URL: https://example.com/ogp.png Twitter Card Type: summary_large_image
OUTPUT
<title>無料Webツール集</title> <meta name="description" content="ブラウザだけで使える無料ツール" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Open Graph / Facebook --> <meta property="og:type" content="website" /> <meta property="og:url" content="https://example.com/" /> <meta property="og:title" content="無料Webツール集" /> <meta property="og:description" content="ブラウザだけで使える無料ツール" /> <meta property="og:image" content="https://example.com/ogp.png" /> <!-- Twitter --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:url" content="https://example.com/" /> <meta name="twitter:title" content="無料Webツール集" /> <meta name="twitter:description" content="ブラウザだけで使える無料ツール" /> <meta name="twitter:image" content="https://example.com/ogp.png" />
何も入力しない場合の最小出力
全欄が空でも、viewport・og:type・twitter:card の 3 つだけは常に出力されます。生成されたコードが 3 行しかないときは、入力欄が空になっていないか確認してください。
INPUT
（すべての入力欄が空）
OUTPUT
<meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Open Graph / Facebook --> <meta property="og:type" content="website" /> <!-- Twitter --> <meta name="twitter:card" content="summary_large_image" />
Keywords・Author を含め、Twitter Card を summary にする
画像 URL を指定せずに Keywords と Author を入力した例です。og:image と twitter:image は出力されず、keywords と author の meta タグが基本タグに追加されます。
INPUT
Title: Diffツールの使い方 Description: 行単位と文字単位の差分比較 Keywords: diff, 差分, 比較 Author: Web Tools Website URL: https://example.com/diff-tool Twitter Card Type: summary
OUTPUT
<title>Diffツールの使い方</title> <meta name="description" content="行単位と文字単位の差分比較" /> <meta name="keywords" content="diff, 差分, 比較" /> <meta name="author" content="Web Tools" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Open Graph / Facebook --> <meta property="og:type" content="website" /> <meta property="og:url" content="https://example.com/diff-tool" /> <meta property="og:title" content="Diffツールの使い方" /> <meta property="og:description" content="行単位と文字単位の差分比較" /> <!-- Twitter --> <meta name="twitter:card" content="summary" /> <meta name="twitter:url" content="https://example.com/diff-tool" /> <meta name="twitter:title" content="Diffツールの使い方" /> <meta name="twitter:description" content="行単位と文字単位の差分比較" />
よくある質問
どのメタタグが生成されますか？
基本タグとして <title>・description・keywords・author・viewport、Open Graph として og:type・og:url・og:title・og:description・og:image、Twitter Card として twitter:card・twitter:url・twitter:title・twitter:description・twitter:image を生成します。このうち viewport・og:type（website 固定）・twitter:card の 3 つは入力に関係なく常に出力され、それ以外は対応する入力欄が空のときはタグごと省略されます。canonical・robots・charset・og:site_name・og:locale・twitter:site は生成対象に含まれていないため、必要な場合は手動で追記してください。
推奨文字数（タイトル約60文字・説明文約160文字）の根拠は何ですか？
Google 検索セントラルのドキュメントでは、タイトルリンクやスニペットの長さに公式な文字数上限は定められておらず、表示幅に収まらない分が省略されると説明されています。60 文字・160 文字という数字は半角英数字を前提に広く使われてきた慣行上の目安です。全角の日本語は半角より表示幅が大きいため、同じ文字数でも早い段階で切り詰められます。また、このツールの文字数カウンタは JavaScript の length（UTF-16 コード単位）で数えるため、絵文字など一部の文字は 2 文字として計上されます。
Open Graph と Twitter Card は両方書く必要がありますか？
X の Cards ドキュメントには、twitter:title・twitter:description・twitter:image が無い場合は対応する og:title・og:description・og:image にフォールバックして読み取る、と記載されています。一方で twitter:card には Open Graph 側に対応するタグが無いため、Twitter Card を表示させたい場合は twitter:card だけは必須です。このツールは両系統をそろえて出力するので、SNS ごとに異なる文言を使いたい場合は twitter:* 側だけを書き換えれば個別に制御できます。
Open Graph は property 属性、Twitter Card は name 属性で出力されるのはなぜですか？
それぞれの仕様の書き方に合わせているためです。Open Graph は The Open Graph protocol の仕様で property 属性を使うと定められており、X（旧Twitter）の Cards ドキュメントでは twitter:* タグを name 属性で記述する例が示されています。X のパーサーは property 属性で書かれた twitter:* も読み取るとされていますが、このツールは公式の例と同じ name 属性で出力します。
twitter:card の summary・summary_large_image・app はどう違いますか？
summary は正方形のサムネイルとタイトル・説明文が横並びになる小型カード、summary_large_image は横長の大きな画像の下にタイトルと説明文が付くカードです。app はアプリストアへの誘導用カードで、twitter:app:id:iphone や twitter:app:id:googleplay などアプリ ID を示すタグが別途必要ですが、このツールはそれらを生成しません。app を選択する場合は追加タグを手動で書き足してください。
入力欄にダブルクォート（"）や < を含めるとどうなりますか？
入力値の & < > " は、それぞれ & < > " の文字参照に変換してから <title> の中身や content="..." に埋め込みます。そのため説明文にダブルクォートや山括弧が含まれていても、属性が途中で閉じられて HTML が壊れることはありません。ブラウザや SNS のクローラーは文字参照を元の文字に戻して解釈するので、検索結果やカードには入力したとおりの記号が表示されます。文字参照のまま表示されることはなく、手動で置き換える必要もありません。
keywords メタタグは入力したほうがよいですか？
Google は 2009 年の公式ブログで「keywords メタタグをウェブ検索のランキングに使用していない」と明言しています。他の検索エンジンや社内検索システムが参照するケースはあるため、必要な場合だけ入力してください。空欄のままにすればタグ自体が出力されないので、不要なタグが混入する心配はありません。
入力した内容はどこかに送信・保存されますか？
いいえ。入力値はブラウザ内の React の state に保持され、タグの組み立てもブラウザ内の文字列結合で完結します。「Copy」ボタンはブラウザの Clipboard API でクリップボードへ書き込むだけで、外部サービスへの通信は行いません。ページを再読み込みすると入力内容は消えます。
役立つTips
og:image と twitter:image は絶対 URL で指定する
相対パス（/ogp.png など）は SNS のクローラーが基準 URL を解決できない場合があります。https:// から始まる絶対 URL を入力し、画像が認証なしで取得できることを確認してください。
og:type は website 固定で出力される
ブログ記事など個別コンテンツのページでは og:type を article に書き換えると、The Open Graph protocol の仕様上、article:published_time などの追加プロパティが使えるようになります。コピー後に必要に応じて編集してください。
Google Search Preview は簡易表示
右側のプレビューはタイトル 1 行・説明文 2 行の簡易レイアウトです。実際の検索結果では端末幅によって省略位置が変わり、Google がページ内容からタイトルリンクや説明文を自動生成して置き換えることもあります。
変更後は OGP チェッカーで確認する
タグを設置したページを公開したら、OGP チェッカーで og:title・og:image が正しく取得できるか確認してください。X や Facebook はクロール結果をキャッシュするため、更新が反映されるまで時間がかかることがあります。