HTML meta tags in hindi – html metadata

Posted on by

इस HTML tutorial in Hindi में आप HTML meta tags के बारे मे सीखेंगे |

Contents hide
1 HTML meta tag kya hota hai
2 HTML me meta tag kaise add kare
3 HTML head tag in Hindi video
4 HTML document me author name kaise likhe
5 HTML Character Encoding in Hindi
6 keywords meta tag kya hai ( what is keyword meta tag )
7 Define Description Meta Tag in HTML
8 Viewport meta tag in html ( HTML me viewport kaise banaye )

HTML meta tag kya hota hai

आइये हम इस post के जरिये समझते है की HTML meta tag kya hota hai – HTML meta tag का उपयोग HTML document के अतिरिक्त information को Specified करने के लिए किया जाता है | जैसे की web page का title, description, keywords, author name आदि |

HTML document या XHTML document के head section के अंदर requirement के मुताबिक कितने भी meta tag रखे जा सकते हैं।

metadata web page पर display नहीं होते है , लेकिन इसका उपयोग web browser , Google या अन्य search engine द्वारा किया जाता है |

HTML me meta tag kaise add kare

HTML document में meta element को define करने के लिए <meta> tag का उपयोग किया जाता है | <meta> tag के भीतर requirment अनुसार attributes को लिखा जाता है |

meta tag एक empty tag है , यानि कि meta tag का कोई closing tag नहीं होता है | empty tag kya hota hai यह समझने की लिए HTML Elements in Hindi का post read कीजिये |

हमने meta data के बारे में HTML video tutorial ( Head tag in HTML topic ) के through भी explain किया है | आप चाहो तो निचे दिया गया video भी watch कर सकते हो |

HTML head tag in Hindi video

HTML document me author name kaise likhe

आप meta tag के जरिये स्पष्ट रूप से परिभाषित ( define ) कर सकते है की web page का author या creator कौन है |

निम्नलिखित उदहारण में meta tag का use करके author को define किया है |

<head>
    <meta name="author" content="Khetaram Meghwal">
</head>

HTML Character Encoding in Hindi

HTML character encoding bytes को charecter में बदलता है , ताकि HTML web page को web browser पर ठीक तरीके से present कर सके |

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Character Encoding</title> 
    <meta charset="utf-8">
</head>
<body>
    <h1>Hi, How are you?</h1>
</body>
</html>

आप character encoding को css के @charset rules के जरिये भी set कर सकते है |

keywords meta tag kya hai ( what is keyword meta tag )

keywords meta tag के जरिये HTML document में लिखे गए content के keywords set किये जाते है | जैसे की हमारा यह post meta tag के बारेमें है , तो हम keywords meta tag में html metadata , HTML meta tags in hindi , HTML meta tag kya hota hai आदि keywords set कर सकते है |

Google , Yahoo, Bing जैसे search engine web page के keywords को अपने crawler में index करने के लिए keywords meta tag का उपयोग करते है |

इसलिए meta keywords search engine optimization के लिए बहुत ही important है |

<head>
    <title>Defining Keywords meta tag in Hindi</title>  
    <meta name="keywords" content="meta tag, meta element in hindi, HTML tutorial">    
</head>

Define Description Meta Tag in HTML

keywords meta tag की तरह description meta tag भी SEO ( Search Engine Optimization ) के लिए बहुत ही important है | descrition meta tag के जरिये web page के content का short description define किया जाता है , जिसे हम summary भी कह सकते है |

Search engine meta keywords की तरह , meta description को भी crawler में indexing करता है और search result में इस data को display करता है | इसलिए meta description बढे समझदारी लिखना चाहिए |

<head>
    <title>Defining Description meta tag in HTML</title> 
    <meta name="description" content="meta data search engine optimization के लिए बहुत ही important है | HTML document में meta data को <meta> से define किया जाता है |"> 
</head>

Viewport meta tag in html ( HTML me viewport kaise banaye )

Mobile device पर web pages को सही ढंग से प्रदर्शित करने के लिए आप viewport meta tag का उपयोग कर सकते हैं।

यदि HTML document में viewport meta tag का उपयोग न किया जाए तो mobile web browser web pages को responsive way में प्रस्तुत नहीं कर पता है |

नतीजतन, mobile device में web page को ठीक से देखने के लिए zoom-in और zoom-out करने की आवश्यकता होती है, जो user को बहुत असुविधाजनक लगता है।

<head>
    <title>Viewport meta tag example</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Web content को device के screen size के width मुताबिक display करवाने के लिए content attribute में width=device-width value का उपयोग किया गया है , और web page first time web browser में load होता है तो उसे initial-scale=1 द्वारा page की width 100% set की गयी है |

अपने web pages में हमेशा <meta> viewport tag का प्रयोग करना चाहिए । यह आपकी website को mobile friendly ( responsive website ) बना देगा , जिससे mobile phone और tablet जैसे devices में user को website access करने में आसानी हो और user better experience अनुभव कर सके |

यह भी पढ़े :-