헤더 태그에 SEO를 고려하여 텍스트 대신 이미지 넣기

2012/01/03

sunflower,해바라기,헤더 태그에 SEO를 고려하여 텍스트 대신 이미지 넣는 방법

헤더 태그에 SEO를 고려하면서 텍스트 대신 이미지를 넣는 방법은 뭘까요?

아시다시피 검색엔진에서 웹페이지를 검색할때 해당 페이지의 텍스트를 위주로 아...이것은 무엇에 관한 글이다...하고 인식합니다. 그래서 전체적인 텍스트와 이미지의 구성비를 보았을때 이미지보다는 텍스트가 많아야 검색에 유리하지요. 그렇다고 텍스트로 도배된 글이 검색에 유리하다는 말은 아닙니다..;;; 과유불급이라 하면 이해가 되실런지...아무튼 텍스트 영역에서도 제목을 작성하는데 사용되는 헤더 태그, <h1>~<h6>는 검색 최적화(SEO)에서 매우 중요한 위치를 차지합니다. 그래서 헤더를 작성할때 포토샵에서 멋지게 작성된 문자 이미지를 포기하고, 텍스트를 사용 할 수 밖에 없는데요. 이럴때 헤드태그(<h1>~<h6>)에 자신이 원하는 이미지를 배치하면서 검색엔진의 가독성에 지장을 주지 않는 방법이 있는데요. 이전 시간에 이야기한 class 선택자를 이용한 방법입니다. 바로 헤더태그에 고유한 class명을 부여하고 CSS에서 이미지를 읽어 들이는 방법입니다. 예를 들어보겠습니다.

html 문서를 다음과 같이 작성합니다.

 <body>
		<h1 class="replace_header">Section Header</h1>
 </body>

다음은 CSS,

.replace_header {
   text-indent: -9999px;
   width: 640px;
   height: 100px;
   background: url(flower.jpg) #cccccc no-repeat;
}

CSS의 background url은 자신이 원하는 이미지의 이름과 경로를 지정해주면 되겠죠? 이렇게 h1태그를 작성하면 Section Header라는 제목 영역의 텍스트를 검색엔진에서 읽어 들일 수 있게하면서 사용자에게 보여지는 화면은 Section Header라는 텍스트 대신 background에서 지정한 이미지가 보여지게 됩니다. 두 마리 토끼를 한꺼번에 잡는 셈이죠 ^^

고도를 기다리며 zenith5.tistory.com by 킥스

저작자표시 비영리 변경금지

'정보' 카테고리의 다른 글

갤럭시S, 갤럭시탭 "ICS 추가 업그레이드 없다" 최종확정 (2)	2012.01.05
휴대폰 가격표시제, 2012년 01월 01일 전면시행 (4)	2012.01.04
KT, 올레 4G LTE 요금제 발표 (1)	2012.01.02
CSS ID 선택자 (2)	2012.01.02
CSS 클래스(Class) (2)	2011.12.30