• Anasayfa
  • Nesne
  • Genel
  • Google Özel Arama Motorunu (ÖAM) Eklentisiz WordPress Sitesine Ekleme (İki farklı yaklaşım)

Google Özel Arama Motorunu (ÖAM) Eklentisiz WordPress Sitesine Ekleme (İki farklı yaklaşım)

Yayınlanan: 2016-03-16

WordPress sitesi için Google Özel Arama

Arama İşlevselliğinin Önemi ve Neden WordPress'te Google Özel Arama kullanmalıyız?

Google mı yoksa Bing mi? Hiç şüphe yok. Google, dünyadaki en iyi arama motoru ve Arama öncüsüdür. WordPress blogunuzda Google Özel Arama'yı kullanmamanız için hiçbir neden yok. Blog okuyucularınıza da en iyi arama deneyimini verecektir. Bu eğitimde, WordPress siteniz için Özel Arama'nın kullanılabilir olması için basit adımların üzerinden geçeceğiz.

Alfabe ( https://abc.xyz ) çatısı altında Google, bağımsız bir arama şirketidir. Peki, bu tüm tüketiciler için ne anlama geliyor? Raporlama yapısının değişmesi ve kesinlikle NYSE hisse senedi adının değişmesi dışında bizim için değişen bir şey olmadığına inanıyorum.

Neden ÖAM'ye (Özel Arama Motoru) ihtiyacımız var?

Sitede daha iyi arama işlevselliği sağlamak çok önemlidir. Genellikle ana sayfa 10'dan az gönderi içerir, ancak çoğu durumda blog kullanıcılarınız yalnızca Arama'dan en alakalı makaleleri alabilir.

Artı, varsayılan WordPress Aramasından çok Daha Hızlı Arama Sonucu + Google, bu sonuç listesini arama sorgusundan bildiği ve yinelenen içerik listesine eklemediği için sitenizin SEO'su için iyi.

Google Özel Arama'yı yapılandırmanın two ways vardır:

  1. Google Adsense Konsolundan ( Crunchify'da this approach kullanıyoruz)
  2. Google Özel Arama Panelinden

Configuration Approach-1. Google Adsense konsolundan

Aşama 1

  • Adsense git
  • My ads sekmesine tıklayın
  • Search -> Custom search engines tıklayın
  • New Custom Search engine tıklayın

Yeni özel arama motoru oluşturun - Google Adsense

Adım 2

  • Name Sağlayın. Serbest biçimli metindir
  • Only sites I select
  • Web sitenizin adını belirtin

Google Adsense - ÖAM - Temel Ayar

Aşama 3

Aşağıdaki seçenekleri ihtiyacınıza göre değiştirin

  • Özel Kanal
  • Arama kutusu stili
  • Reklam CSS stili

4. Adım

Arama sonuçları seçeneği altında, aşağıdaki ayarların doğru olduğundan emin olun.

  • Arama sonuçları: on my website
  • Arama sonuçlarının görüntüleneceği URL: Blogunuzun search page

Google Özel Arama Motorunu ayarlamaya ilişkin Crunchify İpuçları

Adım 5

Kaydet'e tıklayın ve her iki kodu da alın

  • Arama Box Code
  • Arama Result Code

Adsense Arama Sonucu ve Arama Kutusu kodu

Adım-6

Sitenize gidin ve /search sayfası oluşturun

WordPress Arama Sayfası Oluştur

Adım-7

HTML bölümünün altına search result code yapıştırın ve kaydet'i tıklayın.

Adım-8

Appearance -> Widgets bölümüne gidin ve search box code yapıştırın ve kaydet'i tıklayın. Arama kutusu CSS'sini ihtiyacınıza göre değiştirin. İşte Crunchify'da kullandığım özel bir CSS.

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 ;
}

Ve hepiniz hazırsınız. Anahtar kelimeleri aramayı deneyin ve /search sayfasında google arama sonucunu görmelisiniz.

Configuration Approach-2 . Google Özel Arama Panelinden

Aşama 1

  • https://cse.google.com/cse/all adresine gidin
  • Arama Motoru Add tıklayın

Özel-Arama-Crunchify-İpuçları Ekle

Adım 2

  • Site URL'nizi sağlayın
  • Ekle'yi tıklayın

Crunchify-Google-Custom-Search-Engine-Setup

Aşama 3

  • Yeni oluşturduğunuz Arama Motoruna tıklayın
  • Look and feel Bölümüne Git
  • Layout Sekmesine Git
  • Two Page Seçin
  • Save and Get Code tıklayın

4. Adım

  • Arama kutusu için kod al
    • Kenar çubuğuna koy
  • Arama sonucu için kod alın
    • http://<blogunuz.com>/search sayfasını oluşturun
    • Bu sayfaya kod koyun

Adım 5

Google Apps gibi bir anahtar kelime aramayı deneyin ve bunun gibi bir sonuç görmelisiniz.

Google-Özel-Arama-Sonucu-Crunchify

Sonuç Paneli:

Google-CSE-Arama-Sonucu-Crunchify

Adım-6

Bir süre önce Crunchify sonucu aşağıdaki özel CSS ile değiştirdik:

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 ;
}

Şimdi her iki sorguya da bir göz atalım:

Approach-1 :

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

Approach-2 :

  • https://crunchify.com/ search/?q =Google%20Apps (Bu, .htaccess kuralımız olduğu için çalışmayacaktır)

Yukarıda gördüğünüz gibi – her iki yaklaşımın da different query parameters vardır.

Sıradaki ne?

Lütfen Google'ın Site Bağlantıları Arama kutusunun JSON-LD Schema URL'sini güncellediğinizden emin olun.

WordPress Site Bağlantılarını Doğrulayın Arama Kutusu JSON-LD Schema.org İşaretleme URL'si