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

SEO用のHTMLのheadタグ（title、メタディスクリプション、canonical、robotsのnoindex/nofollow、viewport、charset、theme-color）を、文字数カウンター付きで生成します。

ページタイトル 32 文字（推奨 30〜60）

メタディスクリプション 100 文字（推奨 70〜160）

canonical URL

著者

メタキーワード（任意）

カンマ区切り。Google と Bing は順位付けにこのタグを使いません。

テーマカラー

#4f46e5

インデックスを許可（index）リンクの追跡を許可（follow）<meta charset> を含めるレスポンシブ用 viewport を含める

<head> に入れる HTML

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Free Online Tools for Developers</title>
<meta name="description" content="Format, convert and validate data right in your browser. Fast, private and free developer utilities.">
<link rel="canonical" href="https://example.com/">

検索エンジンはタイトルや説明文を書き換えることがあります。ページごとに固有のタイトルと説明文にしてください。robots メタタグはインデックスやフォローを禁止した場合のみ追加されます。

メタタグジェネレーターとは？

このジェネレーターは、簡単なフォームから、Webページに必須の <head> タグ（charset、レスポンシブなviewport、<title>、メタディスクリプション、任意のkeywordsとauthor、canonicalリンク、robotsディレクティブ、テーマカラー）を書き出します。文字数カウンターで、titleとdescriptionが一般的に推奨される長さの範囲に収まっているかが分かります。

メタタグジェネレーターの使い方

ページのタイトルとメタディスクリプションを入力し、文字数カウンターを確認します。
canonical URLを追加し、必要に応じてauthor、keywords、テーマカラーも追加します。
「Allow indexing」または「Allow following links」のチェックを外すと、robotsメタタグが追加されます。
生成されたHTMLを、ページの<head>にコピーします。

例

入力

Title: Tom & Jerry · description: Classic "cartoon" · indexing off

出力

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tom &amp; Jerry</title>
<meta name="description" content="Classic &quot;cartoon&quot;">
<meta name="robots" content="noindex, follow">
<link rel="canonical" href="https://example.com/">

メタタグジェネレーターを使うべき場面

新しいページやテンプレートを作るときに、正しくエスケープされたheadタグを素早く用意したい場合に使います。既存のページはチェックしません。titleとdescriptionがGoogleでどう見えるかのプレビューにはSERPプレビューを、ソーシャルカードにはOpen GraphまたはTwitter Cardジェネレーターを使ってください。

メタタグジェネレーターの仕組み

値はHTMLエスケープ（&、"、<、> はエンティティになります）されてタグに挿入されるため、ディスクリプション内の引用符でマークアップが壊れることはありません。空のフィールドは省略されます。robotsメタタグは、インデックスやリンクのフォローを禁止する場合にのみ出力されます。index, followが既定だからです。keywordsはトリミングされ、カンマで連結し直されます。