HTML Meta Tags और SEO की बुनियाद आसान भाषा में
3 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
Visitor meta tags को कभी नहीं देखता — वे <head> में रहते हैं और पेज पर कभी नहीं दिखते। लेकिन Google उन्हें पढ़ता है, WhatsApp उन्हें पढ़ता है, और Facebook उन्हें पढ़ता है। वे तय करते हैं कि search results में आपके पेज का नाम क्या होगा, उसके नीचे कौन सी description दिखेगी, और जब कोई आपका link share करेगा तो कैसा preview card बनेगा। अच्छे meta tags वाला पेज click पाता है; बिना meta tags वाला पेज बिना description के एक सूखा link बनकर रह जाता है।
चार tags जो हर पेज को चाहिए
| Tag | क्या करता है |
|---|---|
<meta charset="UTF-8"> | Browser को बताता है कि पेज UTF-8 इस्तेमाल करता है, इसलिए हर अक्षर — Hindi और ₹ भी — सही दिखता है। इसे head में सबसे पहले रखिए। |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | Mobile browsers को बताता है कि पेज को phone की असली चौड़ाई पर दिखाना है। इसके बिना आपका पेज phone पर छोटा सा दिखता है। |
<title> | पेज का title — Google results में नीला clickable link और browser tab पर लिखा text। इसे छोटा, खास और ईमानदार रखिए। |
<meta name="description" content="..."> | एक या दो वाक्यों का सार। Google अक्सर इसे आपके link के नीचे दिखाता है — यह आपका मुफ्त विज्ञापन है। |
Open Graph — शेयरिंग को सुंदर बनाने वाले tags
जब कोई आपका link WhatsApp या Facebook में paste करता है, तो वह app Open Graph tags ढूँढती है: og:title (सुर्खी), og:description (सार), og:image (preview तस्वीर), और og:url (पेज का पता)। इनके साथ आपका link title, तस्वीर और description वाला एक card बन जाता है। इनके बिना वह एक सादा नीला link रह जाता है जिस पर कोई click नहीं करता। Open Graph tags में property इस्तेमाल होता है, name नहीं — यही वह एक detail है जिसमें लोग सबसे ज़्यादा गलती करते हैं।
आम गलतियाँ
- Meta tags को
<body>में रखना — वे<head>में होते हैं और बाकी जगह ignore कर दिए जाते हैं। - Viewport tag छोड़ देना — तब पेज हर phone पर टूटा हुआ दिखता है।
- हर पेज पर एक ही title और description इस्तेमाल करना — Google उन्हें duplicate मानता है और बुरा result दिखाता है।
- Description में keywords ठूँसना — वह पढ़ने में बुरा लगता है, और Google अक्सर उसे पेज के text से बदल देता है।
name="og:title"इस्तेमाल करना,property="og:title"की जगह — share apps उसे ignore कर देती हैं।
उदाहरण समझिए
<meta charset="UTF-8">— head में सबसे पहले, ताकि Hindi text और ₹ का निशान सही दिखे।<meta name="viewport" content="width=device-width, initial-scale=1.0">— पेज phone की screen में फिट होता है, desktop चौड़ाई पर सिकुड़ने की जगह।<title>Learn HTML Forms — KAMALDNP Academy</title>— Google में नीला link और browser tab का text।<meta name="description" content="Learn HTML forms — labels, inputs, dropdowns and submit buttons, with examples.">— वह सार जो Google link के नीचे दिखाता है।<meta property="og:title" content="Learn HTML Forms">— WhatsApp/Facebook share card पर सुर्खी।<meta property="og:image" content="https://kamaldnp.com/images/forms.jpg">— share card पर preview तस्वीर।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learn HTML Forms — KAMALDNP Academy</title>
<meta name="description" content="Learn HTML forms — labels, inputs, dropdowns and submit buttons, with examples.">
<meta property="og:title" content="Learn HTML Forms">
<meta property="og:description" content="Learn HTML forms — labels, inputs, dropdowns and submit buttons, with examples.">
<meta property="og:image" content="https://kamaldnp.com/images/forms.jpg">
<meta property="og:url" content="https://kamaldnp.com/learn/html/forms">
</head>
<body>
<h1>Learn HTML Forms</h1>
<p>Labels, inputs, dropdowns and submit buttons, with examples.</p>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. मेटा टैग क्या होते हैं?
ये हेड में रहने वाले टैग हैं जो विज़िटर को नहीं दिखते, पर गूगल, व्हाट्सऐप और फ़ेसबुक इन्हें पढ़कर टाइटल, विवरण और प्रीव्यू कार्ड बनाते हैं।
2. ओपन ग्राफ़ टैग से क्या फ़ायदा होता है?
लिंक शेयर करने पर वह सिर्फ़ नीला लिंक नहीं रहता, बल्कि टाइटल, तस्वीर और विवरण के साथ एक कार्ड बन जाता है।
3. क्या सिर्फ़ मेटा टैग से गूगल रैंकिंग मिल जाती है?
नहीं, गूगल कंटेंट, लिंक्स और उपयोगिता के हिसाब से रैंक करता है, इसलिए पहले अच्छा कंटेंट और फिर ईमानदारी से लिखे मेटा टैग ज़रूरी हैं।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
