OGP・Twitter Cardタグ生成ツール｜メタタグ作成

Webツール

ページタイトル必須

ページ説明必須

ページURL 必須

画像URL 必須

URLは http:// または https:// から始まる絶対URLを入力してください。

Twitter Cardの種類

大きな画像（summary_large_image）標準（summary）

任意項目

サイト名

画像代替テキスト

Xサイトアカウント

OGPロケール

生成結果

ページ情報を入力し、「タグを生成」を押してください。

このツールでできること

一般的なWebページの情報から、HTMLのhead内へ貼り付けるOGPとTwitter Cardのmetaタグをまとめて生成できます。og:typeはwebsite固定で、Twitter Cardはsummary_large_imageまたはsummaryから選べます。

使い方

ページタイトル、ページ説明、ページURL、画像URLを入力します。
Twitter Cardの種類を「大きな画像」または「標準」から選びます。
必要に応じてサイト名、画像代替テキスト、Xサイトアカウント、OGPロケールを入力します。
「タグを生成」を押し、生成結果をコピーしてHTMLのhead内へ貼り付けます。

入力欄の前後空白は取り除いてから検証・生成します。初期値はTwitter Cardがsummary_large_image、OGPロケールがja_JPです。

入力例・出力例

任意項目はOGPロケールだけを初期値のまま使用し、次の内容を入力します。

ページタイトル: サンプルページ
ページ説明: ToolRollの紹介ページです
ページURL: https://example.com/page
画像URL: https://example.com/ogp.png
Twitter Card: summary_large_image
OGPロケール: ja_JP

生成結果は次のとおりです。

<meta property="og:title" content="サンプルページ">
<meta property="og:description" content="ToolRollの紹介ページです">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/ogp.png">
<meta property="og:locale" content="ja_JP">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="サンプルページ">
<meta name="twitter:description" content="ToolRollの紹介ページです">
<meta name="twitter:image" content="https://example.com/ogp.png">

空欄のサイト名、画像代替テキスト、Xサイトアカウントに対応するタグは出力しません。

よくある利用場面

新しいWebページのOGPとTwitter Cardタグをまとめて作るとき
OGPとTwitter Cardで共通するタイトル、説明、画像の記述を揃えたいとき
HTML属性値を必要な形へエスケープしたコードをコピーするとき

処理仕様

必須・任意項目とタグ順序

ページタイトル、ページ説明、ページURL、画像URL、Card種類は必須です。サイト名、画像代替テキスト、Xサイトアカウント、OGPロケールは任意で、前後空白を除いた値が空なら対応タグを省略します。画像代替テキストはog:image:altとtwitter:image:altの両方、サイト名はog:site_name、ロケールはog:locale、Xサイトアカウントはtwitter:siteだけに使用します。

OGPはog:title、og:description、og:type、og:url、og:imageの順に出力し、任意値があれば画像代替テキスト、サイト名、ロケールを続けます。空行を1行挟み、Twitter Cardはtwitter:card、twitter:title、twitter:description、twitter:imageの順に出力し、任意値があれば画像代替テキスト、Xサイトアカウントを続けます。改行コードはLFです。

URL検証とHTML属性値エスケープ

ページURLと画像URLは、前後空白を除いた値が大文字・小文字を問わずhttp://またはhttps://から始まり、ブラウザ標準のURL APIでホスト名を取得できる場合に受け付けます。URL APIは検証にだけ使用し、生成するタグには大文字・小文字、パーセント表記、クエリ、フラグメントを含む入力表記を保持します。URLや画像への通信、存在確認、安全性判定は行いません。

各入力値を二重引用符付きのcontent属性へ入れる直前に、&、"、<、>をこの順で1回だけ&、"、<、>へ変換します。既存の&は5文字の入力データなので、出力では&amp;になります。単一引用符は二重引用符付き属性で特別な変換が不要なため、そのままです。文字列の\nやバックスラッシュも実改行へ置換しません。

入力エラーと非対応範囲

Xサイトアカウントは、空欄または@に続く1文字以上の半角英数字・アンダースコアだけを受け付けます。OGPロケールは空欄またはja_JPのような「小文字英字2文字、アンダースコア、大文字英字2文字」の形式です。不正な必須値、URL、アカウント、ロケールでは部分的なタグを残さず、生成結果とコピー状態を無効にします。入力やCard種類を変更した場合も、以前の結果を無効にします。

記事、プロフィール、動画、音声等のタイプ固有OGP、Player Card、App Card、複数画像、公開ページからの既存タグ取得、SNS表示プレビュー、画像サイズ検査には対応しません。SNS上での文字の省略や画像の切り抜きは、各サービスの仕様と閲覧環境によって異なります。

入力データについて

処理にはVanilla JavaScriptとブラウザ標準のURL APIだけを使用し、外部ライブラリは読み込みません。入力したページ情報をToolRollのサーバーや外部サービスへ送信せず、URLや画像への通信、Cookie、Web Storage、IndexedDBへの保存も行いません。Clipboard APIへ渡すのは「結果をコピー」を押したときの生成済みタグだけで、自動コピーできない場合は結果欄から手動でコピーできます。