HTML के सभी Meta Tags का पूरा ज्ञान

HTML के सभी Meta Tags का पूरा ज्ञान (हिंदी में)

अगर आप वेबसाइट डेवलपमेंट कर रहे हैं, तो आपने <meta> टैग का नाम जरूर सुना होगा। ये छोटे लेकिन बेहद महत्वपूर्ण टैग्स होते हैं, जो वेबसाइट के बारे में सर्च इंजन, ब्राउज़र और सोशल मीडिया को ज़रूरी जानकारी देते हैं।

इस ब्लॉग में हम जानेंगे HTML के सभी ज़रूरी Meta Tags — उनका उद्देश्य, उपयोग और कोड उदाहरण, वो भी आसान हिंदी भाषा में।

🧠 Meta Tag क्या होता है?

Meta टैग्स HTML डॉक्यूमेंट के <head> सेक्शन में होते हैं और ये ब्राउज़र को बताते हैं कि पेज को कैसे रेंडर करना है, सर्च इंजन को कौन-सी जानकारी इंडेक्स करनी है और सोशल मीडिया प्लेटफॉर्म्स को क्या दिखाना है।

📋 सभी महत्वपूर्ण Meta Tags की लिस्ट

1. <meta charset="UTF-8">

• उद्देश्य: यह टैग बताता है कि डॉक्यूमेंट में कौन-सी कैरेक्टर एनकोडिंग इस्तेमाल हो रही है।
• क्यों ज़रूरी है: UTF-8 लगभग सभी भाषाओं को सपोर्ट करता है (जैसे हिंदी, अंग्रेज़ी, उर्दू आदि)।

<meta charset="UTF-8" />

2. <meta name="viewport">

• उद्देश्य: वेबसाइट को responsive बनाता है ताकि वह मोबाइल और टैबलेट पर भी सही दिखे।

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

3. <meta name="description">

• उद्देश्य: यह टैग आपकी वेबसाइट का संक्षिप्त विवरण देता है, जो Google Search में snippet के रूप में दिखता है।

<meta
  name="description"
  content="यह वेबसाइट भक्ति से जुड़ी हुई सामग्री प्रदान करती है।"
/>

4. <meta name="keywords"> (पुराना तरीका)

• उद्देश्य: वेबसाइट से जुड़े मुख्य कीवर्ड्स बताता है।

• नोट: आजकल सर्च इंजन इसे अधिक महत्व नहीं देते, लेकिन जानना ज़रूरी है।

<meta name="keywords" content="भक्ति, आरती, हनुमान चालीसा, पूजा" />

5. <meta name="author">

• उद्देश्य: वेबसाइट के लेखक का नाम दर्शाता है।

<meta name="author" content="Siddharth Jain" />

6. <meta name="robots">

• उद्देश्य: सर्च इंजन को बताता है कि पेज को इंडेक्स करना है या नहीं।

<meta name="robots" content="index, follow" />

• अन्य वैल्यू: noindex, nofollow, noarchive आदि।

7. <meta name="theme-color">

• उद्देश्य: मोबाइल ब्राउज़र में टूलबार का रंग सेट करता है।

<meta name="theme-color" content="#ffffff" />

🌐 Open Graph Meta Tags (सोशल मीडिया के लिए)

• जब आप किसी पेज को Facebook या WhatsApp पर शेयर करते हैं, तो यह टैग तय करता है कि उसका टाइटल, डिस्क्रिप्शन और इमेज क्या होगी।

<meta property="og:title" content="Dilkibhakti - भक्ति का डिजिटल रूप" />
<meta
  property="og:description"
  content="सभी देवी-देवताओं की आरती और भजन एक जगह।"
/>
<meta property="og:image" content="https://www.example.com/og-image.webp" />
<meta property="og:url" content="https://www.example.com/" />

🐦 Twitter Card Meta Tags

• Twitter पर कोई पेज शेयर करते समय जो प्रिव्यू आता है, वो इन टैग्स से कंट्रोल होता है।

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Dilkibhakti - भक्ति का डिजिटल रूप" />
<meta
  name="twitter:description"
  content="देवी-देवताओं की आरती, भजन और चालीसा।"
/>
<meta
  name="twitter:image"
  content="https://www.example.com/twitter-image.webp"
/>

🔁 Auto Refresh / Redirect Tag

• अगर आप पेज को कुछ सेकंड बाद किसी दूसरी URL पर ले जाना चाहते हैं:

<meta http-equiv="refresh" content="5; url=https://www.example.com/new-page" />

✅ निष्कर्ष (Conclusion)

टैग उद्देश्य

• charset टेक्स्ट एनकोडिंग तय करता है
• viewport मोबाइल फ्रेंडली डिज़ाइन
• description गूगल में विवरण दिखाना
• keywords (पुराने SEO के लिए)
• author लेखक की जानकारी
• robots पेज इंडेक्सिंग नियंत्रण
• theme-color ब्राउज़र कलर सेटिंग
• og:title आदि सोशल मीडिया शेयरिंग
• twitter:title आदि ट्विटर प्रिव्यू कार्ड