web / seo
OGP メタタグ プレビュー
OGP（Open Graph Protocol）のmetaタグを入力し、Twitter/X・Slackでの見え方をリアルタイムでシミュレートします。metaタグのコード生成付き。
タイトルは必須です
Twitter / X プレビュー
Slack プレビュー
ページタイトル
生成されたmetaタグ
<meta property="og:url" content="https://example.com" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />使い方
01- 左側のフォームにOGPフィールド（タイトル・説明・URL・画像URL等）を入力します
- 右側にTwitter/X・Slackでのプレビューがリアルタイムで更新されます
- フィールドの文字数や形式に問題がある場合、インラインで警告が表示されます
- 「生成されたmetaタグ」エリアに完成したHTMLタグが表示されます
- 「コピー」ボタンでタグをクリップボードにコピーし、HTMLの<head>に貼り付けてください
実装コード
02コアロジックはブラウザ標準のAPIのみで実装しています。外部ライブラリは不要で、そのままコピーしてご利用いただけます。
export function buildOgpTags(fields: OgpFields): string {
const tags: string[] = []
const add = (prop: string, content: string) => {
if (content.trim()) {
tags.push(
`<meta property="${prop}" content="${content.replace(/"/g, '"')}" />`
)
}
}
const addName = (name: string, content: string) => {
if (content.trim()) {
tags.push(
`<meta name="${name}" content="${content.replace(/"/g, '"')}" />`
)
}
}
add('og:title', fields.title)
add('og:description', fields.description)
add('og:url', fields.url)
add('og:image', fields.imageUrl)
add('og:site_name', fields.siteName)
add('og:type', fields.type || 'website')
addName('twitter:card', fields.twitterCard || 'summary_large_image')
addName('twitter:title', fields.title)
addName('twitter:description', fields.description)
if (fields.imageUrl) addName('twitter:image', fields.imageUrl)
if (fields.twitterSite)
addName('twitter:site',
fields.twitterSite.startsWith('@')
? fields.twitterSite
: '@' + fields.twitterSite
)
return tags.join('\n')
}よくある使用例・注意点
03og:image の推奨サイズ
OGP画像の推奨サイズは 1200×630px（横長）です。Twitter/Xのsummary_large_imageカードでは600×314px以上が必要。サイズが小さいと表示されなかったり、クロップされることがあります。
タイトル・説明の文字数
og:titleは60文字以内、og:descriptionは160文字以内が推奨です。超過すると各プラットフォームで省略表示されます。TwitterカードはX側でもタイトルを70文字程度で切ることがあります。
twitter:card の種類
summary_large_imageは横幅いっぱいの大きな画像で表示されます。summaryは小さなサムネイル表示です。記事・製品ページにはsummary_large_image、プロフィール・アイコン系にはsummaryが適しています。
SNSキャッシュの注意
OGPタグを更新しても、各SNSのクローラーがキャッシュを持つため即座に反映されません。TwitterはCard Validatorで、FacebookはSharing Debuggerでキャッシュをクリアできます。
関連ツール
04ソースコード
05このツールのソースコード（テストコードを含む）はGitHubで公開しています。 MITライセンスで自由に利用・改変できます。
GitHub でコードを見る →