오랜만에 글을 올리게 되었습니다.
한동안 검색엔진 최적화에 많은 관심을 가지면서 이 블로그에 글을 올리기 시작했는데, 사실 저보다 검색엔진 최적화에 대해 훨씬 많은 정보를 제공하는 사이트나 블로그들이 이제는 수두룩 하더군요.
여전히 '검색엔진 최적화'로 구글에서는 첫번째에 리스트 되어있긴 하지만, 블로그 업데이트가 전혀 되지않아 부끄럽기 짝이 없습니다.
언제 순위가 바뀌어도 별로 할말은 없습니다.
저도 원래의 본분으로 돌아가 프로그래밍에만 열중하느라 검색엔진 최적화에 대해 소홀했던것도 사실입니다.
지금까지 블로그에 글 올리는것은 정말 뜸했지만, 이메일로 날아오는 질문이나 의문점들에 대해 나름대로 컨설팅은 계속 하고 있었습니다.
(답변을 못드린 분들도 계신데 정말 죄송합니다. 답변을 안해드린데에는 나름대로 적절한 이유가 있었기 때문이니 양해해 주세요.)
그중에도 가장 많이 번복되는 부분이 헤더태그(h1, h2, h3...) 인데요, 맨날 똑같은 내용 이메일로 알려드리느니 이곳에 글을 올려놓는게 나은 방법이라 생각되어 글을 올립니다.
웹사이트의 검색엔진 최적화에서 가장 중요한 요소중 하나가 바로 헤더 태그(h1, h2, h3, h4...) 입니다.
어떤 분들은 아예 사용하지 않으시는 분들도 계시고, 어떤 분들은 엉뚱한 용도로 사용하기도 합니다.
예전에 올렸던 http://www.seo-korea.com/entry/검색엔진-최적화-헤더-태그-header-tag 에서도 강조한 부분이며 반드시 빼놓아서는 안됄 부분입니다.
각자 사용하기 나름이지만, <h1>, <h2>, <h3> 태그는 대체로 페이지의 제목 또는 사이트의 타이틀을 나타낼때 사용되는데요, 여기서는 로고를 대신하는 용도로 사용해 보기로 하죠.
제 블로그만 해도 <h1> 태그가 '검색엔진 최적화' 입니다.
제 블로그의 타이틀이며 모든 포스팅의 주제이기도 하지요.
그래서 과감하게 <h1> 태그를 사용했습니다.
뭐.. 제가 사용했다고 하기엔 조금 그렇고.. 사실.. 블로그 스킨에 원래부터 이렇게 되어있었습니다. -_-;
그런데 제 블로그가 자그마한, 그리고 지극히 개인적인 블로그라서 그냥 후줄근한(?) '바탕체' 폰트를 사용해 텍스트 자체로 표현해도 겉보기에 그리 큰 무리는 없습니다.
하지만, 기업이나 다른 상업성 사이트에 로고 하나쯤은 있기 마련이어서 제 블로그처럼 텍스트로 사이트의 타이틀을 걸어놓는 사이트는 거의 없으리라 봅니다.
그래서 보통 많은 분들이 이미지를 사용하거나 플래쉬로 로고를 제작하여 올려놓는게 대부분입니다.
그런데 로고 이미지를 넣다보니 검색엔진 최적화에 큰 영향을 미치는 '텍스트'를 정작 사용하지 못하는 경우가 많은데요, 아래 방법은 제가 사용하는 방법입니다.
사람눈에는 이미지로 보이지만 검색엔진 스파이더한테는 텍스트로 보이게 해주는 팁입니다.
(누구나 나름대로의 사이트 만드는 스타일과 방법이 있고, 어떤것이 좋다 나쁘다 내지는 옳다 그르다 라고 할수는 없습니다.
물론 아래 방법을 이미 알고 계신 분들도 많으리라 생각됩니다.
그저 제가 사용하는 방법을 참조만 해주시기 바랍니다.)
http://www.bmlee.com/seo/ 를 참조하시기 바랍니다.
위의 링크에는 cnn.com에서 그냥 무단으로 가져온 로고가 하나 있습니다.
달랑 이미지 한개 밖에 없지만 '소스보기'를 하신다면 <h1> 태그내에 '검색엔진 최적화'를 넣은 부분이 보이실 겁니다. 아래 이미지는 해당링크의 스크린샷 입니다.
실질적인 소스 파일:
index.html 파일:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>검색엔진 최적화를 위한 CSS 팁 1</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div class="wrapper">
<h1><a href="http://www.bmlee.com">검색엔진 최적화</a></h1>
</div>
</body>
</html>
styles.css 파일:
h1
{
width: 148px;
height: 36px;
background: url(http://www.bmlee.com/seo/images/logo.gif) no-repeat top;
text-indent: -99999px;
}
h1 a
{
display: block;
width: 148px;
height: 36px;
}
대충 아시겠지만, 굳이 설명을 드리자면, 현재 CSS 파일에는 h1 태그에 대한 속성만 있습니다.
h1의 속성에는 백그라운드에 로고 이미지를 깔아주었고, 이미지의 가로와 세로값을 넣어두었습니다.
중요한 부분은 text-indent 인데 이부분이 h1 태그에 들어가는 텍스트를 99999px 만큼 화면의 왼쪽으로 보내버리는 부분입니다. 그래서 소스보기에는 텍스트가 있지만 실질적인 화면에서는 보이지 않는 것입니다.
'px' 대신 'em'을 써도 무관합니다.
그리고 h1 a 는 h1 내에있는 링크의 속성을 나타내는데요, 이부분에 이미지의 가로와 세로값을 정해주고 display를 block으로 설정해 주셔야만 로고의 크기만큼 클릭이 가능한 부분으로 만들수 있습니다.
어쩌면 <img src="images/logo.gif" alt="검색엔진 최적화"> 처럼 사용하시는 분들도 계시겠지만, 그보다는 위의 예제처럼 CSS를 사용하여 <h1> 태그내에 텍스트와 이미지를 동시에 집어넣는것이 검색엔진 최적화에 더 효과적입니다.
<h1> 대신 상황에 따라 <h2>나 <h3>를 사용해도 무관합니다.
별로 어렵지 않으면서도 쉽게 검색엔진 최적화를 시작할수 있는 방법입니다.
유용하다고 생각하시면 적극 응용하시길 바랍니다.
언제라고 기약은 못하지만 앞으로 이런식의 글 몇개 더 올리도록 하겠습니다.
Posted by Brian Lee
