HTML メタタグジェネレーター

ページのメタデータを入力すると、title とメタタグのひな形を生成します。内容を確認して、ページの head 内にコピーしてください。

ブラウザ内でローカルに実行

HTML メタタグを生成する手順

ページタイトル・説明・キーワードを入力し、viewport・文字コード・キャッシュ・robots を選ぶと、対応する head タグを組み立ててコピーできるプレーンテキストとして表示します。

ブロックはブラウザー内で組み立てられるため、入力内容が送信されることはなく、オフラインでも動作します。得られるのはページの head の出発点であり、SEO 監査の結果ではありません。

  1. ページタイトルと、あれば説明・キーワードを入力します。結果に含まれるのは入力した項目だけです。
  2. 選択項目は既定値のままでも、ページに合わせて viewport・文字コード・キャッシュ・robots を選んでもかまいません。
  3. 「メタタグを生成」を押すと、フォームの下に title 要素とメタタグがプレーンテキストで表示されます。
  4. 「コピー」を押し、charset 宣言の後ろ、head 要素の中にブロックを貼り付けます。
  5. 項目を変えて再生成すると 2 つの案を比べられます。「クリア」はすべての項目を初期状態に戻し、結果を隠します。

生成されるタグの役割と、現在は効果がないもの

各タグの役割

title 要素は検索結果のリンクになる見出し、description はその下に表示される要約です。検索エンジンはどちらもそのまま表示することも、ページ内の別のテキストに置き換えることもあります。viewport タグはモバイルブラウザーがレイアウトの寸法を決める方法を制御し、charset 宣言はブラウザーにファイルのデコード方法を伝えます。

author・copyright・designer は独自メタデータで、社内ツールやアーカイブには役立ちますが、順位付けのシグナルではありません。実際に効くのは robots タグです。noindex はページを検索結果から除外し、nofollow はクローラーにリンクの評価を渡さないよう求めます。

現行のものとレガシーのもの

Content-Type メタタグは HTML5 以前の書き方で、短い <meta charset="utf-8"> が現代的な等価物であり、新しい文書ではこちらを使います。キャッシュ用のメタタグも同様にレガシーで、現代のブラウザーは無視します。実際のキャッシュ制御は HTTP の Cache-Control ヘッダーで行います。ここに残しているのは古いシステムと教材のためです。

keywords タグは何年も前から Google や Bing の評価に影響しません。社内システムが要求する場合だけ残してください。説明文とページ本文の言葉のほうが、どんなキーワード一覧よりもはるかに重要です。

貼り付けた後の確認

1 ページにつき title 要素と description は 1 つにします。重複したタイトルがあると検索エンジンが独自に選び、charset 宣言がない、または遅すぎると、アクセント付き文字が文字化けすることがあります。

公開後にページのソースを確認してください。テンプレートエンジンや CMS プラグインが head タグを書き換えたり追加したりすることがあります。ブラウザーに表示される内容と貼り付けた内容を比べ、出力ではなくテンプレート側を直します。

最近使ったツール: