این صفحه در مورد چگونگی سفارشیسازی ظاهر و حس کادر جستجو و نتایج جستجو بحث میکند. اگر میخواهید طراحی موتور جستجوی خود را با استفاده از فایل زمینه پیادهسازی کنید، به «طراحی ظاهر و حس صفحه با XML » مراجعه کنید.
- نمای کلی
- طراحی اجزای جداگانه رابط کاربری جستجو
- میزبانی نتایج با استفاده از عنصر جستجو
- تنظیم طرحبندی عنصر جستجو
- طراحی کادر جستجو
- طراحی نتایج
- پیادهسازی طرح در وبسایت شما
نمای کلی
شما میتوانید هم کادر جستجو و هم نتایج جستجوی موتور جستجوی قابل برنامهریزی خود را در پنل کنترل یا فایل XML context تغییر دهید. اگر تعداد انگشتشماری موتور جستجو دارید، مدیریت و سفارشیسازی آنها با پنل کنترل نسبتاً ساده است. فقط به صفحه Look and feel بروید، یک سبک انتخاب کنید، اجزا را طراحی کنید، روی Save کلیک کنید و آماده شروع هستید. این صفحه به شما میگوید که چگونه همه این کارها را انجام دهید. با این حال، اگر تعداد زیادی موتور جستجو ایجاد و مدیریت میکنید، حتی آن روش ساده - وقتی در چندین موتور جستجو تکرار میشود - خستهکننده میشود. در چنین مواردی، کار با XML بهتر خواهد بود. اگر تصمیم به استفاده از XML دارید، ابتدا این صفحه را بخوانید تا ایدهای از نحوه عملکرد کلی آن داشته باشید. پس از آن، صفحه Designing the Look and Feel with XML را بخوانید تا در مورد عناصر و ویژگیهای XML اطلاعات کسب کنید.
اگر مطمئن نیستید که آیا باید فقط از کنترل پنل استفاده کنید یا از فرمت XML، به صفحه اصول اولیه مراجعه کنید که مزایا و چالشهای هر فرمت را مورد بحث قرار میدهد.
توجه: قبل از شروع طراحی ظاهر و حس موتور جستجوی سفارشی خود، «دستورالعملهای پیادهسازی موتور جستجوی قابل برنامهریزی» را مطالعه کنید. این یک سند کوتاه است که به شما میگوید چگونه باید برندسازی و انتساب گوگل را مدیریت کنید.
میزبانی نتایج با استفاده از عنصر جستجو
عنصر جستجو، شیئی است که میتوانید در صفحه وب خود جاسازی کنید و این امکان سفارشیسازی گستردهای را فراهم میکند. این عنصر میتواند کادر جستجو و نتایج جستجو را، چه با هم در همان صفحه وبی که خواننده در حال مشاهده آن است و چه در صفحات وب مختلف، نشان دهد.
نکته: عنصر جستجو، وقتی با یک طرحبندی فشرده همراه شود، در دستگاههای تلفن همراه به خوبی کار میکند.
همچنین میتوانید از API کنترل عنصر جستجوی قابل برنامهریزی برای سفارشیسازی بیشتر رابط کاربری جستجو استفاده کنید. بسیاری از سفارشیسازیها از طریق ویژگیهای HTML پشتیبانی میشوند. به عنوان مثال، میتوانید از بین شش طرحبندی برای صفحه نتایج خود انتخاب کنید، یا میتوانید تعداد نتایج جستجو را برای نمایش تنظیم کنید.
موتور جستجوی قابل برنامهریزی دیگر از گزینه میزبانی iframe پشتیبانی نمیکند. ما طرحبندیهای "دو صفحهای" یا "فقط نتایج" را در عنصر جستجو به عنوان گزینههای جدید توصیه میکنیم. برای اطلاعات بیشتر به پست وبلاگ ما مراجعه کنید.
طراحی اجزای جداگانه رابط کاربری جستجو
اجزای قابل تنظیم
اجزایی که میتوانید سفارشیسازی کنید به طرحبندی عنصر انتخابشده در موتور جستجوی شما بستگی دارد. برای مثال، پنل کنترل به شما امکان میدهد فقط برای موتورهای جستجویی که توسط گوگل میزبانی میشوند، لوگو اضافه کنید؛ نمیتوانید با استفاده از سایر گزینههای میزبانی، لوگو را به موتورهای جستجو اضافه کنید.
شما میتوانید اجزای زیر را با استفاده از کنترل پنل تعریف کنید:
- طرح عنصر جستجو
- کادر جستجو
- نتایج جستجو
- زبانههای پالایش
- تبلیغات
- لوگو (فقط تحت میزبانی گوگل)
تنظیم طرحبندی عنصر جستجو
شما میتوانید نحوهی چیدمان رابط کاربری جستجوی خود را در صفحه وب سفارشی کنید. میتوانید کادر جستجو و بخش نتایج را در یک ستون قرار دهید یا آنها را در ستونهای جداگانه نمایش دهید، به طوری که کادر جستجو در یک ستون و بخش نتایج در ستون دیگر یا حتی در صفحهی دیگری قرار گیرند.
گزینههای طرحبندی شما عبارتند از (برای دیدن نسخههای نمایشی روی لینکها کلیک کنید):
| گزینه | توضیحات |
|---|---|
| روکش | نتایج جستجو را در یک لایه نمایش دهید. |
| دو صفحه ساده چندین جعبه جستجو/بخش نتایج | کادر جستجو و بخش نتایج جستجو در دو صفحه وب مختلف قرار دارند. توجه : بخش نتایج جستجو شامل یک کادر جستجو نیز میشود. کاربران میتوانند مستقیماً در صفحه نتایج جستجو، پرسشهای خود را ارسال کنند. |
| تمام عرض | کادر جستجو و بخش نتایج جستجو، کل عرض صفحه یا ستونی را که عنصر جستجو را در آن وارد کردهاید، اشغال میکنند. |
| دو ستونه | کادر جستجو و بخش نتایج جستجو در ستونها یا بخشهای مختلفی از صفحه وب شما قرار دارند. برای بستن بخش نتایج جستجو، کاربر روی نماد X کنار کادر جستجو کلیک میکند. |
| جمع و جور | مانند گزینه تمام عرض، این گزینه کل عرض صفحه یا ستون را اشغال میکند، اما بخش نتایج نتایج کمتری را نشان میدهد، بنابراین هنگام باز شدن در صفحه وب، فضای عمودی کمتری را اشغال میکند. نکته: این گزینه برای تلفنهای هوشمند و دستگاههای تلفن همراه بهینه شده است. |
| فقط نتایج جستجو از طریق URL جستجو از طریق کادر جستجو | نتایج جستجو در یکی از صفحات وب شما قرار میگیرد و صفحه نتایج جستجو شامل کادر جستجو نیست. از کادر جستجوی خودتان برای ارسال عبارت جستجو استفاده کنید. توجه : یک موتور جستجوی قابل برنامهریزی که تبلیغات نشان نمیدهد، گزینهای برای غیرفعال کردن برندسازی ندارد. |
| میزبانی شده توسط گوگل پنجره فعلی پنجره جدید | کادر جستجو در یکی از صفحات وب شما قرار میگیرد. نتایج جستجو در یک صفحه وب میزبانی شده توسط گوگل نمایش داده میشوند که میتواند در همان پنجره یا در یک پنجره جدید باز شود. |
طراحی کادر جستجو
شما میتوانید کادر جستجو را در هر جایی از بدنه HTML صفحه وب خود قرار دهید، اگرچه - طبق قرارداد - کادرهای جستجو در بالا (یا نزدیک به بالای) صفحات وب قرار میگیرند، مانند مثال زیر:
شکل ۱: صفحه وب با کادر جستجو که در بالای آن قرار دارد.
فعال کردن تکمیل خودکار
تکمیل خودکار، گزینههایی برای جستجو در اختیار کاربران شما قرار میدهد، همانطور که آنها عبارات جستجوی خود را در کادر جستجوی شما وارد میکنند. این مشابه عبارات اختیاری است که در جستجوی گوگل میبینید.
شکل ۲: تایپ کردن فقط چند کاراکتر در کادر جستجو، یک لیست کشویی را نمایش میدهد که گزینههایی برای عبارات جستجوی مختلف ارائه میدهد.
موتور جستجوی قابل برنامهریزی، تکمیل خودکار را بهطور خاص برای موتور جستجوی شما تنظیم میکند. این موتور از الگوریتم متفاوتی استفاده میکند که از منابع متعددی، از جمله پرسوجوهای موتور جستجوی شما و همچنین کلمات کلیدی و عبارات استخراجشده از محتوای وبسایتهایی که موتور جستجوی شما پوشش میدهد، استفاده میکند.
ویژگی تکمیل خودکار در بخش تکمیل خودکار صفحه ویژگیهای جستجو قرار دارد.
برای فعال کردن تکمیل خودکار، موارد زیر را انجام دهید:
- به بخش تکمیل خودکار در صفحه ویژگیهای جستجو بروید.
- کنترل فعال کردن تکمیل خودکار را فعال کنید.
توجه: از آنجا که پرسوجوهای تکمیلشده خودکار برای هر موتور جستجو ایجاد میشوند، چند ساعت طول میکشد تا تکمیل خودکار در موتور جستجوی شما ظاهر شود.
- اگر برای اولین بار است که قابلیت تکمیل خودکار را در یک موتور جستجوی موجود فعال میکنید، باید قطعه کد مربوط به کادر جستجو را که در صفحه وب خود وارد کردهاید، حذف کنید. آن را با قطعه کد جدیدی که در تب «دریافت کد» تولید شده است، جایگزین کنید. برای دستورالعملهای دقیقتر، به بخش «پیادهسازی طراحی در وبسایت شما» مراجعه کنید.
طراحی نتایج
شما میتوانید اجزای زیر را در صفحه نتایج تغییر دهید:
- نتایج انفرادی
- نوع فونت
- رنگهای متن
- زبانههای پالایش
- تبلیغات
- لوگو (فقط تحت میزبانی گوگل)
نتایج انفرادی
اگر میخواهید نتایج تکی را به صورت بصری مشخص کنید یا نتایجی را که توسط کاربران انتخاب میشوند برجسته کنید، میتوانید حاشیهها و پسزمینه را برای نتایج تکی تعریف کنید.
شکل ۳: نتایج با نتایج جداگانه مشخص شده و نتایج جداگانه که با بردن ماوس برجسته میشوند.
زبانههای پالایش
اگر در موتور جستجوی خود برچسبهای اصلاح ایجاد کردهاید، برچسبها به صورت تبهایی در عنصر جستجو ظاهر میشوند. میتوانید از پنل کنترل برای تغییر رنگ تبهای اصلاح استفاده کنید.
تبلیغات
اگر در موتور جستجوی خود تبلیغات ایجاد کردهاید، میتوانید ظاهر و حس آنها را تغییر دهید. تبلیغات نوع خاصی از نتایج جستجو هستند که شما ایجاد میکنید.
لوگو (فقط میزبانی شده توسط گوگل)
اگر به گوگل اجازه میدهید صفحه نتایج شما را میزبانی کند، میتوانید یک لوگو یا تصویر کوچک را درست در کنار کادر جستجو در صفحه نتایج جستجو قرار دهید. تصویر باید یک فایل .jpg، .png یا .gif باشد که در یک وبسایت (وبسایت خودتان یا از وبسایتی که محدودیتهای حق چاپ ندارد) میزبانی شده است. شما میتوانید یک URL را به تصویر مرتبط کنید و آن را به یک تصویر قابل کلیک تبدیل کنید.
در زیر نمونهای از صفحه نتایج با لوگو آمده است.
شکل ۴: کادر جستجو با تصویر
پیادهسازی طرح در وبسایت شما
پس از اینکه ظاهر و حس موتور جستجوی خود را طراحی کردید، میتوانید با انجام موارد زیر آن را در صفحه وب خود پیادهسازی کنید:
- در صفحه ظاهر و احساس، روی ذخیره در بخشهایی که تغییر دادهاید کلیک کنید.
- در بخش طرحبندی (Layout) از صفحه ظاهر و احساس (Look and feel)، روی دریافت کد (Get code) کلیک کنید.
- قطعه کد تولید شده در پنجره کد را کپی کنید.
اگر طرح دو ستونی را انتخاب کردهاید، دو قطعه کد را کپی کنید: یکی برای کادر جستجو و دیگری برای نتایج.
اگر طرحبندی دو صفحهای را انتخاب کردهاید، آدرس اینترنتی (URL) صفحه وبی را که نتایج موتور جستجوی شما را نشان میدهد، تایپ کنید. نام پارامتر پرسوجو که در آدرس اینترنتی تعبیه شده است و توسط صفحه نتایج جستجو تجزیه میشود را تایپ کنید. در نهایت، دو قطعه کد را کپی کنید.
قطعه کد مربوط به طرحبندی فقط نتایج برای حالتی است که نتایج جستجو در یک صفحه جدید نشان داده میشوند. نام پارامتر پرسوجو را که در آدرس اینترنتی (url) تعبیه شده است، تایپ کنید، که توسط صفحه نتایج جستجو تجزیه میشود. در نهایت، قطعه کد نتایج جستجو را کپی کنید. - کد را در هر صفحهای که میخواهید کادر موتور جستجوی قابل برنامهریزی داشته باشد، قرار دهید. میتوانید کد را در هر جایی از تگ
<body></body>صفحه وب خود قرار دهید.نکته: برای سازگاری بیشتر بین مرورگرها، توصیه میشود صفحات HTML شما از یک نوع سند پشتیبانیشده مانند
<!DOCTYPE html>استفاده کنند.اگر از جلوههای شناور برای عنصر جستجوی خود استفاده میکنید، صفحه HTML شما باید از یک نوع سند پشتیبانیشده مانند
<!DOCTYPE html>استفاده کند.
اگر طرح دو ستونه را انتخاب کردهاید، کد مربوط به کادر جستجو را در یک ستون و کد مربوط به نتایج را در ستون دیگر وارد کنید.
اگر طرح دو صفحهای را انتخاب کردهاید، کد مربوط به کادر جستجو را در صفحه وبی که میخواهید کادر جستجو در آن نمایش داده شود، و کد مربوط به نتایج را در صفحه وبی که میخواهید نتایج جستجو در آن نمایش داده شوند، وارد کنید.
اگر طرحبندی فقط نتایج را انتخاب کردهاید، قطعه کد را در صفحه وبی که میخواهید نتایج جستجو در آن نمایش داده شود، وارد کنید.
این صفحه در مورد چگونگی سفارشیسازی ظاهر و حس کادر جستجو و نتایج جستجو بحث میکند. اگر میخواهید طراحی موتور جستجوی خود را با استفاده از فایل زمینه پیادهسازی کنید، به «طراحی ظاهر و حس صفحه با XML » مراجعه کنید.
- نمای کلی
- طراحی اجزای جداگانه رابط کاربری جستجو
- میزبانی نتایج با استفاده از عنصر جستجو
- تنظیم طرحبندی عنصر جستجو
- طراحی کادر جستجو
- طراحی نتایج
- پیادهسازی طرح در وبسایت شما
نمای کلی
شما میتوانید هم کادر جستجو و هم نتایج جستجوی موتور جستجوی قابل برنامهریزی خود را در پنل کنترل یا فایل XML context تغییر دهید. اگر تعداد انگشتشماری موتور جستجو دارید، مدیریت و سفارشیسازی آنها با پنل کنترل نسبتاً ساده است. فقط به صفحه Look and feel بروید، یک سبک انتخاب کنید، اجزا را طراحی کنید، روی Save کلیک کنید و آماده شروع هستید. این صفحه به شما میگوید که چگونه همه این کارها را انجام دهید. با این حال، اگر تعداد زیادی موتور جستجو ایجاد و مدیریت میکنید، حتی آن روش ساده - وقتی در چندین موتور جستجو تکرار میشود - خستهکننده میشود. در چنین مواردی، کار با XML بهتر خواهد بود. اگر تصمیم به استفاده از XML دارید، ابتدا این صفحه را بخوانید تا ایدهای از نحوه عملکرد کلی آن داشته باشید. پس از آن، صفحه Designing the Look and Feel with XML را بخوانید تا در مورد عناصر و ویژگیهای XML اطلاعات کسب کنید.
اگر مطمئن نیستید که آیا باید فقط از کنترل پنل استفاده کنید یا از فرمت XML، به صفحه اصول اولیه مراجعه کنید که مزایا و چالشهای هر فرمت را مورد بحث قرار میدهد.
توجه: قبل از شروع طراحی ظاهر و حس موتور جستجوی سفارشی خود، «دستورالعملهای پیادهسازی موتور جستجوی قابل برنامهریزی» را مطالعه کنید. این یک سند کوتاه است که به شما میگوید چگونه باید برندسازی و انتساب گوگل را مدیریت کنید.
میزبانی نتایج با استفاده از عنصر جستجو
عنصر جستجو، شیئی است که میتوانید در صفحه وب خود جاسازی کنید و این امکان سفارشیسازی گستردهای را فراهم میکند. این عنصر میتواند کادر جستجو و نتایج جستجو را، چه با هم در همان صفحه وبی که خواننده در حال مشاهده آن است و چه در صفحات وب مختلف، نشان دهد.
نکته: عنصر جستجو، وقتی با یک طرحبندی فشرده همراه شود، در دستگاههای تلفن همراه به خوبی کار میکند.
همچنین میتوانید از API کنترل عنصر جستجوی قابل برنامهریزی برای سفارشیسازی بیشتر رابط کاربری جستجو استفاده کنید. بسیاری از سفارشیسازیها از طریق ویژگیهای HTML پشتیبانی میشوند. به عنوان مثال، میتوانید از بین شش طرحبندی برای صفحه نتایج خود انتخاب کنید، یا میتوانید تعداد نتایج جستجو را برای نمایش تنظیم کنید.
موتور جستجوی قابل برنامهریزی دیگر از گزینه میزبانی iframe پشتیبانی نمیکند. ما طرحبندیهای "دو صفحهای" یا "فقط نتایج" را در عنصر جستجو به عنوان گزینههای جدید توصیه میکنیم. برای اطلاعات بیشتر به پست وبلاگ ما مراجعه کنید.
طراحی اجزای جداگانه رابط کاربری جستجو
اجزای قابل تنظیم
اجزایی که میتوانید سفارشیسازی کنید به طرحبندی عنصر انتخابشده در موتور جستجوی شما بستگی دارد. برای مثال، پنل کنترل به شما امکان میدهد فقط برای موتورهای جستجویی که توسط گوگل میزبانی میشوند، لوگو اضافه کنید؛ نمیتوانید با استفاده از سایر گزینههای میزبانی، لوگو را به موتورهای جستجو اضافه کنید.
شما میتوانید اجزای زیر را با استفاده از کنترل پنل تعریف کنید:
- طرح عنصر جستجو
- کادر جستجو
- نتایج جستجو
- زبانههای پالایش
- تبلیغات
- لوگو (فقط تحت میزبانی گوگل)
تنظیم طرحبندی عنصر جستجو
شما میتوانید نحوهی چیدمان رابط کاربری جستجوی خود را در صفحه وب سفارشی کنید. میتوانید کادر جستجو و بخش نتایج را در یک ستون قرار دهید یا آنها را در ستونهای جداگانه نمایش دهید، به طوری که کادر جستجو در یک ستون و بخش نتایج در ستون دیگر یا حتی در صفحهی دیگری قرار گیرند.
گزینههای طرحبندی شما عبارتند از (برای دیدن نسخههای نمایشی روی لینکها کلیک کنید):
| گزینه | توضیحات |
|---|---|
| روکش | نتایج جستجو را در یک لایه نمایش دهید. |
| دو صفحه ساده چندین جعبه جستجو/بخش نتایج | کادر جستجو و بخش نتایج جستجو در دو صفحه وب مختلف قرار دارند. توجه : بخش نتایج جستجو شامل یک کادر جستجو نیز میشود. کاربران میتوانند مستقیماً در صفحه نتایج جستجو، پرسشهای خود را ارسال کنند. |
| تمام عرض | کادر جستجو و بخش نتایج جستجو، کل عرض صفحه یا ستونی را که عنصر جستجو را در آن وارد کردهاید، اشغال میکنند. |
| دو ستونه | کادر جستجو و بخش نتایج جستجو در ستونها یا بخشهای مختلفی از صفحه وب شما قرار دارند. برای بستن بخش نتایج جستجو، کاربر روی نماد X کنار کادر جستجو کلیک میکند. |
| جمع و جور | مانند گزینه تمام عرض، این گزینه کل عرض صفحه یا ستون را اشغال میکند، اما بخش نتایج نتایج کمتری را نشان میدهد، بنابراین هنگام باز شدن در صفحه وب، فضای عمودی کمتری را اشغال میکند. نکته: این گزینه برای تلفنهای هوشمند و دستگاههای تلفن همراه بهینه شده است. |
| فقط نتایج جستجو از طریق URL جستجو از طریق کادر جستجو | نتایج جستجو در یکی از صفحات وب شما قرار میگیرد و صفحه نتایج جستجو شامل کادر جستجو نیست. از کادر جستجوی خودتان برای ارسال عبارت جستجو استفاده کنید. توجه : یک موتور جستجوی قابل برنامهریزی که تبلیغات نشان نمیدهد، گزینهای برای غیرفعال کردن برندسازی ندارد. |
| میزبانی شده توسط گوگل پنجره فعلی پنجره جدید | کادر جستجو در یکی از صفحات وب شما قرار میگیرد. نتایج جستجو در یک صفحه وب میزبانی شده توسط گوگل نمایش داده میشوند که میتواند در همان پنجره یا در یک پنجره جدید باز شود. |
طراحی کادر جستجو
شما میتوانید کادر جستجو را در هر جایی از بدنه HTML صفحه وب خود قرار دهید، اگرچه - طبق قرارداد - کادرهای جستجو در بالا (یا نزدیک به بالای) صفحات وب قرار میگیرند، مانند مثال زیر:
شکل ۱: صفحه وب با کادر جستجو که در بالای آن قرار دارد.
فعال کردن تکمیل خودکار
تکمیل خودکار، گزینههایی برای جستجو در اختیار کاربران شما قرار میدهد، همانطور که آنها عبارات جستجوی خود را در کادر جستجوی شما وارد میکنند. این مشابه عبارات اختیاری است که در جستجوی گوگل میبینید.
شکل ۲: تایپ کردن فقط چند کاراکتر در کادر جستجو، یک لیست کشویی را نمایش میدهد که گزینههایی برای عبارات جستجوی مختلف ارائه میدهد.
موتور جستجوی قابل برنامهریزی، تکمیل خودکار را بهطور خاص برای موتور جستجوی شما تنظیم میکند. این موتور از الگوریتم متفاوتی استفاده میکند که از منابع متعددی، از جمله پرسوجوهای موتور جستجوی شما و همچنین کلمات کلیدی و عبارات استخراجشده از محتوای وبسایتهایی که موتور جستجوی شما پوشش میدهد، استفاده میکند.
ویژگی تکمیل خودکار در بخش تکمیل خودکار صفحه ویژگیهای جستجو قرار دارد.
برای فعال کردن تکمیل خودکار، موارد زیر را انجام دهید:
- به بخش تکمیل خودکار در صفحه ویژگیهای جستجو بروید.
- کنترل فعال کردن تکمیل خودکار را فعال کنید.
توجه: از آنجا که پرسوجوهای تکمیلشده خودکار برای هر موتور جستجو ایجاد میشوند، چند ساعت طول میکشد تا تکمیل خودکار در موتور جستجوی شما ظاهر شود.
- اگر برای اولین بار است که قابلیت تکمیل خودکار را در یک موتور جستجوی موجود فعال میکنید، باید قطعه کد مربوط به کادر جستجو را که در صفحه وب خود وارد کردهاید، حذف کنید. آن را با قطعه کد جدیدی که در تب «دریافت کد» تولید شده است، جایگزین کنید. برای دستورالعملهای دقیقتر، به بخش «پیادهسازی طراحی در وبسایت شما» مراجعه کنید.
طراحی نتایج
شما میتوانید اجزای زیر را در صفحه نتایج تغییر دهید:
- نتایج انفرادی
- نوع فونت
- رنگهای متن
- زبانههای پالایش
- تبلیغات
- لوگو (فقط تحت میزبانی گوگل)
نتایج انفرادی
اگر میخواهید نتایج تکی را به صورت بصری مشخص کنید یا نتایجی را که توسط کاربران انتخاب میشوند برجسته کنید، میتوانید حاشیهها و پسزمینه را برای نتایج تکی تعریف کنید.
شکل ۳: نتایج با نتایج جداگانه مشخص شده و نتایج جداگانه که با بردن ماوس برجسته میشوند.
زبانههای پالایش
اگر در موتور جستجوی خود برچسبهای اصلاح ایجاد کردهاید، برچسبها به صورت تبهایی در عنصر جستجو ظاهر میشوند. میتوانید از پنل کنترل برای تغییر رنگ تبهای اصلاح استفاده کنید.
تبلیغات
اگر در موتور جستجوی خود تبلیغات ایجاد کردهاید، میتوانید ظاهر و حس آنها را تغییر دهید. تبلیغات نوع خاصی از نتایج جستجو هستند که شما ایجاد میکنید.
لوگو (فقط میزبانی شده توسط گوگل)
اگر به گوگل اجازه میدهید صفحه نتایج شما را میزبانی کند، میتوانید یک لوگو یا تصویر کوچک را درست در کنار کادر جستجو در صفحه نتایج جستجو قرار دهید. تصویر باید یک فایل .jpg، .png یا .gif باشد که در یک وبسایت (وبسایت خودتان یا از وبسایتی که محدودیتهای حق چاپ ندارد) میزبانی شده است. شما میتوانید یک URL را به تصویر مرتبط کنید و آن را به یک تصویر قابل کلیک تبدیل کنید.
در زیر نمونهای از صفحه نتایج با لوگو آمده است.
شکل ۴: کادر جستجو با تصویر
پیادهسازی طرح در وبسایت شما
پس از اینکه ظاهر و حس موتور جستجوی خود را طراحی کردید، میتوانید با انجام موارد زیر آن را در صفحه وب خود پیادهسازی کنید:
- در صفحه ظاهر و احساس، روی ذخیره در بخشهایی که تغییر دادهاید کلیک کنید.
- در بخش طرحبندی (Layout) از صفحه ظاهر و احساس (Look and feel)، روی دریافت کد (Get code) کلیک کنید.
- قطعه کد تولید شده در پنجره کد را کپی کنید.
اگر طرح دو ستونی را انتخاب کردهاید، دو قطعه کد را کپی کنید: یکی برای کادر جستجو و دیگری برای نتایج.
اگر طرحبندی دو صفحهای را انتخاب کردهاید، آدرس اینترنتی (URL) صفحه وبی را که نتایج موتور جستجوی شما را نشان میدهد، تایپ کنید. نام پارامتر پرسوجو که در آدرس اینترنتی تعبیه شده است و توسط صفحه نتایج جستجو تجزیه میشود را تایپ کنید. در نهایت، دو قطعه کد را کپی کنید.
قطعه کد مربوط به طرحبندی فقط نتایج برای حالتی است که نتایج جستجو در یک صفحه جدید نشان داده میشوند. نام پارامتر پرسوجو را که در آدرس اینترنتی (url) تعبیه شده است، تایپ کنید، که توسط صفحه نتایج جستجو تجزیه میشود. در نهایت، قطعه کد نتایج جستجو را کپی کنید. - کد را در هر صفحهای که میخواهید کادر موتور جستجوی قابل برنامهریزی داشته باشد، قرار دهید. میتوانید کد را در هر جایی از تگ
<body></body>صفحه وب خود قرار دهید.نکته: برای سازگاری بیشتر بین مرورگرها، توصیه میشود صفحات HTML شما از یک نوع سند پشتیبانیشده مانند
<!DOCTYPE html>استفاده کنند.اگر از جلوههای شناور برای عنصر جستجوی خود استفاده میکنید، صفحه HTML شما باید از یک نوع سند پشتیبانیشده مانند
<!DOCTYPE html>استفاده کند.
اگر طرح دو ستونه را انتخاب کردهاید، کد مربوط به کادر جستجو را در یک ستون و کد مربوط به نتایج را در ستون دیگر وارد کنید.
اگر طرح دو صفحهای را انتخاب کردهاید، کد مربوط به کادر جستجو را در صفحه وبی که میخواهید کادر جستجو در آن نمایش داده شود، و کد مربوط به نتایج را در صفحه وبی که میخواهید نتایج جستجو در آن نمایش داده شوند، وارد کنید.
اگر طرحبندی فقط نتایج را انتخاب کردهاید، قطعه کد را در صفحه وبی که میخواهید نتایج جستجو در آن نمایش داده شود، وارد کنید.
این صفحه در مورد چگونگی سفارشیسازی ظاهر و حس کادر جستجو و نتایج جستجو بحث میکند. اگر میخواهید طراحی موتور جستجوی خود را با استفاده از فایل زمینه پیادهسازی کنید، به «طراحی ظاهر و حس صفحه با XML » مراجعه کنید.
- نمای کلی
- طراحی اجزای جداگانه رابط کاربری جستجو
- میزبانی نتایج با استفاده از عنصر جستجو
- تنظیم طرحبندی عنصر جستجو
- طراحی کادر جستجو
- طراحی نتایج
- پیادهسازی طرح در وبسایت شما
نمای کلی
شما میتوانید هم کادر جستجو و هم نتایج جستجوی موتور جستجوی قابل برنامهریزی خود را در پنل کنترل یا فایل XML context تغییر دهید. اگر تعداد انگشتشماری موتور جستجو دارید، مدیریت و سفارشیسازی آنها با پنل کنترل نسبتاً ساده است. فقط به صفحه Look and feel بروید، یک سبک انتخاب کنید، اجزا را طراحی کنید، روی Save کلیک کنید و آماده شروع هستید. این صفحه به شما میگوید که چگونه همه این کارها را انجام دهید. با این حال، اگر تعداد زیادی موتور جستجو ایجاد و مدیریت میکنید، حتی آن روش ساده - وقتی در چندین موتور جستجو تکرار میشود - خستهکننده میشود. در چنین مواردی، کار با XML بهتر خواهد بود. اگر تصمیم به استفاده از XML دارید، ابتدا این صفحه را بخوانید تا ایدهای از نحوه عملکرد کلی آن داشته باشید. پس از آن، صفحه Designing the Look and Feel with XML را بخوانید تا در مورد عناصر و ویژگیهای XML اطلاعات کسب کنید.
اگر مطمئن نیستید که آیا باید فقط از کنترل پنل استفاده کنید یا از فرمت XML، به صفحه اصول اولیه مراجعه کنید که مزایا و چالشهای هر فرمت را مورد بحث قرار میدهد.
توجه: قبل از شروع طراحی ظاهر و حس موتور جستجوی سفارشی خود، «دستورالعملهای پیادهسازی موتور جستجوی قابل برنامهریزی» را مطالعه کنید. این یک سند کوتاه است که به شما میگوید چگونه باید برندسازی و انتساب گوگل را مدیریت کنید.
میزبانی نتایج با استفاده از عنصر جستجو
عنصر جستجو، شیئی است که میتوانید در صفحه وب خود جاسازی کنید و این امکان سفارشیسازی گستردهای را فراهم میکند. این عنصر میتواند کادر جستجو و نتایج جستجو را، چه با هم در همان صفحه وبی که خواننده در حال مشاهده آن است و چه در صفحات وب مختلف، نشان دهد.
نکته: عنصر جستجو، وقتی با یک طرحبندی فشرده همراه شود، در دستگاههای تلفن همراه به خوبی کار میکند.
همچنین میتوانید از API کنترل عنصر جستجوی قابل برنامهریزی برای سفارشیسازی بیشتر رابط کاربری جستجو استفاده کنید. بسیاری از سفارشیسازیها از طریق ویژگیهای HTML پشتیبانی میشوند. به عنوان مثال، میتوانید از بین شش طرحبندی برای صفحه نتایج خود انتخاب کنید، یا میتوانید تعداد نتایج جستجو را برای نمایش تنظیم کنید.
موتور جستجوی قابل برنامهریزی دیگر از گزینه میزبانی iframe پشتیبانی نمیکند. ما طرحبندیهای "دو صفحهای" یا "فقط نتایج" را در عنصر جستجو به عنوان گزینههای جدید توصیه میکنیم. برای اطلاعات بیشتر به پست وبلاگ ما مراجعه کنید.
طراحی اجزای جداگانه رابط کاربری جستجو
اجزای قابل تنظیم
اجزایی که میتوانید سفارشیسازی کنید به طرحبندی عنصر انتخابشده در موتور جستجوی شما بستگی دارد. برای مثال، پنل کنترل به شما امکان میدهد فقط برای موتورهای جستجویی که توسط گوگل میزبانی میشوند، لوگو اضافه کنید؛ نمیتوانید با استفاده از سایر گزینههای میزبانی، لوگو را به موتورهای جستجو اضافه کنید.
شما میتوانید اجزای زیر را با استفاده از کنترل پنل تعریف کنید:
- طرح عنصر جستجو
- کادر جستجو
- نتایج جستجو
- زبانههای پالایش
- تبلیغات
- لوگو (فقط تحت میزبانی گوگل)
تنظیم طرحبندی عنصر جستجو
شما میتوانید نحوهی چیدمان رابط کاربری جستجوی خود را در صفحه وب سفارشی کنید. میتوانید کادر جستجو و بخش نتایج را در یک ستون قرار دهید یا آنها را در ستونهای جداگانه نمایش دهید، به طوری که کادر جستجو در یک ستون و بخش نتایج در ستون دیگر یا حتی در صفحهی دیگری قرار گیرند.
گزینههای طرحبندی شما عبارتند از (برای دیدن نسخههای نمایشی روی لینکها کلیک کنید):
| گزینه | توضیحات |
|---|---|
| روکش | نتایج جستجو را در یک لایه نمایش دهید. |
| دو صفحه ساده چندین جعبه جستجو/بخش نتایج | کادر جستجو و بخش نتایج جستجو در دو صفحه وب مختلف قرار دارند. توجه : بخش نتایج جستجو شامل یک کادر جستجو نیز میشود. کاربران میتوانند مستقیماً در صفحه نتایج جستجو، پرسشهای خود را ارسال کنند. |
| تمام عرض | کادر جستجو و بخش نتایج جستجو، کل عرض صفحه یا ستونی را که عنصر جستجو را در آن وارد کردهاید، اشغال میکنند. |
| دو ستونه | کادر جستجو و بخش نتایج جستجو در ستونها یا بخشهای مختلفی از صفحه وب شما قرار دارند. برای بستن بخش نتایج جستجو، کاربر روی نماد X کنار کادر جستجو کلیک میکند. |
| جمع و جور | مانند گزینه تمام عرض، این گزینه کل عرض صفحه یا ستون را اشغال میکند، اما بخش نتایج نتایج کمتری را نشان میدهد، بنابراین هنگام باز شدن در صفحه وب، فضای عمودی کمتری را اشغال میکند. نکته: این گزینه برای تلفنهای هوشمند و دستگاههای تلفن همراه بهینه شده است. |
| فقط نتایج جستجو از طریق URL جستجو از طریق کادر جستجو | نتایج جستجو در یکی از صفحات وب شما قرار میگیرد و صفحه نتایج جستجو شامل کادر جستجو نیست. از کادر جستجوی خودتان برای ارسال عبارت جستجو استفاده کنید. توجه : یک موتور جستجوی قابل برنامهریزی که تبلیغات نشان نمیدهد، گزینهای برای غیرفعال کردن برندسازی ندارد. |
| میزبانی شده توسط گوگل پنجره فعلی پنجره جدید | کادر جستجو در یکی از صفحات وب شما قرار میگیرد. نتایج جستجو در یک صفحه وب میزبانی شده توسط گوگل نمایش داده میشوند که میتواند در همان پنجره یا در یک پنجره جدید باز شود. |
طراحی کادر جستجو
شما میتوانید کادر جستجو را در هر جایی از بدنه HTML صفحه وب خود قرار دهید، اگرچه - طبق قرارداد - کادرهای جستجو در بالا (یا نزدیک به بالای) صفحات وب قرار میگیرند، مانند مثال زیر:
شکل ۱: صفحه وب با کادر جستجو که در بالای آن قرار دارد.
فعال کردن تکمیل خودکار
تکمیل خودکار، گزینههایی برای جستجو در اختیار کاربران شما قرار میدهد، همانطور که آنها عبارات جستجوی خود را در کادر جستجوی شما وارد میکنند. این مشابه عبارات اختیاری است که در جستجوی گوگل میبینید.
شکل ۲: تایپ کردن فقط چند کاراکتر در کادر جستجو، یک لیست کشویی را نمایش میدهد که گزینههایی برای عبارات جستجوی مختلف ارائه میدهد.
موتور جستجوی قابل برنامهریزی، تکمیل خودکار را بهطور خاص برای موتور جستجوی شما تنظیم میکند. این موتور از الگوریتم متفاوتی استفاده میکند که از منابع متعددی، از جمله پرسوجوهای موتور جستجوی شما و همچنین کلمات کلیدی و عبارات استخراجشده از محتوای وبسایتهایی که موتور جستجوی شما پوشش میدهد، استفاده میکند.
ویژگی تکمیل خودکار در بخش تکمیل خودکار صفحه ویژگیهای جستجو قرار دارد.
برای فعال کردن تکمیل خودکار، موارد زیر را انجام دهید:
- به بخش تکمیل خودکار در صفحه ویژگیهای جستجو بروید.
- کنترل فعال کردن تکمیل خودکار را فعال کنید.
توجه: از آنجا که پرسوجوهای تکمیلشده خودکار برای هر موتور جستجو ایجاد میشوند، چند ساعت طول میکشد تا تکمیل خودکار در موتور جستجوی شما ظاهر شود.
- اگر برای اولین بار است که قابلیت تکمیل خودکار را در یک موتور جستجوی موجود فعال میکنید، باید قطعه کد مربوط به کادر جستجو را که در صفحه وب خود وارد کردهاید، حذف کنید. آن را با قطعه کد جدیدی که در تب «دریافت کد» تولید شده است، جایگزین کنید. برای دستورالعملهای دقیقتر، به بخش «پیادهسازی طراحی در وبسایت شما» مراجعه کنید.
طراحی نتایج
شما میتوانید اجزای زیر را در صفحه نتایج تغییر دهید:
- نتایج انفرادی
- نوع فونت
- رنگهای متن
- زبانههای پالایش
- تبلیغات
- لوگو (فقط تحت میزبانی گوگل)
نتایج انفرادی
اگر میخواهید نتایج تکی را به صورت بصری مشخص کنید یا نتایجی را که توسط کاربران انتخاب میشوند برجسته کنید، میتوانید حاشیهها و پسزمینه را برای نتایج تکی تعریف کنید.
شکل ۳: نتایج با نتایج جداگانه مشخص شده و نتایج جداگانه که با بردن ماوس برجسته میشوند.
زبانههای پالایش
اگر در موتور جستجوی خود برچسبهای اصلاح ایجاد کردهاید، برچسبها به صورت تبهایی در عنصر جستجو ظاهر میشوند. میتوانید از پنل کنترل برای تغییر رنگ تبهای اصلاح استفاده کنید.
تبلیغات
اگر در موتور جستجوی خود تبلیغات ایجاد کردهاید، میتوانید ظاهر و حس آنها را تغییر دهید. تبلیغات نوع خاصی از نتایج جستجو هستند که شما ایجاد میکنید.
لوگو (فقط میزبانی شده توسط گوگل)
اگر به گوگل اجازه میدهید صفحه نتایج شما را میزبانی کند، میتوانید یک لوگو یا تصویر کوچک را درست در کنار کادر جستجو در صفحه نتایج جستجو قرار دهید. تصویر باید یک فایل .jpg، .png یا .gif باشد که در یک وبسایت (وبسایت خودتان یا از وبسایتی که محدودیتهای حق چاپ ندارد) میزبانی شده است. شما میتوانید یک URL را به تصویر مرتبط کنید و آن را به یک تصویر قابل کلیک تبدیل کنید.
در زیر نمونهای از صفحه نتایج با لوگو آمده است.
شکل ۴: کادر جستجو با تصویر
پیادهسازی طرح در وبسایت شما
پس از اینکه ظاهر و حس موتور جستجوی خود را طراحی کردید، میتوانید با انجام موارد زیر آن را در صفحه وب خود پیادهسازی کنید:
- در صفحه ظاهر و احساس، روی ذخیره در بخشهایی که تغییر دادهاید کلیک کنید.
- در بخش طرحبندی (Layout) از صفحه ظاهر و احساس (Look and feel)، روی دریافت کد (Get code) کلیک کنید.
- قطعه کد تولید شده در پنجره کد را کپی کنید.
اگر طرح دو ستونی را انتخاب کردهاید، دو قطعه کد را کپی کنید: یکی برای کادر جستجو و دیگری برای نتایج.
اگر طرحبندی دو صفحهای را انتخاب کردهاید، آدرس اینترنتی (URL) صفحه وبی را که نتایج موتور جستجوی شما را نشان میدهد، تایپ کنید. نام پارامتر پرسوجو که در آدرس اینترنتی تعبیه شده است و توسط صفحه نتایج جستجو تجزیه میشود را تایپ کنید. در نهایت، دو قطعه کد را کپی کنید.
قطعه کد مربوط به طرحبندی فقط نتایج برای حالتی است که نتایج جستجو در یک صفحه جدید نشان داده میشوند. نام پارامتر پرسوجو را که در آدرس اینترنتی (url) تعبیه شده است، تایپ کنید، که توسط صفحه نتایج جستجو تجزیه میشود. در نهایت، قطعه کد نتایج جستجو را کپی کنید. - کد را در هر صفحهای که میخواهید کادر موتور جستجوی قابل برنامهریزی داشته باشد، قرار دهید. میتوانید کد را در هر جایی از تگ
<body></body>صفحه وب خود قرار دهید.نکته: برای سازگاری بیشتر بین مرورگرها، توصیه میشود صفحات HTML شما از یک نوع سند پشتیبانیشده مانند
<!DOCTYPE html>استفاده کنند.اگر از جلوههای شناور برای عنصر جستجوی خود استفاده میکنید، صفحه HTML شما باید از یک نوع سند پشتیبانیشده مانند
<!DOCTYPE html>استفاده کند.
اگر طرح دو ستونه را انتخاب کردهاید، کد مربوط به کادر جستجو را در یک ستون و کد مربوط به نتایج را در ستون دیگر وارد کنید.
اگر طرح دو صفحهای را انتخاب کردهاید، کد مربوط به کادر جستجو را در صفحه وبی که میخواهید کادر جستجو در آن نمایش داده شود، و کد مربوط به نتایج را در صفحه وبی که میخواهید نتایج جستجو در آن نمایش داده شوند، وارد کنید.
اگر طرحبندی فقط نتایج را انتخاب کردهاید، قطعه کد را در صفحه وبی که میخواهید نتایج جستجو در آن نمایش داده شود، وارد کنید.
این صفحه در مورد چگونگی سفارشیسازی ظاهر و حس کادر جستجو و نتایج جستجو بحث میکند. اگر میخواهید طراحی موتور جستجوی خود را با استفاده از فایل زمینه پیادهسازی کنید، به «طراحی ظاهر و حس صفحه با XML » مراجعه کنید.
- نمای کلی
- طراحی اجزای جداگانه رابط کاربری جستجو
- میزبانی نتایج با استفاده از عنصر جستجو
- تنظیم طرحبندی عنصر جستجو
- طراحی کادر جستجو
- طراحی نتایج
- Implementing the Design in Your Website
نمای کلی
You can change both the search box and the search results of your Programmable Search Engine in either the control panel or the XML context file. If you have a handful of search engines, managing and customizing them with the control panel is fairly simple. Just navigate to the Look and feel page, select a style, design the components, click Save and you are good to go. This page tells you how to do all that. However, if you are creating and managing a large number of search engines, even that simple procedure—when repeated across multiple search engines—gets tedious. In such cases, working with XML would be better. If you decide to use XML, read this page first to get an idea of how things generally work; afterwards, read the Designing the Look and Feel with XML page to learn about the XML elements and attributes.
If you are not sure whether you should just use the control panel or use the XML format, see The Basics page, which discusses the benefits and challenges of each format.
Note: Before you start designing the look and feel of your custom search engine, read the Guidelines for implementing Programmable Search Engine . It's a short document that tells you how you should handle Google branding and attribution.
Hosting the Results using the Search Element
A Search element is an object that you can embed in your webpage, which allows extensive customization. It can show the search box and search results, either together in the same webpage that the reader is viewing or in different webpages.
Note: Search element, when paired with a compact layout , works well on mobile devices.
You can also take advantage of the Programmable Search Element Control API to further customize the search UI. Many customizations are supported through HTML attributes. For example, you can select among six layouts for your results page, or you can set the number of search results to return.
Programmable Search Engine no longer supports the iframe hosting option. We recommend the "Two page" or "Results only" layouts in Search element as the new options. Check out our blog post for more information.
Designing Individual Components of the Search UI
The Customizable Components
The components that you can customize depends on the selected Element layout of your search engine. For example, the control panel lets you add a logo only for search engines that are hosted by Google; you cannot add a logo to search engines using other hosting options.
You can define the following components using the control panel:
- The Search element layout
- The search box
- The search results
- The refinement tabs
- The promotions
- The logo (Google-hosted only)
Setting the Search Element Layout
You have the option to customize how your search UI is laid out on the webpage. You can place the search box and the results section in the same column or display them in separately columns with the search box in one column and the results section in another column or even in another page.
Your layout options are (click the links to see demos):
| گزینه | توضیحات |
|---|---|
| OverLay | Display the search results in an overlay. |
| Two Page ساده Multiple search boxes/results sections | The search box and the search results section are placed in two different webpages. Note : The search results section also contains a search box. Users can submit queries in the search results page directly. |
| Full-width | The search box and the search results section take up the entire width of the page or the column where you have inserted the Search element. |
| Two Column | The search box and the search results section are in different columns or sections of your webpage. To close the search results section, the user clicks on the X icon next to the search box. |
| جمع و جور | Like the full-width option, this takes up the entire width of the page or column, but the results section shows fewer results, so it takes up less vertical space when expanded in the webpage. Tip: This option is optimized for smartphones and mobile devices. |
| Results Only Search via URL Search via search box | Search results are placed in one of your webpages, and the search results page does not contain a search box. Use your own search box to submit the search query. Note : A Programmable Search Engine that does not show ads has no option to disable branding. |
| Google-Hosted Current window پنجره جدید | The search box is placed on one of your webpages. The search results are displayed on a Google-hosted webpage, which can be opened either in the same window or in a new window. |
Designing the Search Box
You can insert the search box anywhere within the HTML body of your webpage, although—by convention—search boxes are placed at the top (or close to the top) of webpages, as in the following example:
Figure 1: Webpage with the search box positioned at the top.
Enabling Autocompletion
Autocompletion offers query options to your users as they enter their search queries on your search box. It is similar to the optional queries that you see on Google search.
Figure 2: Typing just a few characters in the search box brings up a drop-down list that provides options for different search queries.
Programmable Search Engine tailors autocompletion specifically to your search engine. It uses a different algorithm that draws from multiple sources, including queries to your search engine, as well as keywords and phrases extracted from the content of websites that your search engine covers.
Autocompletions feature is located in the Autocomplete section of the Search Features page.
To enable autocompletions, do the following:
- Go to the Autocomplete section of the Search Features page.
- Turn on the Enable autocomplete control.
Note: Because the autocompleted queries are generated for each search engine, it takes a few hours before autocompletion starts appearing in your search engine.
- If you are enabling autocompletions in an existing search engine for the first time, you have to remove the code snippet for the search box that you had inserted in your webpage. Replace it with the new one generated in the Get code tab. For more detailed instructions, see the Implementing the Design in Your Website section.
Designing the Results
You can change the following components of the results page:
- The individual results
- The font type
- The text colors
- The refinement tabs
- The promotions
- The logo (Google-hosted only)
The Individual Results
If you want to visually delineate individual results or highlight results that are being selected by users, you can define the borders and background for individual results.
Figure 3: Results with individual results delineated and individual result that is highlighted on mouseover.
The Refinement Tabs
If you have created refinement labels in your search engine, the labels appear as tabs in the Search element. You can use the control panel to change the colors of the refinement tabs.
تبلیغات
If you have created promotions in your search engine, you can change their look and feel. Promotions are a special type of search results that you create.
The Logo (Google-Hosted Only)
If you are letting Google host your results page, you can choose to include a logo or small image right next to the search box in the search results page. The image has to be a .jpg, .png, or .gif file hosted on a website (your own or from a website that does not have copyright restrictions). You have the option of associating a URL with the image, turning it into a clickable image.
The following is an example of results page with a logo.
Figure 4: Search box with an image
Implementing the Design in Your Website
After you have designed the look and feel of your search engine, you can implement it in your webpage by doing the following:
- Click Save in sections you modified in the Look and feel page.
- Click Get code in the Layout section of the Look and feel page.
- Copy the code snippet generated in the Code popup.
If you have selected the two-column layout, copy two pieces of code snippets: one for the search box, and the other for results.
If you have selected two-page layout, type the URL of the webpage that will show the results for your search engine. Type the query parameter name embedded in the url, which is parsed by search results page. Finally, copy the two pieces of code snippets.
The code snippet for results-only layout is for the case where search results are shown in a new page. Type the query parameter name embedded in the url, which is parsed by the search results page. Finally, copy the search results code snippet. - Insert the code in every page where you want a Programmable Search Engine box. You can paste the code anywhere within the
<body></body>tag of your webpage.Note: For the most cross-browser compatibility, it is recommended that your HTML pages use a supported doctype such as
<!DOCTYPE html>.If you are using hover effects for your Search element, your HTML page must use a supported doctype such as
<!DOCTYPE html>.
If you have selected the two-column layout, insert the code for the search box in one column and the code for the results in another column.
If you have selected the two-page layout, insert the code for the search box in the webpage where you want the search box to appear, and the code for the results in the webpage where you want the search results to appear.
If you have selected the results-only layout, insert the code snippet in the webpage where you want the search results to appear.