블로그 낱장 페이지 상단에, 직전 포스트 제목 각 1개씩 추가

지난달에 랄라라님 블로그(#2024-04-01: 현재 삭제됨)의 아이템 페이지(낱장 페이지)들을 읽어보다가, 이 블로그 핵 (Blogger Hack) 을 처음으로 발견했다. 유용한 핵이었다.

사이드바의 "Previous Posts(직전 게시물/이전 게시물)"에, 지난 글들이 10개씩 있기에는 하지만, 방문객의 시선이 사이드바에까지 잘 가지 않는다. 간다고 하더라도 스크롤을 해야 하기에 불편하다. 그래서 "previous posts"가 아닌 "a previous post" 하나를 페이지 상단에 추가하는 것이 이상적이었다.

블로거닷컴에는, 이전 게시물(Previous Posts) 10개를 출력하는 코드가 물론 있지만, 1개만 출력하는 것은 어떻게 하는지 알 수 없었다.

블로거 핵 사이트들에, 제목 1개만 출력하는 코드가 있었다. 보통의 방식으로 10개를 모두 출력한 후, 그 중 9개는 보이지 않게 감추어 버리는 것이 골자였다. CSS의 visibility:hidden 속성으로 감추는 것이었다.

이것이 그 코드:


그런데...

CSS의 문제

문제가 있는데, visibility:hidden 속성을 사용하면 구글이 그 사이트를 스팸으로 간주해 버린다는 뉴스(?)가 예전에 있었다. 적어도 페널티(penalty)를 준다는 이야기였다. 물론 오보일 수도 있었다. 구글로 visibility:hidden 에 대해 검색을 해 보았는데, 페널티를 준다는 주장과 괜찮다는 주장이 맞서고 있었다. 괜찮다는 주장이 좀더 많은 것 같았지만 걱정스러웠다. 그래서 오랫동안 망설였다.

※ 물론 현재 블로거닷컴이 "네비게이션 바를 만드는 코드"에 visibility:hidden 속성 하나를 강제로 넣어 놓았지만, 이상은 없었다.

조금은 불분명한 해결책

이런 생각이 떠올랐다. CSS를 사용해서 웹페이지의 요소를 감추는 방법은 visibility:hidden 말고도 또 하나가 더 있었다. display:none 이라는 속성이 있었다. visibility:hidden 과 거의 비슷한 것이다. visibility:hidden이 요소를 감춘 후 그 빈 공간을 여전히 확보해 두는 것에 비해, display:none 은 모든 것을 깨끗이 없애 버리는 차이가 있다.

빈 공간이 필요 없기에 display:none이 더 이상적이었다. 또한 display:none 은 페널티 문제가 없는 것 같았다. 구글에서 검색을 해 보아도, display:none 에 패널티를 주느냐는 문의만 있을 뿐, 준다는 주장은 없었다.

실제로 해 보니 display:none 으로도, 위에서 말한 블로거 핵이 아주 잘 작동했다. 확실하진 않지만 이것으로 페널티 걱정을 덜 수 있을 것 같다.


최종적으로 다음과 같은 템플릿 코드가 완성되었다:


원래 템플릿(Son of Moto)의 <div id="main"> 바로 밑에 위의 코드를 넣었다. 페이지의 본문 최상단에 해당하는 곳이다.

결과는 여기 (페이지 본문의 상단) (# 2024-04-01: 현재는 코드를 삭제한 상태임.)



기타:

직전 게시물 제목 1개 위에 previous post 라는 작은 문자열을 붙였다. 이 previous post 를 클릭하면 같은 페이지 사이드바의 "10개짜리 Previous Posts"로 이동하도록 했다. 그리고 전체적으로, 우측으로 정렬시켰다. 또한 제목 글자를 약간 희미하게 했다. 그래서 코드가 좀 복잡해졌다.

사용된 스타일은 다음과 같다:


마우스로 제목을 누르면 제목글자들이 약간 움직이게 했는데 위의 wasabi-push 스타일을 사용하면 된다. 물론 사용하지 않아도 아무 상관없다. wasabi 라는 것은 다른 사람이 만든 스타일과 중복되지 않게 하기 위해 필자가 사용하는 고유ID에 지나지 않는다. 자신의 아이디로 바꾸어 사용하는 것이 좋다. (예: mupama-push)

visibility:hidden 과 display:none 에 대한 고찰

구글 같은 검색 업체의 입장에서 보면, visibility:hidden 속성의 텍스트를, 검색 결과에 포함해야 할지 안해야 할지 모호하다. 단지 방문객에게 보이지 않게 렌더링되어 있을 뿐이지 어디까지나 엄연히 존재하는 텍스트이기 때문이다. 따라서 스패머들이 이 속성을 악용하는 일이 많다. (즉, 방문객이 보는 페이지와 검색로봇이 보는 페이지를 서로 다르게 만드는 것이다. 검색로봇은 페이지를 직접 보지는 못하고, HTML/CSS 코드만을 읽을 수 있을 뿐이다.)

※ '검색로봇'이란 마징가Z나 로보트 태권V 같은 물리적 로봇이 아니라, 웹사이트 내용을 수집해 가는 소프트웨어를 말한다. 구글의 검색로봇은 구글봇(Googlebot)이라고 부른다.


그러나 display:none 은 웹페이지 특정 요소의 출력을 아예 무효화시키는 것이기에, 검색로봇은 망설이지 않고, 이러한 속성을 가진 텍스트와 링크들을 깨끗이 무시해 버릴 것이다.

구글의 결벽증적인 성격으로 보아서는 visibility:hidden 도 무시할 것 같지만, 무시하지 않고 불이익을 준다는 견해도 있어서 조심스럽다. (여기서 말하는 '무시'란 부정적인 의미에서가 아니라, visibility:hidden 속성을 가진 텍스트를 아예 없는 것으로 간주하고 다음으로 무사히 넘어간다는 의미)

아무튼 그럭저럭 만족스러운 결과가 나왔다. 이전 포스트로의 네비게이션이 아주 편해져서 좋았다.

---

2006-06-23 업데이트
위의 코드를 정밀 분석해 보니, 버그가 좀 있더군요:

틀림: ...</span></span></a>...
맞음: ...</span></a></span>...

물론 눈에 띄는 버그는 아니지만 고쳤습니다. 또한 코드를 약간 최적화시켰습니다.

새 코드: