メタ・タグ・ジェネレーター
ウェブサイト用にSEO、Open Graph、Twitter Cardメタタグを生成します。
メタタグについて
メタタグは、HTMLページに関するメタデータを提供します。検索エンジンがコンテンツを理解するのを助け、ページが検索結果にどのように表示されるかを制御し、ソーシャルメディアでのリンクプレビューを定義します。最適化されたメタタグのセットは、検索からのクリック率とソーシャル共有を改善する可能性があります。検索結果での最適な表示のために、タイトルは60文字以下、説明は160文字以下に保ちます。
<head>メタデータの4つの家族
現代のHTMLページの<head>は通常、4つのバケットにメタデータを運び、それぞれが異なる聴衆に役立ちます:
- 文書の基本、すべてのブラウザが必要とするもの:
<title>、<meta charset="utf-8">、<meta name="viewport">、<meta name="description">。 - SEO指令、検索エンジンのクローラーが読むもの:
<meta name="robots">、<link rel="canonical">、SERPリンクとして表示されるページタイトル。 - Open Graph、Facebook、LinkedIn、Slack、Discord、iMessage、その他ほとんどのシェアリンククライアントがレンダリングするもの:
og:title、og:description、og:image、og:url、og:type、og:site_name。 - Twitter Card、X / Twitterが共有リンクのためにレンダリングするもの、Twitter固有のタグがない場合はOGタグにフォールバック:
twitter:card、twitter:title、twitter:image、twitter:site、twitter:creator。
このジェネレーターは、単一のフォームから4つの家族すべてを出力します。出力はあらゆるHTMLファイルの<head>に直接ドロップできます: 貼り付け、保存、デプロイ。Open Graphの詳細については、専用のオープン・グラフ・プレビューツールがライブプラットフォームのレンダリングを表示します。
タイトルと説明: どれくらいの長さにすべきか?
Google Search Centralは答えについて直接的です: 厳格な最大値はありません。スニペットは単にデバイスの幅に合わせて切り詰められます。60文字のタイトルと160文字の説明のルールは、Googleの検索結果ページ (デスクトップで約580ピクセル) で観察されたピクセル幅の切り詰めから導かれた業界の慣習です。実用的なポイント:
- タイトル、50〜60文字を目指す。広い大文字 (W、M、大文字のA) は狭い文字 (i、l、t) よりも多くのピクセル空間を消費するため、60文字の2つのタイトルは非常に異なる可視幅でレンダリングされる可能性があります。
- 説明、デスクトップで150〜160文字、モバイルで約120文字。重要な情報を前に置いて、モバイルの切り詰めに耐えられるようにします。
- 長さはランキングに影響しません。検索者がクリックする前にスニペットのどれだけが表示されるかにのみ影響します。
robotsメタタグ: 実際に何を制御するか
廃止されたkeywordsタグ (下記参照) とは異なり、<meta name="robots">は健在です; Googleは明示的にサポートしています。一般的な値:
index, follow、デフォルト。ページは検索に表示でき、クローラーはそのリンクをたどります。noindex、このページを検索結果から除外します。サンキューページ、内部ツール、ページネーションされたアーカイブ、検索結果ページ、および実際のコンテンツと競合させたくないその他のものに役立ちます。nofollow、このページのリンクをたどらないでください。ページ全体に対する正しい選択であることはまれです; 通常はrel="nofollow"を介してリンクごとに適用されます。noindex, nofollow、両方。公開されているページに対する最も強力なプライバシーの立場。noarchive、検索結果にキャッシュされたコピーを表示しないでください。nosnippet、説明スニペットを表示せず、タイトルのみを表示します。
Google固有のオーバーライドには、同じ値で<meta name="googlebot">を使用します。noindexはHTTP X-Robots-Tagヘッダーとしても表現可能であり、これはメタタグを追加できないPDF、画像、その他の非HTMLリソースで正しい場所です。
なぜ正規URLが重要なのか
<link rel="canonical">は、複数のURLが同じまたはほぼ同一のコンテンツを提供する場合に、どのバージョンのページが"公式"であるかを検索エンジンに伝えます。正規が必要な一般的なケース:
- 末尾のスラッシュの有無 (
/pagevs/page/) 。 - HTTP vs HTTPS (レガシーリダイレクトでは両方がインデックス可能なまま残ることがあります) 。
- WWW vs apex (
www.example.comvsexample.com) 。 - トラッキングパラメータ (
?utm_source=...、?ref=...) が無限の"異なる"URLを生成します。 - ページネーション、ソート順、同じコンテンツを異なる順序で生成するフィルタパラメータ。
- 複数のサイトで再公開されたシンジケートコンテンツ (正規は元のものを指します) 。
正規がない場合、Googleは自分で1つのバージョンを選び、間違ったものを選ぶかもしれません。正規URLは絶対 (完全なhttps://) でなければならず、インデックスしたいURLと正確に一致する必要があります。
2026年にスキップできるタグ
<meta name="keywords">、Googleは2009年9月以降、キーワードメタタグをランキングシグナルとして使用しないと明言してきました。Bingはさらに進んで、このタグでの過剰なキーワードスタッフィングをスパムシグナルとして扱います。含めてもSEOを損なうことはありませんが、助けにもなりません; このジェネレーターには、企業テンプレートがまだそれを期待しているユーザーのためにフィールドが存在します。<meta http-equiv="refresh">リダイレクトについては、代わりにサーバーからの適切なHTTP 301/302リダイレクトを使用してください。Metaリフレッシュはリダイレクトを遅らせ、一部のアクセシビリティツールを混乱させます。<meta http-equiv="X-UA-Compatible">、Internet Explorerの互換性のためだけに必要で、それはもはや懸念事項ではありません。<meta name="revisit-after">、主要なクローラーによって尊重されたことはありません。純粋なカーゴカルト。<meta name="generator">、情報のみ; あなたのサイトを構築したものを世界に伝えます。削除する価値のあるセキュリティシグナルになることがあります。
すべてのページが本当に必要とする2つのタグ
<title>と<meta name="description">を超えて、2つのタグは現代のウェブページに対して交渉不可能です:
<meta charset="UTF-8">、文書の最初の1024バイト以内、理想的には<head>の最初の子として表示されるべきです。HTML Living Standardは正しい文字処理のためにそれを要求します。それなしでは、ブラウザはエンコーディングを推測して間違える可能性があり、特に非ラテン文字スクリプトでそうです。<meta name="viewport" content="width=device-width, initial-scale=1">、モバイルブラウザに、架空の980ピクセルのデスクトップレイアウトからズームアウトするのではなく、デバイスの実際の幅でページをレンダリングするように指示します。これがなければ、すべてのモバイルユーザーはほぼ使用できない、あなたのページの小さなズームアウトされたバージョンを見ることになります。
Open GraphとTwitter Cardの概要
短い要約; 詳細についてはオープン・グラフ・プレビューツールを使用してください。ogp.meごとの4つの必須OGタグ: og:title、og:type、og:image、og:url。オプションだが推奨: og:description、og:site_name。画像寸法: 1200×630 (1.91:1) が最も安全なクロスプラットフォームサイズ。
X / Twitterの場合: twitter:card = summary_large_image (現代の全幅カード) を含めると、Xはツイッター固有のタグがない場合、他のすべてについてOGタグにフォールバックします。スタンドアロンのTwitter Card Validatorプレビューは、2022年8月2日にXによって削除されました; 代わりにツイートコンポーザーにURLを貼り付けて確認してください。
構造化データは別の仕事
JSON-LD構造化データ (schema.org語彙を使用) は、Googleのリッチリザルトを動かすもの: レシピカード、星評価付きの製品情報、検索でのFAQスニペット、パンくずリスト。これはメタタグとは別物で、<meta>タグではなく<script type="application/ld+json">ブロックに存在します。両方が推奨されます; 一方が他方を置き換えるわけではありません。メタタグは基本的なタイトル / 説明 / シェアカードを制御します; 構造化データはよりリッチな形式を解除します。
よくある間違い
meta keywordsを含めてSEOの利益を期待する。 Googleは2009年に使わないと発表しました。20年以上経っても古いテンプレートにまだあります; 削除するか無視してください。<link rel="canonical">を忘れる。 URLにトラッキングパラメータや代替バージョンがある場合、Googleは自分で1つを選びます。正規がない場合、選ばれたバージョンはすべての受信リンクを持つバージョンではないかもしれません。<title>、og:title、twitter:titleで異なるタイトル。 技術的に間違いではありませんが、矛盾しています。クリーンなデフォルトは、3つすべてで共有される1つのタイトルです。- すべてのページで
og:imageとして汎用サイトロゴ。 すべてのページにはそのコンテンツに関連するユニークな画像が必要です; サイト全体で単一のロゴを使用すると、退屈な共有プレビューが生成されます。 - モバイル対象ページで
viewportメタが欠落。 モバイルブラウザは架空のデスクトップ幅でページをレンダリングし、ズームアウトします。ユーザー体験はひどいです。 - リダイレクトに
<meta http-equiv="refresh">を使用する。 サーバーからのHTTP 301/302が正しい方法です; メタリフレッシュは遅く、アクセシビリティに敵対的であり、多くのクローラーはランキング目的でそれを一貫性なく処理します。 - タイトルが約580ピクセル (約60文字幅) より長い。 Googleが省略記号で切り詰めます; 切り詰められた部分は検索者には見えません。
- シングルページアプリにはサーバー側でレンダリングまたはプレレンダリングされたメタタグが必要であることを忘れる。 多くのソーシャルメディアクローラー (Facebook、LinkedIn、Slack、Discord) はJavaScriptを実行しません。クライアントサイドJSによって書かれたタグはそれらに見えません。
よくある質問
キーワードメタタグはまだSEOに役立ちますか?
いいえ。GoogleのMatt Cuttsは2009年9月に<meta name="keywords">がランキングシグナルとして使用されないと発表しました。Bingはこのタグでの過剰なキーワードスタッフィングをスパムシグナルとして扱います。このフィールドは、それをまだ期待する古いテンプレートとCMSワークフローとの互換性のためにこのジェネレーターに含まれています; 空白のままでも安全です。
meta descriptionとOG descriptionの違いは何ですか?
HTMLの<meta name="description">は、検索エンジンが結果のページタイトルの下にスニペットとして使用するものです。Open Graphのog:descriptionはソーシャルメディアのシェアカードが表示するものです。同じテキストでも構いません (通常そうです) が、検索の聴衆とソーシャルの聴衆が異なるフレーミングを期待する場合、異なるバージョンを書くことができます。
私のJavaScriptはページ読み込み後にメタタグを書きます。それで大丈夫ですか?
Googleのメインクローラー (Googlebot) の場合、はい; GooglebotはJavaScriptをレンダリングし、レンダリング後のメタタグを見ます。ソーシャルメディアクローラー (Facebook、LinkedIn、Slack、Discord、WhatsApp) の場合、一般的にいいえ; それらのほとんどはJavaScriptを実行せず、初期HTMLのみを見ます。あなたのサイトがシングルページアプリの場合、サーバー側レンダリング、プレレンダリング、またはPrerender.ioのようなサービスが必要で、ソーシャルメディアクローラーが正しいメタタグを見るようにします。
これらのタグは正確にどこに行きますか?
あなたのHTMLの<head>内、理想的には先頭近く。<meta charset>は最初の1024バイト以内にあるべきです。<meta name="viewport">はその直後。次に<title>、<meta name="description">、robots、canonical、OGタグ、Twitterタグ。charsetとviewportが十分に早い位置にあれば、<head>内の順序はSEOには関係ありません。
セキュリティのためにメタリフレッシュタグを心配すべきですか?
それ自体はセキュリティリスクではありませんが、貧弱なパターンです。サーバー側のHTTP 301/302リダイレクトは速く、リファラーヘッダーを正しく処理し、よりアクセシビリティに優しいです。リダイレクトに対するサーバー側の制御がない場合 (リダイレクト設定のない静的GitHub Pagesスタイルのホスト) にのみメタリフレッシュを使用してください。
私のメタタグはサーバーにアップロードされますか?
いいえ。ジェネレーターは完全にあなたのブラウザで実行されます。あなたのタイトル、説明、URL、画像フィールドはあなたのマシンに残ります; 出力スニペットはローカルで構成され、要求に応じてクリップボードにコピーされます。これは重要です。なぜなら、ドラフトタグにはしばしば未公開のページURL、内部製品名、または第三者サーバーを通過させたくないプレローンチマーケティングコピーが含まれているからです。