メタタグジェネレーター
Googleの表示目安：35〜60文字。スマホは短め（35字前後）が安全
Googleの表示目安：70〜120文字。CTRに直結する最重要フィールド
og:url・canonical に使用。末尾スラッシュは統一すること
推奨サイズ：1200×630px（Facebook・Xどちらにも対応）
メタタグジェネレーターとは？
メタタグジェネレーターは、WebページのHTMLに記述するmeta要素（メタタグ）をフォームの入力だけでまとめて生成できる無料ツールです。タイトルやmeta description、OGP（Open Graph Protocol）、Xカード、Robots制御など、SEOとSNSシェアに欠かせないタグを一括で作成できます。さらにHTML形式のほか、Next.js App RouterのMetadataオブジェクトやAstroのfrontmatter形式にも変換して出力できるため、モダンフレームワークを使った制作にもそのままコピペで使えます。
各機能の説明
-
文字数カウント付き入力フォームタイトルは60文字、meta descriptionは120文字の目安に合わせてリアルタイムでカウント表示します。上限を超えると警告色に変わるため、Googleの表示範囲に収まっているか一目で確認できます。
-
OGP同期チェックボックスog:titleとog:descriptionは、基本情報のタイトル・descriptionと内容を同期するオプション（デフォルトON）を搭載。別々に管理したい場合はチェックを外して個別入力に切り替えられます。
-
出力形式の3択切り替えHTML（<meta>タグ）・Next.js App Router（export const metadata）・Astro（frontmatterオブジェクト）の3形式を出力タブで切り替えできます。フレームワークごとにそのまま使えるコードが得られます。
-
Google検索・OGPリアルタイムプレビュー入力内容をもとにGoogle検索スニペットとSNSシェア（OGP）のプレビューをリアルタイムで表示します。公開前に見た目を確認しながら文言を調整できます。
-
Robots・viewport・charsetの制御noindex／nofollowのチェックボックス、viewportやcharsetのセレクト選択など、実務でよく使うメタタグをUI操作だけで設定できます。
出力形式について
-
HTML形式静的HTMLや旧来のWordPressテーマなど、<head>内に直接<meta>タグを記述する環境向けです。<charset>から各OGPタグまで必要なものをまとめて出力します。
-
Next.js App Router形式Next.js 13以降のApp Routerで使用する
export const metadataオブジェクト形式で出力します。layout.tsxやpage.tsxにそのまま貼り付けて使えます。 -
Astro形式Astroの.astroファイルのfrontmatter（—ブロック）で使えるオブジェクト形式で出力します。Astroの
<SEO>コンポーネントや<head>への展開にそのまま利用できます。
こんなときに使う
-
新規ページのSEO設定をまとめて済ませたいタイトル・description・OGP・Robots制御を一度のフォーム入力でまとめて生成。抜け漏れを防ぎながら効率的にメタタグを用意できます。
-
Next.js・AstroなどモダンフレームワークのSEO対応HTMLコードではなくJavaScriptオブジェクト形式で出力できるため、フレームワーク固有のmetadata構造にそのまま貼り付けられます。変換作業が不要になります。
-
SNSシェア時の見え方を確認したいOGPプレビューでFacebook・XなどSNS上での表示イメージを確認しながら、タイトルや画像URLを調整できます。
-
クライアントへの納品前チェックGoogle検索スニペットのプレビューを使ってタイトルとdescriptionの文字数・表示内容を事前確認。クライアントへの説明材料としても使えます。
-
記事テンプレートのメタ情報を量産したい入力をリセットして別ページ用を繰り返し生成できるため、同一サイトの複数ページのメタタグをまとめて準備する際にも活用できます。
よくある質問
-
meta keywordsタグは生成されないのですか？
Googleは2009年にmeta keywordsを検索ランキングに使用しないと公式発表しており、現在のSEOにおいて効果はありません。本ツールは最新仕様に沿って意味のないタグを省き、実際に有効なタグのみを生成する方針をとっています。
-
Next.js形式で出力するとどんなコードになりますか？
Next.js 13以降のApp Routerで使用する
export const metadata: Metadata = { ... }形式で出力します。title・description・openGraph・twitter・robotsの各プロパティを含むオブジェクトをそのまま貼り付けて使えます。 -
タイトルとmeta descriptionの推奨文字数は？
タイトルはGoogleの表示目安として35〜60文字が一般的です。meta descriptionは70〜120文字が目安ですが、Googleが自動的に書き換えることもあります。本ツールでは文字数をリアルタイムで表示し、目安を超えると警告色でお知らせします。
-
og:imageはどんな画像を設定すればよいですか？
FacebookやXの推奨サイズは1200×630pxです。ローカルファイルではなく、実際に公開されているURL（https）を指定してください。SNSクローラーがURLにアクセスして取得するため、CORSや認証のかかったURLは表示されません。
-
入力した内容はサーバーに送られますか？
送られません。入力・生成の処理はすべてブラウザ内のJavaScriptで完結しており、外部サーバーへのデータ送信は一切行っていません。機密性の高いサイト情報を入力しても安全です。