यदि आप अपनी ब्लॉग पोस्ट को फ़ेसबुक या गूगल प्लस पर अपने मित्रों और पाठकों के साथ बाँटते हैं तो कभी-कभी आपकी पोस्ट ठीक से सही फोटो के साथ नहीं दिखती है या फिर उसका शीर्षक उलट पलट दिखता है या फिर पोस्ट का सारांश ही नहीं दिखता है। इस प्रकार की सोशल शेयरिंग कमी को दूर करने के लिए ओपन ग्राफ़ मेटा टैग (Open Graph Meta tags) या स्कीमा मेटा टैग (Schema Meta tags) का प्रयोग किया जाता है। आज हम इस लेख में ओपन ग्राफ़ मेटा टैग को ब्लॉगर ब्लॉग पर प्रयोग करने की विधि के बारे में सीखेगे।
बहुत से अन्य लेख इस मेटा टैग की अधूरी जानकारी पाठकों के साथ शेअर कर रहे हैं जिससे कोई भी इसे पूर्णता के साथ अपना सका हैं। मेरे इस लेख में आपको दिये जा रहे ओपन ग्राफ़ मेटा टैग को ब्लॉगर के लिए एक लम्बे शोध और कड़ी मेहनत से तैयार किया गया है। इसे यहाँ आपके साथ साझा करने से पूर्व बहुत से ब्लॉगों पर परीक्षण कर जाँचा जा चुका है और यही कोड है जिससे मैं अपने इस ब्लॉग पर प्रयोग कर रहा हूँ। इसका एक लाभ यह भी है इससे आपको गूगल और बिंग जैसे सर्च इंजनों में आपकी पोस्टें आसानी से जमा कर ली जाती हैं और आपके ब्लॉग पर सर्च से नये पाठकों का आवागमन बना रहता है। यह एलेक्सा और गूगल पेज रैंक सुधारने में काफ़ी सहायक रहता है।
हमारा कोड दूसरे उपलब्ध कोड से अलग कैसे है?
1. यह ओपन ग्राफ़ मेटा टैग ब्लॉगर के मुख्य पेज (Index page), पोस्ट पेज (Item page) और स्टेटिक पेज (Static page) आदि के लिए अलग-अलग गुण रखता है
2. 2 og:type टैग जिसमें से एक मुख्य पेज के लिए और अन्य पोस्ट पेज और स्टेटिक पेजेस के लिए है
3. fb:admin और fb:app_id कै ज़रिए आप फ़ेसबुक कमेंट और रिकमन्डेशन बार का प्रयोग हेतु है
4. og:locale और og:locale:alternate के लिए आप ब्लॉग की भाषा और अन्य भाषा जिसमें आप लिखते है का प्रयोग दर्शाता सकते हैं
ओपन ग्राफ़ मेटा टैग को ब्लॉगर टेम्पलेट में प्रयोग करना
1. अपने ब्लॉग टेम्पलेट में <head> की खोज कीजिए और नीचे दिये कोड से बदल दीजिए –
<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'>
2. और इसी कोड के नीचे अगली ही लाइन में नीचे दिये जा रहे कोड को पेस्ट कर दीजिए –
<b:if cond='data:blog.pageType != "index"'> <meta expr:content='data:blog.title' property='og:site_name'/> <meta expr:content='data:blog.pageName' property='og:title'/> <meta content='article' property='og:type'/> <b:else/> <meta expr:content='data:blog.title' property='og:title'/> <meta content='blog' property='og:type'/> </b:if> <meta expr:content='data:blog.metaDescription' property='og:description'/> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/> <b:else/> <meta content='http://blog-img-url' property='og:image'/> </b:if> <meta content='1020412247' property='fb:admins'/> <meta content='348446671899960' property='fb:app_id'/> <meta content='hi_IN' property='og:locale'/> <meta content='en_US' property='og:locale:alternate'/> <meta content='en_GB' property='og:locale:alternate'/>
3. अपने टेम्पलेट को सहेज दीजिए
आप नीचे दिये लिंक पर जाकर फ़ेसबुक ऐप और एडमिन आइ डी को आसानी से प्राप्त कर सकते हैं –
https://developers.facebook.com/tools/explorer/
क्या आप ओपन ग्राफ़ के बारे में और अधिक सीखने के इच्छुक हैं?
यदि आप ओपन ग्राफ़ मेटा टैग के बारे में अधिक सीखना चाहते हैं तो आप नीचे दिये लिंक पर सारी जानकारी तुरंत प्राप्त करें –
https://developers.facebook.com/docs/opengraph/
आप ओपन ग्राफ़ मेटा टैग को अपने ब्लॉग पर स्थापित कर लेने के बाद उसे फ़ेसबुक डिबगर पर जाँच भी सकते हैं –
https://developers.facebook.com/tools/debug
GitHub gist – https://gist.github.com/vinayprajapati/5900461
निष्कर्ष
ओपन ग्राफ़ मेटा टैग को पूर्ण सार्थकता के साथ ब्लॉगर के साथ प्रयोग किया जा सकता है। इस ओपन ग्राफ़ मेटा टैग के प्रयोग के बाद ब्लॉगर टेम्पलेट कोई त्रुटि प्रदर्शित नहीं करता है। सभी सोशक क्रालर्स ब्लॉग को बिना किसी त्रुटि के साथ क्राल करते हैं। फ़ेसबुक और गूगल प्लस पर ब्लॉग पोस्ट को मित्रों के साथ बाँटने में कोई त्रुटि नहीं दिखती है। पोस्ट का शीर्षक, सारांश और सम्बंधित चित्र स्पष्ट दिखता है।
Keywords: facebook open graph, facebook open graph meta tag, open graph, meta tags, facebook, blogger