OG Meta टैग जनरेटर - Open Graph और Twitter Card प्रीव्यू
विज़ुअल प्रीव्यू के साथ Open Graph और Twitter Card मेटा टैग जनरेट करें। Facebook, X (Twitter) और LinkedIn पर शेयर दिखावट देखें।
अक्सर पूछे जाने वाले प्रश्न
Open Graph मेटा टैग क्या हैं?
Open Graph (OG) मेटा टैग HTML मेटा तत्व हैं जो Facebook, Twitter, LinkedIn और Slack जैसे सोशल मीडिया प्लेटफ़ॉर्म पर साझा किए जाने पर URL कैसे प्रदर्शित होता है, इसे नियंत्रित करते हैं। ये मूल रूप से 2010 में Facebook द्वारा बनाए गए थे और अब सोशल शेयरिंग मेटाडेटा के लिए मानक बन गए हैं। प्रमुख टैग में og:title, og:description, og:image और og:url शामिल हैं।
इस OG मेटा जनरेटर का उपयोग कैसे करें?
Open Graph फ़ील्ड में अपने पेज का शीर्षक, विवरण, इमेज URL और पेज URL दर्ज करें। उपयुक्त कंटेंट प्रकार चुनें। वैकल्पिक रूप से Twitter Card फ़ील्ड कस्टमाइज़ करें। रीयल-टाइम प्रीव्यू में देखें कि आपका लिंक 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'
}));