• Beranda
  • Artikel
  • Umum
  • Cara Menyertakan Google Custom Search Engine (CSE) ke Situs WordPress tanpa Plugin (Dua pendekatan berbeda)

Cara Menyertakan Google Custom Search Engine (CSE) ke Situs WordPress tanpa Plugin (Dua pendekatan berbeda)

Diterbitkan: 2016-03-16

Pencarian Kustom Google Untuk situs WordPress

Signifikansi Fungsi Pencarian dan Mengapa kita harus menggunakan Google Custom Search di WordPress?

Google atau Bing? Tidak diragukan lagi. Google adalah mesin pencari terbaik dan pelopor Pencarian di dunia. Tidak ada alasan Anda tidak boleh menggunakan Google Custom Search di blog WordPress Anda. Ini akan memberikan pengalaman pencarian terbaik untuk pembaca blog Anda juga. Dalam tutorial ini kita akan membahas langkah-langkah sederhana agar Pencarian Kustom tersedia untuk situs WordPress Anda.

Di bawah payung Alphabet ( https://abc.xyz ) Google adalah perusahaan pencarian mandiri. Jadi, apa artinya itu bagi semua konsumen? Yah, saya yakin tidak ada yang akan berubah untuk kita, kecuali struktur pelaporannya berubah dan pasti nama saham NYSE.

Mengapa kita membutuhkan CSE (Custom Search Engine)?

Sangat penting untuk menyediakan fungsionalitas pencarian yang lebih baik di situs. Biasanya halaman utama berisi posting kurang dari 10 tetapi dalam kebanyakan kasus, pengguna blog Anda mungkin mendapatkan artikel terkait terbaik dari Pencarian saja.

Hasil Pencarian Lebih Cepat dari Pencarian WordPress default + Bagus untuk SEO situs Anda karena Google mengetahui daftar hasil ini dari permintaan pencarian dan tidak menambahkannya ke daftar konten duplikat.

Ada two ways untuk mengonfigurasi Google Custom Search:

  1. Dari Konsol Google Adsense (di Crunchify kami menggunakan this approach )
  2. Dari Panel Penelusuran Khusus Google

Configuration Approach-1. Dari konsol Google Adsense

Langkah 1

  • Masuk ke Adsense
  • Klik pada tab My ads
  • Klik Search -> Custom search engines
  • Klik pada New Custom Search engine

Buat mesin pencari kustom baru - Google Adsense

Langkah 2

  • Berikan Name . Ini teks bentuk bebas
  • Pilih Only sites I select
  • Tentukan nama situs web Anda

Google Adsense - CSE - Pengaturan Dasar

Langkah-3

Ubah opsi di bawah ini sesuai kebutuhan Anda

  • Saluran Khusus
  • Gaya kotak pencarian
  • Gaya CSS iklan

Langkah-4

Di bawah opsi Hasil pencarian, pastikan pengaturan di bawah ini benar

  • Hasil pencarian: on my website
  • URL tempat hasil pencarian akan ditampilkan: search page blog Anda

Tips Crunchify dalam mengatur Google Custom Search Engine

Langkah-5

Klik simpan dan dapatkan kedua kode

  • Box Code Pencarian
  • Result Code Pencarian

Hasil Pencarian Adsense dan kode Kotak Pencarian

Langkah-6

Buka situs Anda dan buat /search

WordPress Buat Halaman Pencarian

Langkah-7

Di bawah bagian HTML rekatkan search result code dan klik simpan.

Langkah-8

Pergi ke Appearance -> Widgets bagian dan paste search box code dan klik simpan. Ubah CSS kotak pencarian sesuai kebutuhan Anda. Ini adalah CSS khusus yang saya gunakan di Crunchify.

style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
. crunchify - search {
     width : 76 % ! important ;
     padding : 9px 6px 7px 6px ! important ;
     max - width : 275px ;
     margin : 10px 0px 0px 0px ! important ;
}
 
input [ type = "submit" ] {
     background - color : #dd7127;
     border : none ;
     box - shadow : none ;
     color : #fff;
     cursor : pointer ;
     font - family : 'Oswald' , sans - serif ;
     font - size : 14px ;
     font - weight : 400 ;
     letter - spacing : 1px ;
     padding : 6px 10px ;
     width : auto ;
    - webkit - font - smoothing : antialiased ;
     border - radius : 3px ;
}

Dan Anda sudah siap. Coba cari kata kunci dan Anda akan melihat hasil pencarian google di /search .

Configuration Approach-2 . Dari Panel Penelusuran Khusus Google

Langkah 1

  • Buka https://cse.google.com/cse/all
  • Klik Add Mesin Pencari

Tambahkan-Pencarian-Kustom-Tips-Crunchify

Langkah 2

  • Berikan URL situs Anda
  • Klik Tambahkan

Crunchify-Google-Custom-Search Engine-Setup

Langkah-3

  • Klik pada Mesin Pencari yang baru Anda buat
  • Pergi ke Look and feel Bagian
  • Pergi ke Layout Tab
  • Pilih Two Page
  • Klik Save and Get Code

Langkah-4

  • Dapatkan kode untuk kotak pencarian
    • Taruh di sidebar
  • Dapatkan kode untuk hasil pencarian
    • Buat halaman http://<yourblog.com>/search
    • Masukkan kode ke halaman ini

Langkah-5

Coba cari kata kunci seperti Google Apps dan Anda akan melihat hasil seperti ini.

Google-Custom-Search-Result-Crunchify

Panel Hasil:

Google-CSE-Search-Result-Crunchify

Langkah-6

Beberapa waktu yang lalu di Crunchify kami telah memodifikasi hasilnya dengan CSS khusus di bawah ini:

Stylish Google Custom Search - Custom CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/* Change Search Button Code  */
input . gsc - search - button {
     padding : 10px ! important ;
     height : 35px ! important ;
     border - color : #c12129 !important;
     background - color : #c12129 !important;
     color : #fff !important;
}
 
/* Change Search Button Hover Color */
input . gsc - search - button : hover {
     border - color : #444 !important;
     background - color : #444 !important;
}
 
/* Change Bottom Margin after each result */
. gsc - control - cse . gsc - table - result {
     margin - bottom : 10px ! important ;
}
 
/* Hide URL from search result */
. gsc - url - top , . gsc - url - bottom {
     display : none ! important ;
}
 
/* Change input field look and feel */
input . gsc - input {
     padding : 10px ! important ;
     margin - left : 0px ;
     background - position : right center ! important ;
     background - repeat : no - repeat ! important ;
}
 
/* Hide number of result count */
. gsc - result - info {
     display : none ;
}
. gs - webResult : hover {
     background - color : #eee;
}
 
/* Change mouse hover result background change */
. gsc - cursor - page {
     font - size : 1.1em ;
     padding : 3px 7px ;
     border : 2px solid #eee;
     background - color : #eee !important;
}
 
/* Change search result heading font size change */
. gsc - result . gs - title {
     height : 2.0em ! important ;
     font - size : 16px ! important ;
}
 
. gs - result . gs - snippet {
     line - height : 19px ! important ;
}
 
/* Remove Clear cross image and CSS adjustment - below 3 CSS prop changes */
div . gsc - clear - button {
     display : none ! important ;
}
td . gsc - clear - button {
     width : 0px ! important ;
}
td . gsc - input {
     padding - right : 1px ! important ;
}

Sekarang mari kita lihat kedua pertanyaan:

Approach-1 :

  • https://crunchify.com/ search/?cx= partner-pub-xxxxxxxxxxxxxxxxx%3A9846869911&cof=FORID%3A10&ie=UTF-8&q=Crunchify&sa=Search……

Approach-2 :

  • https://crunchify.com/ search/?q =Google%20Apps (Ini tidak akan berfungsi karena kami memiliki aturan .htaccess)

Seperti yang Anda lihat di atas – kedua pendekatan memiliki different query parameters .

Apa selanjutnya?

Pastikan untuk memperbarui URL JSON-LD Schema Kotak Pencarian Tautan Situs Google.

Validasi Kotak Pencarian Tautan Situs WordPress JSON-LD Schema.org URL Markup