मेटा टैग जनरेटर
नीचे दिए फ़ील्ड भरें और SEO मेटा टैग, Open Graph और
Twitter Card टैग बनाएं — जो सीधे आपके <head> में पेस्ट करने के लिए तैयार हैं।
जैसे-जैसे आप टाइप करते हैं, लाइव SERP और सोशल प्रीव्यू अपडेट होते हैं। कुछ भी किसी सर्वर पर नहीं भेजा जाता।
बुनियादी
Open Graph और Twitter
ये og:image:width / og:image:height के रूप में निकलते हैं, ताकि पहली ही
स्क्रैप पर छोटा या ख़ाली कार्ड नहीं, बल्कि बड़ा कार्ड बने। इन्हें अपनी इमेज के असली आकार पर सेट करें —
1200×630 सिर्फ़ अनुशंसित डिफ़ॉल्ट है। दोनों टैग हटाने के लिए कोई भी बॉक्स ख़ाली कर दें।
SERP प्रीव्यू (Google इस पेज को कैसे दिखा सकता है)
सोशल कार्ड प्रीव्यू (Open Graph)
जनरेट किए गए टैग
मेटा टैग संदर्भ
| टैग | उद्देश्य |
|---|---|
<meta charset="UTF-8"> | वर्ण एन्कोडिंग घोषित करता है। हर पेज पर ज़रूरी। |
<meta name="viewport" content="width=device-width, initial-scale=1"> | मोबाइल डिवाइस पर सही रेंडरिंग सक्षम करता है। |
<title> | ब्राउज़र टैब और Google सर्च परिणामों (नीली हेडलाइन) में दिखने वाला पेज शीर्षक। |
<meta name="description"> | सर्च परिणामों में शीर्षक के नीचे दिखने वाला स्निपेट। क्लिक-थ्रू दर को प्रभावित करता है। |
<meta name="robots"> | नियंत्रित करता है कि सर्च इंजन पेज को इंडेक्स करें और उसके लिंक फ़ॉलो करें या नहीं। |
og:title / og:description / og:image | Open Graph — नियंत्रित करता है कि सोशल प्लेटफ़ॉर्म पर शेयर करने पर पेज कैसा दिखता है। |
twitter:card / twitter:title / twitter:image | Twitter-विशिष्ट सोशल शेयर रूप। |
व्यावहारिक उदाहरण
"बेहतर नींद के लिए 10 टिप्स" शीर्षक वाली एक ब्लॉग पोस्ट के लिए, जो
https://example.com/blog/10-tips-better-sleep/ पर है:
<!-- In your <head> -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>10 Tips for Better Sleep — Sleep Well Tonight</title>
<meta name="description" content="Backed by sleep science: 10 actionable tips that help you fall asleep faster and wake up refreshed. No supplements, no gadgets." />
<link rel="canonical" href="https://example.com/blog/10-tips-better-sleep/" />
<meta name="robots" content="index, follow" />
<!-- Open Graph -->
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/10-tips-better-sleep/" />
<meta property="og:title" content="10 Tips for Better Sleep" />
<meta property="og:description" content="Backed by sleep science: 10 actionable tips that help you fall asleep faster and wake up refreshed." />
<meta property="og:image" content="https://example.com/images/sleep-tips-og.jpg" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Tips for Better Sleep" />
<meta name="twitter:description" content="Backed by sleep science: 10 actionable tips that help you fall asleep faster." />
<meta name="twitter:image" content="https://example.com/images/sleep-tips-og.jpg" />मेटा टैग का संक्षिप्त इतिहास
<meta> एलिमेंट 1990 के दशक के मध्य से HTML का हिस्सा रहा है — मेटाडेटा रखने की
जगह के रूप में, यानी पेज पर दिखाई देने वाली सामग्री के बजाय पेज के बारे में जानकारी। सर्च के शुरुआती दिनों में
एक ख़ास मेटा टैग, <meta name="keywords">, लेखकों को उन शब्दों की सूची देने देता था जिनके लिए
वे रैंक करना चाहते थे। इसका इतना दुरुपयोग हुआ — पेज सैकड़ों असंगत कीवर्ड से भर दिए जाते थे — कि सर्च इंजनों ने
इस पर भरोसा करना बंद कर दिया। Google ने पुष्टि की है कि वह keywords मेटा टैग का बिल्कुल उपयोग नहीं
करता, और एक दशक से भी अधिक समय से नहीं करता। आज जो बचा है वह मेटा टैगों का एक छोटा समूह है जो वाक़ई
मायने रखता है: वे जो नियंत्रित करते हैं कि आपका पेज कैसे रेंडर होता है, कैसे इंडेक्स होता है, और सर्च परिणामों
तथा सोशल फ़ीड में दिखने पर कैसा दिखता है।
टाइटल टैग: आपका सबसे महत्वपूर्ण स्निपेट
<title> एलिमेंट किसी पेज पर मेटाडेटा का सबसे प्रभावशाली टुकड़ा है। यह Google के परिणामों में
क्लिक करने योग्य नीली हेडलाइन है, ब्राउज़र टैब पर लगा लेबल है, और जब कोई पेज बुकमार्क करता है तो डिफ़ॉल्ट नाम है।
Google आमतौर पर पहले लगभग 50–60 वर्ण दिखाता है (अधिक सटीक रूप से लगभग 600 पिक्सल जितना, क्योंकि
यह वर्णों को नहीं बल्कि चौड़ाई को मापता है) और उसके बाद इलिप्सिस से काट देता है, इसलिए मायने रखने वाले शब्द
शुरुआत में रखें। सबसे महत्वपूर्ण, वर्णनात्मक शब्द शुरुआत के पास रखें; इसे हर पेज पर अद्वितीय रखें; और यदि आप कोई
ब्रांड जोड़ते हैं, तो उसे एक विभाजक के बाद अंत में जोड़ें। ध्यान दें कि Google अपने परिणामों में शीर्षकों को
तेज़ी से दोबारा लिख रहा है जब उसे लगता है कि आपका शीर्षक क्वेरी से ख़राब मेल खाता है — एक अच्छी
तरह लिखा, सटीक, क्वेरी-प्रासंगिक शीर्षक ही आपकी अपनी शब्दावली बनाए रखने का सबसे अच्छा तरीक़ा है।
मेटा विवरण: यह रैंक नहीं करता, पर क्लिक दिलाता है
मेटा विवरण सर्च परिणामों में शीर्षक के नीचे का स्लेटी स्निपेट है। यह रैंकिंग कारक नहीं है — इसमें कीवर्ड लिखने से आप पेज पर ऊपर नहीं जाएँगे — पर यह क्लिक-थ्रू दर पर आपके सबसे अच्छे लीवरों में से एक है, क्योंकि यह ठीक परिणामों में मौजूद आपकी विज्ञापन कॉपी है। लगभग 150–160 वर्णों का लक्ष्य रखें; इससे लंबा टेक्स्ट काट दिया जाता है। इसे एक सटीक, आकर्षक सारांश बनाएं जो खोजकर्ता के संभावित सवाल का जवाब दे और क्लिक करने का कारण दे। ध्यान रखें कि Google अक्सर विवरण को भी दोबारा लिख देता है — अध्ययन बार-बार पाते हैं कि यह आधे से अधिक बार दिए गए विवरण की अनदेखी करता है, अक्सर किसी क्वेरी के लिए पेज से ही कोई अधिक प्रासंगिक वाक्य उठा लेता है। फिर भी मज़बूत विवरण लिखना सार्थक है: जब Google इसका उपयोग करता है, तो यही वह स्निपेट है जिसे आप नियंत्रित करते हैं।
हर पेज पर ज़रूरी दो टैग: charset और viewport
दो मेटा टैग अनिवार्य हैं। <meta charset="UTF-8"> वर्ण एन्कोडिंग घोषित करता है; इसके बिना
उच्चारण-चिह्न वाले अक्षर, मुद्रा प्रतीक और इमोजी गड़बड़ "mojibake" के रूप में दिख सकते हैं। इसे
<head> के भीतर सबसे पहली चीज़ के रूप में रखें ताकि ब्राउज़र जान सके कि आगे आने वाली हर चीज़
को कैसे पढ़ना है। <meta name="viewport" content="width=device-width, initial-scale=1">
मोबाइल ब्राउज़रों को बताता है कि डेस्कटॉप लेआउट को ज़ूम-आउट करने के बजाय पेज को डिवाइस की असली चौड़ाई पर रेंडर
करें; इसके बिना एक रेस्पॉन्सिव डिज़ाइन फ़ोन पर वास्तव में रेस्पॉन्सिव नहीं होगा। दोनों SEO के बजाय तकनीकी टैग
हैं, पर जिस पेज में इनमें से कोई भी ग़लत हो, वह असली उपयोगकर्ताओं को टूटा हुआ दिखता है।
robots मेटा टैग: क्रॉल और इंडेक्स को नियंत्रित करना
<meta name="robots"> टैग सर्च इंजनों को बताता है कि पेज के साथ कैसा व्यवहार करें।
index / noindex नियंत्रित करता है कि पेज परिणामों में दिख सकता है या नहीं;
follow / nofollow नियंत्रित करता है कि उसके लिंक अथॉरिटी पास करें या नहीं। और भी
निर्देश स्निपेट को बारीकी से तय करते हैं: noarchive इंजनों को कॉपी कैश करने से रोकता है,
nosnippet टेक्स्ट प्रीव्यू को दबाता है, और max-snippet, max-image-preview
तथा max-video-preview यह सीमित करते हैं कि कितना दिखाया जा सकता है। एक अहम सूक्ष्मता: किसी
पेज को इंडेक्स से बाहर रखने के लिए आपको noindex का उपयोग करना होगा, केवल robots.txt में उसे ब्लॉक
करना काफ़ी नहीं। robots.txt में किसी URL को ब्लॉक करना उसे क्रॉल होने से रोकता है, पर Google कहीं और
से खोजे गए किसी ब्लॉक किए URL को फिर भी इंडेक्स कर सकता है — और चूँकि वह पेज को क्रॉल नहीं कर सकता, वह उस ब्लॉक के
पीछे छिपे noindex टैग को कभी नहीं देखेगा। यदि आप चाहते हैं कि कोई पेज परिणामों से हट जाए, तो उसे
क्रॉल होने दें और noindex परोसें।
कैनोनिकल टैग: असली URL की ओर इशारा
हालाँकि यह <meta> के बजाय एक <link> है, कैनोनिकल टैग —
<link rel="canonical" href="…"> — इसी head-सेक्शन टूलकिट में आता है। यह सर्च इंजनों को बताता
है कि किसी पेज का अधिकृत संस्करण कौन-सा URL है जब वही या बहुत मिलती-जुलती सामग्री कई पतों पर पहुँच योग्य हो
(ट्रेलिंग स्लैश के साथ और बिना, ट्रैकिंग पैरामीटर के साथ, प्रिंट करने योग्य संस्करण वग़ैरह)। उन डुप्लिकेट को एक
कैनोनिकल URL पर एकत्र करना रैंकिंग संकेतों को बाँटने के बजाय केंद्रित करता है, और "मैं कौन-सी प्रति दिखाऊँ?"
वाली उलझन रोकता है जो उन सभी को दबा सकती है। एक स्व-संदर्भित कैनोनिकल — अपने ही साफ़ URL की ओर इशारा करता पेज —
हर पेज पर एक अच्छी प्रथा है।
Open Graph: शेयर करने पर आपका लिंक कैसा दिखता है
Open Graph प्रोटोकॉल को 2010 में Facebook ने पेश किया और अब इसे लगभग हर उस प्लेटफ़ॉर्म द्वारा
पढ़ा जाता है जो लिंक प्रीव्यू बनाता है — Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage और अन्य। जब कोई
आपका URL शेयर करता है, ये प्लेटफ़ॉर्म आपके <title> और विवरण को दोबारा नहीं पढ़ते; वे
og: टैग ढूँढते हैं। मुख्य समूह है og:title, og:description,
og:image, og:url और og:type, तथा og:site_name और
og:locale उपयोगी अतिरिक्त के रूप में। सबसे महत्वपूर्ण — और सबसे अधिक अनदेखा — है
og:image, वह तस्वीर जो प्रीव्यू कार्ड पर हावी रहती है। व्यापक रूप से समर्थित मानक
आकार 1200 × 630 पिक्सल (1.91:1 अनुपात) है; एक पूर्ण https URL इस्तेमाल
करें, महत्वपूर्ण टेक्स्ट और चेहरे केंद्र के पास रखें ताकि क्रॉपिंग से बचे रहें, और हर उस पेज पर एक इमेज दें जिसे
शेयर किए जाने की उम्मीद हो, वरना आपके लिंक सादे, अनाकर्षक टेक्स्ट के रूप में दिखेंगे।
Twitter / X Cards
X (पूर्व में Twitter) अपने ख़ुद के twitter: टैग इस्तेमाल करता है, पर एक सहायक फ़ॉलबैक के साथ: यदि
कोई twitter: टैग मौजूद नहीं है, तो X उसके बजाय संबंधित Open Graph टैग पढ़ लेता है, इसलिए आपको हर चीज़
दोहराने की ज़रूरत शायद ही पड़े। जिस एक टैग का कोई Open Graph समकक्ष नहीं है वह है twitter:card, जो
लेआउट चुनता है: summary_large_image एक बड़ी, किनारे-से-किनारे इमेज दिखाता है और
तब उपयुक्त है जब आपके पास एक मज़बूत 1200 × 630 ग्राफ़िक हो, जबकि summary बिना हीरो-इमेज
वाले पेजों के लिए टेक्स्ट के बग़ल में एक छोटा चौकोर थंबनेल दिखाता है। twitter:title,
twitter:description और twitter:image केवल वहीं जोड़ें जहाँ आप चाहते हैं कि वे आपके
Open Graph मानों से भिन्न हों; अन्यथा फ़ॉलबैक को काम करने दें।
स्ट्रक्चर्ड डेटा एक अलग चीज़ है
एक आम भ्रम दूर करना ज़रूरी है: स्ट्रक्चर्ड डेटा कोई मेटा टैग नहीं है। रिच रिज़ल्ट — स्टार
रेटिंग, FAQ ड्रॉप-डाउन, रेसिपी कार्ड, ब्रेडक्रंब ट्रेल — schema.org शब्दावली से आते हैं, जो
आमतौर पर पेज में JSON-LD के एक ब्लॉक के रूप में व्यक्त होती है, न कि <meta>
एलिमेंट्स से। मेटा टैग साधारण नीले-लिंक स्निपेट और सोशल कार्ड को आकार देते हैं; स्ट्रक्चर्ड डेटा उसके ऊपर और
परे उन्नत रिज़ल्ट रूपों को खोलता है। दोनों पूरक हैं, और एक अच्छी तरह अनुकूलित पेज दोनों का उपयोग करता है — पर वे
अलग-अलग जगहों में रहते हैं और अलग-अलग नियमों का पालन करते हैं।
हर पेज के लिए मेटा-टैग चेकलिस्ट
- head की पहली पंक्ति के रूप में
<meta charset="UTF-8">। - एक रेस्पॉन्सिव
viewportटैग। - लगभग 60 वर्णों से कम का एक अद्वितीय, वर्णनात्मक
<title>, महत्वपूर्ण शब्द पहले। - लगभग 150–160 वर्णों का एक आकर्षक
<meta name="description">। - साफ़ URL की ओर एक स्व-संदर्भित
rel="canonical"लिंक। - एक उपयुक्त
robotsनिर्देश (अधिकांश पेजों के लिएindex, follow)। - Open Graph
og:title,og:description,og:image(1200 × 630),og:urlऔरog:type। - एक
twitter:cardमान — जब आपके पास अच्छी इमेज हो तोsummary_large_image।
अन्य head आवश्यक तत्व: favicon और theme-color
कुछ और head टैग एक परिष्कृत पेज को पूरा करते हैं। favicon — <link rel="icon">
से घोषित — ब्राउज़र टैब और बुकमार्क सूची में छोटा आइकन है, और एक मिलता-जुलता
<link rel="apple-touch-icon"> तब आइकन देता है जब कोई आपकी साइट को फ़ोन होम स्क्रीन पर सहेजता
है। <meta name="theme-color"> टैग मोबाइल पर ब्राउज़र के UI को आपके ब्रांड से मेल खाने के लिए
रंग देता है। और एक वेब ऐप मेनिफ़ेस्ट, जो <link rel="manifest"> से लिंक होता
है, किसी प्रोग्रेसिव वेब ऐप को इंस्टॉलेशन के लिए अपना नाम, आइकन और रंग परिभाषित करने देता है। इनमें से कोई भी
रैंकिंग को प्रभावित नहीं करता, पर मिलकर ये एक ऐसे पेज में फ़र्क डालते हैं जो पूरा लगता है और एक ऐसे में जो नहीं।
बहुभाषी साइटों के लिए hreflang
यदि आप एक ही पेज को एक से अधिक भाषा या क्षेत्र में प्रकाशित करते हैं, तो hreflang एनोटेशन सर्च
इंजनों को बताता है कि किस उपयोगकर्ता को कौन-सा संस्करण दिखाएँ। हर भाषा संस्करण
<link rel="alternate" hreflang="…"> टैग के साथ बाक़ी सभी की ओर इशारा करता है (उदाहरण के लिए
en, en-GB, hi, और एक x-default फ़ॉलबैक)। सही ढंग से किया
जाए तो यह ग़लत-भाषा वाले पेज को परिणामों में आने से रोकता है और आपके अनुवादों को डुप्लिकेट सामग्री माने जाने से
बचाता है। यह एक विशिष्ट उपकरण है, पर किसी भी सच्ची अंतरराष्ट्रीय साइट के लिए आवश्यक है।
शिप करने से पहले अपने टैग जाँचें
चूँकि सोशल प्रीव्यू हर प्लेटफ़ॉर्म आपके टैगों से बनाता है, यह सुनिश्चित करने का एकमात्र तरीक़ा कि वह सही दिखे,
उसे जाँचना है। अधिकांश प्रमुख प्लेटफ़ॉर्म एक डिबगर देते हैं — Facebook का Sharing Debugger, LinkedIn का Post
Inspector और ऐसे ही टूल — जो आपके URL को फ़ेच करते हैं, ठीक-ठीक दिखाते हैं कि कार्ड कैसा रेंडर होगा, और कोई भी
गुम या ख़राब Open Graph टैग उजागर करते हैं। ये डिबगर प्लेटफ़ॉर्म के कैश को भी रीफ़्रेश करते हैं,
जो मायने रखता है क्योंकि सेवाएँ आपके प्रीव्यू को आक्रामक रूप से कैश करती हैं: यदि आप कोई og:image
अपडेट करते हैं और फिर भी पुराना दिखता है, तो डिबगर से दोबारा स्क्रैप करना अपडेट को बाध्य कर देता है। किसी नए पेज
का कार्ड घोषित करने से पहले हमेशा उसका प्रीव्यू देखें।
अक्सर पूछे जाने वाले सवाल
- हर पेज पर कौन-से मेटा टैग होने चाहिए?
- कम से कम: <meta charset>, <meta name="viewport">, <title>, और <meta name="description">। सोशल शेयरिंग के लिए Open Graph (og:title, og:description, og:image, og:url) और Twitter Card टैग जोड़ें। क्रॉल नियंत्रण के लिए एक robots मेटा टैग जोड़ें।
- मेटा विवरण कितना लंबा होना चाहिए?
- Google आमतौर पर 160 वर्णों तक दिखाता है, हालाँकि कभी-कभी स्निपेट को छोटा कर देता है या दोबारा लिख देता है। अपने विवरण को 160 वर्णों से कम रखें, इसे सटीक और आकर्षक बनाएं — यह रैंकिंग को प्रभावित नहीं करता फिर भी क्लिक-थ्रू दर पर सीधा असर डालता है।
- क्या keywords मेटा टैग SEO में मदद करते हैं?
- नहीं। Google, Bing और अधिकांश प्रमुख सर्च इंजन एक दशक से भी अधिक समय से keywords मेटा टैग की अनदेखी करते हैं। इसे शामिल करना हानिकारक नहीं है पर इससे रैंकिंग का कोई लाभ नहीं मिलता। इसके बजाय अपनी दिखने वाली पेज सामग्री में कीवर्ड के प्रासंगिक, स्वाभाविक उपयोग पर ध्यान दें।
- og:title और पेज title टैग में क्या अंतर है?
- <title> टैग ब्राउज़र टैब में टेक्स्ट और Google सर्च परिणामों में नीली हेडलाइन को नियंत्रित करता है। og:title वह हेडलाइन नियंत्रित करता है जो तब दिखती है जब कोई आपके पेज को Facebook, LinkedIn, Slack और Open Graph डेटा पढ़ने वाले अन्य प्लेटफ़ॉर्म पर शेयर करता है। आप — और आमतौर पर आपको — हर संदर्भ के लिए इन्हें स्वतंत्र रूप से लिख सकते हैं।
- मुझे कौन-सा Twitter Card प्रकार इस्तेमाल करना चाहिए?
- जब आपके पास उच्च-गुणवत्ता की इमेज हो (कम से कम 1200×630 px) और आप चाहें कि वह प्रमुखता से दिखे, तो summary_large_image इस्तेमाल करें। बिना मज़बूत इमेज वाले पेजों के लिए summary इस्तेमाल करें — यह उसके बजाय एक छोटा थंबनेल दिखाता है। app और player प्रकार विशिष्ट उपयोगों (मोबाइल ऐप और एम्बेडेड मीडिया) के लिए हैं।