🏷 メタタグ（OGP）生成
タイトルや画像URLなどを入力すると、title・description・OGP・Twitter Cardのメタタグ一式を生成します。ブラウザ内で完結し、入力内容は送信しません。
入力
生成されたメタタグ
入力すると、ここに <head> に貼り付けるメタタグが表示されます。
※ すべてブラウザ内で処理し、入力内容をサーバーに送信しません。値は生成テキスト内で属性値としてエスケープしています。生成したタグはページの <head> 内に貼り付けてください。画像は絶対URL・推奨 1200×630px。公開後の見え方は OGP・メタタグ確認で確認できます。
解説
OGP（Open Graph Protocol）は、WebページをSNSで共有したときに、タイトル・説明文・サムネイル画像つきの「カード」として見栄えよく表示させるための、HTMLの <head> に書くメタタグの仕組みです。LINE・Facebook・Slack・はてなブックマークなどが参照します。Twitter Card（X のカード）は X 上でのリンク表示を制御するメタタグで、多くのSNSは値が無ければ og:* にフォールバックします。このツールは、いくつかの項目を入力するだけで、これらのメタタグ一式をその場で組み立てます。
生成されるのは、基本の <title> と <meta name="description">、OGP の og:title・og:description・og:url・og:image・og:type・og:site_name、そして Twitter Card の twitter:card・twitter:title・twitter:description・twitter:image・twitter:site です。各タグの役割は、og:title/description が見出しと説明、og:url が正規URL、og:image がサムネイル画像、og:type がページ種別（website/article）、og:site_name がサイト名、twitter:card がカードの大きさ（summary は小さめ、summary_large_image は大きな画像つき）です。入力が空の項目はタグ自体を出力しないため、余計な空タグが混ざりません。
サムネイル画像（og:image）は、SNSカードの見栄えを大きく左右します。推奨サイズは 1200×630px（横長 1.91:1）で、http(s):// から始まる絶対URLの実在画像を指定してください。相対パスや画像の無いページは、カードが崩れたりサムネイルが出なかったりします。画像は誰でもアクセスできる公開状態にしておく必要があります。
URL（og:url）や画像URL（og:image）は絶対URLで指定するのが基本です。相対パスだとSNS側で正しく解決できないことがあります。このツールは http(s):// で始まらないURLを入力すると、生成結果に注意のコメントを添えます。og:url にはそのページの正規URL（末尾スラッシュやクエリの有無を統一したもの）を入れておくと、シェア時の重複や表記ゆれを防げます。
SNSでの見え方は媒体ごとに少しずつ異なります。タイトルや説明が長すぎると末尾が省略されるため、要点を前半に置くのがコツです。X で大きな画像カードを出したいときは twitter:card を summary_large_image にし、og:image を用意します。twitter:site にサイトの X アカウント（@から）を入れると、カードにアカウントが表示される場合があります。
このツールはすべてブラウザ内（クライアント側）で処理し、入力内容をサーバーに送信しません。生成結果は読み取り専用の入力欄にテキストとして表示し、ページのHTMLとして解釈させないため、タイトルや説明に記号（< > " & など）や <script> のような文字列を入れても安全にエスケープされて出力されます。生成したタグを貼り付けたら、公開後に「OGP・メタタグ確認」ツールで実際の見え方をチェックすると確実です。
よくある質問
OGPとTwitter Cardの両方を書く必要がありますか？
まずは og:* を揃えるのが基本です。多くのSNSは twitter:* が無ければ og:* の値にフォールバックして表示します。X で表示を細かく制御したい（大きな画像カードにする、アカウントを表示するなど）場合に twitter:card や twitter:site を追加してください。このツールは入力に応じて両方を生成できます。
og:image はどんな画像を用意すればいいですか？
推奨サイズは 1200×630px（横長 1.91:1）で、http(s):// から始まる絶対URLの実在画像を指定します。相対パスや、外部からアクセスできない画像だとSNSでサムネイルが表示されません。ファイルサイズが大きすぎると読み込まれないことがあるため、数百KB程度に収めると安心です。
og:type の website と article はどう違いますか？
website は通常のページやトップページ向け、article はブログ記事やニュースなどの記事ページ向けの種別です。多くのSNSでは表示の見た目に大きな差は出ませんが、記事には article を指定しておくと意味が正しく伝わります。迷う場合は website のままで問題ありません。
生成したタグはどこに貼ればいいですか？
HTMLの <head> 内（</head> より前）に貼り付けてください。既に同じ og:title などがある場合は重複しないよう置き換えます。<title> は1ページに1つだけにし、既存の <title> があれば片方を消してください。
入力した内容はサーバーに送られますか？
送られません。生成はすべてお使いのブラウザ内で完結し、入力したタイトルやURLなどが外部に送信されることはありません。オフラインでも動作します。安心して下書きや非公開ページの内容を入力できます。
特殊記号や日本語を入れても大丈夫ですか？
大丈夫です。タイトルや説明に含まれる " < > & などの記号は、生成テキスト内で属性値として自動的にエスケープします。日本語や絵文字もそのまま使えます。貼り付けたHTMLが壊れたり、意図せずタグとして解釈されたりしないよう配慮しています。