メタタグジェネレーター

必須メタタグ

タイトルウェブページのタイトル（ブラウザタブに表示）

説明ページコンテンツの簡潔な要約（150-160文字推奨）

著者

キーワードキーワードはカンマで区切ってください

ビューポート

ロボット

Open Graphメタタグ

OGタイトルソーシャルプラットフォームで共有されたときに表示されるタイトル

OG説明ソーシャルメディア共有で表示される説明

OG画像URL共有時に表示される画像（推奨サイズ：1200×630px）

OG URL

Twitter Cardメタタグ

Twitterカードタイプ

Twitterタイトル

Twitter説明

Twitter画像URLTwitterカードに表示される画像

生成されたメタタグ

<!-- Basic Meta Tags -->
<title>ページタイトル</title>
<meta name="description" content="最適なSEOのために約160文字程度のページコンテンツの簡単な説明。" />
<meta name="author" content="あなたの名前" />
<meta name="keywords" content="seo, メタタグ, html, ウェブサイト最適化" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="index, follow" />

<!-- Open Graph Meta Tags -->
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="ソーシャルメディア共有用の簡単な説明。" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />

<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="ページタイトル" />
<meta name="twitter:description" content="Twitter共有用の簡単な説明。" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

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

1
必須項目を入力する
ページのタイトル、説明、キーワード、著者、robots ディレクティブを「Essential Meta Tags」セクションに入力します。
2
ソーシャル共有用のタグを追加する
Open Graph と Twitter Card のフィールドにタイトル、説明、画像 URL を入力し、ページが共有されたときの見え方を制御します。
3
生成されたタグを確認する
各フィールドに入力すると、出力エリアでメタタグのマークアップがリアルタイムに組み上がる様子を確認できます。

4
<head> に貼り付ける
「Copy Meta Tags」をクリックし、生成された HTML をページの head セクションに貼り付けます。

SEO のための HTML メタタグ完全ガイド

メタタグとは何で、どこに置くか

メタタグは、ページの head セクション内に存在し、人間の訪問者ではなく、ブラウザ・検索エンジン・ソーシャルネットワークに向けて文書を説明する HTML 要素です。ページ上に表示されることは決してありません。ブラウザは何かを描画する前にそれらを読み取るので、配置が重要になります。このジェネレーターが生成するすべてのタグは、head 要素の中、できれば上のほう、描画をブロックするスクリプトより前に貼り付けるべきです。とりわけ title 要素と charset 宣言は、できる限り早く現れるべきです。ブラウザは残りのマークアップを解析する前に文字エンコーディングを知る必要があるからです。

最も重要なメタデータのうち 2 つは、厳密にはメタタグですらありません。title 要素（title）とカノニカルリンク（link rel="canonical"）は別個の要素ですが、同じ head ブロックに属し、ページがどう理解されるかの中心を成します。このツールは、title、description、viewport、robots、Open Graph、Twitter Card のタグに焦点を当てており、これらを合わせれば、検索とソーシャルで実際に効果を生むメタデータをカバーできます。

title タグ: ページ内で最も重要なシグナル

title 要素は、あなたが制御できる最も強力なページ内 SEO シグナルです。Google が通常、検索結果で青いクリック可能な見出しとして表示するものであり、ブラウザのタブに現れるものでもあります。おおむね 50〜60 文字、ピクセルにして約 580 ピクセルを目安にし、結果ページで省略記号によって切り詰められないようにします。最も重要なキーワードを前のほうに置き、クリックするかどうかを判断している人間に向けて書き、サイト全体で各タイトルを一意に保ちます。すべてのタイトルの先頭でブランド名を繰り返すような定型句は、あなたが持つ最も価値ある区画を無駄にします。

よくある間違いは、title タグと H1 見出しを互換のものとして扱うことです。両者は異なる相手に向けて役立ちます。title は検索スニペットとタブのためのもの、H1 はページ内の見出しです。両者は異なってよく、しばしば異なるべきです。検索結果でクリックされやすい理想的な言い回しが、すでにページにいる人にとって最良の見出しとは限らないからです。

meta description: 順位ではなくクリック

meta description は順位に直接は影響しませんが、クリック率には大きく影響し、それが重要です。広告コピーのように扱ってください。ページを要約し、クエリに一致したときに太字にできるよう主要キーワードを含め、クリックする理由を加えます。おおむね 150〜160 文字に収めます。長すぎる説明は切り詰められ、Google は、説明がない、重複している、あるいはクエリにうまく合っていない場合、ページ本文からスニペットを引いてきて頻繁に書き換えます。

Google があなたの説明を無視して独自のものを合成することがあるため、重要な情報をそこに頼ってはいけません。それでも力強いものを書いてください。生き残った魅力的な説明は、自動生成されたスニペットを上回ることがよくあります。キーワードを詰め込んではいけません。それは書き換えを引き起こし、ユーザーにはスパムのように読まれます。

robots メタタグとクロール制御

robots メタタグは、ページをクロールした後で検索エンジンが何をすべきかを伝えます。最もよく使われる値は index/noindex（ページが結果に現れてよいか）と follow/nofollow（その上のリンクが評価を渡すべきか）です。noindex, follow のような値は、クローラーにリンクをたどらせつつ、ページをインデックスから外しておくもので、サイト内検索結果や印刷向けの変種のような薄いページに役立ちます。ほかにも noarchive、nosnippet、max-snippet といったディレクティブがあり、結果がどう表示されるかを細かく制御できます。

重要な区別があります。robots メタタグはインデックスを制御し、robots.txt はクロールを制御します。両者は互換ではありません。robots.txt で URL をブロックすると、Google はそのページをクロールして読むことができないため、そのページの noindex タグを決して見ないことがあり、URL は素のリンクとして結果に現れ続けることがあります。ページを検索から確実に取り除くには、クロール可能なままにして noindex を適用してください。

viewport、charset、技術的な必須事項

viewport タグ、width=device-width, initial-scale=1.0 は、ページをモバイル対応にするものです。これがないと、モバイルブラウザはページをデスクトップ幅で描画して縮小し、極小の文字と貧弱なモバイル体験を生みます。Google はページのモバイル版を先にインデックスするため、viewport タグの欠落や設定ミスは、見た目だけの問題ではなく、実際の順位とユーザビリティの問題です。charset 宣言は、ほぼ常に UTF-8 で、特殊文字や絵文字が文字化けではなく正しく表示されるようにします。

この 2 つのタグは小さいながらも譲れません。viewport を端末の幅に設定し、maximum-scale や user-scalable=no でユーザーのズームを無効化するのは避け（アクセシビリティを損ないます）、すべてのページで UTF-8 エンコーディングを宣言してください。

ソーシャルプレビューのための Open Graph と Twitter Card

Open Graph タグ（og: ファミリー）は、リンクが Facebook、LinkedIn、Slack、Discord、その他多くのプラットフォームに貼り付けられたときの見え方を制御します。中核となる一式は og:title、og:description、og:image、og:url、og:type です。Twitter Card タグ（twitter: ファミリー）は X で同じ役割を果たし、twitter:card を summary_large_image に設定するのが最も目を引く選択肢です。og:image は 1200×630 ピクセル前後のものを用意し、それには必ず絶対 URL を使ってください。相対的な画像パスは、プレビューにサムネイルが表示されない最も一般的な原因です。

ソーシャルプラットフォームはスクレイプした内容をキャッシュするので、これらのタグを変更した後は、古いプレビューを消すために、プラットフォーム独自のデバッグツール（たとえば Facebook の Sharing Debugger）を使ってページを再スクレイプする必要がしばしばあります。タグが欠けている場合、ほとんどのプラットフォームは標準の title と description にフォールバックしますが、結果はより素っ気ない、クリックされにくいカードになります。

もう役立たないタグと、よくある間違い

meta keywords タグは SEO では死んでいます。Google は何年も前に、meta keywords を完全に無視すると認めており、しかもそれは狙うキーワードを競合に公然と知らせていたため、入力するのは良くて無意味、悪ければわずかな情報漏えいです。このジェネレーターは、網羅性とレガシーシステムのために keywords フィールドを備えていますが、そこから順位の恩恵を期待してはいけません。meta revisit-after や meta author といったほかのレガシーなタグも、Google の順位には影響しません。

実際に最も頻発する間違いは、多くのページにまたがる重複した title と description、表示上限を超えて切り詰められる title と description、複数の URL から到達できるページでのカノニカルタグの欠落、og:image の相対 URL、そしてステージング環境から残ったサイト全体の noindex をうっかり本番に出してしまうことです。最終的に描画される head は、必ずブラウザのソース表示や開発者ツールで確認してください。JavaScript フレームワークは、最初の HTML が読み込まれた後にメタタグを挿入したり上書きしたりすることがあるからです。

よくある質問

このジェネレーターはどのメタタグを作成しますか?

必須の SEO タグ(title、description、keywords、author、viewport、robots)に加え、Open Graph と Twitter Card のタグを作成し、検索エンジンとソーシャルプレビュー向けの一式をまとめて用意します。

Open Graph と Twitter Card のタグは何のためにありますか?

Open Graph タグは、Facebook や LinkedIn などでページが共有されたときに表示されるタイトル、説明、画像を制御し、Twitter Card タグは Twitter で同じ役割を果たします。これにより、リンクが素っ気ない見た目ではなく洗練された形で表示されます。

タイトルと説明はどのくらいの長さにすべきですか?

タイトルは簡潔に、説明はおおむね150〜160文字を目安にします。この長さなら、検索エンジンがスニペット全体を結果で切り詰めずに表示しやすくなります。

OG タグにはどの画像サイズを使うべきですか?

推奨される Open Graph 画像は 1200×630 ピクセルで、ほとんどの SNS で大きなプレビューとしてきれいに表示されます。画像 URL を指定すると、ツールがマークアップに挿入します。

生成したタグはどこに置けばよいですか?

HTML の <head> セクション内、できれば上部付近に貼り付けます。生成はすべてブラウザ内で行われ、ツールは登録不要で無料です。