구글 검색엔진 검색바 광고와 티스토리 블로그 검색 바 충돌 현상 해결 방법
11월 11일 부터 구글 애드센스 광고 단위로 구글 검색바를 블로그에 붙여서 블로그 안에서 구글 검색 결과를 표시할 수 있는 기능이 추가되었습니다.
구글 검색 결과 안에 광고가 표시되기 때문에 구글 검색 결과 + 애드센스의 조합을 내 블로그 안에서 표시해주는 하이브리드 광고 방식입니다.
기존의 애드센스 광고 단위를 새로 추가해서 티스토리 블로그에 애드센스 광고 코드를 붙여서 광고를 표시하는 것처럼
구글 검색 바를 블로그에 추가할 수 있습니다.
다만 이 구글 검색바를 추가하는 스크립트를 추가하면 티스토리 블로그 검색 기능과 충돌이 있습니다.
충돌 현상은 티스토리 블로그 검색 기능이 동작하지 않습니다. 블로그 검색어를 입력하고 전송(엔터, 또는 검색 버튼/아이콘 클릭)하면 검색어 없이 검색 폼이 전송됩니다.
미리 말해두자면 대부분 레퍼런스 스킨과 사용자 배포 스킨에서 현재 사용하고 있는 사용하는 티스토리 블로그 검색 바의 구현 방식은 자바스크립트 없이 HTML과 CSS 만으로 스킨을 제작하고 배포하고 사용할 수 있도록 하기 위한, 일종의 사용자 편의를 위해서 구현된 방식입니다.
자바스크립트 코드를 티스토리 시스템 단에서 뿌릴 수 있도록 하기 위해 자바스크립트 코드를 뿌리는 치환자를 붙여넣어서 이벤트 처리를 하는 구조입니다.
편의성과 사용자 친화적인 면에서는 좋은 방법이지만, 지금의 급변하는 웹 환경에서는 상당히 낡고 말도 안되는 이상한 구현 방식입니다.
이 방식이 지금에 와서 구글의 검색 바와 충돌 현상이 발생하고 있는 것입니다.
온화한 해결 방법은 없습니다.
티스토리 구조가 낡아서 변화하는 환경에 대응이 안되고 있는 것이고, 새 치환자를 내놓거나, 치환자의 스크립트 코드를 개선하거나 해야 합니다. 구글의 검색 바가 바뀔리는 없으므로...
임시 방편으로 해결할 수 있는 방법을 안내합니다.
세가지 방법이 가능합니다.
1. 티스토리에 요청해서 블로그 검색바의 치환자 2개의 구현 코드를 변경
치환자 구현 코드 변경은 이용자 단에서의 수정이 없으므로 가장 간단하고 최선이지만 해달라고 요구해도 사실 언제될지 모릅니다.
산적한 이용자 요구 사항도 사실 거의 반영안되는 상태여서...
해달라고 요청할 생각도 별로 없습니다.
[##_search_name_##] => "search" 로 치환하는 입력 필드 이름을 "ti_search" 와 같은 다른 이름으로 변경
[##_search_onclick_submit_##] => 생성되는 자바스크립트 코드의 "search" 이름 선택자를 "ti_search" 로 맞춰 변경
수정할 내용은 간단하고, 근본적으로는 이게 맞는 방법일 겁니다.
티스토리 치환자 구조의 검색바엥 대한 레퍼런스 구현은 다음의 링크를 참조하면 됩니다.
tistory.github.io/document-tistory-skin/sidebar/search.html
2. 구글 검색바의 위치를 블로그 검색바 하단 위치로 변경
컨텐츠 영역 상단, 또는 컨텐츠 영역 임의의 위치가 대부분의 티스토리 스킨에서 최적입니다.
검색 결과가 컨텐츠 영역을 대신해서 뿌려지기 때문에 위화감도 없고 대부분 반응형 스킨에서 모바일 화면 지원까지 잘 됩니다.
!중요합니다.
반응형 스킨의 경우 헤더 영역과 사이드바 영역에 구글 검색 바를 붙이면 모바일 보기 화면에서 구글 검색 바와 충돌이 나는 경우가 많습니다. 비추입니다.
반응형 스킨 중 화면 스크롤시 헤더 영역이 상단에 고정되는 스킨 대부분이 모바일 화면에서 헤더 영역의 요소들과 구글 검색바가 겹치는 현상이 나타납니다.
사이드바 영역 또한 모바일 화면에서는 사이드바가 기본 상태에서 감춰지면서 검색바 자체가 표시되지 않게 됩니다.
구글 애드센스 코드들은 감추어진 화면에서는 광고나 UI 자체가 뿌려지지 않습니다.
3. 구글 검색바를 맨위에 그냥 두고 티스토리 검색바 자바스크립트 코드를 변경
스킨 수정 정도는 간단하게 할 수 있는 분들은 다음의 방법으로 임시 방편으로 블로그 최상단에 구글 검색 바를 그대로 두고 해결이 가능합니다.
1번으로 나중에 해결되면 원복하면 됩니다.
구글 검색바 추가 코드는
<script async src="https://cse.google.com/cse.js?cx=515090cbf630e3096"></script>
<div class="gcse-search"></div>입니다.
사용자 단에서 뭘 특별히 구글 애드센스 검색 바에 설정을 바꾸거나 할 수 있는 부분이 아얘 없습니다.
이 구글 검색 바는 다음과 같은 HTML 코드를 만들어냅니다.
관련 없는 부분은 다 생략하고 검색 바 입력 필드만 잘라내면 다음과 같습니다.
<td id="gs_tti50" class="gsib_a"><input autocomplete="off" type="text" size="10" class="gsc-input" name="search" title="search" id="gsc-i-id1" dir="ltr" spellcheck="false" style="width: 100%; padding: 0px; border: none; margin: 0px; height: auto; background: url("https://www.google.com/cse/static/images/1x/en/branding.png") left center no-repeat rgb(255, 255, 255); outline: none;"></td>name="search"
라는 "<input>" 태그의 이름("search")이 티스토리의 검색어 이벤트 처리 자바스크립트 코드와 충돌합니다.
티스토리는 블로그 검색바를 치환자 구조로 제공합니다.
애초에 이런 방식으로 제공하는거 자체가 말이 안되는건데, 조상 대대로? 이렇게 구현해서 써왔기 때문에 - 대충 10년전에 쓰던 방식입니다. - 현재도 이렇게 쓰고 있습니다.
티스토리 블로그 검색바는
<input type="text" name="[##_search_name_##]" value="[##_search_text_##]" placeholder="검색어를 입력하세요."
onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }">
<button type="submit" onclick="[##_search_onclick_submit_##]">검색</button>이렇게 블로그 검색 입력 바를 구현해 사용합니다.
대부분의 티스토리 스킨이 이 코드를 사용하고, 위의 코드를 보면 검색어 입력 폼을 전송하기 위한 이벤트 처리를 위해 아얘 치환자를 제공합니다. 레퍼런스 치환자 메뉴얼에서 제공하는 구조이기 때문에 거의 모든 스킨이 이 구조를 그대로 사용합니다.
제가 배포하는 스킨들도 모두 동일합니다.
맨 끝의 "onkeypress" 이벤트 처리를 하는 다음의 코드에서
if (event.keyCode == 13) {
[##_search_onclick_submit_##]
}"[##_search_onclick_submit_##]"
이 치환자는 블로그 페이지에서 다음과 같은 자바스크립트 코드로 뿌려집니다.
try{
window.location.href='/search/'+looseURIEncode(document.getElementsByName('search')[0].value);
document.getElementsByName('search')[0].value='';
return false;
}catch(e){
}
자바스크립트는 몰라도 되고 코드의
('search')[0].value
이 부분이 "search" 이름을 가진 첫 번째 입력 필드를 선택합니다.
블로그 검색 바 앞에 구글 검색 바가 위치하면 이 코드는 구글 검색 바의 입력 내용을 가져옵니다.
그래서 블로그 검색어가 빈 상태로 전송되고 아무것도 없는 블로그 검색 결과 화면이 표시됩니다.
구글 검색바를 꼭 그대로 페이지 최상단에 두어야 겠다면 티스토리 스킨 HTML 코드를 다음과 같이 변경해야 합니다.
먼저 아래 코드를 찾습니다. "_search_name_" 으로 검색해서 검색 결과가 있으면 치환자 구조로 블로그 검색 바가 구현된 스킨입니다. 없다면, 스킨 제작자가 자체적으로 자바스크립트를 사용해서, 또는 자바스크립트 없이 블로그 검색 바를 구현한 것입니다.
이 경우 구글 검색 바 문제가 있는 경우 2번으로 처리를 하거나 해당 스킨 제작자에게 문의를 해야 합니다.
검색어 검색 결과가 있으면 대부분 아래와 유사한 코드가 있습니다.
<input type="text" name="[##_search_name_##]" value="[##_search_text_##]" placeholder="검색어를 입력하세요."
onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }">
<button type="submit" onclick="[##_search_onclick_submit_##]">검색</button>
[##_search_name_##] => "ti_search" 로 변경. 1군데입니다,.
[##_search_onclick_submit_##] 을 다음 코드로 변경. 2군데입니다.
try{
window.location.href='/search/'+looseURIEncode(document.getElementsByName('ti_search')[0].value);
document.getElementsByName('ti_search')[0].value='';
return false;
}catch(e){
}
가독성 때문에 줄바꿈 처리를 했는데, 줄바꿈 없이 한 줄로 붙여넣으면 됩니다.
스킨 HTML 코드가 좀 지저분해 보이겠지만, 동작은 잘 합니다.
자바스크립트 코드를 수정할 줄 아는 경우에는
앞의 자바스크립트 코드(try{}catch(e){})를 스킨 자바스크립트 안에 다음과 같이 함수로 선언하고
function() dosearch(){
try{
window.location.href='/search/'+looseURIEncode(document.getElementsByName('ti_search')[0].value);
document.getElementsByName('ti_search')[0].value='';
return false;
}catch(e){
}
}
[##_search_onclick_submit_##] => dosearch()
로 대체를 해도 됩니다.