🏷️
無料メタタグとオープングラフジェネレーター
ライブ Google およびソーシャル共有プレビューを使用して、SEO メタ タグ、オープン グラフ、Twitter カード マークアップを生成します。ページの先頭に直接コピーします。
読み込み後はオフラインでも動作
0 · 0/580px
0 · 0/920px
推奨: 1200×630 px、5 MB未満、https:// で始まる絶対URL。
タイトル 0/580px （目安30〜60字）ディスクリプション 0/920px （目安70〜160字）
Google検索プレビュー
example.com
ページタイトルがここに表示されます
メタディスクリプションがここに表示されます。検索結果のクリック率を高めるため、魅力的な文章にしましょう。
幅は推定値です。Googleは文字数ではなくピクセル幅で切り取ります。
SNSカードプレビュー
og:image プレビュー
example.com
ページタイトル
ページの説明
<head> に貼り付け
メタタグを生成するには、上記の少なくとも 1 つのフィールドに入力してください。
主な用途
- ブログ投稿用メタタグタイトル、説明、ソーシャルタグを生成して、記事を共有する際に見栄えを良くします。
- 商品ページ用メタタグ商品ページが美しく共有され、検索結果で読みやすくなります。
- ランディングページ用メタタグキャンペーンのランディングページが共有および検索時にどのように表示されるかを正確に制御します。
- 任意のウェブアプリ用メタタグを生成新しいページやサイトの完全なheadメタタグセットを素早くスキャフォールドします。
- 醜いリンクプレビューを修正リンクが平文のURLとして表示されるのを止めて、リッチプレビューカードを作成するタグを追加します。
使い方
すべてのタグの組み立てとheadの解析はブラウザ内で直接行われます — サーバーは関与しません。ツールはReactのuseMemoを使ってHTML文字列をリアクティブに構築し、インポート／監査機能のためにブラウザネイティブのDOMParser APIを使って既存のページマークアップを読み取ります。
- 1フォーム入力がライブの組み立てを駆動する入力すると、useMemoフックが即座にタグブロック全体 — タイトル、metaディスクリプション、Open Graphプロパティ、Twitter Card属性 — を再構築し、特殊文字（&、<、>、"）をエスケープすることで、出力がそのままHTMLに貼り付けても安全になります。
- 2ブラウザのURLコンストラクタによるURL検証各URLフィールド（ページURL、ソーシャル画像）は、ブラウザ内蔵のURLコンストラクタを使って検証されます。ドット付きホスト名を持つ整った形式のhttp://またはhttps://アドレスのみが通過し、無効な値はコピーボタンをブロックしインラインエラーを表示します。
- 3インポート：DOMParserが既存のheadマークアップを読み取る既存の<head>のHTMLを貼り付けて監査すると、ツールはそれを不活性モードのDOMParserに通します — スクリプトは実行されず、ネットワークリクエストも発生しません。その後、解析済みドキュメントに既知のmetaセレクタ（og:title、twitter:description、canonical linkなど）を問い合わせ、見つかったものでフォームフィールドを事前入力します。
- 4ライブのGoogleおよびソーシャルカードプレビューツールは同じフォームの状態を使い、スタイル付きのGoogle検索結果とOpen Graphカードのプレビューをリアルタイムで描画するため、出力をコピーする前にタイトルと説明がどのように切り詰められるか正確に確認できます。
関連ツール
ソーシャルメディア画像リサイザー
Instagram、YouTube、TikTok、X、Facebook、LinkedIn、Pinterestの2026年最新サイズに画像をリサイズおよびトリミング — セーフゾーンガイドとバッチZIP付き。100%ブラウザ内で動作、アップロード不要。
試してみるファイルはローカルに留まります
オーディオタグエディタ (ID3)
MP3のID3タグを編集 — タイトル、アーティスト、アルバム、年、ジャンル、カバーアート — ブラウザで100%完結。アップロードなし、音声の再エンコードもなし。無料でプライベート。
試してみるファイルはローカルに留まります
スラグジェネレーター
あらゆるタイトルやテキストを URL 対応のスラッグに変換します。ブログ投稿、CMS ページ、SEO に最適化された URL に最適です。
試してみる