इस HTML Tutorial श्रृंखला में, जानें कि HTML मेटा टैग क्या हैं (What is HTML Meta Tags in Hindi)? और उन्हें HTML document में कैसे उपयोग किया जाता है?
अगर आपको एक अच्छे वेब पेज (वेबसाइट) बनाना है तो आपको HTML दस्तावेज़ के जो अतिरिक्त जानकारी है जैसे title, लेखक का नाम या दस्तावेज़ विवरण, आदि <head> टैग में देना होगा।
HTML के बारे में आपको पता ही होगा की यह एक मार्कअप भाषा है, और इसका पूरा नाम “Hypertext markup language” है। विवरण में समझ के लिए “HTML क्या है?” लेख पढ़े। और HTML टैग क्या है? ये भी पहले पढ़े.
Table of Contents
Meta Tags क्या है (HTML Meta Tags in Hindi)?
मेटा टैग HTML दस्तावेज़ के बारे में मेटाडेटा परिभाषित करता है। <meta> टैग हमेशा <head> तत्व (element) के अंदर जाते हैं, और आमतौर पर दस्तावेज़ के लेखक, पेज description, character सेट, कीवर्ड, और viewport सेटिंग्स निर्दिष्ट करने के लिए उपयोग किए जाते हैं।
मूल रूप से, Meta Tags एचटीएमएल दस्तावेज़ के बारे में अतिरिक्त महत्वपूर्ण जानकारी निर्दिष्ट करता है। Meta तत्वों का उपयोग HTML दस्तावेज़ के गुणों का वर्णन करने वाले name/value को शामिल करने के लिए किया जा सकता है, जैसे लेखक, समाप्ति तिथि, कीवर्ड की सूची, दस्तावेज़ लेखक आदि।
यानि की अगर आपको अतिरिक्त जानकारी वेब पेज में, प्रदान करना है तो <meta> टैग का उपयोग कर सकते है।
यह Meta टैग एक खाली तत्व (empty tag) है और इसलिए इसमें बंद टैग नहीं है, लेकिन यह इसकी विशेषताओं के भीतर जानकारी रखता है।
आप अपने HTML document में एक या अधिक <meta> टैग शामिल कर सकते हैं, इस आधार पर कि आप अपने दस्तावेज़ में कौन सी जानकारी रखना चाहते हैं, लेकिन सामान्य तौर पर, मेटा टैग दस्तावेज़ के भौतिक स्वरूप को प्रभावित नहीं करते हैं, इसलिए उपस्थिति के दृष्टिकोण से, इससे कोई फर्क नहीं पड़ता कि आप शामिल करते हैं उन्हें या नहीं।
SEO मेटा टैग क्या है (SEO Meta Tag in Hindi)?
वेबपेज के बारे में अतिरिक्त जानकारी को समझने के लिए Google जैसे सर्च इंजन मेटा टैग से मेटाडेटा का उपयोग करते हैं। वे इस जानकारी का उपयोग रैंकिंग उद्देश्यों के लिए, खोज परिणामों में स्निपेट प्रदर्शित करने के लिए कर सकते हैं, और कभी-कभी वे मेटा टैग को अनदेखा कर सकते हैं। मेटा टैग के उदाहरण में <title> और <description> elements शामिल हैं।
इसका मतलब मेटा टैग कोड के स्निपेट हैं जो सर्च इंजन को आपके वेब पेज के बारे में महत्वपूर्ण जानकारी बताते हैं, जैसे कि उन्हें इसे search result में कैसे प्रदर्शित करना चाहिए। मेटा टैग web browsers को बताते हैं कि पेज visitors को कैसे दिखाया जाए। हर वेब पेज में मेटा टैग होते हैं, लेकिन वे केवल HTML कोड में ही दिखाई देते हैं।
अगर आप चाहते है की आपके वेब पेज किसी भी search engine जैसे कि google या bing में rank करें, तो आपके लिए <meta> टैग महत्वपूर्ण है। इसमें आप <title> टैग, भाषा, keyword, description आदि का उपयोग कर सकते है।
HTML में मेटा टैग कैसे जोड़े (Add Meta Tags in HTML)
आप दस्तावेज़ के <head> टैग के अंदर <meta> टैग लगाकर अपने वेब पेजों में मेटाडेटा जोड़ सकते हैं, जो कि और टैग द्वारा दर्शाया जाता है।
एक मेटा टैग में मुख्य विशेषताओं के अतिरिक्त निम्नलिखित विशेषताएँ हो सकती हैं –
| Attribute | Description |
|---|---|
| Name | इसमें कुछ भी हो सकता है जैसे कि author, description, keywords, revised, generator आदि। |
| content | यह Property’s value को निर्दिष्ट करता है। |
| http-equiv | http प्रतिक्रिया संदेश शीर्षलेखों के लिए प्रयुक्त। जैसे कि पेज को रीफ्रेश करने या cookie सेट करने के लिए http-equiv का उपयोग किया जा सकता है। |
| scheme | यह Property’s के मूल्य की व्याख्या करने के लिए एक योजना निर्दिष्ट करता है (जैसा कि सामग्री विशेषता में घोषित किया गया है)। |
आइए उदाहरण के तौर पर जानते हैं कि इन सभी का उपयोग कैसे किया जाता है।
List of HTML Meta Tags in Hindi
जैसे कि आपने जाना HTML में कई सारे अलग अलग मेटा टैग है। HTML मेटा टैग HTML पृष्ठ के मेटाडेटा का वर्णन करते हैं, जहां इसमें पृष्ठ के लेखक, पृष्ठ विवरण, और कीवर्ड आदि होते हैं।
चलिए अब सभी HTML tags को एक-एक करके समझते है:
Add Author Name in HTML Meta tag
यह Meta tag लेखक को निर्दिष्ट करती है। आप मेटा टैग का उपयोग करके वेब पेज में लेखक का नाम सेट कर सकते हैं।
नीचे एक उदाहरण देखें −
<!DOCTYPE html> <html> <head> <title>Meta Tags Example</title> <meta name = "author" content = "Md Badiruddin" /> </head> <body> <p>Welcome to Tutorialinhindi.com!</p> </body> </html>
Charset Meta Tags in Hindi
इस attribute का उपयोग character set को defines करने के लिए किया जाता है। कुछ इस तरह:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head>
Specifying Keywords
आप दस्तावेज़ से संबंधित महत्वपूर्ण कीवर्ड निर्दिष्ट करने के लिए <meta> टैग का उपयोग कर सकते हैं और बाद में इन कीवर्ड का उपयोग search engine द्वारा आपके वेबपेज को खोजने के लिए अनुक्रमित करते समय किया जाता है।
<!DOCTYPE html> <html> <head> <meta name = "keywords" content = "HTML, Meta Tags, Metadata" /> </head> <body> <p>Tutorial in Hindi</p> </body> </html>
Add Viewport Meta Tags in Hindi
यह HTML दस्तावेज़ का दृश्य क्षेत्र है। यानी की viewport ब्राउज़र को पृष्ठ के dimension, scale और measurement को नियंत्रित करने के तरीके के बारे में सूचित करता है।
यह डिवाइस से डिवाइस में बदलता है। आपको इसे अपने HTML दस्तावेज़ में सेट करना होगा।
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width", initial-scale=1"> </head>
Viewport कैसे काम करता है थोड़ा समझते है:
content="width=device-width"
इस लाइन में हम ब्राउज़र को बताते है की सामग्री की चौड़ाई डिवाइस की स्क्रीन की चौड़ाई पर सेट की जानी चाहिए।
initial-scale=1.0
जब उपयोगकर्ता इसे ब्राउज़र में लोड करता है तो HTML दस्तावेज़ का प्रारंभिक ज़ूम स्तर सेट करता है।
Add Description मेटा टैग इन हिंदी
इसका विशेषता HTML पेज दस्तावेज़ का विवरण देती है की पेज किस विषय पर आधारित है।
<meta name="description" content="Tutorial in hindi is a best hindi programming language tutorial website 🙂 ">
Use Date of Revision meta tag
इसका उपयोग करके आप वेब पेज को कब updated किया गया है वोह specifies कर सकते है।
<meta name="revised">content="TutorialInHindi, 22/09/2021″/>
Set time to refresh the page
जब आप सामग्री में समय का उल्लेख करते हैं तो HTML मेटा refresh टैग पृष्ठ को refresh करता है।
उदाहरण के लिए, नीचे हमने 30 दिया, इसका मतलब है कि पेज हर 30 सेकंड में page refresh होगा।
<meta http-equiv="refresh" content="30">
इन सभी HTML meta tags को आप किसी भी HTML code editor में उपयोग कर सकते है।
वेब डिजाइनिंग सीखें हिंदी में
यदि आप वेब डिजाइनिंग सीखना चाहते हैं, तो यहां वेब डिजाइनिंग के बारे में हमारा पूरा चरण-दर-चरण ट्यूटोरियल है, “वेब डिजाइनिंग इन हिंदी” पर क्लिक करके शुरू करें।
निष्कर्ष
इस HTML Meta Tags in Hindi tutorial में आपने सिखा की HTML document के अतिरिक्त महत्वपूर्ण जानकारी Meta Tags निर्दिष्ट करता है और इसका उपयोग आप open <head> tag और </head> tags के अंडर <meta> टैग का उपयोग कर सकते हैं।
Complete HTML Course in Hindi
अगर आप इसी तरह HTML सीखना चाहते है तो यहाँ HTML Tutorial पर क्लिक करके अभी HTML सीखना शुरू करें।
मुझे उम्मीद है की आपके लिए ये लेख उपयोगी रहा होगा यहाँ दिए गए हार एक meta tags को practice करे और एक अच्छा वेब डेवलपर बने।
Good information
Thanks
Best information
Thanks for you feedback