Halaman ini membahas cara menyesuaikan tampilan dan nuansa kotak penelusuran serta hasil penelusuran Anda. Jika ingin mengimplementasikan desain mesin telusur Anda menggunakan file konteks, lihat halaman "Mendesain Tampilan dan Nuansa dengan XML".
- Ringkasan
- Mendesain Komponen Individual UI Penelusuran
- Menghosting Hasil Menggunakan Elemen Penelusuran
- Menyetel Tata Letak Elemen Penelusuran
- Mendesain Kotak Penelusuran
- Mendesain Hasil
- Menerapkan Desain di Situs Anda
Ringkasan
Anda dapat mengubah kotak penelusuran dan hasil penelusuran Programmable Search Engine di panel kontrol atau file konteks XML. Jika Anda memiliki beberapa mesin telusur, mengelola dan menyesuaikannya dengan panel kontrol cukup mudah. Cukup buka halaman Tampilan dan nuansa, pilih gaya, desain komponennya, klik Save, dan Anda pun siap memulai. Halaman ini memberi tahu Anda cara melakukan semua itu. Namun, jika Anda membuat dan mengelola mesin telusur dalam jumlah besar, bahkan prosedur sederhana tersebut—bila diulang di beberapa mesin telusur—membosankan. Dalam kasus semacam ini, akan lebih baik jika menggunakan XML. Jika Anda memutuskan untuk menggunakan XML, baca halaman ini terlebih dahulu untuk mendapatkan gambaran tentang cara kerja berbagai hal secara umum; setelah itu, baca halaman Mendesain Tampilan dan Nuansa dengan XML untuk mempelajari elemen dan atribut XML.
Jika Anda tidak yakin apakah sebaiknya menggunakan panel kontrol saja atau menggunakan format XML, lihat halaman Dasar-Dasar, yang membahas manfaat dan tantangan dari setiap format.
Catatan: Sebelum mulai mendesain tampilan dan nuansa mesin telusur kustom, baca Panduan untuk menerapkan Programmable Search Engine . Skor Kualitas adalah dokumen singkat yang memberi tahu Anda cara menangani branding dan atribusi Google.
Menghosting Hasil menggunakan Elemen Penelusuran
Elemen Penelusuran adalah objek yang dapat Anda sematkan di halaman web, yang memungkinkan penyesuaian ekstensif. Fitur ini dapat menampilkan kotak penelusuran dan hasil penelusuran, baik dalam halaman web yang sama dengan yang dilihat pembaca atau di halaman web yang berbeda.
Catatan: Elemen penelusuran, jika disambungkan dengan tata letak yang ringkas, berfungsi dengan baik di perangkat seluler.
Anda juga dapat memanfaatkan Programmable Search Element Control API untuk menyesuaikan UI penelusuran lebih lanjut. Banyak penyesuaian didukung melalui atribut HTML. Misalnya, Anda dapat memilih di antara enam tata letak untuk halaman hasil, atau menetapkan jumlah hasil penelusuran yang akan ditampilkan.
Programmable Search Engine tidak lagi mendukung opsi hosting iframe. Sebaiknya gunakan tata letak "Dua halaman" atau "Hasil saja" di elemen Penelusuran sebagai opsi baru. Lihat postingan blog kami untuk informasi selengkapnya.
Mendesain Komponen Individual UI Penelusuran
Komponen yang Dapat Disesuaikan
Komponen yang dapat Anda sesuaikan bergantung pada Tata letak elemen yang dipilih di mesin telusur Anda. Misalnya, panel kontrol memungkinkan Anda menambahkan logo hanya untuk mesin telusur yang dihosting oleh Google. Anda tidak dapat menambahkan logo ke mesin telusur menggunakan opsi hosting lainnya.
Anda dapat menetapkan komponen berikut menggunakan panel kontrol:
- Tata letak elemen Penelusuran
- Kotak penelusuran
- Hasil penelusuran
- Tab penajaman
- Promosi
- Logo (khusus yang dihosting Google)
Menetapkan Tata Letak Elemen Penelusuran
Anda memiliki opsi untuk menyesuaikan cara UI penelusuran ditampilkan di halaman web. Anda dapat menempatkan kotak penelusuran dan bagian hasil di kolom yang sama, atau menampilkannya dalam kolom terpisah dengan kotak penelusuran dalam satu kolom dan bagian hasil di kolom lain atau bahkan di halaman lain.
Opsi tata letak Anda adalah (klik link untuk melihat demo):
| Opsi | Deskripsi |
|---|---|
| OverLay | Menampilkan hasil penelusuran dalam bentuk overlay. |
|
Dua Halaman
Sederhana Beberapa kotak penelusuran/bagian hasil |
Kotak penelusuran dan bagian hasil penelusuran ditempatkan dalam dua halaman yang berbeda.
Catatan: Bagian hasil penelusuran juga berisi kotak penelusuran. Pengguna dapat mengirimkan kueri di halaman hasil penelusuran secara langsung. |
| Lebar penuh | Kotak penelusuran dan bagian hasil penelusuran memenuhi seluruh lebar halaman atau kolom tempat Anda menyisipkan elemen Penelusuran. |
| Dua Kolom | Kotak penelusuran dan bagian hasil penelusuran berada di kolom atau bagian yang berbeda di halaman web Anda. Untuk menutup bagian hasil penelusuran, pengguna mengklik ikon X di samping kotak penelusuran. |
| Rapat |
Seperti opsi lebar penuh, opsi ini menggunakan seluruh lebar halaman atau kolom, tetapi
bagian hasil menampilkan hasil yang lebih sedikit, sehingga menggunakan lebih sedikit ruang vertikal saat
diperluas di halaman web.
Tips: Opsi ini dioptimalkan untuk smartphone dan perangkat seluler. |
|
Hanya Hasil
Telusuri melalui URL Telusuri melalui kotak penelusuran |
Hasil penelusuran ditempatkan di salah satu halaman Anda, dan halaman hasil penelusuran tidak
berisi kotak penelusuran. Gunakan kotak penelusuran Anda sendiri untuk mengirimkan kueri penelusuran.
Catatan: Programmable Search Engine yang tidak menampilkan iklan tidak memiliki opsi untuk menonaktifkan branding. |
|
Dihosting Google
Jendela saat ini Jendela baru |
Kotak penelusuran ditempatkan di salah satu halaman. Hasil penelusuran ditampilkan di halaman web yang dihosting Google, yang dapat dibuka di jendela yang sama atau di jendela baru. |
Mendesain Kotak Penelusuran
Anda dapat menyisipkan kotak penelusuran di mana saja dalam isi HTML halaman web, meskipun—sesuai konvensi—kotak penelusuran ditempatkan di bagian atas (atau dekat dengan bagian atas) halaman web, seperti pada contoh berikut:
Gambar 1: Halaman dengan kotak penelusuran diposisikan di bagian atas.
Mengaktifkan Pelengkapan Otomatis
Pelengkapan otomatis menawarkan opsi kueri kepada pengguna saat mereka memasukkan kueri penelusuran di kotak penelusuran Anda. Hal ini serupa dengan kueri opsional yang Anda lihat di Google Penelusuran.
Gambar 2: Mengetik beberapa karakter saja di kotak penelusuran akan menampilkan menu drop-down yang menyediakan opsi untuk kueri penelusuran yang berbeda.
Programmable Search Engine menyesuaikan pelengkapan otomatis secara khusus untuk mesin telusur Anda. Penargetan yang dioptimalkan menggunakan berbagai algoritma yang diambil dari berbagai sumber, termasuk kueri ke mesin telusur Anda, serta kata kunci dan frasa yang diekstrak dari konten situs yang dicakup oleh mesin telusur Anda.
Karena kueri yang dilengkapi otomatis didasarkan—sebagian—pada konten tertentu di halaman web yang dicakup oleh mesin telusur Anda, Programmable Search Engine tidak membuat pelengkapan otomatis untuk mesin telusur yang menelusuri seluruh web. Dengan kata lain, hanya mesin telusur yang menelusuri situs yang menyertakan situs—kumpulan situs yang telah ditentukan sebelumnya—yang dapat memiliki kueri yang dilengkapi secara otomatis. Anda dapat menetapkan cakupan mesin telusur di bagian Situs yang akan ditelusuri pada halaman Ringkasan.
Fitur pelengkapan otomatis terletak di bagian Pelengkapan Otomatis di halaman Fitur Penelusuran.
Untuk mengaktifkan pelengkapan otomatis, lakukan hal berikut:
- Buka bagian Pelengkapan Otomatis di halaman Fitur Penelusuran.
-
Aktifkan kontrol Aktifkan pelengkapan otomatis.
Catatan: Karena kueri yang dilengkapi otomatis dibuat untuk setiap mesin telusur, perlu waktu beberapa jam sebelum pelengkapan otomatis mulai muncul di mesin telusur Anda.
- Jika Anda mengaktifkan pelengkapan otomatis di mesin telusur yang ada untuk pertama kalinya, Anda harus menghapus cuplikan kode untuk kotak penelusuran yang telah disisipkan di halaman web Anda. Ganti kode tersebut dengan kode baru yang dibuat di tab Dapatkan kode. Untuk petunjuk yang lebih detail, lihat bagian Menerapkan Desain di Situs Anda.
Mendesain Hasil
Anda dapat mengubah komponen halaman hasil berikut:
- Hasil individual
- Jenis font
- Warna teks
- Tab penajaman
- Promosi
- Logo (khusus yang dihosting Google)
Hasil Perorangan
Jika Anda ingin menggambarkan setiap hasil secara visual atau menyoroti hasil yang sedang dipilih pengguna, Anda dapat menentukan batas dan latar belakang untuk setiap hasil.
Gambar 3: Hasil dengan hasil individual yang digambarkan dan hasil individual yang disorot saat mengarahkan mouse.
Tab Penajaman
Jika Anda telah membuat label penyempurnaan di mesin telusur, label akan muncul sebagai tab dalam elemen Penelusuran. Anda dapat menggunakan panel kontrol untuk mengubah warna tab penajaman.
Promosi
Jika telah membuat promosi di mesin telusur, Anda dapat mengubah tampilan dan nuansanya. Promosi adalah jenis hasil penelusuran khusus yang Anda buat.
Logo (Khusus yang Dihosting Google)
Jika mengizinkan Google menghosting halaman hasil, Anda dapat memilih untuk menyertakan logo atau gambar kecil tepat di samping kotak penelusuran di halaman hasil penelusuran. Gambar harus berupa file .jpg, .png, atau .gif yang dihosting di situs (milik Anda sendiri atau dari situs yang tidak memiliki pembatasan hak cipta). Anda memiliki opsi untuk mengaitkan URL dengan gambar, yang mengubahnya menjadi gambar yang dapat diklik.
Berikut adalah contoh halaman hasil dengan logo.
Gambar 4: Kotak penelusuran yang berisi gambar
Menerapkan Desain di {i>Website<i} Anda
Setelah mendesain tampilan dan nuansa mesin telusur, Anda dapat menerapkannya pada halaman web dengan melakukan hal berikut:
- Klik Simpan di bagian yang Anda ubah di halaman Tampilan dan nuansa.
- Klik Dapatkan kode di bagian Tata Letak halaman Tampilan dan nuansa.
-
Salin cuplikan kode yang dibuat di pop-up Code.
Jika Anda telah memilih tata letak dua kolom, salin dua potongan cuplikan kode: satu untuk kotak penelusuran, dan satu lagi untuk hasil.
Jika Anda telah memilih tata letak dua halaman, ketik URL halaman web yang akan menampilkan hasil untuk mesin telusur Anda. Ketik nama parameter kueri yang disematkan di URL, yang diuraikan oleh halaman hasil penelusuran. Terakhir, salin kedua potongan cuplikan kode.
Cuplikan kode untuk tata letak khusus hasil digunakan jika hasil penelusuran ditampilkan di halaman baru. Ketik nama parameter kueri yang disematkan di URL, yang diuraikan oleh halaman hasil penelusuran. Terakhir, salin cuplikan kode hasil penelusuran.
-
Masukkan kode di setiap halaman tempat Anda menginginkan kotak Programmable Search Engine. Anda dapat menempelkan
kode di mana saja dalam tag
<body></body>di halaman web Anda.Catatan: Untuk sebagian besar kompatibilitas lintas browser, sebaiknya halaman HTML menggunakan doctype yang didukung seperti
<!DOCTYPE html>.Jika Anda menggunakan efek pengarahan kursor untuk elemen Penelusuran, halaman HTML Anda harus menggunakan doctype yang didukung seperti
<!DOCTYPE html>.
Jika Anda telah memilih tata letak dua kolom, sisipkan kode untuk kotak penelusuran di satu kolom dan kode untuk hasilnya di kolom lainnya.
Jika Anda telah memilih tata letak dua halaman, sisipkan kode untuk kotak penelusuran di halaman web tempat Anda ingin kotak penelusuran muncul, dan kode untuk hasil di halaman web tempat Anda ingin menampilkan hasil penelusuran.
Jika Anda memilih tata letak khusus hasil, sisipkan cuplikan kode di halaman web tempat Anda ingin menampilkan hasil penelusuran.