OGメタタグ生成器 - Open Graph＆Twitterカードプレビュー
Open GraphとTwitter Cardメタタグをビジュアルプレビュー付きで生成。Facebook、X(Twitter)、LinkedInでのシェア表示を確認。
よくある質問
Open Graphメタタグとは？
Open Graph（OG）メタタグは、Facebook、Twitter、LinkedIn、SlackなどのソーシャルメディアプラットフォームでURLが共有される際の表示方法を制御するHTML要素です。2010年にFacebookが開発し、現在ではソーシャル共有メタデータの標準となっています。主なタグにはog:title、og:description、og:image、og:urlがあります。これらのタグがないと、プラットフォームが自動的に情報を抽出し、不正確で見栄えの悪いプレビューが生成されることがあります。
このOGメタジェネレーターの使い方は？
Open Graphフィールドにページのタイトル、説明、画像URL、ページURLを入力します。適切なコンテンツタイプを選択します。Twitter Cardフィールドはオプションでカスタマイズ可能で、デフォルトではOGの値を継承します。リアルタイムプレビューでFacebook、Twitter、LinkedIn、Slackでの表示を確認し、希望のエクスポート形式を選んでコードをコピーしてください。
データは安全ですか？サーバーに送信されますか？
すべてのメタタグ生成とプレビューレンダリングは、JavaScriptを使用してブラウザ内で100%クライアントサイドで実行されます。ページタイトル、説明、URL、画像参照はサーバーに送信されません。このツールは完全にブラウザ内で動作するため、未公開の製品ページや機密マーケティングキャンペーンにも安全に使用できます。
Open GraphタグとTwitter Cardタグの違いは？
Open Graphタグ（property="og:..."を使用）は、Facebook、LinkedIn、WhatsApp、Slackなどほとんどのプラットフォームで使用される汎用標準です。Twitter Cardタグ（name="twitter:..."を使用）はTwitter/X固有で、ツイートでのリンク表示を追加制御します。ベストプラクティスは両方を含めることです。
ソーシャルメディア共有にはどの画像サイズを使うべき？
Open Graph（Facebook、LinkedIn）の推奨画像サイズは1200 x 630ピクセルです。Twitter大画像サマリーカードには1200 x 628ピクセル（約2:1の比率）を使用してください。画像には常にHTTPS URLを使用してください。
メタタグを追加した後、ソーシャルメディアのプレビューが更新されないのはなぜ？
ソーシャルプラットフォームはリンクプレビューを積極的にキャッシュします。メタタグを更新した後、各プラットフォームの公式デバッガーでキャッシュをパージしてください：Facebook Sharing Debugger、Twitter Card Validator、LinkedIn Post Inspector。
コード例
// Generate OG and Twitter Card meta tags
function generateMetaTags({ title, description, image, url, type = 'website', twitterCard = 'summary_large_image' }) {
const escape = (s) => s.replace(/&/g, '&').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
const tags = [];
if (title) tags.push(`<meta property="og:title" content="${escape(title)}" />`);
if (description) tags.push(`<meta property="og:description" content="${escape(description)}" />`);
if (image) tags.push(`<meta property="og:image" content="${escape(image)}" />`);
if (url) tags.push(`<meta property="og:url" content="${escape(url)}" />`);
tags.push(`<meta property="og:type" content="${escape(type)}" />`);
tags.push(`<meta name="twitter:card" content="${escape(twitterCard)}" />`);
if (title) tags.push(`<meta name="twitter:title" content="${escape(title)}" />`);
if (description) tags.push(`<meta name="twitter:description" content="${escape(description)}" />`);
if (image) tags.push(`<meta name="twitter:image" content="${escape(image)}" />`);
return tags.join('\n');
}
console.log(generateMetaTags({
title: 'My Page',
description: 'A great page about something.',
image: 'https://example.com/image.jpg',
url: 'https://example.com'
}));