키스세븐지식
[구글 맞춤검색 검색엔진 - 자신의 검색창을 이용하는 방법]
구글은 검색엔진 회사답게 자사의 검색엔진을 이용한 서비스를 하고 있습니다. 대표적인 것이 바로 구글 맞춤검색 검색엔진입니다.
간단히 요약하자면, 구글의 검색 기능을 다른 사이트/홈페이지에서 빌려다 사용할 수 있다고 하겠습니다. 물론 인터넷에서 구글 맞춤검색 신청과 검색창 달기를 찾아보면 매우 많은 설명을 볼 수 있습니다. 하지만 대부분 검색창 달기만 설명하고 있으며, 마치 자신의 사이트인 것처럼 검색페이지에 자연스럽게 연결되는 방법에 대해서는 설명문을 찾기가 힘듭니다.
이런 부분은 구글 도움말에서도 역시 찾아보기 힘듭니다. 그래서 이 문서에서는 구글 맞춤검색 검색엔진을 자신의 사이트의 검색엔진인 것처럼 활용하는 방법에 대해서 설명합니다. (주 내용이 자연스러운 검색 결과 삽입하기이므로 구글 맞춤검색 신청이나 검색창 달기 부분은 생략합니다. 이런 정보는 검색을 하면 많이 있으니, 검색해서 활용하기를 바랍니다.)
구글 맞춤검색의 설정하기
우선, 구글 맞춤검색을 방문하여 맞춤검색을 신청합니다.
위의 링크 외에도, 애드센스를 허락받았다면 애드센스에서 맞춤검색을 신청할 수도 있습니다.
로그인을 한 후 구글 맞춤검색엔진을 신청하고 나면 이제부터 실제 적용부분입니다. (위의 사이트를 방문한 후 이 글과 함께 비교하면서 봐야 이해가 쉬울 것입니다.)
구글 맞춤검색의 메뉴에서 "새 검색엔진"에 들어가서 필요한 설정을 하고 신청을 합니다. 그후, 메뉴에서 "검색엔진 수정"을 찾아 갑니다.
신청했던 검색엔진이 메뉴 아래에 보이면 "설정", "디자인", "검색 기능", "통계 및 로그" 메뉴가 보입니다. 우리가 사용할 것은 그 중에서 "검색 기능"입니다.
"검색 기능"에 들어간 후 오른쪽의 탭을 보면 "프로모션", "상세검색", "자동 완성", "동의어", "고급"이 있는데, 여기에서 "고급"이라는 곳에서 필요한 것을 해결할 것입니다.
오른쪽 상단 탭에서 "고급"을 선택하면 아래에 "검색결과 정렬", "웹검색 설정", "웹검색 제한", "이미지검색 설정" 등이 보입니다. 특히 웹검색 설정에서는 "링크"를 통해 화면 전체를 바꿀 것인지, "탭"을 통해서 새 창으로 가게할 것인지도 고를 수 있습니다. 링크를 할 때 새창으로 보내고 싶다면 "링크"를 선택한 후, 그 아래에서 "Link Target"을 찾아서 "blank"라고 입력해 줍니다.
구글 맞춤검색의 폼name 입력하기
이제 가장 중요한 처리를 할 단계입니다.
구글 맞춤검색엔진의 웹검색 설정에서 링크 설정의 마지막에 보면 "Query Parameter Name"라는 것이 있습니다. 이 곳에 자신의 사이트에서 코드입력된 검색폼(form)의 이름(name이라고 적힌 것)을 복사해서 붙입니다.
이렇게 검색 파라메터 네임을 설정해 주면,
굳이 구글 검색창을 따로 달지 않아도 자신의 검색창에서 호출한 검색쿼리를 구글 맞춤검색 코드가 받아들여서 검색 결과를 보여주게 되는 것입니다. 즉, 자신의 사이트의 검색창의 폼네임과 구글 검색결과 파라메터가 같아야만 사용할 수 있습니다.
대표적인 검색창 폼의 코드 소스는 아래의 두 경우 등입니다.
<검색창 소스 코드 1> 이 소스코드는 티스토리의 내부 소스 예입니다.
<s_search>
<input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { }" class="text" placeholder="검색어를 입력하세요"/>
<input value="검색" type="button" onclick="" class="submit"/>
</s_search>
<검색창 소스 코드 2> 이 소스코드는 그누보드의 내부 소스 예입니다.
<form name="fsearchbox" method="get" action="<?php echo G5_BBS_URL ?>/search.php" onsubmit="return fsearchbox_submit(this);">
<input type="hidden" name="sfl" value="wr_subject||wr_content">
<input type="hidden" name="sop" value="and">
<label for="sch_stx" class="sound_only">검색어 필수</label>
<input type="text" name="stx" id="sch_stx" maxlength="20" placeholder="">
<button type="submit" id="sch_submit" value="검색"><i class="fa fa-search" aria-hidden="true"></i><span class="sound_only">검색</span></button>
</form>
여기에서 빨간 부분으로 강조표시된 것이 name이라는 파라메터 값입니다. 이 값을 위에서 설명한 구글 맞춤검색엔진 설정에서 입력해야 자신의 검색창에서 구글 맞춤검색을 불러올 수 있습니다. 티스토리와 그누보드를 예를들었지만, 티스토리의 는 자체 변수값이라서 조금 더 처리를 해야하고, 그누보드는 그대로 바로 적용할 수 있습니다.
이것이 다 입니다. 이것으로 자신의 검색창에서 구글 맞춤검색 엔진의 처리 결과를 호출하는 것이 가능합니다.
자신의 홈페이지에 검색처리 코드 넣기
그 외에 마지막으로 한 가지 더 반드시 해야 할 것이 있는데, 당연하게도 구글 맞춤검색의 검색처리 코드입니다. 이것은 구글의 CSE를 방문하여 직접 복사해 오면 됩니다. 아래가 그 예입니다.
<script>
(function() {
var cx = '구글에 신청할 때 이곳에 숫자로 된 자신만의 코드번호가 삽입됩니다.';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only></gcse:searchresults-only>
위의 코드를 복사해 갈 필요는 없습니다. 구글 맞춤검색 CSE에 방문하여 자신만의 코드가 적힌 소스를 따로 받아야 합니다. 구글은 다른 사람의 검색코드를 함부로 사용하지 않기를 바라고 있습니다.
이 코드를 검색 내용이 나오길 원하는 html문서나 php문서 등에 그대로 삽입하면 됩니다.
만약 구글 검색창을 새로 달고 맞춤검색을 이용하는 것이라면 위에서 말한 name부분이 필요없습니다. 이 문서에서 name을 언급하는 것은, 구글의 검색창을 달지 않고도 그누보드 등에 이미 장착된 검색창을 이용하여 구글의 검색 결과를 가져오기 위함입니다.
