• 홈페이지
  • 조항
  • 일반적인
  • 플러그인 없이 WordPress 사이트에 Google 맞춤 검색 엔진(CSE)을 포함하는 방법(두 가지 접근 방식)

플러그인 없이 WordPress 사이트에 Google 맞춤 검색 엔진(CSE)을 포함하는 방법(두 가지 접근 방식)

게시 됨: 2016-03-16

WordPress 사이트용 Google 맞춤 검색

검색 기능의 중요성과 WordPress에서 Google 맞춤 검색을 사용해야 하는 이유는 무엇입니까?

구글이나 빙? 의심의 여지가 없습니다. Google은 세계 최고의 검색 엔진이자 검색 개척자입니다. WordPress 블로그에서 Google 맞춤 검색을 사용하지 말아야 할 이유가 없습니다. 블로그 독자에게도 최고의 검색 경험을 제공할 것입니다. 이 자습서에서는 WordPress 사이트에서 사용자 지정 검색을 사용할 수 있도록 하는 간단한 단계를 살펴봅니다.

Alphabet( https://abc.xyz ) 우산 아래에서 Google은 독립형 검색 회사입니다. 그렇다면 이것이 모든 소비자에게 의미하는 바는 무엇입니까? 글쎄요, 보고 구조가 변경되고 확실히 NYSE 주식 이름이 변경되었다는 점을 제외하고는 변경될 것이 없다고 믿습니다.

CSE(맞춤 검색 엔진)가 필요한 이유는 무엇입니까?

사이트에서 더 나은 검색 기능을 제공하는 것은 매우 중요합니다. 일반적으로 기본 페이지에는 10개 미만의 게시물이 포함되지만 대부분의 경우 블로그 사용자는 검색에서만 가장 관련성이 높은 기사를 얻을 수 있습니다.

또한 기본 WordPress 검색보다 훨씬 빠른 검색 결과 + Google이 검색 쿼리에서 이 결과 목록을 알고 중복 콘텐츠 목록에 추가하지 않기 때문에 사이트의 SEO에 좋습니다.

다음 two ways Google 맞춤 검색을 구성할 수 있습니다.

  1. Google Adsense 콘솔에서 (Crunchify에서 우리는 this approach 을 사용하고 있습니다)
  2. Google 맞춤 검색 패널에서

Configuration Approach-1. Google 애드센스 콘솔에서

1 단계

  • Adsense 로 이동
  • My ads 탭을 클릭합니다.
  • Search -> Custom search engines 을 클릭하십시오.
  • New Custom Search engine 을 클릭하십시오.

새 맞춤 검색 엔진 만들기 - Google Adsense

2 단계

  • Name 제공 . 자유 형식의 텍스트입니다.
  • Only sites I select
  • 웹사이트 이름 지정

구글 애드센스 - CSE - 기본 설정

3단계

필요에 따라 아래 옵션을 수정하십시오.

  • 맞춤 채널
  • 검색창 스타일
  • 광고 CSS 스타일

4단계

검색 결과 옵션에서 아래 설정이 올바른지 확인하십시오.

  • 검색 결과: on my website
  • 검색 결과가 표시될 URL: 블로그의 search page

Google 사용자 정의 검색 엔진 설정에 대한 Crunchify 팁

5단계

저장을 클릭하고 두 코드를 모두 가져옵니다.

  • 검색 Box Code
  • 검색 Result Code

애드센스 검색결과 및 검색창 코드

6단계

사이트로 이동하여 /search 페이지 생성

WordPress 검색 페이지 만들기

7단계

HTML 섹션에서 search result code 를 붙여넣고 저장을 클릭합니다.

8단계

Appearance -> Widgets 섹션으로 이동하여 search box code 를 붙여넣고 저장을 클릭합니다. 필요에 따라 검색 상자 CSS를 수정합니다. 여기 내가 Crunchify에서 사용하고 있는 사용자 정의 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 ;
}

모든 준비가 완료되었습니다. 키워드 검색을 시도하면 /search 페이지에 Google 검색 결과가 표시됩니다.

Configuration Approach-2 . Google 맞춤 검색 패널에서

1 단계

  • https://cse.google.com/cse/all로 이동합니다.
  • 검색 엔진 Add 를 클릭하십시오

Add-Custom-Search-Crunchify-Tips

2 단계

  • 사이트 URL 제공
  • 추가 클릭

Crunchify-Google-Custom-Search-Engine-Setup

3단계

  • 새로 만든 검색 엔진을 클릭하십시오.
  • Look and feel 섹션으로 이동
  • Layout 탭으로 이동
  • Two Page 선택
  • Save and Get Code 클릭

4단계

  • 검색 상자에 대한 코드 가져오기
    • 사이드바에 넣어
  • 검색 결과에 대한 코드 가져오기
    • 페이지 만들기 http://<yourblog.com>/search
    • 이 페이지에 코드 삽입

5단계

Google Apps와 같은 키워드를 검색하면 다음과 같은 결과가 표시됩니다.

Google-Custom-Search-Result-Crunchify

결과 패널:

Google-CSE-검색-결과-Crunchify

6단계

얼마 전에 Crunchify 에서 아래의 사용자 정의 CSS로 결과를 수정했습니다.

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

이제 두 쿼리를 살펴보겠습니다.

Approach-1 :

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

Approach-2 :

  • https://crunchify.com/ search/?q =Google%20Apps(.htaccess 규칙이 있기 때문에 작동하지 않음)

위에서 볼 수 있듯이 두 접근 방식 모두 different query parameters .

다음은?

Google 사이트링크 검색창의 JSON-LD Schema URL을 업데이트해야 합니다.

WordPress 사이트 링크 검색 상자 JSON-LD Schema.org 마크업 URL 확인