メタタグジェネレーター

SEO対策に必要な基本メタタグ、OGP、Twitter Cardのタグを簡単に作成できます。リアルタイムプレビューで確認しながら最適なメタタグを作成しましょう。

基本メタタグ

推奨: 50〜60文字以内
推奨: 120〜160文字以内
5〜10個程度が推奨
重複コンテンツ対策に使用
検索エンジンのクロール動作を制御
モバイルブラウザのUIカラー（例: #ffffff）

Google検索結果プレビュー

サイト名 | ページ名
https://example.com › page
このページの説明文を入力してください

OGP（Open Graph Protocol）

基本タイトルと同じでOK
推奨サイズ: 1200×630px
Webサイト全体の名前

SNSシェアプレビュー

画像プレビュー（1200×630px推奨）
シェア時に表示されるタイトル
シェア時に表示される説明文
EXAMPLE.COM

Twitter Card

@から始まるユーザー名

その他SNS設定

Facebook Insightsでシェア分析をする場合に必要
Pinterestでの画像保存を制御
※ LINE、Facebook、Slack、Discordなどは上記のOGP設定で対応できています。

Favicon（ファビコン）

ブラウザタブに表示されるアイコン
iOSのホーム画面用アイコン

生成されたメタタグ

このコードをHTMLの<head>タグ内に貼り付けてください

このツールの使い方

  1. 各セクションに必要な情報を入力します。
  2. リアルタイムでGoogle検索結果とSNSシェアのプレビューが表示されます。
  3. 文字数カウンターで推奨範囲を確認しながら入力できます。
  4. 「メタタグを生成」ボタンを押すと、HTMLコードが生成されます。
  5. 「コピー」ボタンでHTMLの<head>タグ内に貼り付けるコードをコピーできます。

特徴

  • 完全対応:基本メタタグ、OGP、Twitter Card、Favicon、Canonical、Robotsなど全て生成できます。
  • リアルタイムプレビュー:入力と同時にGoogle検索結果とSNSシェア時の見た目を確認できます。
  • 文字数カウンター:タイトルと説明文の文字数をリアルタイムで表示。推奨範囲を超えると警告します。
  • 検索エンジン制御:Robotsタグで検索エンジンのクロール動作を細かく制御できます。
  • 多言語対応:言語設定とロケール設定で多言語サイトにも対応します。
  • 完全なコード生成:そのままHTMLに貼り付けられる形式で出力されます。
  • ブラウザ内完結:入力情報はサーバーに送信されません。安全に使用できます。
  • レスポンシブ対応:スマホ・タブレットでも快適に操作できます。
  • 完全無料:登録不要で今すぐ使えます。

よくある使用例

  • 新規Webサイトのメタタグ設定
  • ブログ記事のSEO最適化
  • SNSでのシェア最適化
  • ランディングページのメタタグ作成
  • 既存サイトのメタタグ改善
  • OGP設定の確認と調整

注意点

  • 生成されたメタタグはHTMLの<head>タグ内に配置してください。
  • 入力内容はブラウザ上でのみ処理され、サーバーには保存されません。
  • 画像URLは実際に公開されているURLを指定してください。
  • タイトルは50〜60文字、説明文は120〜160文字が推奨されます。
  • OGP画像は1200×630pxのサイズが推奨されます。

メタタグについて

基本メタタグ

検索エンジンにページの情報を伝えるための基本的なタグです。titleとdescriptionは検索結果に表示され、クリック率に大きく影響します。

  • title: ページタイトル。検索結果の見出しとして表示されます（50〜60文字推奨）。
  • description: ページの説明文。検索結果のスニペットとして表示されます（120〜160文字推奨）。
  • keywords: ページのキーワード。現在のSEO効果は限定的ですが、設定しておくと良いでしょう。
  • author: コンテンツの作成者または組織名。
  • robots: 検索エンジンのクロール動作を制御します。index/noindex、follow/nofollowの組み合わせで指定します。
  • canonical: 重複コンテンツ対策のための正規URLを指定します。
  • language: ページの言語を指定します。
  • theme-color: モバイルブラウザのUIカラーを指定します。

OGP（Open Graph Protocol）

FacebookやLINEなどのSNSでシェアされた際に、リッチなカード表示を実現するためのタグです。

  • og:title: シェア時に表示されるタイトル。
  • og:description: シェア時に表示される説明文。
  • og:image: シェア時に表示される画像のURL（1200×630px推奨）。
  • og:url: ページの正規URL。
  • og:type: コンテンツのタイプ（website、article、productなど）。
  • og:site_name: Webサイト全体の名前。
  • og:locale: コンテンツの地域・言語設定（ja_JP、en_USなど）。

Twitter Card

Twitter上でリンクをシェアした際に、リッチなカード表示を実現するためのタグです。

  • twitter:card: カードのタイプ（summary、summary_large_imageなど）。
  • twitter:site: サイトのTwitterアカウント（@から始まる）。

その他SNS

Facebook、LINE、Slack、Discordなどは基本的にOGP設定で対応できていますが、追加で設定できる項目もあります。

  • fb:app_id: Facebook App ID。Facebook Insightsでシェアの分析をする場合に必要です。
  • pinterest: Pinterestでの画像保存を制御します（nopin、nohover）。

※ LINE、Facebook、Slack、Discordは上記のOGP設定があれば自動的に対応されます。追加設定は不要です。

Favicon（ファビコン）

ブラウザのタブやブックマークに表示される小さなアイコンです。

  • favicon.ico: 標準的なファビコン形式。
  • PNG Favicon: 高解像度ディスプレイ対応のために32×32と16×16のサイズを用意します。
  • Apple Touch Icon: iOSデバイスでホーム画面に追加された際に表示されるアイコン（180×180px）。

Robotsタグの使い方

  • index, follow: 通常の設定。ページをインデックスし、リンクを辿ります。
  • noindex, follow: ページをインデックスしないが、リンクは辿ります。検索結果に表示したくないページに使用。
  • index, nofollow: ページはインデックスするが、ページ内のリンクは辿りません。
  • noindex, nofollow: ページをインデックスせず、リンクも辿りません。完全に検索エンジンから除外したいページに使用。

メタタグの重要性

適切なメタタグの設定は、以下の効果があります：

  • SEO効果: 検索エンジンがページ内容を正しく理解し、適切な検索結果に表示されます。
  • クリック率向上: 魅力的なタイトルと説明文で、検索結果からのクリック率が向上します。
  • SNS拡散: OGP設定により、SNSでシェアされた際の見栄えが良くなり、エンゲージメントが向上します。
  • ブランディング: 統一されたメタタグとファビコンでブランドイメージを強化できます。
  • クロール制御: Robotsタグで検索エンジンの動作を適切にコントロールできます。