本文へスキップ
SPCXTools

メタタグ生成ツール

検索結果のライブプレビューを見ながら、標準的なSEO、OGP、Twitterカードのメタタグを生成します。

ローカルで動作 — ファイルは端末から出ません

ツールを読み込み中…

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

  1. 1ページのタイトルとディスクリプションを入力します。検索結果で省略されないよう、文字数カウンターを確認してください。
  2. 2カノニカルURLと画像URLを指定して、SNSでリッチな共有ができるようにします。
  3. 3サイト名、ロケール、テーマカラー、robots（index/follow）ディレクティブなどの詳細設定を調整します。
  4. 4ライブプレビューを確認し、検索結果でページがどのように表示されるかチェックします。
  5. 5生成されたHTMLコードをコピーし、ウェブサイトの<head>セクションに貼り付けます。

モダンなWebサイトに最適なメタタグ作成ツール

Webサイト制作では、目に見えるコンテンツを作るだけでは不十分です。検索エンジンやSNSでページを魅力的に表示させるには、裏側で適切なHTMLコードを設定する必要があります。この無料のメタタグ作成ツールを使えば、モダンなWeb開発に必須の<head>タグを瞬時に生成できます。

入力と同時に、基本的なSEOメタタグ、OGPタグ、Twitterカードを含む、適切にエスケープされたクリーンなHTMLコードが自動生成されます。すべての処理はブラウザ上でローカルに行われるため、入力したタイトル、ディスクリプション、URLなどのデータがサーバーに送信されることは一切ありません。未発表のプロダクトや非公開のクライアント案件でも、安全にメタタグを作成できます。

必須のSEOメタタグ

Googleなどの検索エンジンは、特定のHTMLタグを読み取ってページの内容を理解し、検索結果に表示します。これらを正しく設定することが、内部SEOの基本です。

タイトルとディスクリプション: <title>タグと<meta name="description">タグは、検索結果ページ（SERP）に表示される内容を決定します。長すぎると、検索エンジンによって末尾が省略されてしまいます。本ツールには文字数カウント機能が組み込まれており、タイトルが60文字、ディスクリプションが160文字を超えると警告が表示されるため、簡潔でクリックされやすい文章を作成するのに役立ちます。

カノニカルURL: <link rel="canonical">タグは、どのURLが「正規」バージョンであるかを検索エンジンに伝えます。これにより、複数のURL（トラッキングパラメータの有無など）からページにアクセスできる場合に発生する、重複コンテンツの問題を防ぎます。

Robotsディレクティブ: 「index」と「follow」のチェックボックスで、<meta name="robots">タグを生成します。デフォルトでは、検索エンジンはページをインデックスし、リンクをたどります。非公開ページ、サンクスページ、ステージング環境などを作成する場合、チェックを外すとnoindexとnofollowが生成され、クローラーのアクセスを防ぐことができます。サイト全体のクローラー制御には、Robots.txtジェネレーターも併せてご活用ください。

OGP・Twitterカードジェネレーター

Slack、Discord、iMessageなどのメッセージアプリやSNSでリンクを共有する際、魅力的に見せたいものです。テキストだけのリンクは無視されやすいですが、大きな画像や目立つタイトルのリッチプレビューがあれば、クリックを促すことができます。

OGPタグジェネレーター: Open Graphプロトコル（og:）は、リッチなリンクプレビューの業界標準です。画像、サイト名、ロケールなどの項目を入力することで、このツールはOGPタグジェネレーターとして機能し、FacebookやLinkedIn、多くのチャットアプリで必要なプロパティ（og:image、og:title、og:descriptionなど）を生成します。

Twitterカードジェネレーター: Twitterはリンクの表示に独自のマークアップを使用します。本ツールには専用のTwitterカードジェネレーターが組み込まれており、twitter:card、twitter:title、twitter:description、twitter:imageタグを出力します。ドロップダウンメニューから、標準の「Summary」カード（テキスト横に小さな正方形画像）または「Summary with Large Image」カード（テキスト上部に大きな画像）を選択できます。

表示とブランディングのコントロール

検索エンジンやSNSだけでなく、最新のモバイルブラウザではメタタグを使ってブラウザのUI自体をカスタマイズできます。

テーマカラーを入力すると、<meta name="theme-color">タグが生成されます。これにより、モバイルブラウザ（AndroidのChromeやiOSのSafariなど）のアドレスバーやステータスバーの色を、ブランドカラーに合わせて変更できます。カラーピッカーを使うかHEXコード（16進数カラーコード）を貼り付けるだけで、ブランドカラーをブラウザのUIに直接反映できます。当サイトのファビコン作成ツールで作ったカスタムアイコンと組み合わせれば、モバイルでのブランド体験をさらに高めることができます。

効果的なメタタグを作成するためのヒント

  • ユーザーファーストで記述する: キーワードも重要ですが、タイトルとディスクリプション（説明文）は実質的に広告のコピーと同じです。ユーザーの検索意図に沿った、魅力的な内容にしましょう。
  • 絶対URLを使用する: OGPやTwitterの画像には、相対パス（/image.jpg）ではなく、必ず完全な絶対URL（例：https://example.com/image.jpg）を指定してください。SNSは相対パスを認識できないため、画像が読み込まれなくなります。
  • プレビューを確認する: 検索結果のシミュレーションプレビューを使って、タイトルとディスクリプションのバランスを確認しましょう。文字が途切れたり不自然に見えたりする場合は、コードをコピーする前にテキストを調整してください。
  • 適切な画像サイズにする: Twitterカードの「Summary with Large Image（大型画像付きサマリー）」や標準的なOGPシェアでは、1200 × 630ピクセルが最適な画像サイズ（解像度）とされています。

よくある質問

メタタグとは？
メタタグはページの内容を説明する短いテキストです。ページ上には表示されず、ソースコード内に記述されます。検索エンジンはページの内容を理解するため、SNSはリンクプレビューを生成するためにメタタグを使用します。
OGPジェネレーターとは？
Open Graph（OGP）は、SNSでURLがシェアされた際の表示を標準化するためにFacebookが開発したプロトコルです。OGPジェネレーターは、Facebook、LinkedIn、Discord、Slackなどで画像やタイトル、説明文を含むリッチプレビューを表示するために必要な og: メタタグを生成します。
TwitterカードとOGPの違いは？
OGPは多くのプラットフォームで広くサポートされていますが、Twitterは独自の twitter: メタタグを使用して「Twitterカード」を生成します。ただし、Twitter用のタグがない場合、TwitterはOGPタグを代用することがよくあります。当ツールでは、互換性を最大化するために両方のタグを生成します。
タイトルとディスクリプションの最適な文字数は？
検索エンジンは通常、タイトルを約60文字、ディスクリプションを約160文字で省略して表示します。当ツールには、この制限を超えると赤く表示される文字数カウンターが備わっており、簡潔で効果的なテキストの作成に役立ちます。
「index」と「follow」のチェックボックスの役割は何ですか？
これらは robots メタタグを制御します。「Index」は検索エンジンに対し、検索結果にページを表示してよいかを指示します。「Follow」は、ページ内のリンクをクロールすべきかを指示します。チェックを外すと、noindex または nofollow ディレクティブが生成されます。
データは安全ですか？
はい。このツールはJavaScriptを使用し、すべてお使いのブラウザ上で動作します。入力したテキストやURLがサーバーに送信されることは一切ないため、作成中のコンテンツのプライバシーは完全に保護されます。

関連ツール

Robots.txt 作成ツール検索エンジンのクローラー制御やAIボットをブロックするためのカスタムrobots.txtファイルを生成・ダウンロードできます。文字数カウント入力と同時に文字数をカウントし、各プラットフォームの文字数制限に収まっているかを瞬時に確認できます。ファビコンジェネレーターロゴ、文字、絵文字から、Webサイトで使えるHTMLコード付きのファビコン一式を作成します。Base64エンコード＆デコードテキストとファイルをBase64に双方向変換。UTF-8とBase64URLに完全対応。Base64 画像変換Base64文字列やデータURIをデコードし、ブラウザ上で即座に表示・ダウンロード可能な画像に復元します。Chmod 計算ツールチェックボックス、8進数（755など）、記号表記（rwxr-xr-xなど）間でパーミッションを相互変換します。