티스토리 구글 맞춤검색(CSE) HTML 설정, 사이드바·결과페이지까지 완성

티스토리를 오래 운영하다 보면 어느 순간 이런 고민이 생깁니다. “내 글이 쌓이긴 했는데, 방문자가 원하는 정보를 바로 못 찾고 그냥 나가버리는 거 아닐까?” 카테고리를 잘 정리해도, 글이 많아질수록 원하는 글을 찾는 길은 점점 복잡해지거든요. 특히 IT/리뷰/사용기처럼 키워드가 넓게 퍼지는 블로그는 더 빨리 체감됩니다.

저도 비슷한 느낌을 받았느데 글을 읽다가 “이 설정은 어디서 했더라?”, “이 오류는 전에 적었는데 제목이 뭐였지?” 같은 상황이 자주 나오는데, 방문자 입장에서는 대충 둘러보다가 결국 새 탭 열고 구글 검색으로 넘어가버리기 쉽습니다.

그렇게 되면 이탈률이 올라가고, 체류시간이 줄어들고, 내부 링크를 타고 더 읽게 만들 기회도 같이 사라져요. 결국 티스토리 SEO 관점에서도 손해가 됩니다.

그래서 선택한 게 티스토리 구글 맞춤검색(CSE)를 사이드바에 추가해주면 좀 이득을 볼 수 있습니다.

정확히는 구글에서 제공하는 Programmable Search Engine을 만들어서, 내 블로그 사이드바에 구글 검색창 Google Search Bar를 붙여두는 방식이죠. 방문자가 글을 읽다가 궁금한 키워드가 생기면, 페이지를 닫지 않고 블로그 안에서 검색하고, 검색 결과에서 다시 내 글로 이어서 이동할 수 있습니다.

게다가 티스토리 기본 검색은 스킨에 따라 노출이 애매하거나, 검색 품질이 아쉬울 때가 있는데, 구글 맞춤검색은 결과 품질이 꽤 안정적입니다. 내 도메인만 검색하도록 설정해두면 “웹 전체 검색”이 아니라 내 블로그 내부 검색처럼 동작해서, 방문자 경험이 확 좋아져요. 결과적으로 페이지뷰와 체류시간이 자연스럽게 늘고, 애드센스를 운영한다면 검색을 통한 흐름이 수익에도 간접적으로 도움이 될 수 있습니다.

그래서 이번에는 “그냥 검색창 하나 추가” 수준이 아니라, 티스토리 스킨이 바뀌어도 최대한 덜 깨지고, 모바일에서도 안정적으로 보이도록 티스토리 블로그용 HTML까지 포함해서 정리해보려고 합니다. 사이드바에는 검색창만 깔끔하게 두고, 검색 결과는 별도 페이지로 보내는 방식이라 레이아웃도 훨씬 편해요.

1) 준비: 검색결과를 보여줄 티스토리 페이지 만들기

티스토리 관리자에서 페이지를 하나 만들고(예: 제목 “검색”), 발행까지 해둡니다. 이 페이지가 구글 검색결과를 뿌려주는 “결과 전용 페이지”가 됩니다.

발행 후 해당 페이지 주소(URL)를 복사해두세요. 예시는 이런 형태입니다.

• https://내블로그주소.tistory.com/pages/search
• 또는 https://내블로그주소.tistory.com/p/검색

2) PSE에서 코드 가져오기 전 체크

PSE(Programmable Search Engine) 관리 화면에서 검색 대상은 가능하면 내 도메인만으로 잡는 게 만족도가 좋습니다.

웹 전체로 풀어버리면 방문자는 검색 후 외부 사이트로 빠질 확률이 높아져요.

설정	추천 값	이유
Sites to search	내 티스토리 도메인	검색이 내 글로 연결
이미지 검색	선택	사이드바 폭 좁으면 끄는 게 깔끔
음성 입력	선택	모바일에서 아이콘 줄바꿈 생기면 OFF
레이아웃	Overlay 또는 Two-page	티스토리 스킨과 충돌이 적음

3) 티스토리 사이드바용 HTML (검색창만)

아래 코드는 사이드바에 검색창만 띄우고, 검색결과는 아까 만든 “검색 페이지”로 보내는 형태입니다.

티스토리에서는 보통 HTML 배너출력 모듈에 그대로 붙여 넣으면 됩니다.

필수로 바꿀 것

• YOUR_CX : PSE의 Search Engine ID
• RESULTS_URL : 티스토리에서 만든 검색 페이지 URL

<!-- Google Programmable Search Engine: Sidebar Searchbox Only -->
<script async src="https://cse.google.com/cse.js?cx=YOUR_CX"></script>

<!-- 사이드바 폭 대응용(가볍게) -->
<style>
  /* 기본 컨테이너 폭 꽉 채우기 */
  .gcse-box { width: 100%; }

  /* 구글 검색박스 내부 스타일은 스킨마다 조금씩 다를 수 있어, 최소한만 건드립니다 */
  .gsc-control-cse, .gsc-control-cse * { box-sizing: border-box; }
  .gsc-control-cse { padding: 0 !important; border: 0 !important; background: transparent !important; }

  /* 입력창이 사이드바에서 찌그러지는 케이스 최소화 */
  .gsc-input-box { height: 40px !important; }
  input.gsc-input { font-size: 14px !important; }
  .gsc-search-button-v2 { padding: 10px 12px !important; }
</style>

<div class="gcse-box">
  <div class="gcse-searchbox-only"
       data-resultsUrl="RESULTS_URL"
       data-newWindow="false"></div>
</div>

4) 검색결과 페이지용 HTML (결과만 출력)

아까 만들어둔 티스토리 “검색 페이지” 본문(HTML 입력 가능한 편집 모드)에 아래 코드를 넣으면, 사이드바에서 검색한 결과가 이 페이지에 표시됩니다.

필수로 바꿀 것: YOUR_CX

<!-- Google Programmable Search Engine: Results Only Page -->
<script async src="https://cse.google.com/cse.js?cx=YOUR_CX"></script>

<style>
  /* 결과 영역이 본문 폭에 자연스럽게 맞도록 */
  .gsc-control-cse { padding: 0 !important; border: 0 !important; background: transparent !important; }
  .gsc-result-info { font-size: 13px !important; }
  .gsc-webResult .gsc-result { padding: 14px 0 !important; border-bottom: 1px solid rgba(0,0,0,.08) !important; }
  .gs-title a { text-decoration: none !important; }
  .gs-snippet { line-height: 1.6 !important; }
</style>

<div class="gcse-searchresults-only"></div>

5) 티스토리 사이드바에 붙이는 위치

티스토리 관리자에서 사이드바로 들어가 HTML 배너출력을 추가한 다음, “3) 사이드바용 HTML”을 그대로 붙여넣고 저장합니다. 검색창은 보통 프로필/카테고리 위쪽에 두는 게 사용률이 높습니다.

자주 막히는 문제 빠른 체크

증상	원인	해결
검색창이 안 뜸	cx 값 오류/스크립트 중복	YOUR_CX 재확인, 동일 페이지에 cse.js 중복 삽입 제거
모바일에서 버튼 줄바꿈	사이드바 폭/스킨 CSS 충돌	레이아웃 심플로, 음성 입력 OFF, 위 CSS 유지
결과 페이지가 비어 있음	결과 페이지에 results-only 코드 누락	“4) 결과 페이지용 HTML” 삽입 확인
검색결과가 내 글이 적음	검색 대상이 넓게 설정됨	PSE에서 검색 대상 도메인 제한

FAQ

Q. 사이드바에 검색창만 넣고, 결과는 구글 페이지로 보내면 더 쉽지 않나요?

쉽긴 한데, 방문자가 결과를 보고 외부로 빠지는 비율이 커집니다. “내 블로그 결과 페이지”로 받으면, 검색 후에도 블로그 안에서 이동이 이어져서 체감이 확 달라져요.

Q. 스킨을 바꾸면 검색창이 깨질 수 있나요?

가능합니다. 그래서 위 HTML은 스킨 CSS와 충돌을 최소화하도록 아주 얇게만 스타일을 건드렸고, 너비/박스모델만 안전하게 잡아둔 형태입니다.

Q. API(Custom Search JSON API)랑 사이드바 검색창은 같은 건가요?

역할이 다릅니다. 사이드바 검색창은 “웹에 붙이는 검색 요소(임베드)”이고, API는 앱/서비스에서 JSON으로 결과를 받아 UI를 직접 그릴 때 씁니다. 쿼터도 API 쪽은 기본 무료가 작아서, 대량 트래픽이면 캐싱/과금 설계를 같이 봐야 합니다.