অনুসন্ধান UI উপাদান

এই পৃষ্ঠাটি আলোচনা করে যে আপনি কীভাবে আপনার অনুসন্ধান বাক্স এবং অনুসন্ধান ফলাফলের চেহারা এবং অনুভূতি কাস্টমাইজ করতে পারেন। আপনি যদি কনটেক্সট ফাইল ব্যবহার করে আপনার সার্চ ইঞ্জিনের ডিজাইন বাস্তবায়ন করতে চান, তাহলে "XML পৃষ্ঠার সাথে লুক অ্যান্ড ফিল ডিজাইন করা " দেখুন।

  1. ওভারভিউ
  2. অনুসন্ধান UI এর পৃথক উপাদান ডিজাইন করা
  3. অনুসন্ধান উপাদান ব্যবহার করে ফলাফল হোস্টিং
  4. অনুসন্ধান উপাদান বিন্যাস সেট করা হচ্ছে
  5. অনুসন্ধান বাক্স ডিজাইন করা
  6. ফলাফল ডিজাইন করা
  7. আপনার ওয়েবসাইটে নকশা বাস্তবায়ন

ওভারভিউ

আপনি নিয়ন্ত্রণ প্যানেল বা XML প্রসঙ্গ ফাইলে আপনার প্রোগ্রামেবল সার্চ ইঞ্জিনের অনুসন্ধান বাক্স এবং অনুসন্ধান ফলাফল উভয়ই পরিবর্তন করতে পারেন। আপনার যদি হাতে গোনা কয়েকটি সার্চ ইঞ্জিন থাকে, তাহলে নিয়ন্ত্রণ প্যানেলের সাহায্যে সেগুলি পরিচালনা এবং কাস্টমাইজ করা মোটামুটি সহজ। শুধু চেহারা এবং অনুভূতি পৃষ্ঠাতে নেভিগেট করুন, একটি শৈলী নির্বাচন করুন, উপাদানগুলি ডিজাইন করুন, সংরক্ষণ করুন ক্লিক করুন এবং আপনি যেতে পারেন৷ এই পৃষ্ঠাটি আপনাকে বলে যে কীভাবে এটি করতে হয়। যাইহোক, আপনি যদি প্রচুর সংখ্যক সার্চ ইঞ্জিন তৈরি এবং পরিচালনা করেন, এমনকি সেই সহজ পদ্ধতিটি-যখন একাধিক সার্চ ইঞ্জিন জুড়ে পুনরাবৃত্তি হয়- ক্লান্তিকর হয়ে ওঠে। এই ধরনের ক্ষেত্রে, XML এর সাথে কাজ করা ভাল হবে। আপনি যদি XML ব্যবহার করার সিদ্ধান্ত নেন, তাহলে জিনিসগুলি সাধারণত কীভাবে কাজ করে সে সম্পর্কে ধারণা পেতে প্রথমে এই পৃষ্ঠাটি পড়ুন; তারপরে, XML উপাদান এবং গুণাবলী সম্পর্কে জানতে XML পৃষ্ঠার সাথে ডিজাইনিং দ্য লুক অ্যান্ড ফিল পড়ুন।

যদি আপনি নিশ্চিত না হন যে আপনার শুধু কন্ট্রোল প্যানেল ব্যবহার করা উচিত নাকি XML ফর্ম্যাট ব্যবহার করা উচিত, দেখুন মৌলিক পৃষ্ঠা, যা প্রতিটি বিন্যাসের সুবিধা এবং চ্যালেঞ্জগুলি নিয়ে আলোচনা করে৷

দ্রষ্টব্য: আপনি আপনার কাস্টম সার্চ ইঞ্জিনের চেহারা এবং অনুভূতি ডিজাইন করা শুরু করার আগে, প্রোগ্রামেবল সার্চ ইঞ্জিন বাস্তবায়নের জন্য নির্দেশিকা পড়ুন। এটি একটি সংক্ষিপ্ত নথি যা আপনাকে বলে যে আপনি কীভাবে Google ব্র্যান্ডিং এবং অ্যাট্রিবিউশন পরিচালনা করবেন৷

উপরে ফিরে যাও

অনুসন্ধান উপাদান ব্যবহার করে ফলাফল হোস্টিং

একটি অনুসন্ধান উপাদান হল একটি বস্তু যা আপনি আপনার ওয়েবপেজে এম্বেড করতে পারেন, যা ব্যাপক কাস্টমাইজেশনের অনুমতি দেয়। এটি অনুসন্ধান বাক্স এবং অনুসন্ধান ফলাফল দেখাতে পারে, হয় একই ওয়েবপেজে যা পাঠক দেখছেন বা বিভিন্ন ওয়েবপেজে।

একটি অনুসন্ধান উপাদান উদাহরণ

দ্রষ্টব্য: অনুসন্ধান উপাদান, যখন একটি কমপ্যাক্ট লেআউটের সাথে পেয়ার করা হয়, মোবাইল ডিভাইসে ভাল কাজ করে৷

আপনি অনুসন্ধান UI কে আরও কাস্টমাইজ করতে প্রোগ্রামেবল অনুসন্ধান উপাদান নিয়ন্ত্রণ API এর সুবিধা নিতে পারেন। অনেক কাস্টমাইজেশন HTML বৈশিষ্ট্যের মাধ্যমে সমর্থিত। উদাহরণস্বরূপ, আপনি আপনার ফলাফল পৃষ্ঠার জন্য ছয়টি লেআউটের মধ্যে নির্বাচন করতে পারেন, অথবা আপনি ফিরে আসার জন্য অনুসন্ধান ফলাফলের সংখ্যা সেট করতে পারেন।

প্রোগ্রামেবল সার্চ ইঞ্জিন আর আইফ্রেম হোস্টিং বিকল্পকে সমর্থন করে না। আমরা নতুন বিকল্প হিসাবে অনুসন্ধান উপাদানে "দুটি পৃষ্ঠা" বা "শুধুমাত্র ফলাফল" লেআউটগুলি সুপারিশ করি৷ আরো তথ্যের জন্য আমাদের ব্লগ পোস্ট দেখুন.

উপরে ফিরে যাও

অনুসন্ধান UI এর পৃথক উপাদান ডিজাইন করা

কাস্টমাইজযোগ্য উপাদান

আপনি যে উপাদানগুলি কাস্টমাইজ করতে পারেন তা আপনার অনুসন্ধান ইঞ্জিনের নির্বাচিত উপাদান বিন্যাসের উপর নির্ভর করে। উদাহরণস্বরূপ, কন্ট্রোল প্যানেল আপনাকে শুধুমাত্র Google দ্বারা হোস্ট করা সার্চ ইঞ্জিনগুলির জন্য একটি লোগো যোগ করতে দেয়; আপনি অন্যান্য হোস্টিং বিকল্প ব্যবহার করে সার্চ ইঞ্জিনে একটি লোগো যোগ করতে পারবেন না।

আপনি নিয়ন্ত্রণ প্যানেল ব্যবহার করে নিম্নলিখিত উপাদানগুলি সংজ্ঞায়িত করতে পারেন:

অনুসন্ধান উপাদান বিন্যাস সেট করা হচ্ছে

ওয়েবপেজে আপনার সার্চ UI কীভাবে সাজানো হয় তা কাস্টমাইজ করার বিকল্প আপনার কাছে আছে। আপনি একই কলামে অনুসন্ধান বাক্স এবং ফলাফল বিভাগটি রাখতে পারেন বা একটি কলামে অনুসন্ধান বাক্সের সাথে এবং অন্য কলামে বা এমনকি অন্য পৃষ্ঠায় ফলাফল বিভাগ সহ আলাদাভাবে কলামে প্রদর্শন করতে পারেন।

আপনার লেআউট বিকল্পগুলি হল (ডেমো দেখতে লিঙ্কগুলিতে ক্লিক করুন):

অপশন বর্ণনা
ওভারলে একটি ওভারলে অনুসন্ধান ফলাফল প্রদর্শন করুন.
দুই পাতা
সরল
একাধিক অনুসন্ধান বাক্স/ফলাফল বিভাগ
অনুসন্ধান বাক্স এবং অনুসন্ধান ফলাফল বিভাগ দুটি ভিন্ন ওয়েবপেজে স্থাপন করা হয়।

দ্রষ্টব্য : অনুসন্ধান ফলাফল বিভাগে একটি অনুসন্ধান বাক্সও রয়েছে। ব্যবহারকারীরা সরাসরি অনুসন্ধান ফলাফল পৃষ্ঠায় প্রশ্ন জমা দিতে পারেন.

পুরো প্রস্থ অনুসন্ধান বাক্স এবং অনুসন্ধান ফলাফল বিভাগটি পৃষ্ঠার পুরো প্রস্থ বা কলামটি নিয়ে যায় যেখানে আপনি অনুসন্ধান উপাদানটি সন্নিবেশ করেছেন।
দুই কলাম অনুসন্ধান বাক্স এবং অনুসন্ধান ফলাফল বিভাগ আপনার ওয়েবপৃষ্ঠার বিভিন্ন কলাম বা বিভাগে আছে। অনুসন্ধান ফলাফল বিভাগটি বন্ধ করতে, ব্যবহারকারী অনুসন্ধান বাক্সের পাশে X আইকনে ক্লিক করে।
কমপ্যাক্ট পূর্ণ-প্রস্থ বিকল্পের মতো, এটি পৃষ্ঠা বা কলামের পুরো প্রস্থ নেয়, কিন্তু ফলাফল বিভাগে কম ফলাফল দেখায়, তাই ওয়েবপেজে প্রসারিত হলে এটি কম উল্লম্ব স্থান নেয়।

টিপ: এই বিকল্পটি স্মার্টফোন এবং মোবাইল ডিভাইসগুলির জন্য অপ্টিমাইজ করা হয়েছে৷

শুধুমাত্র ফলাফল
URL এর মাধ্যমে অনুসন্ধান করুন
সার্চ বক্সের মাধ্যমে অনুসন্ধান করুন
অনুসন্ধানের ফলাফলগুলি আপনার ওয়েবপৃষ্ঠাগুলির মধ্যে একটিতে স্থাপন করা হয় এবং অনুসন্ধানের ফলাফলের পৃষ্ঠায় একটি অনুসন্ধান বাক্স থাকে না৷ অনুসন্ধান ক্যোয়ারী জমা দিতে আপনার নিজস্ব অনুসন্ধান বাক্স ব্যবহার করুন.

দ্রষ্টব্য : একটি প্রোগ্রামেবল সার্চ ইঞ্জিন যা বিজ্ঞাপন দেখায় না তার ব্র্যান্ডিং নিষ্ক্রিয় করার কোন বিকল্প নেই।

ডেমো: ব্র্যান্ডিং বিকল্পগুলি কীভাবে কাস্টমাইজ করবেন

Google-হোস্টেড
বর্তমান উইন্ডো
নতুন জানালা
অনুসন্ধান বাক্সটি আপনার ওয়েবপৃষ্ঠাগুলির একটিতে স্থাপন করা হয়েছে৷ অনুসন্ধানের ফলাফলগুলি একটি Google-হোস্ট করা ওয়েবপেজে প্রদর্শিত হয়, যা একই উইন্ডোতে বা একটি নতুন উইন্ডোতে খোলা যেতে পারে।

উপরে ফিরে যাও

আপনি আপনার ওয়েবপৃষ্ঠার এইচটিএমএল বডির মধ্যে যেকোনো জায়গায় অনুসন্ধান বাক্সটি সন্নিবেশ করতে পারেন, যদিও-প্রথা অনুসারে-সার্চ বক্সগুলি ওয়েবপৃষ্ঠাগুলির শীর্ষে (বা শীর্ষের কাছাকাছি) স্থাপন করা হয়, যেমনটি নিম্নলিখিত উদাহরণে:

চিত্র 1: শীর্ষে অবস্থিত অনুসন্ধান বাক্স সহ ওয়েবপৃষ্ঠা।

একটি অনুসন্ধান বাক্স সহ একটি ওয়েবপৃষ্ঠার উদাহরণ৷

স্বয়ংসম্পূর্ণতা সক্ষম করা হচ্ছে

স্বয়ংসম্পূর্ণতা আপনার ব্যবহারকারীদের জন্য অনুসন্ধানের বিকল্পগুলি অফার করে যখন তারা আপনার অনুসন্ধান বাক্সে তাদের অনুসন্ধানের প্রশ্নগুলি প্রবেশ করে৷ এটি ঐচ্ছিক প্রশ্নগুলির মতো যা আপনি Google অনুসন্ধানে দেখেন৷

চিত্র 2: অনুসন্ধান বাক্সে মাত্র কয়েকটি অক্ষর টাইপ করা একটি ড্রপ-ডাউন তালিকা নিয়ে আসে যা বিভিন্ন অনুসন্ধান প্রশ্নের জন্য বিকল্প সরবরাহ করে।

একটি ভ্রমণ সাইটের জন্য একটি প্রোগ্রামেবল সার্চ ইঞ্জিনে "p-u-e-r" টাইপ করা "পুয়ের্তো রিকো", "পুয়ের্তো ভাল্লার্তা হোটেল", "পুয়ের্তো ভাল্লার্তা ছুটি" ইত্যাদির বিকল্পগুলির সাথে একটি ড্রপ-ডাউন তালিকা নিয়ে আসে।

প্রোগ্রামেবল সার্চ ইঞ্জিন বিশেষভাবে আপনার সার্চ ইঞ্জিনের জন্য স্বয়ংসম্পূর্ণতা তৈরি করে। এটি একটি ভিন্ন অ্যালগরিদম ব্যবহার করে যা আপনার সার্চ ইঞ্জিনের ক্যোয়ারী সহ একাধিক উৎস থেকে আঁকে, সেইসাথে আপনার সার্চ ইঞ্জিন কভার করা ওয়েবসাইটগুলির বিষয়বস্তু থেকে বের করা কীওয়ার্ড এবং বাক্যাংশ।

যেহেতু স্বয়ংসম্পূর্ণ প্রশ্নগুলি আপনার সার্চ ইঞ্জিন দ্বারা আচ্ছাদিত ওয়েবপৃষ্ঠাগুলির নির্দিষ্ট বিষয়বস্তুর উপর ভিত্তি করে—আংশিকভাবে,, প্রোগ্রামেবল সার্চ ইঞ্জিন সার্চ ইঞ্জিনগুলির জন্য স্বয়ংসম্পূর্ণতা তৈরি করে না যা সমগ্র ওয়েব অনুসন্ধান করে৷ অন্য কথায়, শুধুমাত্র যে সার্চ ইঞ্জিনগুলি অনুসন্ধান করে সাইটগুলি অন্তর্ভুক্ত করে—ওয়েবসাইটগুলির একটি পূর্বনির্ধারিত সংগ্রহ—স্বয়ংসম্পূর্ণ প্রশ্ন থাকতে পারে। আপনি ওভারভিউ পৃষ্ঠার সাইট টু সার্চ বিভাগে আপনার সার্চ ইঞ্জিনের কভারেজ সেট করতে পারেন।

স্বয়ংসম্পূর্ণ বৈশিষ্ট্য অনুসন্ধান বৈশিষ্ট্য পৃষ্ঠার স্বয়ংসম্পূর্ণ বিভাগে অবস্থিত।

স্বয়ংসম্পূর্ণতা সক্ষম করতে, নিম্নলিখিতগুলি করুন:

  1. অনুসন্ধান বৈশিষ্ট্য পৃষ্ঠার স্বয়ংসম্পূর্ণ বিভাগে যান।
  2. স্বয়ংসম্পূর্ণ নিয়ন্ত্রণ সক্ষম করুন।

    দ্রষ্টব্য: যেহেতু প্রতিটি সার্চ ইঞ্জিনের জন্য স্বয়ংসম্পূর্ণ প্রশ্নগুলি তৈরি হয়, তাই আপনার সার্চ ইঞ্জিনে স্বয়ংসম্পূর্ণতা প্রদর্শিত হতে কয়েক ঘন্টা সময় লাগে৷

  3. আপনি যদি প্রথমবারের জন্য একটি বিদ্যমান সার্চ ইঞ্জিনে স্বয়ংসম্পূর্ণতা সক্ষম করে থাকেন, তাহলে আপনাকে আপনার ওয়েবপৃষ্ঠায় যে অনুসন্ধান বাক্সটি সন্নিবেশ করা হয়েছিল তার কোড স্নিপেটটি সরিয়ে ফেলতে হবে৷ কোড পান ট্যাবে জেনারেট করা নতুন দিয়ে এটি প্রতিস্থাপন করুন। আরও বিশদ নির্দেশাবলীর জন্য, আপনার ওয়েবসাইট বিভাগে নকশা বাস্তবায়ন দেখুন।

উপরে ফিরে যাও

ফলাফল ডিজাইন করা

আপনি ফলাফল পৃষ্ঠার নিম্নলিখিত উপাদান পরিবর্তন করতে পারেন:

ব্যক্তিগত ফলাফল

আপনি যদি স্বতন্ত্র ফলাফলকে দৃশ্যমানভাবে চিত্রিত করতে চান বা ব্যবহারকারীদের দ্বারা নির্বাচিত ফলাফলগুলি হাইলাইট করতে চান তবে আপনি পৃথক ফলাফলের জন্য সীমানা এবং পটভূমি সংজ্ঞায়িত করতে পারেন।

চিত্র 3: মাউসওভারে হাইলাইট করা পৃথক ফলাফল সহ ফলাফল এবং পৃথক ফলাফল।

পৃথক ফলাফলের সাথে ফলাফলগুলি বর্ণনা করা হয়েছে৷হাইলাইট করা ফলাফল সহ ফলাফল

উপরে ফিরে যাও

পরিশোধন ট্যাব

আপনি যদি আপনার সার্চ ইঞ্জিনে পরিমার্জিত লেবেল তৈরি করে থাকেন, তবে লেবেলগুলি অনুসন্ধান উপাদানে ট্যাব হিসাবে উপস্থিত হয়৷ পরিশোধন ট্যাবের রং পরিবর্তন করতে আপনি নিয়ন্ত্রণ প্যানেল ব্যবহার করতে পারেন।

প্রচার

আপনি যদি আপনার অনুসন্ধান ইঞ্জিনে প্রচার তৈরি করে থাকেন তবে আপনি তাদের চেহারা এবং অনুভূতি পরিবর্তন করতে পারেন। প্রচারগুলি হল একটি বিশেষ ধরণের অনুসন্ধান ফলাফল যা আপনি তৈরি করেন৷

লোগো (শুধু Google-হোস্টেড)

আপনি যদি Google-কে আপনার ফলাফলের পৃষ্ঠা হোস্ট করতে দেন, তাহলে আপনি অনুসন্ধান ফলাফলের পৃষ্ঠায় অনুসন্ধান বাক্সের ঠিক পাশে একটি লোগো বা ছোট ছবি অন্তর্ভুক্ত করতে বেছে নিতে পারেন। ছবিটি একটি ওয়েবসাইটে হোস্ট করা একটি .jpg, .png, বা .gif ফাইল হতে হবে (আপনার নিজের বা এমন কোনও ওয়েবসাইট থেকে যেখানে কপিরাইট বিধিনিষেধ নেই)৷ আপনার কাছে ছবিটির সাথে একটি URL যুক্ত করার বিকল্প আছে, এটিকে একটি ক্লিকযোগ্য ছবিতে পরিণত করা।

নিম্নলিখিত একটি লোগো সহ ফলাফল পৃষ্ঠার একটি উদাহরণ.

চিত্র 4: একটি চিত্র সহ অনুসন্ধান বাক্স

উপরে ফিরে যাও

আপনার ওয়েবসাইটে নকশা বাস্তবায়ন

আপনি আপনার সার্চ ইঞ্জিনের চেহারা এবং অনুভূতি ডিজাইন করার পরে, আপনি নিম্নলিখিতগুলি করে আপনার ওয়েবপেজে এটি বাস্তবায়ন করতে পারেন:

  1. চেহারা এবং অনুভূতি পৃষ্ঠায় আপনি পরিবর্তিত বিভাগগুলিতে সংরক্ষণ করুন ক্লিক করুন৷
  2. চেহারা এবং অনুভূতি পৃষ্ঠার লেআউট বিভাগে কোড পান ক্লিক করুন।
  3. কোড পপআপে জেনারেট হওয়া কোড স্নিপেটটি কপি করুন।

    আপনি যদি দুই-কলামের বিন্যাস নির্বাচন করে থাকেন, তাহলে দুটি টুকরো কোড স্নিপেট অনুলিপি করুন: একটি অনুসন্ধান বাক্সের জন্য এবং অন্যটি ফলাফলের জন্য।
    আপনি যদি দুই-পৃষ্ঠার লেআউট নির্বাচন করে থাকেন, তাহলে ওয়েবপৃষ্ঠার URL টাইপ করুন যা আপনার সার্চ ইঞ্জিনের ফলাফল দেখাবে। url এ এমবেড করা কোয়েরি প্যারামিটারের নাম টাইপ করুন, যা অনুসন্ধান ফলাফল পৃষ্ঠা দ্বারা পার্স করা হয়। অবশেষে, কোড স্নিপেট দুটি টুকরা অনুলিপি.
    শুধুমাত্র ফলাফলের লেআউটের কোড স্নিপেট সেই ক্ষেত্রে যেখানে সার্চের ফলাফল একটি নতুন পৃষ্ঠায় দেখানো হয়। url এ এমবেড করা ক্যোয়ারী প্যারামিটারের নাম টাইপ করুন, যা অনুসন্ধান ফলাফল পৃষ্ঠা দ্বারা পার্স করা হয়। অবশেষে, অনুসন্ধান ফলাফল কোড স্নিপেট অনুলিপি.

  4. প্রতিটি পৃষ্ঠায় কোডটি প্রবেশ করান যেখানে আপনি একটি প্রোগ্রামযোগ্য অনুসন্ধান ইঞ্জিন বাক্স চান। আপনি আপনার ওয়েবপৃষ্ঠার <body></body> ট্যাগের মধ্যে যেকোন জায়গায় কোডটি পেস্ট করতে পারেন।

    দ্রষ্টব্য: সর্বাধিক ক্রস-ব্রাউজার সামঞ্জস্যের জন্য, এটি সুপারিশ করা হয় যে আপনার HTML পৃষ্ঠাগুলি একটি সমর্থিত ডকটাইপ ব্যবহার করুন যেমন <!DOCTYPE html>

    আপনি যদি আপনার অনুসন্ধান উপাদানের জন্য হোভার প্রভাব ব্যবহার করেন তবে আপনার HTML পৃষ্ঠাটি অবশ্যই একটি সমর্থিত ডকটাইপ ব্যবহার করবে যেমন <!DOCTYPE html>
    আপনি যদি দুই-কলামের বিন্যাস নির্বাচন করে থাকেন, তাহলে একটি কলামে অনুসন্ধান বাক্সের জন্য কোডটি এবং অন্য কলামে ফলাফলের জন্য কোডটি সন্নিবেশ করান।
    আপনি যদি দুই-পৃষ্ঠার বিন্যাসটি নির্বাচন করে থাকেন, তাহলে ওয়েবপৃষ্ঠায় অনুসন্ধান বাক্সের জন্য কোডটি প্রবেশ করান যেখানে আপনি অনুসন্ধান বাক্সটি প্রদর্শিত হতে চান এবং ওয়েবপৃষ্ঠার ফলাফলের কোডটি যেখানে আপনি অনুসন্ধানের ফলাফলগুলি দেখতে চান৷
    আপনি যদি শুধুমাত্র-রেজাল্ট লেআউট নির্বাচন করে থাকেন, তাহলে সেই ওয়েবপেজে কোড স্নিপেট ঢোকান যেখানে আপনি সার্চের ফলাফল দেখতে চান।