회원가입

로그인

아이디
비밀번호
ID/PW 찾기
아직 회원이 아니신가요? 회원가입 하기

구글 맞춤검색 홈페이지 적용하기

Profile
마래바

사이트를 운영하면서 중요한 것 중의 하나가 검색인데,...

XE 로 구축하고 나서 보니 통합검색 기능이 작동하지 않는다. 원인은 모름..

그래서 적용해 본 구글 맞춤검색..

구글 맞춤검색 사이트는 여기서 .. https://www.google.com/cse/all
(애드센스 계정을 가지고 있어야 하는 듯 싶다.)

1. 필요한 검색엔진을 만든다.

예를 들어 항공여행정보 사인트에 대한 검색을 위해 '항공여행정보 검색' 이라는 검색엔진을 만들었다.



2. 사이트에 넣을 레이아웃 선택

이 사이트의 경우 메뉴 바 오른쪽에 구글 검색창을 만들고 가운데 콘텐츠 들어가는 부분에 검색결과를 보여주기 위해 다음과 같은 레이아웃을 선택했다.


만약 한 화면에서 검색창과 검색결과를 보여주고자 한다면 '전체 화면' 레이아웃을, 열을 나누어서 보여주고 싶으면 '두 열'을 선택하면 된다.


3. 코드에서 검색창, 검색결과 세부사항 설정


검색결과를 보여줄 페이지를 따로 만들어 주소를 입력한다. ( https://www.airtravelinfo.kr/xe/g_search )

나머지는 수정하지 않아도 된다.


4. 검색창 코드, 레이아웃(layout.html, 이 사이트는 스케치북 레이아웃 사용)에 삽입



5. 검색결과 코드, 페이지(https://www.airtravelinfo.kr/xe/g_search )에 삽입



6. 기타

나머지 테마나 소소한 박스 색상 변경 등은 구글 맞춤검색 설정창에서 수정하면 바로 결과로 반영된다.


다음은 구글맞춤검색에서 '수하물'이라는 키워드 검색결과 화면이다.



구글맞춤검색을 이용하면, 아무리 많은 검색이 이루어진다 해도 사이트에 부담을 주지 않는다. 검색결과를 보여줄 때 다시 refresh 되는 과정을 거치긴 하지만.. 그리고 얼마만큼 검색이 이루어졌는지도 구글맞춤검색 사이트에서 확인할 수 있다.


< 추가 사항 >

기본 코드로 구성하면 구글검색창 바깥에 'x' 표시가 나타난다. 이는 검색하고자 하는 단어를 삭제할 때 사용하는 것인데, 창 바깥에 있어 보기가 좋지 않다.

아래 코드를 css 파일에 삽입하면 'x' 를 검색창 안으로 넣을 수 있다.

div.gsc-clear-button { position: absolute; left: 200px; top: 15px; }



xpressengine.com 팁 게시판에 '몽실아빠'님께서 올려 주신 내용을 이 사이트를 기준으로 다시 구성한 것으로, 나중에라도 잊어 먹지 않기 위해 기록해 둔다.


댓글
2
  • 홍길동
    홍길동
    내댓글
    2015.07.11
    올려주신 글 잘 보았습니다. 정말 감사드립니다.
    근데 3번 검색결과 세부지정 이부분이 저는 안보입니다. html 예제보기만 보입니다.
    1년정도 이전내용이라 구글 맞춤검색 페이지가 바뀐건지...
    답변주시면 너무 감사드리겠습니다.^^;
  • 홍길동
    마래바
    작성자
    2015.07.11
    @홍길동 님에게 보내는 답글
    확인결과 변한 부분은 없구요.
    2번 단계에서 우측 하단의 "저장 및 코드 생성" 단추를 누르시면 3번 화면이 나옵니다.
    그리고 나서 '검색결과 세부정보' 단추를 눌러 설정을 추가하시면 됩니다.
Profile

로그인

아이디
비밀번호
ID/PW 찾기
아직 회원이 아니신가요? 회원가입 하기