Meta Tag Generator：SEOメタタグの作成
Meta Tag Generatorはタイトル、ディスクリプション、Open Graph、Twitter Cardタグを生成し、SERP・Facebook・Twitterのライブプレビューと文字数カウンターを提供します。
Meta Tag Generatorとは？
新しいページを公開するたびに、実際にGoogle、Facebook、Twitterでどう見えるかを公開前に確認したいので、私はこのツールを使っています。ツールは完全なHTMLメタタグブロック（基本SEO、Open Graph、Twitter Card）を生成し、各プラットフォームのピクセル正確なプレビューを並べて表示します。Inputタブに入力し、Outputからコピーし、Previewで確認します。
主な機能
ツールは1セットの入力から3つのタグブロックを生成します。基本SEOブロックは<meta name="title">、<meta name="description">、<meta name="keywords">、<meta name="author">、<meta name="robots">、<link rel="canonical">をカバーします。Open Graphブロックはog:title、og:description、og:type、og:url、og:image、og:site_name、og:localeをカバーし、website、article、product、video、musicのタイプオプションがあります。Twitter Cardブロックはtwitter:card、twitter:site、twitter:creator、twitter:title、twitter:description、twitter:imageをカバーし、SummaryとSummary Large Imageカードをサポートします。
文字数カウンターが適切な長さに導きます。Titleは現在/60を表示し、30〜60の範囲で緑、30未満で黄、60超で赤になります。Descriptionは同じスキームで120〜160を目標とします。3つのライブプレビューが入力中に更新されます：実際のリンク青（#1a0dab）、URL緑（#006621）、ディスクリプション灰（#545454）を使うGoogle SERPプレビュー、提供したOG画像で1.91:1画像カードをレンダリングするFacebookプレビュー、カードタイプ設定に応じてSummaryとSummary Large Imageを切り替えるTwitter Cardプレビューです。
Robotsドロップダウンは4つの標準ディレクティブの組み合わせを提供します：index, follow（デフォルト）、index, nofollow、noindex, follow、noindex, nofollow。OutputタブはBasic、Open Graph、Twitterを別々のセクションに分け、それぞれに個別のコピーボタンと、結合ブロック用のCopy Allボタンがあります。
Meta Tag Generatorの使い方
ステップ1：Inputタブに入力する
近日公開: Meta Tag Generatorを開きます。ツールはInputタブで開き、3つのセクションがあります。
基本SEOセクション：
- Title：ページタイトル。文字カウンターはリアルタイムで更新されます。検索結果の切り捨てを避けるため30〜60文字（緑）に保ちます。例：
TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole（53文字、緑）。 - Description：メタディスクリプション。完全表示のために120〜160文字（緑範囲）を目指します。例：
TrailMaster Pro boots combine a Vibram outsole with Gore-Tex waterproofing for serious hikers and trail runners. Free shipping over $75.（137文字、緑）。 - Keywords：カンマ区切りのキーワード。最近の検索エンジンはこのタグをほぼ無視しますが、含めても害はありません。例：
hiking boots, trail running, waterproof boots, vibram outsole。 - Author：オプションの著者名。
- Robots：4つのrobotsディレクティブの組み合わせから選びます。公開コンテンツには
index, followのままにします。インデックスしたくないプライベートページ、管理エリア、重複コンテンツにはnoindex, nofollowを使います。 - Canonical URL：このページの優先URL。完全な絶対URLを入力します（例：
https://example.com/products/trailmaster-pro）。
ステップ2：Open Graphタグを設定する
Open Graphセクションへスクロールします：
- OG Type：ホームページや一般ページには「website」、ブログ記事には「article」、ECページには「product」を選びます。
- OG Site Name：サイトの表示名（例：「TrailMaster Outdoor Gear」）。
- OG Image：ソーシャル共有画像の完全URL。Facebookは1200×630ピクセルを推奨します。到達可能なURLを提供すると、Facebookプレビューが実際の画像をレンダリングします。
- OG URL：Open Graph用の正規URL。通常はcanonical URLと同じです。
ステップ3：Twitter Cardタグを設定する
Twitter Cardsセクションへスクロールします：
- Twitter Card Type：「Summary」は小さな正方形サムネイルを表示します。「Summary Large Image」は大きな2:1画像を表示し、視覚アセットがあるコンテンツに適した選択です。
- Twitter Site：サイトのTwitter/Xユーザー名（例：
@trailmaster）。 - Twitter Creator：コンテンツ著者のTwitter/Xユーザー名。
ステップ4：Outputタブを確認する
Outputタブをクリックします。3つのセクションが生成されたタグを表示します：
基本タグの例：
<meta name="title" content="TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole" />
<meta name="description" content="TrailMaster Pro boots combine a Vibram outsole with Gore-Tex waterproofing for serious hikers and trail runners. Free shipping over $75." />
<meta name="keywords" content="hiking boots, trail running, waterproof boots, vibram outsole" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://example.com/products/trailmaster-pro" />Open Graphタグの例：
<meta property="og:type" content="product" />
<meta property="og:url" content="https://example.com/products/trailmaster-pro" />
<meta property="og:title" content="TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole" />
<meta property="og:description" content="TrailMaster Pro boots combine a Vibram outsole..." />
<meta property="og:image" content="https://example.com/images/trailmaster-og.jpg" />
<meta property="og:site_name" content="TrailMaster Outdoor Gear" />
<meta property="og:locale" content="en_US" />Copy Allをクリックして、<head>に貼り付ける完全なタグブロックを取得します。
ステップ5：Previewタブで確認する
Previewタブに切り替えます。3つのライブプレビューが同時にレンダリングされます：
- Google SERPプレビュー：titleを青、canonical URLを緑、descriptionを2行に切り詰めて灰で表示します。Googleのデスクトップ検索結果フォーマットと一致します。titleが60文字を超えると視覚的に切り詰められ、短くする明確な合図になります。
- Facebookカードプレビュー：OG画像（提供されロード可能な場合）、サイトドメインを大文字、titleを太字、descriptionを表示します。
- Twitter Cardプレビュー：twitter:cardフォーマット（SmallまたはLarge Image）、URLドメイン、title、descriptionを表示します。プレビュー画像は
twitterImageが設定されていればそこから、なければogImageから取得します。
実用例
例1：ブログ記事
「10 Best Hikes in the Scottish Highlands」というタイトルのブログ記事の場合：
- Title：
10 Best Hikes in the Scottish Highlands - Complete Guide（53文字、緑） - Description：
The 10 most rewarding hiking routes in the Scottish Highlands, from Ben Nevis to the Isle of Skye. Trail grades, maps, and kit lists included.（143文字、緑） - OG Type：article
- Robots：index, follow
SERPプレビューでtitleが切り詰められず収まり、descriptionが利用可能な2行を満たすことが確認できます。
例2：ECサイト商品ページ
商品ページではOG typeを「product」に設定し、画像URLを提供します。Facebookプレビューは商品画像を1.91:1の比率で、サイト名、商品title、descriptionと共にレンダリングします。Twitter Large Image Cardは2:1クロップで同じ画像を表示します。
例3：プライベートステージングページ
インデックス対象でないステージング環境ページでは、Robotsをnoindex, nofollowに設定します。生成されたoutputには<meta name="robots" content="noindex, nofollow" />が含まれ、検索エンジンクローラーがこのページを発見してもインデックスせずリンクをたどらないよう指示します。
ヒントとベストプラクティス
- OG URLとcanonical URLを揃える：
og:urlと<link>canonicalタグに同じ絶対URLを使います。不一致はソーシャル共有が誤ったURLを参照する原因になります。 - titleの長さと切り詰め：Googleはデスクトップ結果で約600pxより広くレンダリングされるtitleを切り詰めます。30〜60文字の目標は信頼できる代理指標で、緑なら安全範囲内です。
- OG画像のサイズ：ツールは提供されたURLに対して
og:imageタグを生成しますが、画像サイズは検証しません。Facebookには1200×630ピクセル、Twitter Large Image Cardには1200×600の画像を使います。 - twitter:imageはog:imageにフォールバック：Previewタブで、Twitter Cardは設定されていればtwitter:imageを使い、なければog:imageを使います。プラットフォームごとに別のソーシャル画像が必要な場合のみ、別途twitter:imageを設定します。
- Keywordsメタタグ：
<meta name="keywords">タグは生成されますが、GoogleとBingでは2009年以降ほぼ無視されています。完全性のため含めますが、最適化に時間を投資する必要はありません。
よくある問題とトラブルシューティング
titleカウンターが赤だがdescriptionは正常：titleが60文字を超えています。短くするか、詳細をdescriptionに移します。titleカウンターは明確な指標として現在/60 (long)を赤で表示します。
descriptionカウンターが黄色：descriptionが120文字未満です。Googleがページコンテンツから独自のスニペットに置き換える可能性があります。関連コンテンツを20〜40文字追加します。
OG画像がFacebookプレビューに表示されない：PreviewタブはURLの実際の画像を<img>タグでロードします。URLがブラウザから公開アクセス可能でない場合（例：ローカル開発URL）、画像エリアに「No image」プレースホルダーテキストが表示されます。タグはoutputで正しく生成されています。
大きな画像でもTwitterプレビューが小さなカードしか表示しない：Twitter Card Typeが「Summary Large Image」ではなく「Summary」に設定されています。Twitter Card Typeドロップダウンを「Summary Large Image」に変更すると2:1プレビューが表示されます。
Outputタブで生成されたタグが空に見える：Inputタブで少なくともtitleとdescriptionに入力します。outputには空でないフィールドのみ含まれ、空のtitleフィールドはtitleタグを生成しません。
プライバシーとセキュリティ
Meta Tag Generatorはブラウザ内で完全に動作します。タグ生成はReactのuseMemoフックを使い、入力からoutputをリアクティブに計算し、サーバーラウンドトリップはありません。OG画像URLを提供すると、Previewタブはプロキシなしでソースから直接画像をロードします。SupporterメンバーはローカルのIndexedDBストレージを使って名前付きプリセットを保存・復元できます。
よくある質問
titleとdescriptionの最適な文字数は？
ツールはtitleに30〜60文字（緑範囲）、descriptionに120〜160文字（緑範囲）を使います。これらはGoogleがSERPスニペットに使う典型的なレンダリング幅の限界に対応します。30文字未満のtitle（黄）は薄いと見なされる可能性があり、60超（赤）は切り詰められる可能性があります。120未満のdescription（黄）はGoogleが独自の抜粋を使う原因になり、160超（赤）は切り詰められます。
ツールはすべてのOpen Graphプロパティを生成しますか？
ツールはコアOGタグを生成します：og:type、og:url、og:title、og:description、og:image、og:site_name、og:locale。article:published_timeのような記事固有タグやproduct:priceのような商品固有タグは生成しません。それらは生成されたoutputをコピーした後、手動で追加します。
どのOG locale値が利用可能ですか？
デフォルトのOG localeはen_USです。localeフィールドはテキスト入力で、有効な任意のlocaleコードを入力できます（例：fr_FR、de_DE、ja_JP）。ツールはこのフィールドをドロップダウンに制限しません。
ツールはどのTwitter Cardタイプをサポートしますか？
ツールはsummary（小さな正方形サムネイル、title、description、サイト名）とsummary_large_image（フル幅2:1画像とtitle、description、サイト名）を生成します。非推奨のappとplayerカードタイプはサポートしません。
Open Graphタグだけを基本SEOタグなしでコピーできますか？
はい。Outputタブは3つの別々のセクション（Basic、Open Graph、Twitter）を表示し、それぞれに独自のコピーボタンがあります。Open Graphセクションのコピーボタンをクリックしてそれらのタグだけをコピーします。すべてを結合するには「Copy All」を使います。
生成されたタグをサイトに追加するには？
コピーしたタグをHTMLの<head>セクション内に貼り付けます。WordPress、Shopify、WebflowなどのCMSを使う場合、テーマ設定のカスタム<head>コードフィールドに貼り付けるか、カスタムメタタグを受け付けるSEOプラグインを使います。Next.jsのようなフレームワークでは、<Head>コンポーネントに貼り付けるか、metadataAPIを使います。
関連ツール
- 近日公開: Page SEO Analyzer：既存のライブページの現在のメタタグ、見出し構造、オンページSEOシグナルを監査し、新しいメタタグが対処すべきギャップを特定します。
- 近日公開: SERPプレビュー：メタタグの更新前後にtitleとdescriptionの表示を微調整するための専用SERPプレビューツール。
- 近日公開: Schemaジェネレーター：メタタグに加えて構造化データマークアップを追加し、記事、商品、イベントなどでGoogle検索のリッチリザルトを有効にします。
Meta Tag Generatorを今すぐ試す：近日公開: Glyph Widgets Meta Tag Generator