Search के यूज़र इंटरफ़ेस (यूआई) के कॉम्पोनेंट

इस पेज पर बताया गया है कि खोज बॉक्स और खोज के नतीजों को अपनी पसंद के मुताबिक कैसे बनाया जा सकता है. अगर आपको संदर्भ फ़ाइल का इस्तेमाल करके, अपने सर्च इंजन का डिज़ाइन लागू करना है, तो "एक्सएमएल की मदद से रंग-रूप को डिज़ाइन करना" पेज देखें.

  1. खास जानकारी
  2. Search के यूज़र इंटरफ़ेस (यूआई) के अलग-अलग कॉम्पोनेंट डिज़ाइन करना
  3. सर्च एलिमेंट का इस्तेमाल करके नतीजों को होस्ट करना
  4. सर्च एलिमेंट लेआउट सेट करना
  5. खोज बॉक्स डिज़ाइन करना
  6. नतीजे डिज़ाइन करना
  7. अपनी वेबसाइट पर डिज़ाइन लागू करना

खास जानकारी

Programmable Search Engine के खोज बॉक्स और खोज के नतीजों, दोनों को कंट्रोल पैनल या एक्सएमएल कॉन्टेक्स्ट फ़ाइल में बदला जा सकता है. अगर आपके पास कई सर्च इंजन हैं, तो कंट्रोल पैनल की मदद से उन्हें मैनेज करना और अपनी पसंद के मुताबिक बनाना काफ़ी आसान है. बस रंग-रूप पेज पर जाएं, कोई स्टाइल चुनें, कॉम्पोनेंट डिज़ाइन करें, सेव करें पर क्लिक करें और आप तैयार हैं. इस पेज पर बताया गया है कि ये सभी काम कैसे किए जा सकते हैं. हालांकि, अगर बड़ी संख्या में सर्च इंजन बनाए और मैनेज किए जा रहे हैं, तो उस आसान प्रोसेस को भी कई सर्च इंजन पर दोहराए जाने पर काफ़ी मुश्किल होती है. ऐसे मामलों में, एक्सएमएल के साथ काम करना बेहतर होगा. अगर आपको एक्सएमएल इस्तेमाल करने का फ़ैसला लेना है, तो पहले इस पेज को पढ़ें. इससे आपको यह पता चलेगा कि चीज़ें आम तौर पर कैसे काम करती हैं. इसके बाद, एक्सएमएल एलिमेंट और एट्रिब्यूट के बारे में जानने के लिए, एक्सएमएल की मदद से रंग-रूप को डिज़ाइन करना पेज देखें.

अगर आपको यह पता नहीं है कि आपको सिर्फ़ कंट्रोल पैनल का इस्तेमाल करना चाहिए या एक्सएमएल फ़ॉर्मैट का इस्तेमाल करना चाहिए, तो बुनियादी जानकारी वाला पेज देखें. इसमें हर फ़ॉर्मैट के फ़ायदों और उससे जुड़ी चुनौतियों के बारे में बताया गया है.

ध्यान दें: अपने कस्टम सर्च इंजन का लुक और स्टाइल तय करने से पहले, Programmable Search Engine को लागू करने के दिशा-निर्देश पढ़ें. यह एक छोटा दस्तावेज़ है, जिससे पता चलता है कि आपको Google की ब्रैंडिंग और एट्रिब्यूशन को कैसे मैनेज करना चाहिए.

वापस सबसे ऊपर जाएं

सर्च एलिमेंट का इस्तेमाल करके नतीजों को होस्ट करना

खोज एलिमेंट एक ऐसा ऑब्जेक्ट है जिसे अपने वेबपेज में एम्बेड किया जा सकता है. इसकी मदद से, अपनी पसंद के हिसाब से बड़े पैमाने पर बदलाव किए जा सकते हैं. इस सुविधा की मदद से, खोज बॉक्स और खोज के नतीजों को, उसी वेबपेज पर एक साथ दिखाया जा सकता है जिसे पाठक देख रहा है. इसके अलावा, यह अलग-अलग वेबपेजों पर भी दिखाया जा सकता है.

खोज एलिमेंट का उदाहरण

ध्यान दें: खोज एलिमेंट को कॉम्पैक्ट लेआउट के साथ जोड़ने पर, यह मोबाइल डिवाइसों पर अच्छी तरह से काम करता है.

खोज के यूज़र इंटरफ़ेस (यूआई) को पसंद के मुताबिक बनाने के लिए, Programmable Search Element Control API का इस्तेमाल किया जा सकता है. कई कस्टमाइज़ेशन एचटीएमएल एट्रिब्यूट के ज़रिए काम करते हैं. उदाहरण के लिए, अपने नतीजों वाले पेज के लिए, छह लेआउट में से कोई एक चुना जा सकता है. इसके अलावा, नतीजे दिखाने के लिए खोज के नतीजों की संख्या को भी सेट किया जा सकता है.

Programmable Search Engine, अब iframe होस्टिंग के विकल्प के साथ काम नहीं करता. हमारा सुझाव है कि नए विकल्पों के तौर पर, Search एलिमेंट में "दो पेज" या "सिर्फ़ नतीजे" लेआउट इस्तेमाल करें. ज़्यादा जानकारी के लिए, हमारी ब्लॉग पोस्ट देखें.

वापस सबसे ऊपर जाएं

Search के यूज़र इंटरफ़ेस (यूआई) के अलग-अलग कॉम्पोनेंट डिज़ाइन करना

पसंद के मुताबिक बनाए जा सकने वाले कॉम्पोनेंट

जिन कॉम्पोनेंट को पसंद के मुताबिक बनाया जा सकता है वे आपके सर्च इंजन के चुने गए एलिमेंट लेआउट पर निर्भर करते हैं. उदाहरण के लिए, कंट्रोल पैनल से आपको सिर्फ़ उन सर्च इंजन के लिए लोगो जोड़ने की सुविधा मिलती है जिन्हें Google होस्ट करता है. अन्य होस्टिंग विकल्पों का इस्तेमाल करके, सर्च इंजन में लोगो नहीं जोड़ा जा सकता.

कंट्रोल पैनल का इस्तेमाल करके, इन कॉम्पोनेंट को तय किया जा सकता है:

सर्च एलिमेंट लेआउट सेट करना

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

आपके लेआउट विकल्प हैं (डेमो देखने के लिए लिंक पर क्लिक करें):

विकल्प ब्यौरा
OverLay खोज के नतीजों को ओवरले में दिखाएं.
दो पेज
आसान
एक से ज़्यादा खोज बॉक्स/नतीजे सेक्शन
खोज बॉक्स और खोज नतीजों का सेक्शन, दो अलग-अलग वेबपेजों में रखे जाते हैं.

ध्यान दें: खोज नतीजों वाले सेक्शन में एक खोज बॉक्स भी होता है. उपयोगकर्ता, खोज नतीजों के पेज पर सीधे अपनी क्वेरी सबमिट कर सकते हैं.

पूरी चौड़ाई खोज बॉक्स और खोज के नतीजों वाला सेक्शन, पेज की पूरी चौड़ाई या उस कॉलम का इस्तेमाल करता है जिसमें आपने खोज एलिमेंट डाला है.
दो कॉलम खोज बॉक्स और खोज के नतीजों वाला सेक्शन, आपके वेबपेज के अलग-अलग कॉलम या सेक्शन में होता है. खोज नतीजों वाले सेक्शन को बंद करने के लिए, लोग खोज बॉक्स के बगल में मौजूद X आइकॉन पर क्लिक करते हैं.
संक्षिप्त पूरी चौड़ाई वाले विकल्प की तरह ही, यह पेज या कॉलम की पूरी चौड़ाई लेता है. हालांकि, नतीजों वाले सेक्शन में कम नतीजे दिखते हैं. इसलिए, वेबपेज को बड़ा करने पर यह कम वर्टिकल स्पेस का इस्तेमाल करता है.

सलाह: यह विकल्प, स्मार्टफ़ोन और मोबाइल डिवाइसों के लिए ऑप्टिमाइज़ किया गया है.

सिर्फ़ नतीजे
यूआरएल से खोजें
खोज बॉक्स से खोजें
खोज के नतीजों को आपके किसी एक वेबपेज पर दिखाया जाता है और खोज नतीजों के पेज पर खोज बॉक्स नहीं होता. खोज क्वेरी सबमिट करने के लिए, अपने खोज बॉक्स का इस्तेमाल करें.

ध्यान दें: अगर Programmable Search Engine, विज्ञापन नहीं दिखाता है, तो ब्रैंडिंग को बंद करने का कोई विकल्प नहीं होता है.

डेमो: ब्रैंडिंग के विकल्पों को पसंद के मुताबिक बनाने का तरीका

Google की ओर से होस्ट किया गया
मौजूदा विंडो
नई विंडो
खोज बॉक्स आपके किसी एक वेबपेज पर होता है. खोज के नतीजे, Google के होस्ट किए गए वेबपेज पर दिखाए जाते हैं. उन्हें मौजूदा विंडो या नई विंडो में खोला जा सकता है.

वापस सबसे ऊपर जाएं

खोज बॉक्स को अपने वेबपेज के एचटीएमएल मुख्य हिस्से में कहीं भी डाला जा सकता है. हालांकि, सामान्य तरीके से खोज बॉक्स को वेबपेजों के सबसे ऊपर (या सबसे ऊपर) रखा जाता है, जैसा कि इस उदाहरण में दिखाया गया है:

पहली इमेज: ऐसा वेबपेज जिसमें सबसे ऊपर खोज बॉक्स है.

खोज बॉक्स वाले वेबपेज का उदाहरण

अपने आप पूर्ण होने की सुविधा सक्षम करना

ऑटोकंप्लीट की सुविधा की मदद से, उपयोगकर्ताओं को तब क्वेरी के विकल्प मिलते हैं, जब वे आपके खोज बॉक्स में अपनी खोज क्वेरी डालते हैं. यह Google Search पर दिखने वाली वैकल्पिक क्वेरी से मिलती-जुलती है.

इमेज 2: खोज बॉक्स में बस कुछ वर्ण टाइप करने पर, एक ड्रॉप-डाउन सूची दिखती है. इससे अलग-अलग खोज क्वेरी के लिए विकल्प मिलते हैं.

किसी यात्रा की साइट के लिए P-u-e-r" को Programmable Search Engine में टाइप करने से, एक ड्रॉप-डाउन सूची दिखती है. इस सूची में, "puerto rico", "puerto vallarta hotels", "puerto vallarta hotels" वगैरह के विकल्प दिखते थे.

Programmable Search Engine, खास तौर पर आपके सर्च इंजन के हिसाब से, अपने-आप पूरा होने की सुविधा को उपलब्ध कराता है. इसमें एक अलग एल्गोरिदम का इस्तेमाल किया जाता है, जो कई सोर्स से जानकारी लेता है. इसमें, आपके सर्च इंजन से जुड़ी क्वेरी के साथ-साथ, वेबसाइटों के कॉन्टेंट से निकाले गए वे कीवर्ड और वाक्यांश भी शामिल होते हैं जिन्हें आपका सर्च इंजन इस्तेमाल करता है.

अपने-आप भरी गई क्वेरी, आपके सर्च इंजन में शामिल वेबपेजों के खास कॉन्टेंट पर आधारित होती हैं. इसलिए, Programmable Search Engine, पूरे वेब पर खोज करने वाले सर्च इंजन के लिए, ऑटोकंप्लीट एट्रिब्यूट जनरेट नहीं करता. दूसरे शब्दों में कहें, तो सिर्फ़ खोज इंजन में शामिल साइटें—पहले से तय की गई वेबसाइटों का संग्रह—अपने-आप पूरी होने वाली क्वेरी में ही शामिल हो सकती हैं. खास जानकारी देने वाले पेज पर, खोजने के लिए साइटें सेक्शन में जाकर, अपने सर्च इंजन का कवरेज सेट किया जा सकता है.

अपने-आप पूरी होने की सुविधा, खोज की सुविधाओं वाले पेज के ऑटोकंप्लीट सेक्शन में मौजूद है.

अपने-आप पूरा होने की सुविधा चालू करने के लिए, ये काम करें:

  1. खोज की सुविधाएं पेज के अपने-आप पूरा होना सेक्शन पर जाएं.
  2. ऑटोकंप्लीट की सुविधा चालू करें कंट्रोल को चालू करें.

    ध्यान दें: ऑटोकंप्लीट की गई क्वेरी, हर सर्च इंजन के लिए जनरेट होती हैं. इसलिए, आपके सर्च इंजन में अपने-आप पूरा होने की सुविधा को दिखने में कुछ घंटे लगते हैं.

  3. अगर किसी मौजूदा सर्च इंजन में, अपने-आप पूरा होने की सुविधा को पहली बार चालू किया जा रहा है, तो आपको उस खोज बॉक्स के लिए कोड स्निपेट को हटाना होगा जिसे आपने अपने वेबपेज में डाला था. इसकी जगह, 'कोड पाएं' टैब में जनरेट किए गए नए कोड का इस्तेमाल करें. ज़्यादा जानकारी के लिए, अपनी वेबसाइट में डिज़ाइन लागू करना सेक्शन देखें.

वापस सबसे ऊपर जाएं

नतीजे डिज़ाइन करना

नतीजे वाले पेज के इन कॉम्पोनेंट में बदलाव किया जा सकता है:

अलग-अलग नतीजे

अगर आपको अलग-अलग नतीजों को विज़ुअल तौर पर दिखाना है या उपयोगकर्ताओं के चुने गए नतीजों को हाइलाइट करना है, तो अलग-अलग नतीजों के लिए बॉर्डर और बैकग्राउंड तय करें.

तीसरी इमेज: ऐसे नतीजे जिन्हें अलग-अलग नतीजों के तौर पर दिखाया गया है और ऐसे नतीजे जिन्हें माउसओवर पर हाइलाइट किया गया है.

अलग-अलग नतीजों वाले नतीजे दिखाए गए ज़्यादा नतीजों वाले नतीजे

वापस सबसे ऊपर जाएं

रिफ़ाइन करने की सुविधा वाले टैब

अगर आपने सर्च इंजन में रिफ़ाइनमेंट लेबल बनाए हैं, तो ये लेबल Search एलिमेंट में टैब के तौर पर दिखते हैं. रिफ़ाइनमेंट टैब के रंग बदलने के लिए, कंट्रोल पैनल का इस्तेमाल किया जा सकता है.

प्रमोशन

अगर आपने अपने सर्च इंजन में प्रमोशन बनाए हैं, तो उनके लुक और स्टाइल को बदला जा सकता है. प्रमोशन, खोज के ऐसे खास नतीजे होते हैं जिन्हें आपने बनाया है.

लोगो (सिर्फ़ Google होस्ट किया गया)

अगर आपको Google को खोज नतीजों वाले पेज को होस्ट करने की अनुमति देनी है, तो खोज नतीजों वाले पेज में खोज बॉक्स के ठीक बाद लोगो या छोटी इमेज शामिल करने का विकल्प चुना जा सकता है. इमेज ऐसी .jpg, .png या .gif फ़ाइल होनी चाहिए जो किसी वेबसाइट (आपकी अपनी या किसी ऐसी वेबसाइट से ली गई हो जिस पर कॉपीराइट से जुड़ी पाबंदियां न हों). आपके पास यूआरएल को इमेज से जोड़ने का विकल्प होता है. इससे उसे क्लिक की जा सकने वाली इमेज में बदला जा सकता है.

नीचे लोगो वाले नतीजों वाले पेज का एक उदाहरण दिया गया है.

चौथी इमेज: इमेज वाला खोज बॉक्स

वापस सबसे ऊपर जाएं

अपनी वेबसाइट में डिज़ाइन लागू करना

अपने सर्च इंजन का डिज़ाइन तैयार करने के बाद, उसे अपने वेबपेज में इस तरह लागू किया जा सकता है:

  1. उन सेक्शन में सेव करें पर क्लिक करें जिन्हें आपने रंग-रूप पेज में बदला है.
  2. रंग-रूप पेज के लेआउट सेक्शन में कोड पाएं पर क्लिक करें.
  3. कोड पॉप-अप में जनरेट किया गया कोड स्निपेट कॉपी करें.

    अगर आपने दो कॉलम वाला लेआउट चुना है, तो कोड स्निपेट के दो हिस्से कॉपी करें: एक खोज बॉक्स के लिए और दूसरा नतीजों के लिए.
    अगर आपने दो पेज वाला लेआउट चुना है, तो उस वेबपेज का यूआरएल टाइप करें जो आपके सर्च इंजन के नतीजे दिखाएगा. यूआरएल में एम्बेड किए गए क्वेरी पैरामीटर का नाम टाइप करें, जिसे खोज नतीजों के पेज से पार्स किया जाता है. आखिर में, कोड स्निपेट के दो हिस्सों को कॉपी करें.
    सिर्फ़ नतीजों वाले लेआउट के लिए कोड स्निपेट, ऐसे मामले में इस्तेमाल किया जाता है जहां खोज के नतीजों को नए पेज पर दिखाया जाता है. यूआरएल में एम्बेड किए गए क्वेरी पैरामीटर का नाम टाइप करें, जिसे खोज नतीजों के पेज से पार्स किया जाता है. आखिर में, खोज नतीजों के कोड स्निपेट को कॉपी करें.

  4. हर उस पेज पर कोड डालें जहां आपको Programmable Search Engine बॉक्स चाहिए. अपने वेबपेज के <body></body> टैग में, कोड को कहीं भी चिपकाया जा सकता है.

    ध्यान दें: ज़्यादातर क्रॉस-ब्राउज़र के साथ काम करने के लिए, यह सुझाव दिया जाता है कि आपके एचटीएमएल पेज, ऐसे doctype का इस्तेमाल करें जो इस पर काम करता हो, जैसे कि <!DOCTYPE html>.

    अगर खोज एलिमेंट के लिए होवर इफ़ेक्ट का इस्तेमाल किया जा रहा है, तो आपके एचटीएमएल पेज पर काम करने वाला doctype (जैसे, <!DOCTYPE html>) इस्तेमाल होना चाहिए.
    अगर आपने दो कॉलम वाला लेआउट चुना है, तो खोज बॉक्स का कोड एक कॉलम में और नतीजों का कोड दूसरे कॉलम में डालें.
    अगर आपने दो पेज वाला लेआउट चुना है, तो उस वेबपेज पर खोज बॉक्स के लिए कोड डालें जहां आपको खोज बॉक्स दिखाना है. साथ ही, उस वेबपेज पर नतीजों के लिए कोड डालें जहां आपको खोज के नतीजे दिखाने हैं.
    अगर आपने सिर्फ़ नतीजों वाला लेआउट चुना है, तो उस वेबपेज पर कोड स्निपेट डालें जहां आपको खोज के नतीजे दिखाने हैं.