विज़ुअल बिल्डर्स किसी पृष्ठ को तेज़ी से शिप करना आसान बनाते हैं। वे एक ऐसी छवि के साथ एक पृष्ठ को शिप करना भी आसान बनाते हैं जिसमें कोई टेक्स्ट नहीं हैalt, एक कॉल-टू-एक्शन बटन जो रंग-कंट्रास्ट में विफल रहता है, एक हेडिंग ऑर्डर जो से कूदताh1h4 है, और एक खाली<title>टैग जो चुपचाप आपकी खोज रैंकिंग को टैंक करता है। इनमें से कोई भी कैनवास पर दिखाई नहीं देता है। यह बाद में दिखाई देता है - एक ऑडिट, एक अनुपालन समीक्षा, या एक समर्थन टिकट में।
grapesjs-a11y-SEO उस अंतर को बंद कर देता है। यह एक मुफ्त, ओपन-सोर्स प्लगइन है जो आपके GrapesJS संपादक में दो पैनल जोड़ता है: WCAG 2.1/2.2 के आसपास बनाया गया एक लाइव एक्सेसिबिलिटी ऑडिटर, और वास्तविक खोज और सामाजिक पूर्वावलोकन के साथ एक SEO मेटाडेटा मैनेजर। इसे लाइटहाउस के रूप में सोचें जो संपादक के अंदर चलता है - सिवाय इसके कि हर खोज सीधे उस घटक से जुड़ी होती है जिसके कारण यह होता है।
आप कोई अन्य शब्द पढ़ने से पहले लाइव डेमो आज़मा सकते हैं।
"बाद में ऑडिट" के साथ समस्या
अभिगम्यता और एसईओ को आमतौर पर अंतिम पास के रूप में माना जाता है - पृष्ठ के "हो जाने के बाद" एक विशेषज्ञ कुछ जांचता है। तब तक फिक्स महंगा है: किसी को रिपोर्ट को पुन: पेश करना होगा, नेस्टेड ब्लॉकों के पेड़ में आपत्तिजनक तत्व का शिकार करना होगा, और लेआउट को तोड़े बिना इसे संपादित करना होगा।
इस प्लगइन के पीछे मुख्य विचार उस काम को स्थानांतरित करना है जहां पृष्ठ वास्तव में बनाया गया है, और प्रत्येक मुद्दे कोजगह में कार्रवाई योग्य बनाना है। त्रुटियों की एक सपाट सूची के बजाय आपको हाथ से क्रॉस-रेफरेंस करना पड़ता है, आपको ऐसे निष्कर्ष मिलते हैं जो कैनवास पर सटीक GrapesJS घटक का चयन करते हैं, स्क्रॉल करते हैं और हाइलाइट करते हैं - और, जहां फिक्स स्पष्ट है, इसे एक क्लिक से हल करें।
अभिगम्यता ऑडिटिंग जो सटीक घटक पर इंगित करती है
ऑडिटर उन मुद्दों को कवर करने वाले 15 अंतर्निहित नियमों के साथ शिप करता है जो वास्तव में वास्तविक ऑडिट को विफल करते हैं: ऑल्ट टेक्स्ट, रंग कंट्रास्ट, शीर्षक संरचना, लिंक नाम, फॉर्म लेबल, एआरआईए वैधता, लैंडमार्क,tabindex लक्ष्य आकार, मीडिया कैप्शन, आईफ्रेम शीर्षक, डुप्लिकेट आईडी, तालिका संरचना, दस्तावेज़ भाषा और फ़ॉन्ट आकार।
जो चीज इसे दिन-प्रतिदिन उपयोगी बनाती है वह यह है कि निष्कर्ष कैसे व्यवहार करते हैं:
- घटक से बंधा हुआ है। एक खोज पर क्लिक करें और जिम्मेदार घटक का चयन किया जाता है, दृश्य में स्क्रॉल किया जाता है, और कैनवास पर हाइलाइट किया जाता है। अब यह अनुमान लगाने की आवश्यकता नहीं है कि रिपोर्ट का मतलब चालीस ब्लॉकों में से कौन सा है।
- एक-क्लिक त्वरित-सुधार। जहां एक फिक्स सुरक्षित और स्पष्ट है, प्लगइन इसे घटक एपीआई के माध्यम से लागू करता है - और यह अप्राप्य है। एक " सभी सुरक्षित को ठीक करें" कार्रवाई उन्हें एक ही पूर्ववत चरण में बैच करती है।
- एक नज़र में गंभीरता. लेयर मैनेजर में बैज दिखाई देते हैं, कैनवास पर समस्याओं को हाइलाइट करें "हाइलाइट करें" ओवरले समस्याओं को चिह्नित करता है, और एक फ़ोकस-ऑर्डर विज़ुअलाइज़र और एक्सेसिबिलिटी ट्री आपको पृष्ठ को सहायक तकनीक की तरह देखने देती है।
- बेसलाइन / "ठीक नहीं होगा। वास्तविक परियोजनाओं में अपवाद ज्ञात हैं। आप निष्कर्षों को स्वीकार के रूप में चिह्नित कर सकते हैं, और उस स्थिति को परियोजना के साथ सहेजा जाता है ताकि आपकी रिपोर्ट आपको परेशान किए बिना ईमानदार रहे।
- जब आप 100% चाहते हैं तो axe-core करें। 15 नियम शून्य रनटाइम निर्भरता के साथ चलते हैं। जब आपको पूर्ण कवरेज की आवश्यकता होती है, तो एक्स-कोर एक वैकल्पिक सहकर्मी है जिसे आप चालू कर सकते हैं।
शिपिंग के लिए यह अंतिम बिंदु मायने रखता है: ब्राउज़र बंडल डिफ़ॉल्ट रूप से दुबला रहता है, और आप भारी इंजन में केवल वहीं ऑप्ट करते हैं जहां यह अपना स्थान अर्जित करता है।
SEO जो आपके पृष्ठों के साथ रहता है
दूसरा पैनल मेटाडेटा को पृष्ठ के भाग के रूप में मानता है, न कि उस स्प्रेडशीट के रूप में जिसे आप कहीं और बनाए रखते हैं. प्रत्येक पृष्ठ के लिए आप शीर्षक, विवरण, विहित URL, रोबोट निर्देश, एक फ़ोकस कीवर्ड, ओपन ग्राफ़ और ट्विटर फ़ील्ड और फ़ेविकॉन प्रबंधित करते हैं.
क्योंकि यह अनुमान लगाना कि मेटाडेटा कैसे प्रस्तुत करता है, आधी लड़ाई है, प्लगइन आपको लाइव पूर्वावलोकन देता है:
- वास्तविक पिक्सेल-चौड़ाई छंटनी के साथएक Google SERP पूर्वावलोकन , ताकि आप देख सकें कि आपका शीर्षक और विवरण कहाँ कट जाता है।
- ग्राफ़ और ट्विटर कार्ड पूर्वावलोकन खोलें, ताकि एक साझा लिंक आपके इच्छित तरीके से दिखाई दे।
उसके शीर्ष पर सामान्य स्कीमा प्रकारों के लिए एक एसईओ चेकलिस्ट और जेएसओएन-एलडी संरचित डेटा है - लेख, उत्पाद, संगठन, ब्रेडक्रंबलिस्ट, अक्सर पूछे जाने वाले प्रश्न और वेबसाइट। जब आप प्रकाशित करने के लिए तैयार होते हैं, तो एसईओ एपीआई उजागर होता हैgetHeadHtml(),renderPage() औरgetSitemap(), इसलिए मेटाडेटा और आपकेsitemap.xmlद्वारा संपादक में डिज़ाइन किया गया स्वच्छ, उत्पादन-तैयार मार्कअप के रूप में सामने आता है।
शुरू करना
इसे npm से इंस्टॉल करें:
npm i grapesjs-a11y-seo प्लगइन को किसी भी अन्य GrapesJS प्लगइन की तरह पंजीकृत करें:
import grapesjs from 'grapesjs'; import a11ySeo from 'grapesjs-a11y-seo'; import 'grapesjs-a11y-seo/style.css'; const editor = grapesjs.init({ container: '#gjs', plugins: [a11ySeo], pluginsOpts: { 'grapesjs-a11y-seo': { hotkey: 'ctrl+shift+a', wcagLevel: 'AA', wcagVersion: '2.2', }, }, }); हॉटकी ()Ctrl/⌘ + Shift + A या ♿ टूलबार बटन के साथ पैनल खोलें, और ऑडिट आपके वर्तमान पृष्ठ के खिलाफ चलता है। यही पूरा सेटअप है - बाकी सब कुछ कॉन्फ़िगरेशन है जिसे आप बाद में जोड़ सकते हैं।
संपादक से परे: CI, Studio, और i18n
प्लगइन को एक वास्तविक वर्कफ़्लो फिट करने के लिए डिज़ाइन किया गया है, न कि केवल एक डेमो:
- निरंतर एकीकरण। अपनी पाइपलाइन में समान नियमों को बिना सिर के चलाएं:
npx grapesjs-a11y-seo-ci ./dist/*.html। यह विफलताओं पर गैर-शून्य से बाहर निकलता है, इसलिए पहुंच में प्रतिगमन एक निर्माण को उसी तरह विफल कर सकता है जैसे एक टूटा हुआ परीक्षण करता है। - स्टूडियो GrapesJS तैयार है। यह सादे GrapesJS में काम करता है और GrapesJS स्टूडियो के साथ पूरी तरह से संगत है, जिसमें प्रति-पृष्ठ एसईओ के साथ बहु-पृष्ठ परियोजनाएं शामिल हैं।
- स्थानीयकृत और टाइप किया गया। अंग्रेजी, रूसी और स्पेनिश बंडल बॉक्स में जहाज करते हैं और प्रत्येक स्ट्रिंग ओवरराइड करने योग्य है, इसलिए आप अपने उपयोगकर्ताओं के लिए ऑडिट यूआई को स्थानीयकृत कर सकते हैं। TypeScript प्रकार शामिल हैं, और पूरी चीज एमआईटी लाइसेंस प्राप्त है।
यह किसके लिए है
यदि आप GrapesJS पर साइटें बनाते हैं या बेचते हैं - क्लाइंट का काम सौंपने वाली एजेंसियां, सास साइट बिल्डर्स, या कानूनी या खरीद कारणों से डब्ल्यूसीएजी को पूरा करना पड़ता है - तो यह पहुंच और एसईओ को लॉन्च के बाद के हाथापाई से बिल्ड के हिस्से में बदल देता है। क्योंकि निष्कर्ष घटकों से बंधे हैं और अधिकांश सुधार एक क्लिक हैं, गैर-विशेषज्ञ एक अलग ऑडिट टूल या चेकलिस्ट के बिना अधिकांश मुद्दों को हल कर सकते हैं जिन्हें वे खोलना भूल जाएंगे।
और यह मुफ़्त है । इसे डाउनलोड करें, इसे फोर्क करें, इसे व्यक्तिगत और व्यावसायिक परियोजनाओं में उपयोग करें।
इसे अजमाएं
- लाइव पूर्वावलोकन:https://grapesjs-a11y-seo.netlify.app/?mode=plain
- इसे GJS.Market पर प्राप्त करें: https://gjs.market/products/grapesjs-a11y-seo-accessibility-auditor-seo-for-grapesjs