HTMLメタタグジェネレーター
ページの<head>に入れるSEOとソーシャル共有用のメタタグを生成します。タイトル、説明文、キーワード、作成者、正規URL、robots指示、テーマカラーに加え、リッチなリンクプレビュー用のOpen GraphとTwitter Cardタグも含みます。すぐに貼り付けられるHTMLをコピーまたはダウンロードできます。
入力
ブラウザのタブと検索結果の見出しに表示されます。50〜60文字を目安にしてください。
検索結果の下に表示される抜粋です。150〜160文字を目安にしてください。
カンマ区切りで入力します。Googleをはじめとする主要な検索エンジンはこのタグを無視しますが、一部の専門的な検索エンジンは今も読み取ります。迷う場合は空欄のままにしてください。
このページの優先URLです。同じ内容が複数のURLで表示される場合に、検索エンジンがどのバージョンをインデックスすべきかを伝えます。
Open GraphタグとTwitter Cardタグを追加し、ページへのリンクがリッチなプレビューカードとして表示されるようにします。推奨サイズ: 1200×630px。空欄にするとソーシャル用のタグは出力されません。
モバイルのブラウザUI（アドレスバーやタスク切り替え画面）の色を調整します。空欄にするとこのタグは出力されません。
出力
HTMLページの<head>内に貼り付けてください。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/html-meta-tag-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"title": "My Awesome Website",
"description": "A brief description of my awesome website for se…",
"keywords": "",
"author": "",
"canonicalUrl": "",
"ogImage": "",
"robots": "",
"themeColor": ""
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `html-meta-tag-generator` tool (HTML Meta Tag Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/html-meta-tag-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="HTMLメタタグジェネレーター — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
HTMLメタタグジェネレーターは、すべてのWebページの<head>に入れるべき<meta>タグと<link>タグのブロックを作成します。ページタイトル、説明文、正規URL、ソーシャル共有画像といったシンプルな項目を入力するだけで、そのままコピーまたはダウンロードして貼り付けられるHTMLを出力します。すべての処理はブラウザ内で行われ、入力した内容がサーバーに送信されることはありません。
これらのメタタグの役割
メタタグは、ページの内容を検索エンジンやソーシャルネットワークに伝えるためのものです。訪問者がページ上で見る内容は変わりませんが、ページが他の場所でどのように表示されるかを決めます。
- タイトルと説明文は、Google検索結果に表示される見出しと抜粋です。わかりやすく適切な長さのタイトルと説明文は、クリック率の向上につながります。
- 正規URLは、同じページに複数のURLでアクセスできる場合に、どのバージョンをインデックスすべきかを検索エンジンに伝え、重複コンテンツの問題を防ぎます。
- Robotsは、検索エンジンがページをインデックスするか、そのリンクをたどるかを制御します。
- Open Graphタグ（
og:title、og:description、og:image、og:url）は、Facebook、LinkedIn、Slack、Discord、そして多くのメッセージングアプリでリンクを共有したときに表示されるリッチなプレビューカードの元になります。 - Twitter Cardタグは、X（Twitter）向けに同様の働きをし、大きな画像付きのサマリーカードを作成します。
- テーマカラーは、モバイル端末のブラウザUI（アドレスバーやタスク切り替え画面）の色を変えます。
ツールの使い方
- ページタイトルとメタディスクリプションを入力します。ほぼすべてのページに設定しておきたい2つのタグです。
- 正規URL、作成者、その他必要な任意項目を追加します。
- ソーシャルプレビューカードを表示するには、ソーシャル共有画像のURLを貼り付けます（1200×630pxが理想的です）。ツールは、すでに入力済みのタイトル、説明文、URLを使って、整合性のあるOpen GraphとTwitter Cardのブロックを追加します。
- 生成されたHTMLをコピーして、ページの
<head>内に貼り付けるか、meta-tags.htmlとしてダウンロードします。
空欄の任意項目は自動的にスキップされるため、空のcontent=""属性でマークアップが散らかることはありません。
キーワードのメタタグはまだ意味がありますか？
Googleにとっては意味がありません。Googleは何年も前に<meta name="keywords">タグを無視すると公式に発表しており、このタグはスパムに大量に悪用されたため、主要な検索エンジンの多くも同様に無視しています。小規模な地域の検索エンジンの中には今も読み取るものがあるため、このツールでは任意項目として残していますが、空欄のままでも問題ありません。
<meta charset>は本当に必要ですか？
はい。<meta charset="utf-8">は、ブラウザがテキストを正しくデコードできるように、<head>の最初のタグにしてください。このツールは常に最新のHTML5形式（小文字のutf-8、スラッシュによる閉じ記号なし）で出力します。
これらのタグで必ずプレビュー画像が表示されますか？
Open GraphタグとTwitterタグは、各プラットフォームに何を表示すべきかを伝えるものですが、各プラットフォームはプレビューをキャッシュします。タグを更新した後は、各プラットフォームのデバッグツール（Facebook Sharing Debuggerなど）を使って、URLを再取得させてください。