ओजी और ट्विटर कार्ड जेनरेटर - मेटा टैग बिल्डर, ऑडिटर और पूर्वावलोकन
एक फॉर्म से रेडी-टू-पेस्ट ओपन ग्राफ़ और ट्विटर कार्ड <मेटा> टैग बनाएं, या लापता टैग, शीर्षक/विवरण लंबाई और ट्विटर: कार्ड वैधता के लिए ऑडिट करने के लिए मौजूदा <हेड> पेस्ट करें - फिर वास्तविक रूप से पुन: स्टाइल किए गए ट्विटर/एक्स, फेसबुक, लिंक्डइन और डिस्कॉर्ड लिंक-कार्ड मॉकअप में दोनों का पूर्वावलोकन करें।
नतीजा
ओपन ग्राफ़ और ट्विटर कार्ड मेटा टैग तय करते हैं कि एक लिंक स्लैक, आईमैसेज, एक ट्वीट या एक डिस्कोर्ड चैनल में चिपकाए जाने पर कैसा दिखेगा - एक शीर्षक, विवरण और छवि पृष्ठ के स्वयं <head> द्वारा चुना गया है, न कि प्लेटफ़ॉर्म द्वारा दृश्यमान मुख्य पाठ से स्क्रैप करने के लिए जो कुछ भी होता है। यह टूल बिल्डर और ऑडिटर दोनों है, सामान्य टेम्पलेट फिलर नहीं। बिल्ड मोड में, एक शीर्षक, विवरण, छवि यूआरएल, कैनोनिकल यूआरएल, सामग्री प्रकार और ट्विटर कार्ड प्रकार भरें, और यह सटीक <मेटा प्रॉपर्टी = "ओजी:..."> और <मेटा नाम = "ट्विटर:..."> टैग ब्लॉक को आपके पेज के <हेड> में पेस्ट करने के लिए तैयार करता है, खाली सामग्री के साथ खोखले टैग उत्सर्जित करने के बजाय आपके द्वारा खाली छोड़े गए किसी भी फ़ील्ड को छोड़ देता है।
ऑडिट मोड में, अपने मौजूदा <head> मार्कअप या पूरे पेज के HTML को पेस्ट करें और टूल पहले से मौजूद प्रत्येक og: और twitter: मेटा टैग को निकालने के लिए ब्राउज़र के मूल DOMParser के साथ इसे पार्स करता है, फिर उन चेक को चलाता है जो वास्तव में मायने रखते हैं: चार सामान्य रूप से आवश्यक टैग (og: शीर्षक, og: विवरण, og: छवि, og: url) गायब होने पर चिह्नित किए जाते हैं; ओजी: शीर्षक को लगभग 60-वर्ण बिंदु के विरुद्ध मापा जाता है जहां कुछ प्लेटफ़ॉर्म इसे छोटा करना शुरू करते हैं और लगभग 90-वर्ण बिंदु जहां अधिकांश प्लेटफ़ॉर्म करेंगे; ओजी: विवरण को लगभग 155 से 200-वर्ण सीमा के विरुद्ध मापा जाता है जिसे अधिकांश प्लेटफ़ॉर्म इसे काटने से पहले अनुमति देते हैं; ट्विटर: कार्ड को उन वास्तविक चार मानों के विरुद्ध जांचा जाता है जिन्हें ट्विटर का कार्ड सत्यापनकर्ता स्वीकार करता है - सारांश, सारांश_लार्ज_इमेज, ऐप, प्लेयर - और यदि यह कुछ और है तो ध्वजांकित किया जाता है; और डुप्लिकेट टैग (एक ही संपत्ति दो बार घोषित की गई, आश्चर्यजनक रूप से सामान्य कॉपी-पेस्ट बग) को नाम से पुकारा जाता है।
छवि आयामों को एक ईमानदार उपचार मिलता है: यह उपकरण आपकी छवि के वास्तविक पिक्सेल आकार को लाए बिना सत्यापित नहीं कर सकता है, और यह इस साइट की नो-एक्सटर्नल-रिक्वेस्ट नीति से मेल खाते हुए जानबूझकर ऐसा कभी नहीं करता है। यदि आपका HTML पहले से ही og:image:width और og:image:height घोषित करता है, तो उन घोषित संख्याओं को व्यापक रूप से अनुशंसित न्यूनतम 1200×630 के विरुद्ध जांचा जाता है; यदि नहीं, तो आपको मनगढ़ंत पास या फेल के बजाय एक स्पष्ट मार्गदर्शन नोट मिलता है। दोनों मोड समान चार लिंक-पूर्वावलोकन मॉकअप प्रस्तुत करते हैं - ट्विटर/एक्स (ट्विटर: कार्ड मूल्य के आधार पर इसके कॉम्पैक्ट "सारांश" थंबनेल लेआउट और पूर्ण-चौड़ाई "सारांश_लार्ज_इमेज" लेआउट के बीच स्विच करना), फेसबुक, लिंक्डइन और डिस्कोर्ड - प्रत्येक को एक अलग लोगो के साथ एक बॉक्स के बजाय उस प्लेटफ़ॉर्म की अपनी टाइपोग्राफी और लेआउट सम्मेलनों से मेल खाने के लिए फिर से स्टाइल किया गया है, और प्रत्येक को स्पष्ट रूप से नियोजन उद्देश्यों के लिए एक उदाहरणात्मक सन्निकटन के रूप में लेबल किया गया है। वास्तविक प्लेटफ़ॉर्म समय के साथ अपने पूर्वावलोकन क्रोम को पुनर्स्थापित करते हैं और यह टूल उन्हें जांचने के लिए कभी भी लाता या स्क्रैप नहीं करता है।