DevToolbox

メタタグ生成ツール

HTMLメタタグ、Open Graph、TwitterカードタグをライブSNSプレビュー付きで生成します。

このツールについて

メタタグ生成ツールは、開発者、マーケター、コンテンツクリエイターがSEOと ソーシャルメディア共有に必要なHTMLメタタグを構築できる無料のブラウザベースツール です。反復的なボイラープレートを手書きする代わりに、シンプルなフォームに入力する だけで、<head> セクションにそのまま貼り付けられる適切にフォーマット されたHTMLが得られます。

このツールは3つの重要なタググループをカバーしています。まず、検索エンジンが ページのインデックス作成時に参照する標準HTMLメタタグ — title、description、 keywords、author、canonical URL、robots指示文。50〜60文字の適切なタイトルと 150〜160文字のdescriptionは、検索結果でのクリック率を大幅に改善できます。

次に、Facebook、LinkedIn、その他のプラットフォームがリッチリンクプレビューを 表示する際に使用するOpen Graph（OG）タグを生成します。og:title、 og:description、og:image、og:type を設定することで、 リンクが共有された際にコンテンツが洗練された外観で表示されます。 og:site_name と og:locale もサポートしており、完全な制御が 可能です。

第三に、Twitterカードタグにより、Twitter（X）でのリンク表示をカスタマイズ できます。コンパクトな summary カードと大型の summary_large_image フォーマットから選択し、 twitter:site と twitter:creator のハンドルを 指定できます。すべての処理はJavaScriptを使用してブラウザ内で完結します — データがサーバーに送信されることはなく、あらゆるコンテンツで安全にお使い いただけます。

ライブプレビューパネルでは、Google検索結果やソーシャルメディアカードとして ページがどのように表示されるかを確認できるため、デプロイ前にタグを微調整 できます。色分けされた警告付きの文字数カウンターにより、推奨範囲内に 収まっているかを確認できます。

使い方

  1. 基本メタタグセクションにページタイトル、ディスクリプション、キーワード、著者、canonical URLを入力します。文字数カウンターを確認して最適な範囲内に収めてください。
  2. robots指示文を選択します — ページを検索結果から除外する場合は「noindex」、リンクのクロールを防ぐ場合は「nofollow」を選択します。
  3. Open Graphタグセクションを展開し、OGタイプ、画像URL、サイト名、ロケールを設定します。
  4. Twitterカードタグセクションを展開し、カードタイプを選択してTwitterハンドルを追加します。
  5. 右側の生成されたHTML出力を確認します。GoogleプレビューとSocial Cardプレビューを切り替えて、ページの表示を確認します。
  6. Copy（またはCtrl+Shift+C）をクリックして生成されたタグをクリップボードにコピーし、ページの <head> に貼り付けます。

よくある質問

メタタグとは何ですか？なぜ重要ですか？

メタタグはWebページの<head>に配置されるHTML要素です。ページに関するメタデータを検索エンジンやソーシャルメディアプラットフォームに提供します。適切なメタタグは、検索結果やFacebook、Twitter、LinkedInなどのプラットフォームでの共有時のページ表示を改善します。

タイトルタグの理想的な長さは？

Googleは通常、検索結果でタイトルタグの最初の50〜60文字を表示します。50文字未満のタイトルは利用可能なスペースを十分に活用できず、60文字を超えるタイトルは切り詰められる可能性があります。このツールの文字数カウンターは最適な範囲内にあるとき緑色に変わります。

Open Graphタグとは何ですか？

Open Graph（OG）はFacebookが作成したプロトコルで、Webページがソーシャルメディアで共有された際のコンテンツの表示方法を制御できます。og:title、og:description、og:imageなどのタグが、Facebook、LinkedIn、Slackなどのプラットフォームでのリンクプレビューに表示されるタイトル、説明文、プレビュー画像を定義します。

summaryとsummary_large_imageのTwitterカードの違いは何ですか？

summaryカードはタイトルとdescriptionの左に小さなサムネイルを表示します。summary_large_imageカードはテキストの上に大きな全幅画像を表示し、一般的により多くのエンゲージメントを獲得できます。コンテンツに最適なタイプを選択してください。

データは安全ですか？

はい。すべてのタグ生成とプレビューレンダリングはクライアントサイドのJavaScriptを使用してブラウザ内で完全に行われます。データがサーバーに送信されることはなく、未公開ページや機密情報を含むコンテンツでも安全にお使いいただけます。

関連ツール

HTMLエンティティ変換

HTMLエンティティ、名前付き文字、Unicodeエスケープシーケンスのエンコード・デコードを行います。

URLエンコード/デコード

URLのエンコード・デコード、クエリパラメータの解析、クエリ文字列の構築を行います。

CSSレイアウト生成

FlexboxとCSS Gridレイアウトをビジュアルに構築し、ライブプレビューとCSSコードを生成します。

Markdownプレビュー

GFM対応のMarkdownをリアルタイムでプレビュー。テーブル、タスクリスト、HTMLエクスポートに対応。

SRIハッシュジェネレーター

スクリプトやスタイルシート用のSubresource Integrityハッシュを生成します。SHA-256、SHA-384、SHA-512対応。

Preload / Prefetchジェネレーター

HTML preload、prefetch、preconnect、dns-prefetchリンクタグをベストプラクティス検証付きで生成します。

Cache-Controlビルダー

Cache-Controlヘッダーをトグルスイッチで視覚的に構築。各ディレクティブの設定、期間プリセット、サーバー設定スニペット付き。

Web Vitalsリファレンス

Core Web Vitals（LCP、INP、CLS）と補助メトリクスのインタラクティブリファレンス。閾値チェックと最適化ヒント付き。

ファビコンチェッカー

ファビコンをアップロードして全標準サイズ（16、32、180、192、512）でどう見えるかプレビュー。