ジェネレーター

メタタグジェネレーター

ブラウザー上で、どのページにも使える HTML メタタグ一式を生成します。タイトル、説明、正規 URL、シェア画像、サイト名を入力すると、検索向けのタグ、Facebook や LinkedIn 向けの Open Graph タグ、X 向けの Twitter カードタグを組み立てます。リアルタイムのプレビューで、リンクが Google の検索結果でどう読まれ、ソーシャルカードとしてどう展開するかを確認でき、公開前に文言と画像を調整できます。貼り付け用の head スニペットをコピー、または HTML として保存でき、入力した内容がページの外に出ることはありません。

  • タイトル、説明、Open Graph、Twitter カードのタグを一括生成
  • 入力しながら Google の結果と Facebook・X のカードをプレビュー
  • 正規 URL、シェア画像、ロケール、テーマカラー、収集ルールを設定
  • head スニペットをコピー、または HTML として保存。すべてブラウザー内で
工具/メタタグジェネレーター
0 / 60
0 / 160
example.com
https://example.com
ここにページタイトルが表示されます

ここにメタ説明が、ページ内容を短くまとめた読みやすい文として表示されます。

クイック操作

概要

いくつかの項目を入力するだけで、検索・Open Graph・Twitter カードのタグをまとめた完全な head スニペットになります。リアルタイムのプレビューが付き、公開前にページが検索やシェアでどう読まれるかを確認できます。

  1. 01

    完全な head スニペット

    タイトル、メタ説明、正規 link、Open Graph、Twitter カードのタグを一度に生成します。グループごとに並べてコメントを付けるので、どのページの head にもきれいに貼れます。

  2. 02

    リッチなシェアのための Open Graph

    og:title、og:description、og:image、og:url、og:type、og:site_name、og:locale を設定し、Facebook、LinkedIn、Slack などでただのリンクではなくカードとして表示させます。

  3. 03

    Twitter カードに対応

    サマリーカードか大きな画像カードを選び、タイトル・説明・画像・サイトと著者のアカウントを入力すると、X でカードとして表示されます。

  4. 04

    検索と SNS のリアルタイムプレビュー

    Google・Facebook・X のプレビューを切り替えて、タイトル・説明・ドメイン・画像のおおよその配置を、クロールやシェアの前に確認できます。

  5. 05

    長さの目安

    タイトルと説明には文字数の目安が付き、検索エンジンや SNS カードで切り詰められやすい長さを超えると色が変わります。大事な語句を見える範囲に収められます。

  6. 06

    正規 URL・収集・テーマカラー

    重複ページをまとめる正規 URL を追加し、収集の許可と拒否を切り替え、モバイルブラウザーの UI 用にテーマカラーを設定できます。

  7. 07

    安全にエスケープされた出力

    アンパサンドや山かっこ、引用符を含む値は HTML 属性向けにエスケープされるので、記号を含むタイトルでもタグやページが壊れません。

  8. 08

    ローカルでコピーまたは保存

    スニペットをクリップボードにコピーするか、HTML ファイルとして保存できます。処理はすべてブラウザーのタブ内で行われ、このページがサーバーへ送信することはありません。

使い方

左側で項目を入力すると、右側のプレビューとスニペットがすぐに更新されます。検索結果とシェアカードが思いどおりになるまで調整してください。

  1. 01

    ページタイトルと説明を入力し、文字数の目安に気を配ります。

  2. 02

    正規 URL、サイト名、リッチな SNS カード用のシェア画像 URL を追加します。

  3. 03

    ページに合う Open Graph タイプと Twitter カードの種類を選びます。

  4. 04

    詳細設定を開き、ロケール、テーマカラー、著者、キーワード、アカウント、収集拒否ルールを設定します。

  5. 05

    Google・Facebook・X のプレビューを切り替えて、リンクの見え方を確認します。

  6. 06

    head スニペットをコピーするか HTML として保存し、ページの head に貼り付けます。

詳細

すべてのタグが同じ重みを持つわけではありません。短く正確なタイトルと説明、そして確かなシェア画像でほとんどが決まり、残りは各プラットフォーム向けの微調整です。

  • まずは明確なタイトルと説明を必ず設定します。検索スニペットと SNS カードの文面の両方を左右します。
  • 大きな画像カードが切り取られたりぼやけたりしないよう、約 1200 × 630 ピクセルのシェア画像を用意します。
  • 正規 URL をページの優先アドレスに設定し、重複 URL に評価が分散するのを防ぎます。
  • og:site_name と Twitter アカウントを加え、シェアが自分のブランドに明確にひも付くようにします。
  • 投稿ページには article タイプを、ランディングページやトップページには website タイプを使います。
  • ステージングやサンクスページ、内容の薄いページなど検索に載せたくないものには収集拒否ルールを設定します。

活用シーン

メタタグはページが見つかった、あるいはシェアされた瞬間の見え方を決めるため、公開向けのほぼすべてのサイトやアプリで重要になります。

  1. ブログ・記事ページ

    記事ごとに専用のタイトル・説明・シェア画像を設定し、検索結果でも SNS カードとしても読みやすくします。

  2. マーケティングのランディングページ

    キャンペーン URL がチャットに貼られたり SNS に投稿されたり検索に出たりするときの見え方を正確に制御します。

  3. 製品・料金ページ

    正確な Open Graph のタイトルと画像を付け、シェアされた製品リンクが裸の URL ではなくきれいなカードで表示されるようにします。

  4. ドキュメントと変更履歴

    多数のページに正規 URL と一貫した説明を設定し、検索エンジンが正しいバージョンを収集するようにします。

  5. シングルページアプリ

    静的な head タグを生成してシェルに組み込み、クローラーやリンク展開がきちんとメタデータを読めるようにします。

  6. SNS カードの簡易チェック

    公開前に Google・Facebook・X でのリンクの展開を確認し、タイトルや画像を調整します。

関連情報

メタタグはサイトの head の他の部分と自然に組み合わさります。ブラウザーやブックマークに表示されるアイコンを作るには、 ファビコン生成ツール で ICO とマニフェストを書き出せます。ページタイトルを正規 link になる整った URL に変えるには、まず スラッグジェネレーター を通します。テーマカラーを選ぶときは、 コントラストチェッカー で読みやすさを確認できます。タイトルや説明に確認したい特殊文字が含まれる場合は、 HTML エンコーダー・デコーダー がそれぞれのエンコード形式を表示します。

使い方のヒント

優れたメタデータは正直で、具体的で、一貫しています。いくつかの習慣を守れば、サイトが成長しても検索スニペットと SNS カードを正確に保てます。

  • 全サイト共通の一組を使い回さず、重要なページごとに固有のタイトルと説明を書きます。
  • タイトルはおよそ 60 文字以内、説明はおよそ 160 文字以内に収め、切り詰められないようにします。
  • シェア画像には絶対 https URL を使います。相対パスは SNS で読み込みに失敗しがちです。
  • タイトルと説明を実際のページ内容に合わせます。誤解を招くメタデータは信頼とクリック率を損ないます。
  • 公開後は各プラットフォーム専用のデバッガーで再確認します。最初に取得したバージョンをキャッシュする場合があるためです。

制限事項

このツールはタグを生成するだけで、ページをクロールすることも、各外部プラットフォームでの最終的な表示を左右することもできません。

  • プレビューは近似です。各プラットフォームには独自のレイアウト・切り詰め・画像ルールがあり、時間とともに変わります。
  • タグを追加しても再クロールは強制されません。検索エンジンや SNS は独自のタイミングで更新し、古いカードをキャッシュすることがあります。
  • シェア画像は公開アクセス可能な URL に置く必要があります。ローカルや非公開のパスはシェア時に読み込めません。
  • meta キーワードは主要な検索エンジンにほぼ無視されており、今も読む一部のシステムのためだけに含めています。
  • 良いメタデータは見せ方には役立ちますが順位の近道ではなく、コンテンツの質とページ体験が依然として最も重要です。

よくある質問

Open Graph、Twitter カード、シェア画像、そしてこれらのプレビューが各プラットフォームの実際の表示とどう関係するかについての、よくある質問です。

Open Graph と Twitter カードのタグとは何ですか。

Open Graph タグは og: で始まる meta タグで、リンクがシェアされたときに Facebook、LinkedIn、Slack などへ表示するタイトル・説明・画像・URL を伝えます。Twitter カードタグは X 向けに同じ役割を果たします。両方そろうと、ただのリンクがリッチなカードになります。

シェア画像はどのサイズが良いですか。

1200 × 630 ピクセルが多くのプラットフォームの大きな画像カードに無難なサイズです。絶対 https URL を使い、各プラットフォームで切り取り方が少し異なるため、重要な文字は端から離してください。

SEO のためにメタ説明はまだ必要ですか。

必要です。検索エンジンはメタ説明を結果のタイトル下のスニペットとしてよく使います。ページに合った明確で正確な説明は結果を読みやすくし、クリック率の向上にもつながります。直接の順位要因ではありませんが有用です。

シェアしたリンクが古いプレビューのままなのはなぜですか。

多くのプラットフォームは初めてリンクを取得したときにメタデータをキャッシュします。タグを更新したら、各プラットフォーム専用の共有デバッガーやリンク検査ツールで強制更新すると、新しいタイトル・説明・画像が読み込まれます。

正規 URL は何のためにありますか。

同じ内容が複数のアドレスでアクセスできるとき、正規 link はそのページの優先バージョンがどの URL かを検索エンジンに伝えます。順位の評価を一つの URL にまとめ、重複コンテンツの混乱を避けます。

入力した内容はサーバーへ送られますか。

いいえ。ジェネレーターは完全にブラウザーのタブ内で動作します。入力した値、プレビュー、生成されたスニペット、保存したファイルを、このページがサーバーへ送信することはありません。

関連ツール

メタタグに加えてファビコン、スラッグ、ID、プレースホルダーテキストなどサイト構築の作業が必要なときは、ジェネレーターのカテゴリーを使ってください。