メタタグジェネレーター
簡単なフォームから SEO、Open Graph、Twitter Card のメタタグを生成できます。すべてブラウザ内で動作し、ページの詳細は端末上に留まります。
メタタグジェネレーターは完全にブラウザ内で動作します。入力したタイトル・ディスクリプション・URL などのページの詳細は端末から外に出ることはなく、ArrayKit に何もアップロードされません。
Open Graph ジェネレーターを開く
メタタグジェネレーター について
メタタグジェネレーターは、短いフォームを、検索エンジンとソーシャル共有のためのコピーできる HTML head タグのブロックに変えます。タイトル、ディスクリプション、canonical URL、著者、キーワード、robots ディレクティブ、theme-color を入力し、リッチなリンクプレビュー用に Open Graph と Twitter Card のフィールドを加えます。きれいな <meta> と <link> のセットを出力し、すべての属性を HTML エスケープするのでクォートやアンパサンドが有効なまま保たれ、空欄のフィールドはスキップされます。Open Graph のタイトル・ディスクリプション・URL は標準の相当項目にフォールバックするので、入力したタイトルはそのままソーシャルカードを動かします。ライブプレビューが、タグを <head> に貼り付ける前にカードのおおよその見た目を示します。開発者、SEO 担当者、コンテンツチームのために作られています。すべて端末上で動作し、ページに関する情報がアップロードされることはありません。
機能
- SEO タグを構築：タイトル、ディスクリプション、キーワード、著者、robots、canonical link
- タイトル、ディスクリプション、画像、URL、type の Open Graph タグを生成
- カードの type、site、creator を含む Twitter Card タグを生成
- クォートとアンパサンドを HTML エスケープし、すべての属性値が有効なまま保たれる
- 空欄のフィールドを省き、出力には実際に設定したタグだけが含まれる
- Open Graph のタイトル・ディスクリプション・URL は標準フィールドにフォールバック
- ライブのソーシャルカードプレビューが、リンクの表示のされ方を近似する
- ブロック全体をコピーするか、HTML スニペットとしてダウンロード
メタタグジェネレーター の使い方
- タイトル、ディスクリプション、canonical URL を入力する
- 必要なら著者、キーワード、robots、theme-color を加える
- ソーシャルプレビュー用に Open Graph と Twitter Card のフィールドを埋める
- 生成されたブロックをコピーし、ページの <head> に貼り付ける
例
入力
title: My Page
description: A short summary
og:image: https://example.com/og.png
出力
<title>My Page</title>
<meta name="description" content="A short summary" />
<meta property="og:image" content="https://example.com/og.png" />
フォームのフィールドが head 用の <title>、<meta>、<link> タグになります。
よくあるエラーとトラブルシューティング
- リンクを共有してもソーシャルプレビューの画像が表示されない。 — 絶対 og:image URL（https:// で始まる）と十分な大きさの画像を使ってください。多くのプラットフォームがプレビューをキャッシュするので、変更後はプラットフォームのデバッガーで再スクレイプしてください。
- クォートやアンパサンドを含むため、ディスクリプションやタイトルが壊れて見える。 — ここで直すことは何もありません — ジェネレーターがクォートを " に、アンパサンドを & に自動で HTML エスケープするので、出力をそのまま貼り付けてください。
- 隠したいページを検索エンジンがインデックスしてしまう。 — robots を noindex, follow（または noindex, nofollow）に設定してください。robots メタタグはアクセス制御ではなく要求であり、クローラーが到達できるページにのみ適用されることを覚えておいてください。
- 似た URL 全体で重複コンテンツの警告が出る。 — canonical URL を、そのページの唯一の推奨アドレスに設定して、エンジンがランキングシグナルを 1 つの URL にまとめられるようにしてください。
よくある質問
- メタタグジェネレーターは何を生成しますか？
- コピーできる HTML head タグのブロックを生成します — <title>、標準の SEO <meta> タグ、canonical <link>、そして Open Graph と Twitter Card の <meta> タグ — フォームに入力した値から構築されます。
- Open Graph と Twitter Card のタグは、通常のメタタグとどう違いますか？
- description や robots のような標準タグは検索エンジンを対象にします。Open Graph（og:）タグは Facebook・LinkedIn などで共有されたときのリンクの見た目を制御し、Twitter Card タグは X/Twitter でのプレビューを制御します。このツールは 1 つのフォームからこの 3 つすべてを出力します。
- 有効なメタタグを得るには、すべてのフィールドを埋める必要がありますか？
- いいえ。どのフィールドも空欄にすると、そのタグは単に出力から省かれます。Open Graph のタイトル・ディスクリプション・URL も、空欄のときは標準のタイトル・ディスクリプション・canonical URL にフォールバックします。
- ジェネレーターはタイトルやディスクリプション内の特殊文字をエスケープしますか？
- はい。クォート、アンパサンド、山括弧は、すべての属性値で HTML エスケープされます（たとえば " は " に、& は & になります）ので、コピーに句読点があってもタグは有効なまま保たれます。
- 生成されたメタタグはどこに置きますか？
- HTML ページの <head> 要素内、閉じる </head> の前にブロック全体を貼り付けてください。コピーするか、HTML スニペットとしてダウンロードしてテンプレートに落とし込めます。
- 私のページ情報はサーバーに送られますか？
- いいえ。メタタグジェネレーターは完全にブラウザ内で動作します。入力したタイトル・ディスクリプション・URL などのフィールドは端末から外に出ることはなく、ArrayKit にアップロードされることもありません。
関連ツール
すべての ArrayKit ツール