목공책 하나 들이셔요~

2014년 12월 1일 월요일

구글 Blogger 검색에서 글 제목이 먼저 보이게 하려면?

제 블로그를 <다음>에서 <구글 블로거>로 옮기면서 삽질한 경험들을 조금씩 정리해서 공개하고 있습니다.  오늘은 그 중에서 검색 유입을 늘릴 수 있는 간단한 조치를 소개드릴까 합니다.

블로그를 처음 개설하고 방문자를 기다리는 마음은, 마치 가게를 오픈하고 손님을 기다리는 마음과 같습니다.  사람들의 왕래가 많은 길거리에 위치하는 것도 중요하고,  가게의 간판이나 캐치 프레이즈도 사람들의 시선을 끌도록 해야 합니다.  가장 중요한 것은 무엇을 하는 곳인지 한눈에 알아볼 수 있도록 하는 겁니다.

이런 점에서 구글 블로거 서비스의 블로그 포스트 등록 정책에는 약간의 문제가 있습니다.  예를 들어 제 블로그에서 인기글 중의 하나인 "나사못 완전 정복!"이라는 글이 검색되도록,  구글에서 "나사못 완전정복"이라고 검색어를 입력해 봅니다.   그러면 아래와 같이 검색 결과가 출력됩니다.

제 블로그의 이름인 "Bittersweet Story"가 포스트 제목인 "나사못 완전 정복!"에 앞서 나옵니다.  검색하는 사용자 입장에서는 제 블로그의 제목 보다는 포스트의 제목이 더 중요합니다.  포스트의 제목을 보고 원하는 정보인지를 확신할 수 있어야 검색을 한 사용자가 링크를 클릭합니다.

행여나 블로그의 제목이 훨씬 더 길거나,  제목이 긴 경우에는 구글 검색결과에서 뒷부분이 잘려나갈 수도 있습니다.   제가 알기로 구글 검색은 검색 결과의 제목은 70바이트 만을 잘라서 표시하며,  아래 설명부에는 10단어 정도만을 표시합니다.  이런 특성을 잘 이해해야 사용자의 클릭 확률을 높일 수 있습니다.

왜 블로그 이름이 먼저 나오는가?

그렇다면 구글 검색은 블로그의 어떤 정보에서 제목을 정하는 걸까요?   당연하게도 블로그 포스트의 URL이 제공하는 HTML에서 <head>부에 포함된 <title> 태그의 내용을 취해서 검색 결과의 제목으로 삼습니다.

실제로 위에 예로 든 블로그 포스트의 소스를 들여다 보면 아래와 같이 <title>태그 내에 "Bittersweet Story: 나사못 완전 정복!" 이라는 내용이 보입니다.  이 내용이 바로 검색 결과의 제목으로 전달되는 겁니다.  그렇다면 이 <title> 태그를 생성하는 부분을 수정하면 되겠지요.


구글 블로거는 사용자에게 블로그 저작의 자유도를 가장 많이 제공하는 서비스 중의 하나입니다.  당연히 생성되는 HTML의 <title>태그도 변경할 수 있습니다.  그것은 블로거의 템플릿 편집을 통해 가능합니다.

관리하는 블로거의 "디자인"을 클릭해서 왼쪽 메뉴에서 "템플릿"을 선택합니다.  그러면 아래 그림과 같은 화면이 나옵니다.  여기서 "HTML 편집"이라는 버튼을 클릭하여 편집모드로 들어갑니다.


<title>태그는 <head>태그 내에 있기 때문에 해당 부분은 HTML 편집창의 앞부분에서 찾을 수 있을겁니다.  바로 아래 그림과 같이 <title>태그의 내용은 <data:blog.pageTitle/>로 되어 있습니다.


blog.pageTitle은 구글 블로거가 사용하는 템플릿 시스템에서 사용하는 일종의 변수인데,  이 변수는 디폴트로 "<data:blog.title> | <data.blog.pageName/>"으로 정의되어 있습니다.  이렇게 블로그 제목 | 포스트 제목"으로 정의되어 있으니 앞서 언급한 바와 같은 검색 결과가 나오는 것이죠.

블로그 포스트의 title 변경하기 

그렇다면 <title>태그의 내용을 <data:blog.pageName/> | <data:blog.title/>로 변경하면 원하는 대로 포스트 제목이 먼저 나오고, 뒤에 블로그 이름이 나오겠지요.  그런데 그렇게 단순하지는 않습니다.  이 템플릿은 블로그 포스트를 보는 화면 뿐 아니라,  블로그의 첫 페이지인 인덱스 화면, 검색 결과 화면, 라벨 정렬 화면 등을 모두 정의합니다.

예를 들어 블로그에 처음 들어왔을때 보이는 인덱스 화면에는 여러개의 포스트가 나열되기 때문에 특정 블로그 포스트 이름을 지정할 수 없습니다.  그래서 <data:blog.title/>이라는 변수가 정의되지 않는 상태입니다.   이로 인해 의도하지 않은 오류가 발생할 수 있습니다.

이 문제를 해결하기 위해서는 블로거 템플릿의 조건 구문과 <data:blog.pageType> 변수를 사용해야 합니다.  blog.pageType은 해당 요청이 블로그의 어떤 형식을 보여주는 뷰인지를 지정합니다.

blog.pageType에는 index, item, static_page, archive 등이 있습니다.  이 중에서 index는 홈페이지나 검색결과, 라벨 선택 등으로 여러개의 포스트가 나열되는 경우를 의미합니다.   그리고 item은 실제로 하나의 블로그 포스트만 표시되는 경우입니다.  보통 index에서 포스트 제목을 클릭하여 item 페이지로 넘어가지요.

그외 static_page는 블로그의 페이지 항목을, archive는 블로그 보관함을 선택할 경우의 페이지 타입입니다.

자 그렇다면 페이지 타입이 item인 경우에만 우리가 원하는 대로 포스트 제목에 이어 블로그 제목이 나오도록 하고, 그 외의 경우에는 원래대로 하게 하면 되지요.  그래서 위의 <title> 태그 부분을 <b:if> 구문을 포함하여 아래와 같이 바꿉니다.  원래 내용은 코멘트로 처리했으니 쉽게 구분할 수 있을 겁니다.


말 그대로 pageType == item인 경우에는 <title>이 <data:blog.pageName/> | <data:blog.title/>이 되고, 그 외의 경우에는 원래대로 <data:blog.pageTitle/>이 되는 겁니다.

이렇게 변경하고 나서 적용을 한 후 해당 블로그 포스트의 HTML 소스 코드를 보면 아래와 같이 의도한 대로 블로그 포스트 제목에 이어서 블로그 이름이 나옴을 볼 수 있습니다.


그럼에도 불구하고 구글 검색 결과에서 이러한 내용이 바로 반영되지는 않습니다.  저의 경우는 하루 정도 지나니 검색 결과에 제대로 반영되기 시작하더군요.  하루 지난 뒤에 같은 항목을 검색해 본 결과입니다.


이렇게 블로그 포스트의 제목이 먼저 나오니, 제목이 길어도 잘릴 가능성이 적고,  사용자가 해당 게시글에 대한 내용을 빠르게 인지할 수 있어 더 많은 방문을 유도할 수 있는 겁니다.

간단하게 수정할 수 있는 사항이지만, 블로그의 운명을 바꿀 수도 있는 중요한 내용일 수도 있습니다.

댓글 4개:

  1. 유용한 정보 감사합니다.
    이렇게 쓰니 마치 자동으로 써진것같네요 ^^
    꼼꼼이 읽고 제 블로그에도 적용해보았습니다. 내일이면 잘 작동되는지 저도 확인할 수 있겠네요.
    감사합니다 ^^

    답글삭제
    답글
    1. 도움이 되셨다니 기분이 좋네요. 근데 우리나라 분 중에도 구글 Blogger 쓰시는 분이 계시군요. 놀랐습니다. ^^

      삭제
    2. 같은생각일지 모르지만 네이버 다음은 쫌 거시기 하자나요 ^^
      그리고 pc , 모바일에서 똑같이 사용가능하고 글수정도 되고요 ^^
      그런데.... 위에 글처럼 수정은 했는데 아직도 구글에는 아직 적용이 안되네요..

      삭제
    3. 구글이라는데가 워낙에 데이터 처리 로직을 알려주지 않는데라서요. 여러가지 요인이 있겠지만, 트래픽이 어느 정도 되는 그리고 업데이트가 자주 되는 곳을 우선적으로 처리하지 않을까 생각되구요. (물론 님의 블로그가 더 활성화된 곳일 수도 있지만...) 아니면 구글 웹마스터 도구를 이용하여 어떻게 해보면 (수집 요청?) 되지 않을까라는 생각이 들기도 합니다. 느긋하게 기다리는 것이 정답일 수도 있구요.

      삭제