無料SEOメタタグ&OGタグ作成ツール
メタタグとは、Webページの<head>セクションに記述するHTMLコードの断片です。ページ上には表示されませんが、検索エンジンやブラウザ、SNSプラットフォームに対して、ページの内容やインデックス方法、シェアされた際の見え方といった重要な情報を伝える役割を持っています。メタタグは、世界があなたのサイトをどう発見し、どう認識するかを裏側から決める「舞台裏の指示書」だと考えてください。
よく作り込まれたメタタグは、検索結果のクリック率(CTR)に直接影響します。ユーザーがGoogleで検索したとき、タイトルタグとメタディスクリプションはページの第一印象を決める要素になることがほとんどです。魅力的で正確なタイトルと分かりやすい説明文の組み合わせが、クリックされるか読み飛ばされるかを分けます。実際、同じ順位に表示されているページでも、メタタグの書き方次第でCTRに2倍以上の差が出るという調査結果も一貫して報告されています。
この無料メタタグジェネレーターを使えば、基本的なSEOタグ、FacebookやLinkedIn向けのOpen Graphタグ、Twitter Cardタグ、さらにJSON-LD構造化データまで、必要なタグを数秒で作成できます。Google検索結果やSNSでの表示をリアルタイムでプレビューできるので、サイトにコードを追加する前に細部まで調整できます。
<head>セクションに貼り付けてください。タイトルタグ: ページ内SEOにおいて最も重要な要素です。検索結果やブラウザタブでクリック可能な見出しとして表示されます。各ページには内容を正確に表すユニークなタイトルを設定しましょう。Googleが表示するのは通常先頭の50~60文字程度なので、重要なキーワードは前方に配置してください。
メタディスクリプション: 直接的なランキング要因ではありませんが、CTRには大きく影響します。Googleがデスクトップで表示するのは最大でおよそ155~160文字です。広告コピーを書くような感覚で、ユーザーが何を得られるのか、なぜクリックすべきなのかを説明しましょう。設定しない場合、Googleがページ内容から自動でスニペットを生成しますが、ページの魅力をうまく表現できないことがあります。
robotsメタタグ: 検索エンジンによるクロールとインデックスの方法を制御します。よく使われる値はindex, follow(デフォルトの挙動)、noindex(インデックスを防ぐ)、nofollow(リンクを辿らせない)、noarchive(キャッシュ版を表示しない)などです。ログイン画面や内部検索結果、重複コンテンツなどのページで戦略的に活用しましょう。
Open Graphタグ: Facebookが策定したOpen Graph(OG)タグは、Facebook、LinkedIn、WhatsAppをはじめとする多くのプラットフォームでコンテンツがシェアされたときの表示を制御します。主要なタグはog:title、og:description、og:image、og:urlです。特にOG画像は重要で、どのプラットフォームでも綺麗に表示させるには1200×630ピクセルの高品質な画像を使用しましょう。
Twitter Cardタグ: OGタグと似ていますが、Twitter/X専用のタグです。twitter:cardタグでカード種別を指定します(見た目のインパクトを重視するならsummary_large_imageがおすすめです)。Twitter独自のタグがない場合はOGタグにフォールバックしますが、両方を設定しておけば各プラットフォームでの表示を細かくコントロールできます。
canonicalタグ: 厳密にはメタタグではありませんが、同じくらい重要です。<link rel="canonical">タグは、どのURLが「正規版」かを検索エンジンに伝えます。これにより、同じページが複数のURL(wwwあり/なし、HTTP/HTTPS、クエリパラメータ違いなど)でアクセス可能な場合の重複コンテンツ問題を防げます。
noindexタグ一つで、ページ全体がGoogleから除外されることがあります。公開前には必ずrobotsタグを確認しましょう。<meta name="viewport">がないと、モバイルブラウザはデスクトップ幅でページを描画してから縮小表示するため、ユーザー体験が悪化し、モバイル検索の順位にも悪影響を及ぼします。メタタグとは、Webページの<head>セクションに配置されるHTML要素で、検索エンジンやブラウザ、SNSプラットフォームにページのメタデータを伝えます。タイトルタグ、メタディスクリプション、charset宣言、viewport設定、robotsディレクティブ、Open Graphタグなどが含まれます。訪問者の目には見えませんが、Web上でページがどのように発見され、インデックスされ、表示されるかを左右する重要な役割を担っています。
メタタグはSEOに直接的にも間接的にも影響します。タイトルタグは確認されているランキング要因の一つで、Googleはページの関連性を把握するために利用します。メタディスクリプションは直接的なランキング要因ではありませんが、クリック率に大きく影響し、それが間接的に順位に影響することがあります。robotsメタタグはページがそもそもインデックスされるかどうかを制御します。canonicalタグは重複コンテンツによるペナルティを防ぎます。個々のタグが直接的なランキングへの影響度は異なりますが、全体としてページ内SEOの技術的な基盤を形作っています。
Googleは通常、タイトルタグの先頭50~60文字(幅にして約600ピクセル)を表示します。検索結果でタイトル全体が見えるよう、60文字以内を目安にしましょう。タイトルが切り詰められると、Googleがページ内容から生成した別のタイトルに置き換えられることがあり、その内容はコントロールできません。最も重要なキーワードと独自の価値提案は、最初の50文字以内に収めてください。
Googleはデスクトップで最大およそ155~160文字、モバイルでは約120文字までメタディスクリプションを表示します。すべてのデバイスで表示されるよう、最も重要な情報は最初の120文字以内に書きましょう。上限文字数を埋めるために無理に長くする必要はありません。100文字で明確に伝えられるなら、それで十分です。長さよりも質と関連性のほうが重要です。
いいえ。Googleは少なくとも2009年以降、meta keywordsタグを完全に無視すると公式に発表しています。Bingも同様にランキング要因ではないとしています。meta keywordsタグはスパム業者に広く悪用され、現在では主要な検索エンジンのどれからも使用されていません。meta keywordsに時間をかけるのは無駄な労力です -- その代わりにタイトルタグ、メタディスクリプション、質の高いページコンテンツに注力しましょう。
Open Graph(OG)タグは、Facebookが策定したプロトコルで、SNSでシェアされたときにWebページの表示方法をコントロールできます。誰かがあなたのURLをFacebook、LinkedIn、WhatsApp、Slack、Discordなど多くのプラットフォームでシェアすると、これらのサービスはOGタグを読み取ってタイトル、説明文、表示画像を決定します。必須とも言える4つのOGタグはog:title、og:description、og:image、og:urlです。これらがないと、プラットフォーム側が何を表示するか推測することになり、結果が芳しくないことも多くあります。
Twitter Cardタグは、Twitter/X専用のメタタグで、プラットフォーム上でコンテンツがシェアされたときの表示を制御します。主な種類はsummary(タイトルと説明文付きの小さな正方形画像)とsummary_large_image(タイトルの上に表示される大きなバナー画像)です。Twitter独自のタグが設定されていない場合はOpen Graphタグにフォールバックしますが、両方を定義しておくことで正確なコントロールが可能になります。最良の結果を得るにはtwitter:card、twitter:title、twitter:description、twitter:image、twitter:siteを設定しましょう。
現在のメタタグを確認する方法はいくつかあります。最も簡単なのは、ページ上で右クリックして「ページのソースを表示」を選び、<head>セクションを確認する方法です。ブラウザの開発者ツール(F12)でhead要素を調べることもできます。SNS向けのタグについては、FacebookのシェアデバッガーでFacebookが実際に読み取っている内容を確認したり、TwitterのCard ValidatorでTwitter Cardをチェックしたりできます。Google Search Consoleでも、Googleがページのタイトルや説明文をどう解釈しているかを確認できます。
メタタグそのものがページ速度に与える影響はほぼゼロです。HTML内のごく小さなテキストの断片で、通常ページに追加される容量は1KB未満です。ただし間接的な関連はあります -- viewportメタタグはモバイル表示を正しく行うために必要で、これがないとブラウザが余分なレイアウト計算を行うことがあります。<link rel="preconnect">や<link rel="preload">(厳密にはメタタグではなくlink要素です)のようなタグは、ブラウザに早期の接続開始を促すことで、読み込みパフォーマンスをむしろ向上させることもあります。
robotsメタタグは、検索エンジンのクローラーに特定のページの扱い方を伝えます。よく使われるディレクティブには、index(インデックスを許可)、noindex(インデックスを防ぐ)、follow(ページ内のリンクを辿る)、nofollow(リンクを辿らない)、noarchive(キャッシュ版を表示しない)、nosnippet(検索結果にテキストスニペットを表示しない)などがあります。ディレクティブは組み合わせて使うこともでき、<meta name="robots" content="noindex, follow">は「このページはインデックスしないが、リンクは辿る」という意味になります。robotsタグが存在しない場合、デフォルトはindex, followです。
ページ内容が大きく変わったとき、新しいキーワードを狙うとき、あるいはGoogle Search ConsoleでCTRの低さに気づいたときにメタタグを更新しましょう。コンテンツが変わっていないなら、決まったスケジュールで更新する必要はありません。とはいえ、四半期ごとにメタタグを見直すのは良い習慣です -- 古くなった説明文、ページ内容と合わなくなったタイトル、壊れたOG画像、うっかり残ったnoindexタグなどをチェックしましょう。季節性のあるコンテンツ(セールやイベントなど)を持つページは、現在の内容を反映するようメタタグを更新すべきです。
はい、メタタグの重複は問題を引き起こすことがあります。同一ページ内にタイトルタグやメタディスクリプションが2つ存在すると、検索エンジンがどちらを使えばよいか判断できなくなります。誤った方を選んだり、独自に生成したりすることもあります。異なるページ間でタイトルや説明文が重複しているのはさらに大きな問題で、検索エンジンにページが差別化されていないという印象を与え、ランキングのポテンシャルを薄めてしまいます。Screaming FrogやGoogle Search Consoleのようなツールを使って、サイト内で重複または欠落しているメタタグを特定しましょう。
canonicalタグ(<link rel="canonical" href="...">)は、あるページのどのURLが優先バージョンかを検索エンジンに伝えます。同じコンテンツが複数のURLでアクセス可能な場合に重要になります -- 例えばexample.com/pageとexample.com/page?ref=twitterは同一のコンテンツを表示しますが、技術的には別のURLです。canonicalタグがないと、検索エンジンはランキングシグナルを複数のURLに分散させてしまうことがあります。canonicalは常にクリーンで優先されるURLを指すべきで、重複がないページでは自分自身を指す(self-referencing)のが基本です。
標準的なSEO用メタタグ(タイトル、ディスクリプション)は、SNSシェアのプレビューには確実には利用されません。代わりに、SNSプラットフォームはOpen GraphタグとTwitter Cardタグを使用します。FacebookやLinkedIn、WhatsAppでURLをシェアすると、プラットフォームがページを取得し、og:title、og:description、og:imageタグを読み取ります。Twitter/Xはまずtwitter:cardタグを読み取り、なければOGタグにフォールバックします。どちらも設定されていない場合、プラットフォームはページ内容から推測しようとしますが、結果は芳しくないことがほとんどです。プロフェッショナルな見た目のSNSシェアを実現するには、必ずOGタグを設定しましょう。
検索広告のコピーを書くような感覚でメタディスクリプションを書きましょう。まずユーザーの検索意図に対する主なメリットや答えから始めます。メインキーワードを自然に含めると、Googleが説明文中の一致する検索語を太字表示するため、視覚的に検索結果で目立ちます。行動喚起(「方法を学ぶ」「無料で試す」「選択肢を比較する」など)を添えましょう。一般的な表現ではなく具体的に書くこと -- 「画像編集に便利なツール」よりも「画像を3秒で正確なピクセルサイズにリサイズ」のほうが効果的です。クリックベイトは避けましょう -- クリック後すぐに離脱されると、順位に悪影響を及ぼします。120~155文字程度に収めるのが目安です。
viewportメタタグ(<meta name="viewport" content="width=device-width, initial-scale=1.0">)は、モバイルブラウザにページの寸法と拡大縮小の制御方法を伝えます。これがないと、モバイルブラウザはデフォルトのデスクトップ幅(通常980px)でページを描画してから全体を縮小するため、文字が非常に小さくなり、ユーザーはピンチズームを強いられます。このタグはレスポンシブWebデザインに欠かせず、Googleのモバイルファーストインデックスにも必須です。現代のWebページにはすべて含めるべきです。
厳密な上限はありませんが、うまく最適化されたページには通常10~20個程度のメタ関連タグがあります。必須なのは、タイトルタグ、メタディスクリプション、viewport、charset、canonicalリンク、4~6個のOpen Graphタグ、4~5個のTwitter Cardタグ、そして任意でrobotsタグです。JSON-LD構造化データを追加することもおすすめです。不要なタグは追加しないようにしましょう -- 例えばmeta keywords(主要な検索エンジンはすべて無視します)やmeta author(SEO上の価値はありません)などは省いて構いません。すべてのタグに明確な目的を持たせましょう。
はい、メタタグが正しく認識されるためには、HTML文書の<head>セクション内に配置する必要があります。<body>内に配置されたメタタグは技術的には無効なHTMLとなり、検索エンジンやSNSプラットフォームから無視される可能性があります。<title>タグ、<meta>要素、<link rel="canonical">、Open Graph/Twitterタグはすべてhead内に属します。一部のクローラーはbody内のタグを見つけることもありますが、確実ではありません。メタタグは常に、コンテンツやスクリプト要素より前、head内の早い位置に配置しましょう。
charsetメタタグ(<meta charset="UTF-8">)は、HTML文書の文字エンコーディングを宣言します。UTF-8は、ラテン文字、アクセント記号付き文字、中国語、アラビア語、絵文字など、あらゆる文字体系のほぼすべての文字をサポートする世界共通の標準です。このタグがないと、ブラウザがエンコーディングを誤って推測し、文字化け(mojibake)が発生することがあります。UTF-8を常に使用し、charset宣言は<head>内でタイトルタグより前、最初の要素として配置し、最初から正しく解析されるようにしましょう。
このツールはインターネット接続が必要で、公式のKlipToolsウェブサイトでのみ利用できます。ブラウザ上で完全に動作し(データはどのサーバーにも送信されません)、動作にはkliptools.comからの読み込みが必要です。オフラインで利用したい場合は、生成したメタタグをテンプレートファイルとして保存し、ローカルで再利用することができます。このツールは登録不要で完全無料です -- ページにアクセスし、詳細を入力して、生成されたコードをコピーするだけです。