メタタグジェネレーター
ページタイトル・ディスクリプション・OGP・Twitter Cardのメタタグを一括で生成できます。Google検索結果やSNSシェア時の表示もリアルタイムでプレビュー。
基本情報
OGP / SNS 設定
推奨サイズ: 1200 x 630px
プレビュー
ページタイトル
ページの説明文がここに表示されます。
生成されたHTMLコード
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
使い方
左側のフォームにページタイトルやディスクリプションなどの情報を入力すると、右側にGoogle検索結果・Twitter Card・Facebook（OGP）のプレビューがリアルタイムで表示されます。
入力が完了したら、ページ下部の「生成されたHTMLコード」セクションからメタタグをコピーし、HTMLの<head>タグ内に貼り付けてください。
メタタグとは
メタタグはHTMLの<head>要素内に記述する情報で、検索エンジンやSNSにページの概要を伝えるために使われます。 適切なメタタグを設定することで、検索結果での表示内容やSNSでシェアされたときの見え方を最適化できます。
特に重要なのは、title（ページタイトル）とdescription（説明文）です。 これらは検索結果に直接表示されるため、クリック率（CTR）に大きく影響します。
OGP（Open Graph Protocol）とは
OGPはFacebookが策定したプロトコルで、WebページがSNSでシェアされたときに表示されるタイトル・説明文・画像を指定できます。 現在ではFacebookだけでなく、LINE・Discord・Slackなど多くのサービスがOGPに対応しています。
Twitter（X）では独自のTwitter Cardタグも使われますが、OGPタグからフォールバックされるため、両方設定しておくのがベストプラクティスです。
メタタグ設定のベストプラクティス
| 項目 | 推奨文字数 | ポイント |
|---|---|---|
| title | 32文字以内 | キーワードを前方に配置。60文字超は省略される |
| description | 120文字程度 | 検索意図に合った内容。160文字超は省略される |
| og:image | 1200x630px | 高解像度の画像を指定。絶対URLで記述 |
| canonical | - | 重複コンテンツ回避のために正規URLを指定 |
生成できるメタタグ
- 基本タグ（charset、viewport、title、description、keywords、author）
- canonical URL（重複コンテンツ対策）
- OGP タグ（og:title、og:description、og:image、og:url、og:type、og:site_name）
- Twitter Card タグ（twitter:card、twitter:title、twitter:description、twitter:image、twitter:site）
関連記事
よくある質問
- Q. どのメタタグを生成できますか？
- title、meta description、OGP（og:title、og:description、og:image など）、Twitter Card（twitter:card、twitter:title など）の主要なメタタグを一括生成できます。
- Q. 文字数の制限はチェックされますか？
- はい、titleは32文字、meta descriptionは120文字を目安にリアルタイムで文字数を表示し、超過時は警告します。Google検索結果のプレビューも確認できます。
- Q. 生成したタグはどこに貼り付ければいいですか？
- HTMLの<head>タグ内に貼り付けてください。Next.jsやNuxt.jsなどのフレームワークを使用している場合は、フレームワーク固有の方法でメタデータを設定します。
関連ツール
開発者
Zeronova（ゼロノバ）
Product Manager / AI-Native Builder
19年以上のWeb/IT業界経験を持つPdMが、現場で本当に使えるツールを開発。登録不要・ブラウザだけで動作する無料ツールを93種類以上公開中。