구글 맞춤검색 (CSE) 결과에서 광고가 표시되지 않도록 하기

구글 맞춤검색 (CSE: Custom Search Engine) 기능을 사용하면 검색을 구글에서 담당하므로 보다 관련성 있는 검색 결과를 사용자들에게 제시할 수 있습니다. 뿐만 아니라 여러 사이트의 검색 결과를 표시할 수도 있으므로 여러 개의 블로그나 사이트를 운영하는 경우 묶어서 함께 검색이 되도록 할 수도 있습니다.

티스토리, 워드프레스 등과 같이 스크립트를 추가할 수 있으면 구글 맞춤검색 기능을 추가할 수 있습니다.

티스토리 블로그에 구글 맞춤검색 기능 추가

 

여러 개의 워드프레스 사이트를 검색하는 방법 - 워드프레스 기본

현재 이 티스토리 블로그에서는 티스토리의 기본 검색 시스템 대신 구글 맞춤검색 시스템을 이용하고 있습니다.

구글 맞춤검색 결과에서 광고 숨기기

구글 커스텀 서치(Custom Search) 페이지에서 해당 구글맞춤검색 엔진에 대하여 광고를 표시하여 수익을 얻을 수도 있습니다.

구글 CSE 수익화 - 비활성화

저는 Search Engine Monetisation(검색엔진 수익화) 기능을 비활성화(OFF)한 상태입니다. 만약 ON으로 설정하면 구글 AdSense ID가 연결되어 수익을 얻을 수 있습니다. (제 노트북의 크롬 브라우저에서 구글 계정에 로그인하면 크롬 브라우저 언어는 한국어인데 구글 CSE 페이지의 인터페이스가 왜 영어로 표시되는지 모르겠습니다.)

구글 CSE 수익화 설정 - 활성화. 구글 애드센스 계정에 연결됨.

이 기능을 OFF로 설정해도 구글 맞춤검색 엔진으로 검색한 결과에 광고가 표시될 수 있습니다.

구글 CSE 검색 결과 상단에 광고가 표시되는 경우가 있다.

광고가 표시되는 경우 다음과 같은 CSS 코드를 사용하여 광고를 숨길 수 있습니다.

/* 구글 CSE 광고 숨기기 */
.gsc-adBlock {
    display: none !important;
}

이 코드를 추가하면 검색결과 페이지 상단에 표시되는 광고가 사라집니다.

구글 CSE 검색 결과에서 더 이상 광고가 표시되지 않는다.

참고로 검색 결과를 Overlay로 표시하도록 설정하였고 검색 결과 창이 헤더에 가려지는 경우에는 다음과 비슷한 코드를 사용하여 검색 결과 페이지 창을 아래로 이동시킬 수 있습니다.

저는 워드프레스 Divi 테마에 구글 CSE 코드를 추가하니 검색 결과 상단 일부가 헤더에 가려지는 현상이 나타났습니다. Divi 테마 개발자인 Elegant Themes에 이 문제를 문의하니 다음과 같은 코드를 알려주었습니다.

html .gsc-results-wrapper-visible {
    margin-top: 80px;
}

참고:

SEO(검색엔진최적화)에 유리한 웹사이트 메뉴 구조