पृष्ठ से थंबनेल/पूर्वावलोकन के रूप में उपयोग करने के लिए एचटीएमएल से एक छवि का चयन करने का सबसे अच्छा तरीका

Question

मान लीजिए कि कोई ओजी नहीं है: छवि या लिंक rel img_source, क्या किसी के पास बेहतर-यादृच्छिक तकनीकों पर कोई असली दुनिया का अनुभव या सलाह है एक ऐसी छवि चुनने के लिए जो वेब पेज का सबसे अच्छा प्रतिनिधित्व करता हो?

अद्यतन: सभी उत्तरों अच्छे हैं, इसलिए उन्हें सभी को ऊपर उठाया और चुना गया, हालांकि ऐसा लगता है कि ऐसा करने का कोई शानदार तरीका नहीं है। मैं सबसे कम तस्वीर और स्क्रीनशॉट के साथ प्रयोग करूंगा जो इसे कम-रेज क्लाइंट पर पसंद करेंगे। सबको शुक्रीया!

पीएस: मुझे लगता है कि कुछ पेजों में ऐसा लगता है: छवि या लिंक rel img_source वैसे भी। मुझे उम्मीद है कि

Answer 1

वेबसाइट के स्क्रीनशॉट को अपने सबसे छोटे संभव रूप में लेते हुए, यह नोटबुक लैपटॉप या यहां तक ​​कि मोबाइल (लेकिन मोबाइल साइट संस्करण नहीं) पर कैसे दिखाई देगा, यह एक गैर-यादृच्छिक दृष्टिकोण होगा।

सबसे अच्छे वेब डिज़ाइनर यह सुनिश्चित करने का प्रयास करेंगे कि उपयोगकर्ता यह देखने में सक्षम हैं कि पेज लोड होने पर तुरंत क्या है और सबसे महत्वपूर्ण और प्रासंगिक जानकारी 'गुना के ऊपर' शामिल है, जैसा कि वे कहते हैं।

Answer 2

अपने पृष्ठ का लोगो og: image के रूप में चुनें। इस तरह से आपकी ब्रांड सभी पोस्टों से जुड़ी हो जाती है, इस बारे में चिंता किए बिना कि कौन सी छवि प्रत्येक व्यक्तिगत पृष्ठ को सर्वोत्तम रूप से परिभाषित करती है।

अन्य पृष्ठों के लिए, आप उनकी छवि को नियंत्रित नहीं कर सकते हैं।

आप जांच सकते हैं कि कैसे sharer.php काम करता है लेकिन इसके अलावा कोई चांदी की बुलेट नहीं है, यह चुनने के लिए कि किसी वेब पेज के लिए कौन सी छवि है, जिसमें कोई निश्चित छवि नहीं है।

Answer 3

मुझे फेसबुक ओपेनग्राफ के साथ कोई अनुभव नहीं है, लेकिन एक चाल जो मैंने पहले उपयोग की है, उन साइटों के फेविकॉन को पकड़ने के लिए है जिन्हें मैंने लिंक किया है और उन्हें लिंक बटन आइकन के रूप में उपयोग किया है ... वे छोटे हैं और हैं आमतौर पर हमेशा कंपनी के नाम और/या लोगो से जुड़े होते हैं, और वे अधिकांश पेशेवर वेबसाइटों पर बहुत सार्वभौमिक होते हैं। और आम तौर पर यूनिवर्सल फ़ाइल नाम favicon.ico एचटीएमएल से बाहर निकलना वाकई आसान बनाता है (या लिंक विशेषताएँ अगर वे फ़ाइल नाम बदलते हैं)।

उस शॉट को दे सकता है अगर इसे आप जो करने की कोशिश कर रहे हैं उसमें अनुकूलित किया जा सकता है। यदि आपको लगता है कि यह बहुत अच्छा नहीं लग रहा है, तो आप अधिक "वेब 2.0" ले सकते हैं और आईफोन/आईपैड बटन सेब-टच-आइकन पीएनजी छवियों की जांच कर सकते हैं (शायद उन्हें केवल बड़े नाम साइटों पर ही खोजें)

http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Answer 4

I सामान्यतः सुझाव देता है कि आप बस img टैग के पृष्ठ को स्क्रैप करें। हालांकि, इन दिनों, सीएसएस पृष्ठभूमि छवियों को अक्सर h1/header/div/a/आदि पर लागू किया जाता है। पाठ के स्थान पर लोगो प्रदर्शित करने के लिए टैग। यदि यह/एक img टैग है है, संभावना है कि आप साइट के लोगो हैं

var l = $('[id*="logo"],[id*="Logo"],[class*="logo"],[class*="Logo"]'); 

:

एक संभव समाधान अपने आईडी/वर्ग के नाम में 'लोगो' के साथ सभी तत्वों को आकर्षित करने के लिए है। अन्यथा, यदि यह div या ऐसे अन्य कंटेनर है, तो आपको यह देखने के लिए कि क्या उनके पास पृष्ठभूमि छवि है या नहीं, आपको बच्चों के तत्वों के सीएसएस गुणों में खोदने की आवश्यकता होगी।

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

मुझे उम्मीद है कि यह आपको अपने रास्ते पर मदद करेगा!

Answer 5

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

हालांकि og:image या rel="image_source" प्रदान किए जाने पर संबंधित छवि ढूंढना हमेशा छोटा नहीं हो सकता है।

एक लेख में आमतौर पर एक शीर्षक होता है जिसे <h1> या <h2> टैग के रूप में प्रस्तुत किया जाता है। निकटतम छवि सही हो सकती है। हालांकि निकटतम लोगो भी हो सकता है ताकि यह गलत हो सके।

मैं वह बहुत व्यावहारिक करूँगा। मैं पहले सबसे अधिक संभावित छवि लाऊंगा और दिए गए EXIF डेटा को पढ़ूंगा, अगर यह वास्तविक छवि है तो सूचनाएं प्रदान की जाती हैं। यदि यह सिर्फ एक लोगो, स्पेसर या किसी अन्य प्रकार के लेआउट ग्राफिक है, तो इसमें EXIF ​​डेटा नहीं है और इसलिए प्रासंगिक नहीं है। अगर पहली तस्वीर सही नहीं है, तो मैं अगले और इतने पर लाऊंगा।

एक और सुराग एचटीएमएल 5 <article> टैग हो सकता है जो आमतौर पर पोस्ट नेस्टेड के लिए संबंधित छवि है।

फिर भी वहाँ कई वेब डिजाइनरमानकों और उनके वेबपेज अच्छी तरह से दृष्टान्त नहीं हो सकता है का उपयोग नहीं कर रहे हैं।