आपको दस्तावेज़ के स्ट्रक्चर वाले सेक्शन में, उन कॉम्पोनेंट के बारे में पता चला है जो आपको (करीब-करीब) एचटीएमएल दस्तावेज़ के <head> में हमेशा मिलते हैं. <head> में मौजूद हर चीज़, "मेटा डेटा" है. इसमें <title>, <link>, <script>, <style>, और कम इस्तेमाल किए गए <base> शामिल हैं. हालांकि, मेटाडेटा के लिए <meta> टैग मौजूद है, जिसे इन दूसरे एलिमेंट से नहीं दिखाया जा सकता.
स्पेसिफ़िकेशन में कई तरह के मेटा टाइप शामिल हैं. साथ ही, ऐप्लिकेशन के साथ काम करने वाले कई ऐसे मेटा टाइप हैं जो किसी भी आधिकारिक स्पेसिफ़िकेशन में शामिल नहीं हैं. इस सेक्शन में हम उन एट्रिब्यूट और वैल्यू के बारे में बात करेंगे जो खास जानकारी में शामिल हैं. साथ ही, हम कुछ सामान्य मेटा नेम और कॉन्टेंट की वैल्यू के साथ-साथ कुछ ऐसे मेटा टाइप की चर्चा करेंगे जो सर्च इंजन ऑप्टिमाइज़ेशन, सोशल मीडिया पोस्ट, और उपयोगकर्ता अनुभव के लिए बेहद काम के हैं. ये ऐसे उपयोगकर्ता अनुभव हैं जिन्हें आधिकारिक तौर पर WhatWG या W3C के ज़रिए तय नहीं किया गया है.
ज़रूरी <meta> टैग, दोबारा देखे गए
चलिए, पहले से कवर किए गए दो ज़रूरी <meta> टैग— वर्ण सेट करने का एलान और व्यूपोर्ट मेटा टैग पर दोबारा गौर करते हैं. इस प्रोसेस में, <meta> टैग को बेहतर तरीके से समझने की कोशिश करते हैं.
<meta> एलिमेंट का charset एट्रिब्यूट एक अलग तरीके से आया. मूल रूप से, वर्ण सेट का मेटाडेटा <meta http-equiv="Content-Type" content="text/html; charset=<characterset>" /> के तौर पर लिखा गया था. हालांकि, कई डेवलपर ने content एट्रिब्यूट को content="text/html" charset="<characterset>" के तौर पर गलत टाइप कर दिया. इसलिए, ब्राउज़र ने charset को एट्रिब्यूट के तौर पर इस्तेमाल करना शुरू कर दिया. इसे अब एचटीएमएल लिविंग स्टैंडर्ड में <meta charset="<charset>" /> के तौर पर स्टैंडर्ड किया गया है. वहीं, एचटीएमएल के लिए,<charset> केस-इनसेंसिटिव स्ट्रिंग "utf-8" है.
आपने देखा होगा कि मूल वर्ण सेट के मेटा एलान का इस्तेमाल, http-equiv एट्रिब्यूट को शामिल करने के लिए किया गया था. यह "http-समानता" के लिए छोटा है, क्योंकि मेटा टैग मूल रूप से उस चीज़ की नकल कर रहा है जिसे एचटीटीपी हेडर में सेट किया जा सकता है. charset अपवाद के अलावा, WHATWG एचटीएमएल स्पेसिफ़िकेशन में बताए गए अन्य सभी मेटा टैग में, http-equiv या name एट्रिब्यूट शामिल होता है.
आधिकारिक तौर पर तय किए गए मेटा टैग
मेटा टैग दो मुख्य तरह के होते हैं: p करानेma डायरेक्टिव, जिनमें charset मेटा टैग जैसे http-equiv एट्रिब्यूट का इस्तेमाल किया जाता है और मेटा टाइप को नाम दिया जाता है. जैसे, name एट्रिब्यूट वाला व्यूपोर्ट मेटा टैग, जिसके बारे में हमने वेब पेज के स्ट्रक्चर सेक्शन में चर्चा की थी. name और http-equiv, दोनों मेटा टाइप में content एट्रिब्यूट शामिल होना चाहिए. इससे, लिस्ट किए गए मेटाडेटा के टाइप के कॉन्टेंट के बारे में पता चलता है.
Pragma के डायरेक्टिव
http-equiv एट्रिब्यूट की वैल्यू व्यावहारिक निर्देश है. ये डायरेक्टिव बताते हैं कि पेज को कैसे पार्स किया जाना चाहिए. अगर एचटीटीपी हेडर सीधे तौर पर सेट नहीं किए जा सकते हैं, तो http-equiv वैल्यू का इस्तेमाल करने पर, सेटिंग के निर्देश चालू हो जाते हैं.
इस खास जानकारी में सात व्यावहारिक निर्देश के बारे में बताया गया है. इनमें से ज़्यादातर निर्देशों में सेट किए जाने के दूसरे तरीके हैं. उदाहरण के लिए, <meta http-equiv="content-language" content="en-us" /> के साथ लैंग्वेज डायरेक्टिव को शामिल किया जा सकता है. हालांकि, हम पहले ही एचटीएमएल एलिमेंट पर lang एट्रिब्यूट इस्तेमाल करने के बारे में बात कर चुके हैं. इसकी जगह, आपको इसका इस्तेमाल करना चाहिए.
सबसे सामान्य व्यावहारिक निर्देश refresh निर्देश है.
<meta http-equiv="refresh" content="60; https://machinelearningworkshop.com/regTimeout" />
content एट्रिब्यूट में सेट किए गए सेकंड की संख्या के अंतराल में रीफ़्रेश करने के लिए डायरेक्टिव सेट किया जा सकता है. साथ ही, किसी दूसरे यूआरएल पर रीडायरेक्ट भी किया जा सकता है. हालांकि, ऐसा करना सही नहीं है. उपयोगकर्ता के साफ़ तौर पर अनुरोध किए बिना, कॉन्टेंट को रीफ़्रेश और रीडायरेक्ट करने से, उसे इस्तेमाल करना मुश्किल होता है और सुलभता पर बुरा असर पड़ता है. क्या आप उससे नफ़रत नहीं करते जब आप किसी पैराग्राफ़ के बीच में होते हैं और पेज रीसेट हो जाता है? कल्पना करें कि आपको सोचने-समझने और देखने की क्षमता से जुड़ी समस्या है और ऐसा हो रहा है. अगर आपको किसी रीडायरेक्ट के साथ रीफ़्रेश सेट करना है, तो पक्का करें कि उपयोगकर्ता के पास पेज पढ़ने के लिए ज़रूरी समय हो. साथ ही, प्रक्रिया को जल्दी पूरा करने के लिए एक लिंक उपलब्ध हो. साथ ही, अगर सही लगे, तो एक बटन की मदद से "समयावधि को रोकें" और रीडायरेक्ट करने से रोकें.
हम इसे अपनी साइट में शामिल नहीं करेंगे, क्योंकि हमारे पास वेबसाइट पर आने वाले लोगों को परेशान करने के अलावा, किसी भी वजह से उपयोगकर्ता के सेशन को समय खत्म नहीं किया जा सकता.
content-security-policy सबसे काम का व्यावहारिक निर्देश है. इससे मौजूदा दस्तावेज़ के लिए कॉन्टेंट की नीति तय करने में मदद मिलती है. कॉन्टेंट से जुड़ी नीतियों में, ज़्यादातर अनुमति वाले सर्वर ऑरिजिन और स्क्रिप्ट एंडपॉइंट के बारे में जानकारी दी जाती है. इससे क्रॉस-साइट स्क्रिप्टिंग हमलों से बचने में मदद मिलती है.
<meta http-equiv="content-security-policy" content="default-src https:" />
अगर आपके पास एचटीटीपी हेडर बदलने का ऐक्सेस नहीं है या आपके पास बदलाव करने का ऐक्सेस है, तो यहां content-security-policy डायरेक्टिव के लिए स्पेस से अलग किए गए कॉन्टेंट की वैल्यू की सूची दी गई है.
नाम वाले मेटा टैग
आम तौर पर, नाम वाला मेटाडेटा शामिल किया जाता है. name एट्रिब्यूट शामिल करें. एट्रिब्यूट की वैल्यू के तौर पर मेटाडेटा का नाम शामिल करें. व्यावहारिक निर्देशों की तरह, content एट्रिब्यूट की वैल्यू सबमिट करना ज़रूरी है.
name एट्रिब्यूट, मेटाडेटा का नाम होता है. viewport के अलावा, हो सकता है कि आप description और theme-color को शामिल करना चाहें, लेकिन keywords को नहीं.
कीवर्ड
सर्च इंजन ऑप्टिमाइज़ेशन स्नेक-ऑयल सेल्समैन कीवर्ड के मेटा टैग का गलत इस्तेमाल कर रहे थे. इसके लिए, उन्हें काम के मुख्य शब्दों की सूची के बजाय, स्पैम शब्दों की कॉमा-सेपरेटेड लिस्ट में डाल दिया गया था. इसलिए, सर्च इंजन इस मेटाडेटा को आगे काम का नहीं मानते. इसे जोड़ने में समय, मेहनत या बाइट बर्बाद करने की ज़रूरत नहीं है.
ब्यौरा
हालांकि, description की वैल्यू एसईओ के लिए काम की होती है: ब्यौरे में मौजूद कॉन्टेंट की वैल्यू अक्सर ऐसी होती है जिसे सर्च इंजन, खोज के नतीजों में पेज के टाइटल के नीचे दिखाते हैं. Firefox और Opera जैसे कई ब्राउज़र इसे बुकमार्क किए गए पेजों के डिफ़ॉल्ट ब्यौरे के तौर पर इस्तेमाल करते हैं. ब्यौरा, कम शब्दों में पेज के कॉन्टेंट के बारे में सटीक जानकारी देने वाला होना चाहिए.
<meta name="description"
content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
अगर हमारे ब्यौरे का दूसरा हिस्सा आपको समझ नहीं आया, तो शायद आपने ज़ूलैंडर फ़िल्म नहीं देखी है.
रोबोट
अगर आपको अपनी साइट को सर्च इंजन में इंडेक्स नहीं कराना है, तो उन्हें इसकी जानकारी दें. <meta name="robots" content="noindex, nofollow" />, बॉट को साइट इंडेक्स न करने और किसी भी लिंक को फ़ॉलो न करने के लिए कहता है. बॉट आपके अनुरोध को सुन सकते हैं. हालांकि, ऐसा कोई कानून नहीं है कि उन्हें अनुरोध पर ध्यान देने की ज़रूरत हो. आपको साइट और नीचे दिए गए लिंक को इंडेक्स करने का अनुरोध करने के लिए, <meta name="robots" content="index, follow" /> को शामिल करने की ज़रूरत नहीं है. हालांकि, यह डिफ़ॉल्ट स्थिति है, जब तक कि एचटीटीपी हेडर इस बारे में कोई जानकारी न दें.
<meta name="robots" content="index, follow" />
थीम का रंग
theme-color वैल्यू की मदद से, ब्राउज़र के इंटरफ़ेस को पसंद के मुताबिक बनाने के लिए रंग तय किया जा सकता है. कॉन्टेंट एट्रिब्यूट में दी गई रंग की वैल्यू का इस्तेमाल, ब्राउज़र और ऑपरेटिंग सिस्टम के साथ काम करने वाले ब्राउज़र और ऑपरेटिंग सिस्टम के लिए किया जाएगा. इससे टाइटल बार, टैब बार या Chrome के अन्य कॉम्पोनेंट को कलर करने की सुविधा देने वाले उपयोगकर्ता एजेंट के लिए, रंग के सुझाव दिए जा सकेंगे. यह मेटा टैग खास तौर पर प्रोग्रेसिव वेब ऐप्लिकेशन के लिए काम आता है. हालांकि, अगर कोई ऐसी मेनिफ़ेस्ट फ़ाइल शामिल की जा रही है जो PWA की ज़रूरत है, तो वहां थीम का रंग शामिल किया जा सकता है. हालांकि, इसे एचटीएमएल में तय करने से यह पक्का हो जाता है कि रेंडर करने से पहले रंग तुरंत मिल जाएगा, जो मेनिफ़ेस्ट की इंतज़ार की तुलना में पहली बार लोड होने पर ज़्यादा तेज़ हो सकता है.
थीम के रंग को हमारी साइट के बैकग्राउंड के रंग के नीले टोन पर सेट करने के लिए, इसमें शामिल करें:
<meta name="theme-color" content="#226DAA" />
थीम के रंग वाले मेटा टैग में media एट्रिब्यूट शामिल हो सकता है. इससे मीडिया क्वेरी के आधार पर, थीम के अलग-अलग रंगों की सेटिंग चालू की जा सकती है. media एट्रिब्यूट को सिर्फ़ इस मेटा टैग में शामिल किया जा सकता है. इसे अन्य सभी मेटा टैग में अनदेखा किया जाता है.
कई अन्य name मेटा वैल्यू हैं, लेकिन सबसे ज़्यादा इस्तेमाल किए जाने वाले वैल्यू ऐसे हैं जिनके बारे में हमने चर्चा की है. अलग-अलग मीडिया क्वेरी के लिए, अलग-अलग theme-color वैल्यू का एलान करने के अलावा, हर मेटा टैग में से सिर्फ़ एक वैल्यू शामिल करें. अगर लेगसी ब्राउज़र के साथ काम करने के लिए, आपको एक से ज़्यादा तरह के मेटा टैग शामिल करने की ज़रूरत है, तो लेगसी वैल्यू, नई वैल्यू के बाद आएं. ऐसा इसलिए, क्योंकि उपयोगकर्ता एजेंट तब तक नियमों को पढ़ते हैं, जब तक कि उन्हें कोई मैच नहीं मिल जाता.
ग्राफ़ खोलें
ओपन ग्राफ़ और इससे मिलते-जुलते मेटा टैग प्रोटोकॉल का इस्तेमाल करके, यह कंट्रोल किया जा सकता है कि Twitter, LinkedIn, और Facebook जैसी सोशल मीडिया साइटों पर आपके कॉन्टेंट का लिंक कैसे दिखाया जाए. अगर इसे शामिल नहीं किया जाता है, तो सोशल मीडिया साइटें आपके पेज का टाइटल और जानकारी वाले मेटा टैग से दी गई जानकारी को सही तरीके से इस्तेमाल करेंगी. जानकारी, सर्च इंजन की तरह ही दिखेगी. हालांकि, जान-बूझकर यह सेट किया जा सकता है कि आपकी साइट पर लिंक पोस्ट किए जाने पर, उपयोगकर्ताओं को क्या दिखे.
जब Facebook या Twitter पर MachineLearningWorkshop.com या web.dev का लिंक पोस्ट किया जाता है, तो आपको इमेज, साइट के टाइटल, और साइट के ब्यौरे वाला एक कार्ड दिखता है. पूरा कार्ड आपके दिए गए यूआरएल का हाइपरलिंक है.
ओपन ग्राफ़ मेटा टैग में दो एट्रिब्यूट होते हैं: name एट्रिब्यूट के बजाय property एट्रिब्यूट और उस प्रॉपर्टी के लिए कॉन्टेंट या वैल्यू. property एट्रिब्यूट की जानकारी आधिकारिक तौर पर नहीं दी गई है. हालांकि, यह उन ऐप्लिकेशन में बड़े पैमाने पर काम करती है जो ओपन ग्राफ़ प्रोटोकॉल के साथ काम करते हैं. property जैसे "नए" एट्रिब्यूट बनाने से यह पक्का होता है कि प्रोटोकॉल के एट्रिब्यूट के लिए बनाई गई एट्रिब्यूट की वैल्यू, आने वाले समय में name या http-equiv एट्रिब्यूट की वैल्यू से मेल नहीं खाएंगी.
Facebook मीडिया कार्ड बनाएं:
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
दिखाने के लिए अपनी पोस्ट का टाइटल शामिल करें. आम तौर पर, यह टाइटल इमेज के नीचे और ब्यौरे के ऊपर दिखता है. ब्यौरे में आपकी पोस्ट के बारे में खास जानकारी देने के लिए, ज़्यादा से ज़्यादा तीन वाक्य होने चाहिए. यह og:title में तय की गई हेडलाइन के बाद दिखेगा. आपको जिस बैनर इमेज को दिखाना है उसका पूरा यूआरएल दें. इसमें https:// प्रोटोकॉल भी शामिल होना चाहिए. एचटीएमएल में इमेज शामिल करते समय, इमेज के लिए हमेशा वैकल्पिक टेक्स्ट जानकारी शामिल करें. भले ही, वह इमेज किसी दूसरी जगह पर दिखे. ओपन ग्राफ़ के सोशल मीडिया कार्ड के लिए, og:image:alt प्रॉपर्टी की कॉन्टेंट वैल्यू के तौर पर alt को तय करें. og:url के साथ, कैननिकल यूआरएल भी शामिल किया जा सकता है.
ये सभी मेटा टैग ओपन ग्राफ़ प्रोटोकॉल में तय किए जाते हैं. मान, वह कॉन्टेंट होना चाहिए जिसे आप तीसरे पक्ष के वेब ऐप्लिकेशन पर दिखाना चाहते हैं.
दूसरे सोशल मीडिया के सिंटैक्स मिलते-जुलते होते हैं, जैसे कि Twitter कार्ड मार्कअप. ऐसा करने से, लिंक कहां दिखता है, इस आधार पर आपको एक अलग अनुभव मिलता है. साथ ही, यूआरएल के आखिर में पैरामीटर जोड़कर, लिंक ट्रैकिंग चालू की जा सकती है.
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
Twitter के मामले में, यह पक्का करने के लिए कि name एट्रिब्यूट की वैल्यू, आने वाले समय के स्पेसिफ़िकेशन के मुताबिक न हो. इसलिए, Twitter कार्ड के डेटा के लिए, ओपन ग्राफ़ में property एट्रिब्यूट जैसे नए एट्रिब्यूट का इस्तेमाल करने के बजाय, नाम की सभी वैल्यू twitter: से पहले लगाएं.
Twitter और Facebook पर यह देखा जा सकता है कि आपका सोशल मीडिया कार्ड कैसा दिखेगा.
अलग-अलग सोशल मीडिया साइटों या अलग-अलग लिंक पैरामीटर के लिए, अलग-अलग कार्ड इमेज, टाइटल, और जानकारी हो सकती है. उदाहरण के लिए, https://perfmattersconf.com यूआरएल के पैरामीटर के आधार पर og:image, og:title, और og:description के लिए अलग-अलग वैल्यू सेट करता है.
अगर आपने Twitter के Card Verificationator में https://perfmattersconf.com?name=erica और https://perfmattersconf.com?name=melanie करते हैं, तो आपको ये दो अलग-अलग कार्ड दिखेंगे. हालांकि, ये दोनों कार्ड एक ही कॉन्फ़्रेंस के होम पेज से जुड़े हुए हैं, लेकिन ये दोनों अलग-अलग हैं.
अन्य उपयोगी मेटा जानकारी
अगर कोई व्यक्ति आपकी साइट को बुकमार्क करता है, उसे अपनी होम स्क्रीन पर जोड़ता है या आपकी साइट एक प्रोग्रेसिव वेब ऐप्लिकेशन है या फिर ऑफ़लाइन या ब्राउज़र Chrome की सुविधाओं के बिना काम करती है, तो मोबाइल डिवाइस की होम स्क्रीन के लिए ऐप्लिकेशन आइकॉन दिए जा सकते हैं.
आपको जिन स्टार्टअप इमेज का इस्तेमाल करना है उनसे लिंक करने के लिए, <link> टैग का इस्तेमाल किया जा सकता है. यहां मीडिया क्वेरी वाली कुछ इमेज शामिल करने का उदाहरण दिया गया है:
<link rel="apple-touch-startup-image" href="icons/ios-portrait.png" media="orientation: portrait" />
<link rel="apple-touch-startup-image" href="icons/ios-landscape.png" media="orientation: landscape" />
अगर आपकी साइट या ऐप्लिकेशन पर वेब ऐप्लिकेशन काम करता है, यानी साइट कम से कम यूज़र इंटरफ़ेस (यूआई) के साथ अपने-आप खड़ा हो सकती है, जैसे कि 'वापस जाएं' बटन नहीं, तो आप ब्राउज़र को यह बताने के लिए मेटा टैग का इस्तेमाल कर सकते हैं:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
इन्हें सिर्फ़ तब शामिल करें, जब आपके ऐप्लिकेशन में वाकई ऐप्लिकेशन मौजूद हो. अगर आपकी साइट नहीं है, तो आपको लोगों को खराब अनुभव देने के लिए, आपके सबसे बड़े सपोर्टर को शामिल करना होगा. ये वे लोग हैं जिन्होंने आपकी साइट को अपनी होम स्क्रीन पर जोड़ा है. आप उनसे प्यार खो देंगे!
अगर कोई आपके आइकॉन को अपने छोटे डिवाइस की होम स्क्रीन पर सेव करने जा रहा है, तो आपको ऑपरेटिंग सिस्टम को एक छोटा नाम देना है, जो किसी छोटे डिवाइस की होम स्क्रीन पर ज़्यादा जगह न लेता हो. ऐसा करने के लिए, मेटा टैग शामिल करें या वेब मेनिफ़ेस्ट फ़ाइल का इस्तेमाल करें. यहां मेटा टैग वाला तरीका बताया गया है:
<meta name="apple-mobile-web-app-title" content="MLW" />
<meta name="application-name" content="MLW" />
आपने कई मेटा टैग शामिल कर लिए हैं. इन सभी का इस्तेमाल करने से आपका हेडर लंबा हो जाएगा. अगर आपको इन दो अतिरिक्त मेटा टैग को शामिल करने के बजाय, वेब ऐप्लिकेशन पर काम करने वाला, ऑफ़लाइन फ़्रेंडली प्रोग्रेसिव वेब ऐप्लिकेशन बनाना है, तो वेबमेनिफ़ेस्ट फ़ाइल में short_name: MLW को ज़्यादा आसानी और कम शब्दों में शामिल किया जा सकता है.
मेनिफ़ेस्ट फ़ाइल, <link> और <meta> टैग से भरे परेशान करने वाले हेडर को रोक सकती है. हम मेनिफ़ेस्ट फ़ाइल बना सकते हैं, जिसे आम तौर पर manifest.webmanifest या manifest.json कहा जाता है. इसके बाद, हम आसानी से इस्तेमाल किए जा सकने वाले <link> टैग का इस्तेमाल करते हैं. इसमें rel एट्रिब्यूट को manifest पर सेट किया जाता है और href एट्रिब्यूट को मेनिफ़ेस्ट फ़ाइल के यूआरएल पर सेट किया जाता है:
<link rel="manifest" href="/mlw.webmanifest" />
यह सीरीज़ एचटीएमएल पर आधारित है, लेकिन प्रोग्रेसिव वेब ऐप्लिकेशन पर web.dev कोर्स या एमडीएन का वेब ऐप्लिकेशन मेनिफ़ेस्ट दस्तावेज़ देखा जा सकता है.
आपका एचटीएमएल अब कुछ इस तरह दिखेगा:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
<link rel="stylesheet" src="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
<link rel="manifest" href="/mlwmanifest.json" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
यह बहुत लंबा जवाब है, लेकिन हो चुका है.
अब आपका <head> करीब-करीब पूरा हो गया है. इसलिए, सेमैंटिक एचटीएमएल के बारे में बेहतर तरीके से समझा जा सकता है.
जांचें कि आपको कितना समझ आया
मेटाडेटा के बारे में अपनी जानकारी की जांच करें
रीफ़्रेश करें व्यावहारिक निर्देश.
ग्राफ़ मेटा टैग खोलें.