HTML5 Semantic Tags: What Are They and How To Use Them!

शब्दार्थ HTML5 क्या है?

यदि आप HTML के बारे में थोड़ा जानते हैं, तो आप जानेंगे कि HTML टैग्स (अधिकतर) सामग्री को प्रारूपित करने के लिए उपयोग किए जाते हैं - ये टैग ब्राउज़र को पृष्ठ पर सामग्री को प्रदर्शित करने का तरीका बताते हैं। वे इस बात का कोई संकेत नहीं देते हैं कि उनके पास किस प्रकार की सामग्री है या पृष्ठ में उस सामग्री की क्या भूमिका है।

सिमेंटिक एचटीएमएल 5 विशिष्ट टैगों को परिभाषित करके इस कमी को स्पष्ट करता है कि यह स्पष्ट करने के लिए कि उन टैगों में क्या भूमिका होती है। वह स्पष्ट जानकारी Google और बिंग जैसे रोबोट / क्रॉलर को यह समझने में मदद करती है कि कौन सी सामग्री महत्वपूर्ण है, जो एक सहायक है, जो नेविगेशन के लिए है, और इसी तरह।

अपने पृष्ठों में शब्दार्थ HTML टैग जोड़कर, आप अतिरिक्त जानकारी प्रदान करते हैं जो Google और बिंग को आपके पृष्ठ के विभिन्न भागों की भूमिकाओं और सापेक्ष महत्व को समझने में मदद करती है।

यह मार्गदर्शिका HTML को एक पृष्ठ पर जोड़ने की जमीनी स्तर की समझ रखती है। यदि यह सब थोड़ा भारी होने लगता है, तो पीछे हटना और HTML परिचय मार्गदर्शिका देखना उपयोगी होगा।

उदाहरण:

div और स्पैन टैग। गैर-शब्दार्थ / सामान्य।

ये गैर-शब्दार्थ HTML तत्वों के उदाहरण हैं। वे केवल सामग्री को प्रदर्शित करने के तरीके के बारे में बताने के लिए धारकों के रूप में काम करते हैं। वे उस भूमिका के बारे में कोई जानकारी नहीं देते हैं जिसमें वे सामग्री होती है जिसमें वे पृष्ठ पर भूमिका निभाते हैं।

सिमेंटिक टैग्स के उदाहरण।

ये अर्थ तत्व हैं। पाठकों और खोज इंजन बॉट को स्क्रीन करने के लिए, प्रत्येक तत्व अपने टैग के भीतर निहित सामग्री की भूमिका को परिभाषित करता है।

मुझे शब्दार्थ HTML5 टैग का उपयोग करने की आवश्यकता क्यों है?

देखे गए उपयोगकर्ताओं के लिए, जब कोई पृष्ठ अच्छी तरह से डिज़ाइन किया जाता है, तो वेब पेज के विभिन्न हिस्सों को एक नज़र में पहचानना आसान होता है। मुख्य सामग्री, मेनू, और (उम्मीद है) मुख्य सामग्री सभी तुरंत स्पष्ट रूप से स्पष्ट हैं। अब कल्पना करो कि तुम अंधे हो।

Google के और बिंग के बॉट्स (स्पाइडर), अगर अंधे नहीं हैं, तो गंभीर रूप से दृष्टिहीन हैं। उनके लिए, दृश्य सुराग देखने और समझने के लिए अभूतपूर्व रूप से कठिन हैं - उन्हें आपकी सहायता की आवश्यकता है।

यदि आप Google और बिंग से सफलतापूर्वक संवाद कर सकते हैं कि पृष्ठ का कौन सा भाग शीर्ष लेख है, जो पाद लेख है, और जो नेविगेशन के लिए है, वे आपको धन्यवाद देंगे। सबसे महत्वपूर्ण बात, उन्हें यह बताकर कि जो सबसे महत्वपूर्ण सामग्री है, आप उन्हें उस सामग्री को प्राथमिकता देने के लिए एक स्पष्ट निर्देश देते हैं।

उन उपयोगकर्ताओं के लिए जो नेत्रहीन या नेत्रहीन हैं और स्क्रीन पाठकों पर भरोसा करते हैं मौखिक रूप से यह वर्णन करने के लिए कि पृष्ठ पर क्या है, एचटीएमएल 5 सिमेंटिक तत्वों का उचित उपयोग स्क्रीन पाठकों को दृश्य श्रव्य बनाकर आपकी सामग्री को अधिक सटीक रूप से संवाद करने की अनुमति देगा। HTML के इस नए संस्करण को अपनाना महत्वपूर्ण है ताकि आप अपनी सामग्री को सभी संभावित साइट आगंतुकों के लिए सुलभ बना सकें।

यहाँ हमारा पेज है

सिमेंटिक एचटीएमएल 5 उन छोटे विवरणों में से एक है जो सही अनुक्रमण के मूल पर हिट करता है जिसे अक्सर कम करके आंका जाता है। सटीक रूप से कार्यान्वित सिमेंटिक एचटीएमएल 5 Googlebot और Bingbot द्वारा उपयोग किए जाने वाले अनुक्रमण एल्गोरिदम को एक बड़ी मदद करता है। यह उन्हें आपकी सामग्री की बेहतर समझ (और उनकी समझ में विश्वास) देता है, जो उन्हें आपकी सामग्री को बेहतर ढंग से अनुक्रमित करने में मदद करता है, जो बदले में आपके एसईओ प्रयासों में मदद करता है।

खोज इंजन इनपुट

बिंग से फैब्रिस कैनेल ने मेरे पॉडकास्ट पर एक उपस्थिति में कहा कि यह मामला है - ठीक से लागू किए गए अर्थमेटिक एचटीएमएल 5 वाले पृष्ठों पर एसईओ में एक फायदा है जो ऐसा नहीं करते हैं। गूगल से मार्टिन स्प्लिट ने जून 2020 में एसईजे शिखर सम्मेलन के दौरान इसकी पुष्टि की।

जब Googlebot और Bingbot क्रॉल किए गए पृष्ठों को अपने अनुक्रमणिका में संग्रहीत करते हैं, तो वे एनोटेशन की एक समृद्ध परत जोड़ते हैं। यह वह एनोटेटिव परत है जिसे रैंकिंग एल्गोरिदम व्यक्तिगत वेबपृष्ठों से सामग्री खोजने और निकालने के लिए उपयोग करते हैं। अमीर और अधिक सटीक एनोटेशन बेहतर खोज के लिए बनाता है और एल्गोरिदम द्वारा रैंकिंग के लिए किसी भी दी गई सामग्री की संभावना को बढ़ाता है। 

तो, शब्दार्थ HTML5 का सही उपयोग आपकी सामग्री को चयनात्मक प्रक्रिया में लाभ देता है जो रैंकिंग की नींव पर सही है। यह इस संभावना को बढ़ाता है कि रैंकिंग एल्गोरिदम पहली बार रैंकिंग के लिए एक उम्मीदवार के रूप में आपकी सामग्री का चयन करेगा।

कुछ शब्दार्थ HTML5 विषय हम कवर करेंगे

• 
  
• HTML5 अर्थ टैग संरचना
• शब्दार्थ HTML5 के उदाहरण
• अधिक जटिल उदाहरण
• अनुभागों और लेखों का उपयोग करना:
• संबंधित पक्ष
• अप्रत्यक्ष रूप से संबंधित पहलू
• मददगार सलाह
• धारा बनाम अनुच्छेद
• घोंसले के शिकार तत्व
• क्या नहीं कर सकते है
• अगला कदम?
• उत्तर इंजन अनुकूलन के तीन स्तंभ

HTML5 अर्थ टैग संरचना

सिमेंटिक HTML टैग्स के उदाहरणों में <nav>, <footer> और <section> शामिल हैं। कई और अर्थ HTML5 टैग हैं जिनका उपयोग किया जा सकता है (उदाहरण के लिए <blockquote> और <em>), लेकिन इस लेख में मैं केवल उन अर्थ HTML टैग्स को देख रहा हूं, जिन्हें आपको पृष्ठ की सामग्री को उसके मूल भागों में विभाजित करने की आवश्यकता होगी।

निम्न HTML5 टैग का उपयोग आपके पृष्ठ की सामग्री को पहचाने गए भागों में तोड़ने के लिए <div> टैग के स्थान पर किया जा सकता है, जिनमें से प्रत्येक एक विशिष्ट भूमिका को पूरा करता है। जैसा कि आप कल्पना कर सकते हैं, Googlebot और Bingbot LOVE जैसी मशीनें।

शब्दार्थ HTML5 टैग हम इस लेख में उपयोग करेंगे।

आप बाद में उदाहरण देखेंगे, लेकिन इनमें से एक संक्षिप्त अवलोकन होगा: 

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

सामग्री के प्रत्येक भाग के लिए यह स्पष्ट परिसीमन और भूमिकाओं के बारे में स्पष्ट रूप से जानकारी देना Google और बिंग के लिए पृष्ठ को अधिक स्पष्ट और अनुक्रमणित करना आसान बनाता है।

एनबी इन टैग्स के बाद से सभी बिल्कुल वैसा ही व्यवहार करते हैं जैसे <div> टैग; वे लेआउट को प्रभावित किए बिना पृष्ठ में मौजूदा <div> s को बदल सकते हैं। शब्दार्थ HTML5 को लागू करने के बहुत से मामलों में <div> और </ div> की सही जोड़ी खोजने और उन्हें बदलने के रूप में आसान हो सकता है।

बिंग से पुष्टि

फैब्रिक कैनेल, बिंगबोट टीम लीड, ने पुष्टि की कि सेमेटिक एचटीएमएल 5 बिंग में मेरे पॉडकास्ट डिस्कवरिंग, क्रॉलिंग, एक्सट्रैक्टिंग और इंडेक्सिंग के लिए अविश्वसनीय रूप से व्यावहारिक साक्षात्कार में उनकी बड़ी मदद है ।

शब्दार्थ HTML5 के उदाहरण

सुपर सरल अर्थ HTML5 उदाहरण:

यहाँ हमने केवल यह परिभाषित किया है कि पृष्ठ का प्रत्येक भाग क्या भूमिका निभाता है। जब आप एचटीएमएल 5 को लागू करना शुरू करते हैं, तो यह शुरू करने के लिए एक सुरक्षित जगह है - हेडर, नौसेना, मुख्य, पाद।

सबसे महत्वपूर्ण तत्वों के साथ सुपर सरल उदाहरण: हेडर, फुटर, नेवी, और मुख्य।

एक सुपर सरल कार्यान्वयन करना बेहतर है जो कि एक जटिल कार्यान्वयन के बजाय 100% सही है, जो कि गलत है।

एक गलत कार्यान्वयन परस्पर विरोधी और भ्रामक संकेत भेजता है, जो चीजों को बदतर बना देगा, बेहतर नहीं।

Google और बिंग के साथ संचार में एक सरल और सही कार्यान्वयन पहले से ही एक बड़ा कदम है। अति महत्वाकांक्षी मत बनो; यह गलत है, और आप हल करने की तुलना में अधिक समस्याएं पैदा कर सकते हैं!

अधिक जटिल एचटीएमएल 5 उदाहरण

अनुभागों और लेखों का उपयोग करना:

यहां हमने अपनी मुख्य सामग्री के भीतर एक पदानुक्रम बनाया है। एक ऑल इनकमिंग लेख है जो मुख्य टैग के भीतर केंद्रीय सामग्री की पहचान करता है। यह पृष्ठ के उस भाग के विषय का अवलोकन देता है। उस लेख के भीतर, हमारे पास कई उप-विषय हैं जो मुख्य विषय को विकसित करते हैं जो नेस्टेड वर्गों द्वारा पहचाना जाता है।

ध्यान दें कि डिज़ाइन (नारंगी ब्लॉक) का उपयोग पृष्ठ के अर्थ क्षेत्रों को परिभाषित करने के लिए नहीं किया जा रहा है।

ध्यान दें कि डिज़ाइन (नारंगी ब्लॉक) का उपयोग पृष्ठ के अर्थ क्षेत्रों को परिभाषित करने के लिए नहीं किया जा रहा है। वे पृष्ठ का डिज़ाइन हैं - मनुष्यों के लिए। यह थोड़ा भ्रमित करता है लेकिन यह अच्छी तरह से दिखाता है कि डिज़ाइन लेआउट HTML और अर्थ HTML5 में अलग-अलग भूमिकाएँ हैं।

वास्तविक दुनिया में, शब्दार्थ मार्कअप अक्सर इस उदाहरण से अधिक लेआउट का अनुसरण करता है। सामान्य नियम: एक खंड कुछ और का हिस्सा बनता है। एक लेख अपनी चीज है।

यह भी ध्यान दें, कि यहां मैंने पाद लेख में एक नौसेना अनुभाग जोड़ा है। तार्किक रूप से, शीर्ष लेख की तरह, पाद लेख में नेविगेशनल तत्व होते हैं।

संबंधित पक्ष

यहां हमने सामग्री के प्रमुख लेख में सीधे संबंधित सामग्री के दो टुकड़े जोड़े हैं। ऐसिड्स का उपयोग करना, हम संकेत देते हैं कि संबंधित सामग्री (एक तरफ) वैकल्पिक है। सामग्री के प्रमुख खंड को अलग से दिखाया जा सकता है (अभी भी) और अभी भी समझा जा सकता है।

अप्रत्यक्ष रूप से संबंधित पहलू

एक तरफ मुख्य सामग्री के बगल में साइडबार नहीं होना चाहिए। इसका उपयोग मुख्य सामग्री से नीचे के ब्लॉक के लिए भी किया जा सकता है, जिसमें शीर्षक, पाठ और दूसरे पृष्ठ का लिंक हो

पृष्ठ का हमारा अंतिम संस्करण HTML5 टैग के साथ चिह्नित है।

यहां हमने सामग्री के प्रमुख लेख के बाहर पृष्ठ पर अप्रत्यक्ष रूप से संबंधित सामग्री की पहचान की है। सिमेंटिक एचटीएमएल 5 के इस सही कार्यान्वयन के साथ, हम इंगित करते हैं कि एक तरफ की सामग्री सीधे मुख्य लेख से संबंधित नहीं है।

महत्वपूर्ण रूप से यहां, हमने स्पष्ट रूप से गैर-महत्वपूर्ण सामग्री की एक बड़ी पहचान की है जिसे रैंकिंग एल्गोरिदम द्वारा सुरक्षित रूप से विचार से बाहर रखा जा सकता है। इसका मतलब है कि वे उस <लेख> टैग के भीतर महत्वपूर्ण सामग्री पर ध्यान केंद्रित कर सकते हैं। हमने अभी अनुक्रमण एल्गोरिथ्म और रैंकिंग एल्गोरिदम दोनों का काम काफी आसान बना दिया है।

अधिकांश जरूरतों के लिए इस तरह से अर्थपूर्ण HTML5 के साथ एक वेब पेज को संरचित करना और पहले से ही एसईओ में एक प्रतिस्पर्धात्मक लाभ प्रदान करता है।

मददगार सलाह

धारा बनाम अनुच्छेद

इसे लेकर काफी चर्चा है। वर्गों और लेखों के बारे में कोई निश्चित नियम नहीं है, और उनका कार्यान्वयन बहुत लचीला है। वे कमोबेश एक जैसे ही होते हैं और अधिकतर समय इसका इस्तेमाल किया जा सकता है।

आपकी साइट पर तार्किक और सुसंगत होना सबसे महत्वपूर्ण है; Googlebot और Bingbot बिलकुल प्यार करते हैं।

व्यक्तिगत टिप : मैंने पाया है कि सामग्री के एक लेख के अंदर घोंसले के शिकार अनुभाग एक मशीन के लिए तार्किक है, और एक मानव के लिए भी (HTML कोड डेवलपर के लिए पढ़ना आसान होगा)।

घोंसले के शिकार तत्व

तत्व अन्य तत्वों को घोंसला बना सकते हैं। उदाहरण के लिए, एक लेख का अपना <शीर्ष लेख>, <पाद>, <h1> (जैसा कि ऊपर देखा गया है) हो सकता है, और यहां तक ​​कि <nav> (लंगर लिंक, एक अच्छा उदाहरण हैं)। मैंने इस "सुपर नेस्टिंग 'का उदाहरण नहीं दिया है, और इसके लिए एक कारण है ... 

यह दुर्लभ है कि किसी भी वेब पेज को ऐसे विस्तृत संरचनात्मक-शब्दार्थ HTML5 की आवश्यकता होती है। यदि पेज को व्यवस्थित करने के लिए यह जटिल हो रहा है, तो संभवतः यह एसईओ में अच्छा प्रदर्शन नहीं करने वाला है, और आप लगभग निश्चित रूप से सामग्री को कई पृष्ठों में विभाजित करना चाहते हैं। 

जैसा कि ऊपर उल्लेख किया गया है, एसईओ प्रयोजनों के लिए, आपको एक ठोस, सरल संरचना के साथ एक पृष्ठ प्रदान करने पर ध्यान केंद्रित करना चाहिए।

HTML5 के साथ क्या नहीं करना है

बस एक चेतावनी - मैंने उनके HTML5 कार्यान्वयन के लिए एक गाइड के रूप में दृश्य डिजाइन का उपयोग करते हुए कई साइटें देखी हैं। जैसा कि ऊपर देखा गया है, यह वह शब्द नहीं है जिसके लिए HTML5 डिज़ाइन किया गया है।

शब्दार्थ HTML5 डिज़ाइन के लिए नहीं है।

यह (आश्चर्यजनक रूप से विशिष्ट) उदाहरण केवल दृश्य लेआउट को डुप्लिकेट करता है। व्यर्थ से भी बदतर, यह इंगित करता है कि पृष्ठ में एक विषय और 3 उप-विषयों के बजाय 4 अलग-अलग विषय हैं।

स्पष्ट रूप से Googlebot और Bingbot को भ्रामक जानकारी प्रदान करने से उनकी समझ पर नकारात्मक प्रभाव पड़ेगा और उनके एनोटेशन की समृद्धि और सटीकता में बाधा होगी, इस प्रकार रैंकिंग एल्गोरिदम द्वारा आपकी सामग्री को खोजना कठिन हो जाएगा (ऊपर देखें)।

Googlebot और Bingbot की सहायता करें, और वे आपकी मदद करेंगे :)

अगला कदम?

सिमेंटिक एचटीएमएल 5 Googlebot और बिंगबॉट को आपके पृष्ठ के प्रत्येक भाग के लिए संवाद करने के लिए एक अविश्वसनीय रूप से शक्तिशाली तरीका है। और जब उन्हें इस बात की सही समझ होती है, तो वे इसे स्टोर करते समय आपकी सामग्री को अधिक सटीक रूप से एनोटेट कर सकते हैं। 

जो शायद एक बड़ी बात नहीं लगती। लेकिन बॉट्स द्वारा समृद्ध और सटीक एनोटेशन वही है जो सामग्री को हर एक रैंकिंग एल्गोरिदम के लिए आसानी से सुलभ बनाता है: कोर ब्लू लिंक, विशेष रुप से प्रदर्शित स्निपेट, लोग पूछते हैं, चित्र, वीडियो, आदि।

जो भी SERP सुविधा आप लक्ष्य कर रहे हैं, सिमेंटिक HTML5 आपको प्रतिस्पर्धा करने के लिए स्प्रिंगबोर्ड प्रदान करता है। 

उत्तर इंजन अनुकूलन के तीन स्तंभ

समझ

समझ दीर्घकालिक एसईओ रणनीति के तीन स्तंभों में से एक है जो एक ऐसी दुनिया में सफल होगी जहां हमें उत्तर इंजन के लिए अनुकूलन करने की आवश्यकता होगी। यदि आप समझने के लिए एक मशीन चाहते हैं, तो आपको स्पष्ट रूप से और कुशलता से संवाद करने की आवश्यकता है। सिमेंटिक HTML5 इन मशीनों के साथ प्रभावी ढंग से संवाद करने के लिए आपके निपटान में एक बहुत प्रभावी साधन है। स्कीमा संरचित मार्कअप एक और है। यहाँ उस के बारे में एक लेख है । 

विश्वसनीयता

दूसरा स्तंभ विश्वसनीयता है। वहाँ भी एक महान कई चीजें हैं जो आप अपनी विश्वसनीयता में सुधार करने के लिए कर सकते हैं। ईएटी यहां का केंद्रीय स्तंभ है। इस बारे में अधिक जानकारी के लिए इस वेबिनार को देखें।

deliverability

तीसरा स्तंभ सुपुर्दगी है। यदि Google आपके उपयोगकर्ताओं को आपकी सामग्री वितरित नहीं कर सकता है, या यदि उसे लगता है कि आपकी साइट उस तरीके से सामग्री वितरित नहीं करेगी, जिसकी उपयोगकर्ता अपेक्षा करते हैं, तो वह कभी भी आपके सामग्री को उसके उपयोगकर्ता के प्रश्न (या उनकी समस्या का समाधान) के उत्तर के रूप में प्रस्तुत नहीं करेगा।

समझ + विश्वसनीयता + वितरण = जीतने की रणनीति।

संचार + विश्वसनीयता + वितरण

सभी एसईओ (AEO) संचार, विश्वसनीयता, और वितरण के लिए नीचे आते हैं। मैं अपने संचार, अपनी विश्वसनीयता और Google और बिंग के साथ आपकी सामग्री को वितरित करने की तकनीक के बारे में SEMrush पर नियमित रूप से यहां लिखना जारी रखूंगा (वैसे, बिंग एक बड़ी वापसी करने वाला है)।

कृपया नीचे दिए गए टिप्पणी अनुभाग में इस लेख के बारे में अपने विचार साझा करें, लेकिन साथ ही साथ एसईओ में संचार, विश्वसनीयता और वितरण के बारे में अपने प्रश्न पोस्ट करने के लिए स्वतंत्र महसूस करें; आपके प्रश्न मुझे जो कुछ भी लिखना चाहिए उसकी प्राथमिकताओं को परिभाषित करने में मदद करेंगे।

समापन में: एसईओ के लिए एक अच्छा अर्थ एचटीएमएल 5 मार्कअप का अनुस्मारक

संरचना, भूमिकाएं, रिश्तेदार महत्व और पदानुक्रम ऐसी चीजें हैं जो मानव अक्सर डिजाइन / लेआउट से सहज रूप से समझते हैं। <Div> के स्थान पर सही शब्दार्थ HTML टैग्स का सही ढंग से उपयोग करना, बस उसी समझ को मशीनों के लिए आसान बनाता है।