メタタグ生成ツール

タイトル・説明・画像などから SEO・Open Graph・article・Twitter カードのメタタグを生成。タイトル/説明の文字数リアルタイム計測と robots・テーマカラー・著者オプション付き。

ツールを読み込み中…

メタタグ生成ツール — ページのタイトル、説明、正規 URL、画像、サイト名を入力すると、HTML の head にそのまま貼り付けられる SEO・Open Graph・Twitter カードのメタタグ一式が手に入ります。Google 検索結果プレビューとソーシャルカードプレビューで、検索時や共有時にどう見えるかを確認できます。すべてブラウザ内で生成され、ページの情報は一切アップロードされません。 リアルタイムの文字数カウンターがタイトルと説明を推奨長と照らし合わせ、任意項目で robots・viewport・charset・テーマカラー・著者タグと article 専用 Open Graph タグを追加でき、ツールは画像 URL を読み込んでプレビュー画像の欠落やサイズ異常を知らせます。

メタタグ生成ツールとは？

メタタグ生成ツールは、いくつかのページ情報を完全な HTML メタタグ一式に変換する無料のオンラインツールです。標準的な SEO タグ（title、meta description、canonical リンク）、Open Graph タグ（og:title、og:description、og:type、og:url、og:image、og:site_name）、Twitter カードタグ（twitter:card、twitter:title、twitter:description、twitter:image）を生成します。マーケター、ブロガー、開発者が、ページや記事を公開する際に、Google 検索結果での見え方や、Facebook・LinkedIn・X/Twitter・Slack・Discord でリンクが展開されたときの見え方を制御するために使います。og:type（website、article、product、profile、video.other）と twitter:card のスタイル（summary、summary_large_image、app、player）を選ぶと、入力した項目に対応する行だけが書き出されます。出力されるのは純粋な HTML タグで、サイトをクロールしたりページを読み込んだりはしません。 リアルタイムのカウンターは、タイトル（約 60 文字）や説明（約 160 文字）が長すぎるときに知らせ、画像 URL を読み込んで実際のピクセルサイズを取得し、画像の欠落や大きすぎ・小さすぎを警告します。任意項目で robots ディレクティブ、viewport と UTF-8 charset タグ、テーマカラー、著者を追加でき、og:type が article のときは article:published_time・article:author・article:section も追加できます。

メタタグ生成ツールの使い方

  1. ページタイトルを入力します。これが <title>、og:title、twitter:title タグになります。
  2. メタ説明（150〜160 文字程度）を書きます。description、og:description、twitter:description タグに使われます。
  3. ページの正規 URL と、リンクプレビュー用の絶対 URL の画像を入力します。
  4. サイト名を追加し、ドロップダウンから og:type と twitter:card を選びます。
  5. 出力ボックスから生成された HTML ブロックをコピーし、ページの <head> に貼り付けます。
  6. Google 検索結果プレビューとソーシャルカードプレビューで、公開前に見え方を確認します。
  7. タイトルと説明のリアルタイム文字数カウンターを確認し、⚙ オプションから robots・viewport・charset・テーマカラー・著者・article タグを追加します。

使用例

ブログ記事のタグ

入力

タイトル: サワードウの焼き方
説明: 自宅でサワードウブレッドを焼く初心者向けガイド。
URL: https://blog.example.com/sourdough
og:type: article

出力

<title>サワードウの焼き方</title>
<meta name="description" content="自宅でサワードウブレッドを焼く初心者向けガイド。" />
<link rel="canonical" href="https://blog.example.com/sourdough" />
<meta property="og:title" content="サワードウの焼き方" />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />

大きな画像のソーシャルカード

入力

画像: https://example.com/og.png
twitter:card: summary_large_image

出力

<meta property="og:image" content="https://example.com/og.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og.png" />

特殊文字はエスケープされます

入力

タイトル: Tips & Tricks for "Pros"

出力

<title>Tips &amp; Tricks for &quot;Pros&quot;</title>

robots と article タグ付きの記事

入力

タイトル: サワードウの焼き方
og:type: article
Robots: index, follow
article:published_time: 2024-05-01T09:00
article:section: Food

出力

<meta name="robots" content="index, follow" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2024-05-01T09:00" />
<meta property="article:section" content="Food" />

よくある質問

このツールはどのメタタグを生成しますか？
標準的な SEO タグ（<title>、meta description、canonical リンク）、Open Graph タグ（og:title、og:description、og:type、og:url、og:image、og:site_name）、Twitter カードタグ（twitter:card、twitter:title、twitter:description、twitter:image）を生成します。入力した項目に対応する行だけが含まれるので、空のプレースホルダータグが出ることはありません。
og:type と twitter:card の違いは何ですか？
og:type はページがどんな種類のオブジェクトか（website、article、product、profile、video.other）をプラットフォームに伝え、リンクの展開のされ方に影響します。twitter:card は X/Twitter でのレイアウトを選びます。summary は小さなサムネイル、summary_large_image は大きなバナー画像を表示し、app と player はアプリやメディア向けです。コンテンツに合う組み合わせを選んでください。
画像の URL は絶対 URL である必要がありますか？
はい。og:image と twitter:image は https:// で始まる完全な絶対 URL である必要があります。スクレイパーがサイトの外部から取得するため、/og.png のような相対パスでは読み込まれません。大きなカードには 1200×630 の画像を使うと最適です。
このツールは私の公開中のページをクロールしたり読み込んだりしますか？
いいえ。入力した値を HTML メタタグに整形するだけです。URL を取得・クロール・解析することはなく、正規 URL と画像 URL はタグにそのまま書き込まれ、アクセスはされません。
私のデータはサーバーに送信されますか？
いいえ。タグはすべてブラウザ内で JavaScript により生成されます。未公開のタイトル・URL・説明を含め、入力した内容は一切アップロード・保存・送信されないため、非公開ページや公開前ページでも安全に使えます。
タイトルと説明はどのくらいの長さにすべきですか？
タイトルは約 60 文字以内、説明はおおよそ 120〜160 文字を目安にしてください。長すぎる文字は検索エンジンで切り詰められます。ツールはそれぞれにリアルタイムカウンターを表示し、推奨長を超えると「通過」状態から警告に切り替わります。
ほかにどんなメタタグを追加でき、画像の警告はどう機能しますか？
⚙ オプションから robots ディレクティブ（index/follow プリセット）、viewport タグ、UTF-8 charset タグ、テーマカラー、著者を追加できます。og:type が article のときは article:published_time・article:author・article:section も追加できます。さらにツールはブラウザで画像 URL を読み込み、実際のピクセルサイズを表示して、欠落している場合や推奨の 1200×630 から大きく外れている場合に警告します。

関連ツール

hreflang タグ生成ツール

ロケールと URL の組のリストから、多言語ページ用の hreflang link タグを生成します。x-default と自己参照タグも任意で付けられます。

JSON-LD ジェネレーター

簡単なフォームから Article・Product・FAQPage・HowTo・LocalBusiness・Event・Recipe・BreadcrumbList・Organization の各スキーマ向けに有効な JSON-LD 構造化データを生成します。

キーワード密度チェッカー

テキストの語の頻度とキーワード密度を 1・2・3 単語のフレーズ単位で分析し、ストップワード除去と対象キーワード検索に対応します。

Open Graph・ソーシャルカードプレビュー

タイトル・説明・画像URL・ページURLから、リンクが X・LinkedIn・Slack・Discord・Facebook でソーシャルカードとして展開される様子をプレビューします。