メタタグジェネレーター

このツールについて

メタタグジェネレーターは、HTML ページの <head> に入れるタグを生成します。<title>、meta description、キーワードと著者、robots 指定、canonical リンク、テーマカラー、viewport と文字コードの宣言、Open Graph タグ一式（og:title、og:description、og:image、og:url、og:type、og:site_name、og:locale）、そして X / Twitter カードのタグです。

入力に合わせて、検索結果とソーシャルカードでの見え方をプレビューし、よくあるミスをチェックします。約 60 文字を超えるタイトル、説明文の欠落・短すぎ・約 160 文字超え、相対形式の正規 URL、完全な URL でない共有画像、ロケールや色の形式の誤りなどです。処理はすべてブラウザー内で行われ、プレビューではあえて画像を読み込まないため、このページは通信を行いません。

使い方

1. ページ情報を入力します。重要なのはタイトルと説明文で、カウンターが一般的な表示上限に対する文字数を示します。サンプルをクリックすると完全な例を確認できます。
2. ページの正規 URL と共有画像を入力します。/images/cover.jpg のような相対パスは正規 URL を基準に解決されます。
3. オプションで Open Graph タイプ（多くのページは website、ブログ記事は article）、カードのサイズ、検索エンジンにインデックスとリンクの追跡を許可するか、どのタグのグループを含めるかを選びます。
4. HTML の下の警告とプレビューを確認し、HTML をページのテンプレートにコピーします。

オプションはページのアドレスに、フォームの内容はブラウザーに保存されるので、後で続きから編集したり、同じ設定のリンクを共有したりできます。

例

サンプルページからは次のようなタグが生成されます（一部省略）。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sourdough Bread for Beginners — Step-by-Step Guide</title>
<meta name="description" content="Bake your first sourdough loaf at home: …">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/recipes/sourdough-for-beginners">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Sourdough Bread for Beginners — Step-by-Step Guide">
<meta property="og:image" content="https://example.com/images/sourdough-loaf.jpg">
<meta property="og:locale" content="en_US">

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@examplekitchen">

値は HTML エスケープされるので、タイトル中の引用符や & でマークアップが壊れることはありません。ロケール en-US は Open Graph が求める en_US 形式に正規化されます。

ヒント

• ページごとに固有のタイトルと説明文を書きましょう。サイト内で重複すると検索結果を見分けにくくなります。
• 長いタイトルは末尾が切られるため、重要な語をタイトルの先頭に置きます。
• 正規 URL は、プロトコルと www の有無を含め、インデックスしてほしい正確なアドレスにします。
• robots を noindex にすると検索結果から除外できますが、クローラーがページを取得できることが前提です。robots.txt で同時にブロックしないでください。