SEO와text-indent

구글에서는 숨겨진 텍스트 및 링크에 대해서 다음과 같이 가이드를 하고 있다. 

콘텐츠에서 텍스트 또는 링크를 숨기면 방문자에게 제공되는 정보와 검색 엔진에 제공되는 정보가 달라지므로 신뢰할 수 없는 사이트로 간주될 수 있습니다. 여분의 키워드와 같은 텍스트를 다음과 같이 여러 방법으로 숨길 수 있습니다.

• 흰색 배경에 흰색 텍스트 사용
• 이미지 뒤에 텍스트 포함
• CSS를 사용하여 텍스트 숨김
• 글꼴 크기를 0으로 설정

숨겨진 링크란 사이트 방문자의 눈에는 보이지 않고 Google 검색 로봇이 크롤링하도록 다음과 같은 방법으로 만들어진 링크를 말합니다.

• 링크가 숨겨진 텍스트로 구성됨(예: 텍스트 색상과 배경 색상이 동일)
• CSS를 사용하여 높이가 1픽셀에 불과한 매우 작은 하이퍼링크 생성
• 단락 중간에 사용된 하이픈 등과 같은 작은 문자 안에 링크를 숨김

사이트에 현혹적인 텍스트 및 링크를 고의적으로 숨긴 것으로 판단될 경우, 해당 사이트는 Google 색인에서 삭제되고 검색결과 페이지에 표시되지 않을 수 있습니다. 숨겨진 텍스트 또는 링크가 포함되어 있는지 확인하기 위해 사이트를 평가할 때 사이트 방문자의 눈에 쉽게 띄지 않는 항목, 즉 방문자가 아닌 검색 엔진만을 위한 텍스트나 링크가 있는지 확인하시기 바랍니다.

일반적으로 H1~H6등의 타이틀의 경우 CSS에서 text-indent를 사용하여 이미지를 감춰둔다.(물론 다른 요소에도 사용하긴 하지만...) 이게 구글등에서 스팸성 페이지로 인식되어버리거나 페널티를먹는 케이스가 있다는 것. 

이번에 알게된 방식은 기존의 CSS에서 텍스트를 감추기 위해서 사용되는 text-indent 를 사용하지 않는대신 <span>을 이용하여 텍스트를 감춰두는 방식이다. CSS의 작성시에 조금 귀찮아지는 것은 사실이지만 SEO측면에서 보자면 스펨성 페이지나 페널티를 먹는 일은 없을거라는 면에서 꼭 사용해야 할 것 같다. 2004년도 경에 존재하고 있던 기술을 이제야 알았다니...-_-

http://levinalex.net

The HTML:

<h1 class="replace" id="myh1">Headline<span></span></h1>

The CSS:

.replace{ position:relative; margin:0px; padding:0px; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ } .replace span{ display:block; position:absolute; top:0px; left:0px; z-index:1; /*for Opera 5 and 6*/ } #myh1, #myh1 span{ height:100px; width:300px; background-image: url(head.png); }

Works in:

Opera 5 and up (thanks Jay Meinhard) IE 6/win IE 5.5/win IE 5/win Mozilla Firebird Mozilla 1.2 Konqueror 3.1.2 Safari Camino Omniweb IE5.2/Mac OS X (thanks Philippe) (with hack) 

위의 확인된 브라우저는 2004년도의 브라우저인 만큼 현재의 브라우저에서는 문제없이 움직인다. 

최신 브라우저들에서의 확인을 어느정도 해봤다. 

이 외에도 SEO와 관련하여 정확하게 원인규명이 되지 않은 CSS의 기술식이 있겠지? 

시간날때 함 찾아봐야 겠다...