タイトル・説明・画像URLを入力するだけでmetaタグ一式を自動生成
WebページをX（旧Twitter）やFacebook、LINE、Slackなどでシェアしたときに、タイトル・説明・サムネイル画像をカード形式で美しく表示させるために必要なのがOGP（Open Graph Protocol）とTwitterカードのmetaタグです。本ツールは、タイトル・説明文・ページURL・画像URL・サイト名などを入力するだけで、og:title・og:description・og:image・og:url・og:type・og:site_name と、twitter:card・twitter:title・twitter:description・twitter:image・twitter:site のmetaタグ一式をリアルタイムで自動生成します。
使い方はかんたんです。フォームに各項目を入力すると、下部の生成結果が即座に更新され、SNSでの見え方の目安となるプレビューも同時に表示されます。「全項目コピー」ボタンを押せば生成されたmetaタグをまとめてクリップボードにコピーでき、そのままHTMLのhead要素内に貼り付けられます。入力欄が空のままでもサンプル値でタグが生成されるので、どんなタグが必要かをすぐに確認できます。すべての処理はブラウザ内で完結し、インストールや会員登録は不要です。
Twitterカードには、横長の大きな画像を表示する「summary_large_image」と、小さな正方形のサムネイルを表示する「summary」の2種類があります。種別ボタンを切り替えると、生成されるtwitter:cardの値とプレビューの見た目が即座に変わります。ブログ記事やビジュアルを重視するページでは大きな画像で目立たせるsummary_large_imageが、シンプルに見せたい場合はsummaryが向いています。
| プロパティ | 役割 |
|---|---|
| og:title | シェア時に表示されるタイトル。ページの内容が伝わる簡潔な文言を推奨 |
| og:description | タイトル下に表示される説明文。80〜120文字程度が目安 |
| og:image | サムネイル画像の絶対URL。推奨1200×630px（1.91:1） |
| og:url | ページの正規URL（絶対URL） |
| og:type | コンテンツ種別。トップはwebsite、記事はarticleが一般的 |
| og:site_name | サイト全体の名称 |
| twitter:card | カード種別。summary または summary_large_image |
| twitter:site | サイト運営者のXアカウント（@から始まる） |
og:imageに指定する画像は、横1200×縦630px程度（比率1.91:1）が推奨サイズです。この比率はsummary_large_imageやFacebookのカード表示に最適化されています。summaryカードでは正方形に近いトリミングで表示されることが多いため、重要な要素は中央に配置しておくと安全です。画像URLは必ずhttps://から始まる公開済みの絶対URLを指定してください。相対パスやローカルパスではSNS側が画像を取得できず、サムネイルが表示されないことがあります。