HTML => मेटा जानकारी

परिचय

HTML दस्तावेज़ों में मेटा टैग दस्तावेज़ के बारे में उपयोगी जानकारी प्रदान करते हैं, जिसमें विवरण, कीवर्ड, लेखक, संशोधनों की तारीखें और लगभग 90 अन्य क्षेत्र शामिल हैं। यह विषय इन टैग के उपयोग और उद्देश्य को कवर करता है।

वाक्य - विन्यास

<meta name="metadata name" content="value">
<meta http-equiv="pragma directive" content="value">
<meta charset="encoding label">

टिप्पणियों

मेटा टैग एक HTML टैग है जिसका उपयोग HTML डॉक्यूमेंट के मेटाडेटा को सेट करने के लिए किया जाता है। मेटा टैग को मुख्य तत्व में जाने की आवश्यकता है। पृष्ठ में किसी भी तरह के मेटा टैग हो सकते हैं।

मेटा टैग keywords आमतौर पर रोबोट द्वारा उपयोग नहीं किया जाता है। अधिकांश खोज इंजन यह निर्धारित करते हैं कि वेब पृष्ठों पर सामग्री के साथ कौन से खोजशब्द फिट हैं। कहा जा रहा है, कुछ भी नहीं कहता है कि आपको अब कीवर्ड मेटा टैग शामिल नहीं करना चाहिए।

किसी पेज का मेटा डेटा ज्यादातर ब्राउज़र (दस्तावेज़ की स्केलिंग की तरह) और वेब क्रॉलिंग मकड़ियों का उपयोग खोज इंजन (Google, याहू! बिंग) द्वारा उपयोग किया जाता है।

युक्ति <meta name> साथ उपयोग के लिए कई मानकीकृत मेटाडेटा नाम देता है और <meta http-equiv> साथ उपयोग के लिए मानकीकृत मेटाडेटा प्रगति निर्देश देता है। हालांकि, इंटरनेट (वेब क्रॉलर, संलेखन उपकरण, सामाजिक साझाकरण सेवा, आदि) में कई सेवाएँ मेटाडेटा के लिए एक सामान्य एक्सटेंशन बिंदु के रूप में <meta name> फ़ॉर्म का उपयोग करती हैं। इनमें से कुछ कल्पना के पेज पर सूचीबद्ध हैं।

अक्षरों को सांकेतिक अक्षरों में बदलना

charset विशेषता HTML डॉक्यूमेंट के लिए कैरेक्टर एन्कोडिंग को निर्दिष्ट करती है और एक वैध कैरेक्टर एन्कोडिंग की आवश्यकता होती है (उदाहरण में windows-1252 , ISO-8859-2 , Shift_JIS और UTF-8 )। UTF-8 (यूनिकोड) सबसे व्यापक रूप से उपयोग किया जाता है और इसका उपयोग किसी भी नई परियोजना के लिए किया जाना चाहिए।

<meta charset="UTF-8">

<meta charset="ISO-8859-1">

सभी ब्राउज़रों ने हमेशा <meta charset> फॉर्म को पहचाना है, लेकिन अगर आपको किसी कारण से आपके पृष्ठ की वैध HTML 4.01 होने की आवश्यकता है, तो आप इसके बजाय निम्नलिखित का उपयोग कर सकते हैं:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

ब्राउज़रों को पहचानने वाले सभी उपलब्ध वर्ण एन्कोडिंग लेबल देखने के लिए एन्कोडिंग मानक भी देखें।

स्वचालित ताज़ा

पृष्ठ को हर पाँच सेकंड में ताज़ा करने के लिए, इस meta तत्व को head तत्व में जोड़ें:

<meta http-equiv="refresh" content="5">

सावधान! हालांकि यह एक मान्य आदेश है, यह अनुशंसा की जाती है कि आप इसका उपयोग उपयोगकर्ता अनुभव पर इसके नकारात्मक प्रभावों के कारण नहीं करते हैं। पृष्ठ को रीफ़्रेश करने से अक्सर यह अप्रतिबंधित हो सकता है, और अक्सर पृष्ठ के शीर्ष पर स्क्रॉल होता है। यदि पृष्ठ पर कुछ जानकारी को लगातार अपडेट करने की आवश्यकता है, तो ऐसा करने के लिए बहुत बेहतर तरीके हैं जो केवल पृष्ठ के एक हिस्से को ताज़ा करते हैं।

मोबाइल लेआउट नियंत्रण

सामान्य मोबाइल-अनुकूलित साइटें इस तरह <meta name="viewport"> टैग का उपयोग करती हैं:

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

viewport तत्व ब्राउज़र को यह निर्देश देता है कि आपके द्वारा उपयोग किए जा रहे डिवाइस के आधार पर पृष्ठ के आयाम और स्केलिंग को कैसे नियंत्रित किया जाए।

उपरोक्त उदाहरण में, content="width=device-width मतलब है कि ब्राउज़र अपनी स्क्रीन की चौड़ाई पर पृष्ठ की चौड़ाई को प्रस्तुत करेगा। इसलिए यदि वह स्क्रीन 480px wide , तो ब्राउज़र विंडो 480px wide होगी। initial-scale=1 दर्शाया गया है कि प्रारंभिक ज़ूम (जो इस मामले में 1 है, इसका मतलब है कि यह ज़ूम नहीं करता है)।

नीचे इस टैग का समर्थन करने वाले गुण हैं:

गुण	विवरण
`width`	डिवाइस के वर्चुअल व्यूपोर्ट की चौड़ाई। मान ¹ : `device-width` या पिक्सेल में वास्तविक चौड़ाई, जैसे `480`
`height`	डिवाइस के वर्चुअल व्यूपोर्ट की ऊंचाई। मान ² : `device-height` या पिक्सेल में वास्तविक चौड़ाई, जैसे `600`
`initial-scale`	जब पृष्ठ लोड किया जाता है तो प्रारंभिक ज़ूम। 1.0 ज़ूम नहीं करता है।
`minimum-scale`	आगंतुक न्यूनतम राशि पृष्ठ पर ज़ूम कर सकता है। `1.0` ज़ूम नहीं करता है।
`maximum-scale`	आगंतुक अधिकतम राशि को पृष्ठ पर ज़ूम कर सकता है। `1.0` ज़ूम नहीं करता है।
`user-scalable`	डिवाइस को ज़ूम इन और आउट करने की अनुमति देता है। मान रहे हैं `yes` या `no` । यदि सेट नहीं है, तो उपयोगकर्ता वेबपृष्ठ में ज़ूम करने में सक्षम नहीं है। डिफ़ॉल्ट हाँ है। ब्राउज़र सेटिंग्स इस नियम को अनदेखा कर सकती हैं।

टिप्पणियाँ:

¹ width संपत्ति या तो पिक्सल ( width=600 ) या उपकरण-चौड़ाई ( width=device-width ) द्वारा निर्दिष्ट की जा सकती है जो डिवाइस की स्क्रीन की भौतिक चौड़ाई का प्रतिनिधित्व करती है।

² इसी तरह, height संपत्ति या तो pixels ( height=600 ) में निर्दिष्ट की जा सकती है या device-height ( height=device-height ) जो डिवाइस की स्क्रीन की भौतिक ऊंचाई का प्रतिनिधित्व करती है।

पृष्ठ की जानकारी

`application-name`

वेब एप्लिकेशन का नाम देना जो पृष्ठ का प्रतिनिधित्व करता है।

<meta name="application-name" content="OpenStreetMap">

यदि यह वेब एप्लिकेशन नहीं है, तो application-name मेटा टैग का उपयोग नहीं किया जाना चाहिए।

`author`

पृष्ठ का लेखक सेट करें:

<meta name="author" content="Your Name">

केवल एक नाम दिया जा सकता है।

`description`

पृष्ठ का विवरण सेट करें:

<meta name="description" content="Page Description">

खोज उद्देश्य के लिए आपके वेब पेज को अनुक्रमित करते समय description मेटा टैग का उपयोग विभिन्न खोज इंजनों द्वारा किया जा सकता है। आमतौर पर, मेटा टैग के भीतर निहित विवरण वह संक्षिप्त सारांश होता है जो खोज इंजन परिणामों में पृष्ठ / वेबसाइट के मुख्य शीर्षक के अंतर्गत दिखाई देता है। Google आमतौर पर आपके विवरण के पहले 20-25 शब्दों का ही उपयोग करता है।

`generator`

<meta name="generator" content="HTML Generator 1.42">

दस्तावेज़ उत्पन्न करने के लिए उपयोग किए जाने वाले सॉफ़्टवेयर पैकेजों में से एक की पहचान करता है। केवल उन पृष्ठों के लिए उपयोग किया जाना चाहिए जहां मार्कअप स्वचालित रूप से उत्पन्न होता है।

`keywords`

खोज इंजन के लिए कीवर्ड सेट करें (अल्पविराम से अलग):

<meta name="keywords" content="Keyword1, Keyword2">

keywords मेटा टैग का उपयोग कभी-कभी खोज इंजन द्वारा खोज क्वेरी जानने के लिए किया जाता है जो आपके वेब पेज के लिए प्रासंगिक है।
अंगूठे के एक नियम के रूप में, बहुत सारे शब्दों को नहीं जोड़ना संभवतः एक अच्छा विचार है, क्योंकि अधिकांश खोज इंजन जो अनुक्रमण के लिए इस मेटा टैग का उपयोग करते हैं, केवल पहले ~ 20 शब्दों को अनुक्रमित करेंगे। सुनिश्चित करें कि आप सबसे महत्वपूर्ण कीवर्ड पहले डालते हैं।

रोबोट

कई प्रमुख खोज इंजनों द्वारा समर्थित robots विशेषता, यह नियंत्रित करती है कि खोज इंजन मकड़ियों को एक पृष्ठ को अनुक्रमित करने की अनुमति है या नहीं और उन्हें एक पृष्ठ से लिंक का पालन करना चाहिए या नहीं।

<meta name="robots" content="noindex">

यह उदाहरण सभी खोज इंजनों को निर्देश देता है कि वे खोज परिणामों में पृष्ठ न दिखाएं। अन्य अनुमत मान हैं:

मूल्य / निर्देशक	अर्थ
`all`	चूक। `index, follow` बराबर `index, follow` । नीचे दिए गए नोट देखें।
`noindex`	पेज को बिल्कुल भी इंडेक्स न करें।
`nofollow`	इस पृष्ठ के लिंक का अनुसरण न करें
`follow`	पृष्ठ के लिंक का पालन किया जा सकता है। नीचे दिए गए नोट देखें।
`none`	`noindex, nofollow` बराबर।
`noarchive`	इस पृष्ठ का कैश्ड संस्करण खोज परिणामों में उपलब्ध न करें।
`nocache`	बिंग जैसे कुछ बॉट्स द्वारा उपयोग किए जाने वाले `noarchive` पर्याय।
`nosnippet`	खोज परिणामों में इस पृष्ठ का स्निपेट न दिखाएं।
`noodp`	खोज परिणामों में शीर्षक या स्निपेट के लिए ओपन डायरेक्ट्री प्रोजेक्ट से इस पेज के मेटाडेटा का उपयोग न करें।
`notranslate`	खोज परिणामों में इस पृष्ठ का अनुवाद न करें।
`noimageindex`	इस पृष्ठ पर छवियों को अनुक्रमित न करें।
`unavailable_after [RFC-850 date/time]`	निर्दिष्ट तिथि / समय के बाद खोज परिणामों में इस पृष्ठ को न दिखाएं। दिनांक / समय RFC 850 प्रारूप में निर्दिष्ट होना चाहिए।

नोट: स्पष्ट रूप से परिभाषित index और / या follow , जबकि वैध मूल्य, बहुत आवश्यक नहीं है क्योंकि सभी खोज इंजन मान लेंगे कि उन्हें ऐसा करने की अनुमति है यदि स्पष्ट रूप से ऐसा करने से रोका नहीं गया है। Robots.txt फ़ाइल कैसे काम करती है, इसके समान, खोज इंजन आम तौर पर केवल उन चीजों की तलाश करते हैं जो उन्हें करने की अनुमति नहीं है। केवल खोज की चीजों को बताने की अनुमति नहीं है, गलती से भी विरोध करने वालों (जैसे index, ..., noindex ) को रोकने से रोकता है index, ..., noindex जो सभी खोज इंजन एक ही तरह से व्यवहार नहीं करेंगे।

फ़ोन नंबर मान्यता

आईओएस जैसे मोबाइल प्लेटफॉर्म स्वचालित रूप से फोन नंबर को पहचानते हैं और उन्हें tel: लिंक में बदल देते हैं। हालांकि यह सुविधा बहुत व्यावहारिक है, सिस्टम कभी-कभी आईएसबीएन कोड और अन्य नंबरों को टेलीफोन नंबरों के रूप में पहचानता है।

मोबाइल सफारी और कुछ अन्य वेब-आधारित मोबाइल ब्राउज़रों के लिए स्वचालित फ़ोन नंबर पहचान और स्वरूपण बंद करने के लिए, आपको यह मेटा टैग चाहिए:

<meta name="format-detection" content="telephone=no">

सामाजिक मीडिया

ओपन ग्राफ मेटाडेटा के लिए एक मानक है जो किसी साइट के हेड मार्कअप के भीतर निहित सामान्य जानकारी का विस्तार करता है। यह एक संरचित प्रारूप में वेबसाइट जैसी गहरी और समृद्ध जानकारी प्रदर्शित करने के लिए फेसबुक जैसी वेबसाइटों को सक्षम बनाता है। यह जानकारी तब स्वचालित रूप से प्रदर्शित होती है जब उपयोगकर्ता Facebook पर OG मेटाडेटा वाली वेबसाइटों के लिंक साझा करते हैं।

फेसबुक / ओपन ग्राफ

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">
<!-- Facebook: https://developers.facebook.com/docs/sharing/webmasters#markup -->
<!-- Open Graph: http://ogp.me/ -->

फेसबुक / इंस्टेंट लेख

<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">

<!-- The URL of the web version of your article -->
<link rel="canonical" href="http://example.com/article.html">

<!-- The style to be used for this article -->
<meta property="fb:article_style" content="myarticlestyle">

मेटाडेटा के लिए ट्विटर अपने स्वयं के मार्कअप का उपयोग करता है। इस मेटाडेटा का उपयोग यह जानकारी देने के लिए किया जाता है कि साइट पर लिंक होने पर ट्वीट कैसे प्रदर्शित होते हैं।

ट्विटर

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">

Google+ / स्कीमा ..org

<link href="https://plus.google.com/+YourPage" rel="publisher">
<meta itemprop="name" content="Content Title">
<meta itemprop="description" content="Content description less than 200 characters">
<meta itemprop="image" content="https://example.com/image.jpg">

स्वचालित रीडायरेक्ट

कभी-कभी आपके वेबपेज को एक स्वचालित रीडायरेक्ट की आवश्यकता होती है।

उदाहरण के लिए, 5 सेकंड के बाद example.com पर रीडायरेक्ट करने के लिए:

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

यह रेखा आपको निर्दिष्ट वेबसाइट पर भेज देगी (इस स्थिति में example.com 5 सेकंड के बाद।

यदि आपको पुनर्निर्देशन से पहले समय की देरी को बदलने की आवश्यकता है, तो बस संख्या को अपने ठीक पहले बदल दें ;url= समय की देरी को बदल देगा।

वेब अप्प

आप अपने वेब ऐप या वेबसाइट को किसी डिवाइस के होमस्क्रीन में एप्लिकेशन शॉर्टकट आइकन जोड़ने के लिए सेट कर सकते हैं, और Android के "होमस्क्रीन में जोड़ें" मेनू आइटम के लिए क्रोम का उपयोग करके पूर्ण-स्क्रीन "ऐप मोड" में ऐप लॉन्च किया है।

मेटा टैग के नीचे पूर्ण-स्क्रीन मोड (एड्रेस बार के बिना) में वेब ऐप खुलेगा।

Android क्रोम

<meta name="mobile-web-app-capable" content="yes">

आईओएस

<meta name="apple-mobile-web-app-capable" content="yes">

आप मेटा टैग में स्टेटस बार और एड्रेस बार के लिए भी रंग सेट कर सकते हैं।