दीर्घाओं और बिल्लियों के साथ ट्विटर कार्ड बनाना

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

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

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

इसलिए, जैसा कि मैंने कहा, ट्विटर कार्ड (इसके बाद सुविधा के लिए कार्ड के रूप में संदर्भित) आपको एक साइट से सामग्री को ट्वीट में एम्बेड करने की अनुमति देते हैं। लेकिन वे विभिन्न प्रकार के होते हैं:

• सारांश कार्ड। एक शीर्षक, विवरण और छवि के साथ मानक कार्ड।
• बड़ी छवि के साथ सारांश कार्ड। वही सारांश, छवि पर केवल अधिक जोर दिया जाता है।
• फोटो कार्ड। यहां सब कुछ स्पष्ट है, फोटो कार्ड।
• गैलरी कार्ड। चार चित्रों की मिनी गैलरी।
• ऐप कार्ड। ऐप स्टोर या Google Play पर एप्लिकेशन कार्ड।
• ऐप इंस्टॉल और डीप-लिंकिंग। एप्लिकेशन इंस्टॉल करना, यदि आवश्यक हो, और डीप-लिंकिंग (यदि मैं सही ढंग से समझता हूं, तो यह निर्दिष्ट एप्लिकेशन के लिए एक संक्रमण का मतलब है)।
• प्लेयर कार्ड। एक मीडिया प्लेयर के साथ कार्ड।
• उत्पाद कार्ड। उत्पाद कार्ड (ऑनलाइन स्टोर के लिए)।

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

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

<meta name="twitter:card" content="summary"> <meta name="twitter:creator" content="@webholt"> <meta name="twitter:title" content=",   "> <meta name="twitter:description" content="      ,    Twitter Cards   .     ,    ,   ."> <meta name="twitter:image" content="http://gwer.imtqy.com/twi-cards/img/cat1.jpg"> 

बस, मैं क्या और क्यों समझाऊंगा।

• twitter: कार्ड - कार्ड का प्रकार। इस मामले में, आप चूक कर सकते हैं, क्योंकि सारांश डिफ़ॉल्ट रूप से है।
• ट्विटर: निर्माता - लेखक का ट्विटर (सामग्री, साइट)।
• ट्विटर: शीर्षक - शीर्षक। 70 अक्षर तक।
• ट्विटर: विवरण - विवरण। 200 अक्षरों तक।
• ट्विटर: छवि - छवि के लिए लिंक। आवश्यक रूप से पूर्ण।

यह समझना आसान है कि ट्वीट के 120 अक्षर खुद (माइनस 20 प्रति लिंक), कार्ड में 270 अक्षर और छवि एक लिंक के साथ सिर्फ एक ट्वीट की तुलना में उपयोगकर्ता को एक अच्छी साइट पर आकर्षित करने की अधिक संभावना है।

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

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


लेकिन सब कुछ उतना डरावना नहीं है जितना यह लग सकता है। अनुरोध स्वीकृति पर क्लिक करें, पहले से ही भरे हुए फॉर्म को देखें। आप अपनी इच्छानुसार कुछ संपादित कर सकते हैं, आपको केवल वेबसाइट का विवरण भरना होगा। मैंने ईमानदारी से लिखा था " ट्वी-कार्ड्स के परीक्षण के लिए साइट ", अनुरोध स्वीकृति पर क्लिक किया और ... और मैंने एक संदेश देखा:

ट्विटर की कार्ड सेवा का हिस्सा बनने के लिए आवेदन करने के लिए धन्यवाद। हम जल्द से जल्द आपके अनुरोध की समीक्षा करेंगे। बारी-बारी के समय के लिए कुछ हफ्तों की अपेक्षा करें। जब आपके अनुरोध की समीक्षा की जाएगी तो आपको एक ईमेल प्राप्त होगा।

सच कहूँ तो, इन कुछ हफ्तों ने मुझे थोड़ा परेशान किया है। लेकिन, जैसा कि यह निकला, अनुमोदन एक या दो मिनट के भीतर गुजरता है। शायद, यह खंड अतीत से या तो लटका हुआ है, जब अनुमोदन में अधिक समय लगा, या यदि पूरे हब्राह ने अचानक अपनी साइटों को पैच करना शुरू कर दिया।

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

गलतफहमी से बचने के लिए, मैं तुरंत ध्यान देता हूं कि अनुमोदन केवल एक प्रकार के कार्ड के लिए होता है। मैं एक और उदाहरण के साथ समझाऊंगा।

मान लीजिए कि हमने सारांश कार्ड को मंजूरी दे दी है, वे काम करते हैं, नए पृष्ठ अनुक्रमित हैं। और यहाँ हम मेटा टैग्स को एक पेज में सम्मिलित करते हैं:

  <meta name="twitter:card" content="gallery"> <meta name="twitter:creator" content="@webholt"> <meta name="twitter:title" content=" !"> <meta name="twitter:image0" content="http://gwer.imtqy.com/twi-cards/img/cat2.jpg"> <meta name="twitter:image1" content="http://gwer.imtqy.com/twi-cards/img/cat3.jpg"> <meta name="twitter:image2" content="http://gwer.imtqy.com/twi-cards/img/cat4.jpg"> <meta name="twitter:image3" content="http://gwer.imtqy.com/twi-cards/img/cat5.jpg"> 

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

लाभ!

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

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

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

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

अपडेट: शर्फ से अच्छा नोट:

यह ध्यान देने योग्य है कि एक और विशेषता है: जैसा कि आप अपने उदाहरण से देख सकते हैं, यदि आपको कई छवि टैग निर्दिष्ट करने की आवश्यकता है, तो ट्विटर को ट्विटर का उपयोग करना चाहिए: image0, twitter: image1, twitter: image2, twitter: image3, इत्यादि। जबकि ओपन ग्राफ़ में केवल ओग का उपयोग होता है: सभी छवियों के लिए छवि।

दरअसल, गैलरी कार्ड का उपयोग करते समय आपको इस पर विचार करने की आवश्यकता है। यही है, अगर अन्य सामाजिक नेटवर्क को एक छवि की आवश्यकता होती है, तो आपको या तो चार में से एक का चयन करना होगा और इसे ओग: छवि में जोड़ना होगा, या 4 ऑग में सभी छवियों को डुप्लिकेट करना होगा : छवि । इस मामले में, वीके / एफबी पर पोस्ट करने वाले उपयोगकर्ता के पास प्रस्तावित छवियों (एफबी में से एक को चुनने का अवसर होगा, वैसे, इंटरफ़ेस का विकल्प आश्चर्यजनक रूप से बेहतर तरीके से लागू किया जाता है)।