1 Google Custom Search Engine

2 테터툴즈 블로그에 구글 개인 검색 붙이기

2.1 Step1. Google Custom Search Engine 만들기

2.1.1 Google Custom Search Engine 접속

2.1.2 사이트에 “Create a Custom Search Engine” 을 클릭

2.1.3 “Create a Custom Search Engine”의 페이지에 정보를 기입

2.1.3.1 Search engine name

2.1.3.2 Search engine description

2.1.3.3 Search engine keywords

2.1.3.4 Search engine language

2.1.3.5 What do you want to search?

2.1.3.6 Select some sites

2.1.3.7 Advertising status

2.1.4 약관 check 후 “Next” 클릭 그리고 Finish로 완료

2.2 Step2. 검색 코드와 결과 페이지 코드 얻기

2.2.1 Google Custom Search Engine 접속

2.2.2 Search Engine 관리 페이지로 이동

2.2.3 Search Engine 목록

2.2.4 Search Engine Control Panel

2.2.5 Control Panel의 “Code” 클릭

2.2.6 Search Engine의 검색 창 스타일 지정

2.2.7 테터툴즈 포스트 생성 & url 지정

2.2.8 검색 창과 검색 결과 코드를 블로그에 반영

2.3 Step3. 구글 애드센스와 연동

3 References

yundream님이 “검색을 위한 애드센스”를 사용하다 Google Custom Search Engine을 사용하신 것 처럼, 나 또한 블로그에 테터툴즈에서 기본적으로 제공하는 검색 기능과 “검색을 위한 애드센스”를 사용하다 이 번에 Google Custom Search Engine을 테터툴즈 (tattertools)블로그에 적용하면서 관련 내용을 정리해보았다. 많은 장점이 있겠지만 구글 개인(화) 검색을 사용하게 된 이유는 아래와 같다.

• 특정 사이트내의 내용을 구글의 강력한 검색 엔진을 이용해서 검색할 수 있다.
  물론, 전체 웹에 대한 검색을 할 수도 있지만 자신이 지정한 몇 개의 사이트 내에서만 한정 지어서 검색을 할 수 있다. 필자의 경우는 블로그와 팀블로그 를 지정해서 검색을 할 수 있게 지정했다.
• 구글 개인 검색 사이트도 별도 제공되고 자신의 사이트에 검색 창과 검색 결과 페이지를 붙일 수 있는 자바 스크립트를 제공한다. 물론 구글 개인화 홈페지에 가젯으로불일 수 있다.
• 구글 애드센스와 연계할 수 있다. (별도의 채널도 부여할 수 있다)
• 그외 많은 좋은 기능들을 사용할 수 있다.
  (e.g. keywords, 검색 결과에 대한 통계 등)

처음에는 간략히 정리하려고 했지만 새롭게 변경된 내용도 있고 여러 기능들을 중 몇가지를 설명하다 보니 처음 생각했던 것 보다 글이 길어졌다. 이 포스트의 제목 정도만 봐도 설치에 무리가 없어 보인다.

Google Custom Search Engine을 만들고 이 것을 테터툴즈 블로그에 반영하는 것 그리고 마지막으로 구글 애드센스와 연계하는 것에 대해서 기술한다.

구글 개인화 검색 사이트 (Google Custom Search Engine) 에 접속한다.
http://www.google.co.kr/coop/cse/

하나 이상의 Google Custom Search Engine을 만들 수 있기 때문에 아이디 식별할 이름을 기재한다.
실제로 블로그나 웹 사이트에 Google Custom Search Engine을 달 수도 있지만 이 페이지 처럼 개인의 검색 페이지를 별도로 만들 수 도 있고 이 때에도 “Search engine name”에 입력한 것이 사이트의 제목이 된다.
별도의 검색 사이트도 쓸만 한 것 같다.

Search engine에 대한 설명을 기술하고 이 것은 개인 검색 페이지에서 이 때 작성한 내용이 나타난다.

이 것은 검색 결과에 keyword를 적용함으로써 좀 더 focusing된 검색 결과를 제공하기 위함이다. “Learn more”를 클릭하면 좀 더 자세한 설명을 볼 수 있다.
만약 이 블로그에 적용한 것 처럼 특정 몇 사이트 내에서만 검색을 한 다면 keywords를 기재할 필요는 없겠지만 전체 웹 사이트에서 검색을 한 다면 keywords를 입력함으로써 검색을 제공하는 사이트와 연관있는 검색을 할 수 있을 것이다.
즉, 꽃 가게 사이트라면 keyword를 “꽃 판매”와 같은 것으로 설정한다면 사용자가 “장미”로 검색을 했을 때 전체 웹 검색에서도 “꽃 판매”에 맞추어서 “장미”를 검색해줄 것이다.
“”으로 구분해서 하나 이상의 keyword를 입력할 수 있다.
나는 아래와 같이 keyword를 넣어 보았다. “STL” “C/C++ tips&tricks” 하지만 너무 일반적인 용어 (e.g. “Google”)과 같은 것은 넣을 필요가 없다고 권장한다.

korean으로 선택했다.

지정한 사이트에서만 검색할 것인지 전체 웹에서 검색하는데 지정한 사이트에서 중점적으로 검색할 것인지 아니면 전체 웹 사이트에서 검색할 것인지를 설정한다. 나의 목적은 블로그와 몇 군데 지정한 사이트 (e.g. team blog)에서만 검색하고 싶기 때문에 “Only sites I select”를 선택했다.

검색할 사이트들을 기술하면 된다. 아래와 같이 ‘*’을 붙여서 지정한 url의 모든 하위 페이지에서 검색할 수도 있다.

alones.byus.net/tt/*   
teamblog.joinc.co.kr/* 

물론 Google Custom Search Engine을 생성 후 사이트를 포함한 모든 내용을 수정할 수 있다.

검색 결과에 광고를 포함할 지 여부를 설정할 수 있다. “Show ads on results pages”를 선택해서 광고를 보여줄 것으로 설정하면 이 후 Google Adsense와 연계할 수 있다.

Step1에서 생성한 Google Custom Search Engine의 검색 창 코드와 결과 페이지를 확인하고 얻는다.

구글 개인화 검색 사이트 (Google Custom Search Engine) 에 다시 접속한다.
http://www.google.co.kr/coop/cse/

우측의 “manage your existing search engines” 클릭
manage your existing search engines

아래 그림과 같이 자신이 만든 Search Engine 목록이 나타난다. “homepage”는 해당 Search Engine의 개인 검색 페이지이고 “control panel”을 클릭하면 Search Engine의 관리 페이지로 이동한다. “control panel” 클릭

Control panel에서는 Search Engine에 대해서 여러 가지를 수정할 수 있다. 기본적인 것만 보면,

• Basics: Search Engine의 이름, 설명, keywords, 언어, Preferences 등을 수정할 수 있다.
• Code:검색 창과 검색 결과 페이지를 설정하고 해당 자바 스크립트를 얻을 수 있다.
• Make Money:검색 결과의 광고를 설정할 수 있고 Search Engine를 구글 애드센스와 연계하고 구글 애드센서의 채널까지 만들 수 있다.

코드는 크게 “개인 검색 페이지”와 “다른 사이트”, “구글 가젯”로 구분된다. 우리는 블로그에 Search Engine을 붙일 것이기 때문에 두 번째인 “Search box and search results code for your website” 을 클릭해서 펼친다.

원하는 디자인을 선택한 후 “Save Changes”를 클릭해서 스타일을 검색 창 자바 스크립트에 반영한다.

주의 할 것은 검색창 스타일과 검색 결과 지정, 광고 위치를 저장할 때 마다 자바 스크립트 코드가 변경된다. 즉, 변경 될 때 마다 해당 코드를 skin.html과 검색 결과 포스트에 복사하는 것을 잊지 말아야 한다.

검색 결과가 뿌려질 포스트를 하나 생성한다. 자신의 Search Engine에서 검색을 했을 때 위 포스트로 action이 취해져서 검색 결과가 나타나게 된다. 물론 블로그에서 검색을 하면 위 포스트가 로딩된다. 그리고 아래와 같이 블로그 포스트의 URL을 지정한다.

• 검색 창

“Paste this code in the page where you’d like your search box to appear.” 아래에 있는 코드가 검색 결과 창 코드이다. 필자의 경우 블로그 좌측 프레임의 width가 30이라서 size를 30으로 줄이고 붙였다. 이 코드를 테터툴즈 skin.html에서 원하는 위치에 복사한다.

• 결과 페이지

“Place this code in the page you’d like your search results to appear.” 아래에 이는 코드가 검색 결과 페이지를 위한 자바 스크립트 코드이다. 이 코드를 위에서 생성한 검색 결과용 포스트에 html 보기로 (보통 편집 창에서 “Edit” 클릭) 에디터 창 모드를 변경 후 복사한다.

Search Engine이 “Make money”를 클릭하면 기존 애드센스 사용자인지 신규 사용자인지를 물어보고,
기존 사용자라면 구글 애드센스 정보를 입력하라고 나온다. 입력 후 확인 (confirm) 메일이 발송되고 메일을 받고 메일 내용에 확인을 위한 url을 클릭하면 된다. 위 과정을 거치고 다시 Search Engine의 “Make money”를 클릭하면 구글 애드센서와 연결된 것을 확인할 수 있고 구글 애드센스 채널도 입력할 수 있다.

• Google Custom Search Engine

이 전에 yundream 님이 Google Custom Search Engine에 대해서 적용하시고 내용을 잘 정리해주신 포스트들이다.

• 구글 개인화 검색 붙이다
• 구글 개인화 검색 – google custom search