メタタグ生成ツール
タイトル・説明・正規URL・画像・サイト名から、ページの SEO・Open Graph・Twitter カードのメタタグを生成します。
メタタグ生成ツール — ページのタイトル、説明、正規 URL、画像、サイト名を入力すると、HTML の head にそのまま貼り付けられる SEO・Open Graph・Twitter カードのメタタグ一式が手に入ります。Google 検索結果プレビューとソーシャルカードプレビューで、検索時や共有時にどう見えるかを確認できます。すべてブラウザ内で生成され、ページの情報は一切アップロードされません。
メタタグ生成ツールとは？
メタタグ生成ツールは、いくつかのページ情報を完全な 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 タグで、サイトをクロールしたりページを読み込んだりはしません。
メタタグ生成ツールの使い方
- ページタイトルを入力します。これが <title>、og:title、twitter:title タグになります。
- メタ説明（150〜160 文字程度）を書きます。description、og:description、twitter:description タグに使われます。
- ページの正規 URL と、リンクプレビュー用の絶対 URL の画像を入力します。
- サイト名を追加し、ドロップダウンから og:type と twitter:card を選びます。
- 出力ボックスから生成された HTML ブロックをコピーし、ページの <head> に貼り付けます。
- Google 検索結果プレビューとソーシャルカードプレビューで、公開前に見え方を確認します。
使用例
ブログ記事のタグ
入力
タイトル: サワードウの焼き方 説明: 自宅でサワードウブレッドを焼く初心者向けガイド。 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 & Tricks for "Pros"</title>
よくある質問
- このツールはどのメタタグを生成しますか？
- 標準的な 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・説明を含め、入力した内容は一切アップロード・保存・送信されないため、非公開ページや公開前ページでも安全に使えます。