검색엔진은 이미지의 내용을 완벽하게 분석하기 어렵습니다.
그래서 SEO를 고려한 사이트 제작 시 이미지 사용을 최소화 해야 합니다.
그러나 사이트 제작에 있어 이쁜 디자인 또한 중요한 요소 입니다.
디자인을 고려할때 이미지 사용을 최소화 한다는건 사실 앞뒤가 맞지않는 말이죠.

그렇다면 이 두가지를 모두 충족할수는 없을까요?

이 두가지 문제를 해결하는 답은 웹표준 입니다. 더 자세히 말하면 CSS를 활용하는 방법이죠.

일반적으로 이미지 메뉴의 HTML 코딩은 아래와 같이 작성 됩니다.

<table border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td>
   <a href="http://www.artience.co.kr/who-we-are.html">
    <img src="/images/whoweare-btn.gif" width="73" height="24"></a></td>
 </tr>
 <tr>
  <td>
   <a href="http://www.artience.co.kr/seo.html">
    <img src="/images/whatwedo-btn.gif" width="71" height="24"></a></td>
 </tr>
 <tr>
  <td>
   <a href="http://www.artience.co.kr/what-we-think.html">
    <img src="/images/whatwethink-btn.gif" width="89" height="24"></a></td>
 </tr>
 <tr>
  <td>
   <a href="http://www.artience.co.kr/our-project-2011.html">
    <img src="/images/ourproject-btn.gif" width="78" height="24"></a></td>
 </tr>
</table>

이렇게 코딩을 하면 아래와 같이 보여지게 됩니다.

이제 동일한 디자인을 유지하면서 SEO를 고려한 코딩 방법을 보시요.

HTML

 #m-menu li{
  float:left;
  text-indent:-10000px;
 }

  #m-menu01{
   margin:0; padding:0;
   background:url(/images/whoweare-btn.gif) no-repeat;
  }

  #m-menu01 a{
   width:73px; height:24px;
   display:block;
  }

  #m-menu02{
   margin:0 0 0 71px; padding:0;
   background:url(/images/whatwedo-btn.gif) no-repeat;
  }

  #m-menu02 a{
   width:71px; height:24px;
   display:block;
  }

  #m-menu03{
   margin:0 0 0 66px; padding:0;
   background:url(/images/whatwethink-btn.gif) no-repeat;
  }

  #m-menu03 a{
   width:89px; height:24px;
   display:block;
  }

  #m-menu04{
   margin:0 0 0 58px; padding:0;
   background:url(/images/ourproject-btn.gif) no-repeat;
  }

  #m-menu04 a{
   width:78px; height:24px;
   display:block;
  }

간단히 설명을 드리면 HTML 에서는 검색엔진이 text 내용을 인식하도록 작성을 하고
사이트 방문자에게는 text 대신 이미지를 보여 주도록 CSS 를 작성한 내용 입니다.

이런 방법을 사용 하면 이쁜 디자인으로 SEO를 고려한 사이트 제작이 가능하게 됩니다.
이제 '난 SEO 대신 이쁜 디자인을 선택하겠어' 라는 이야기는 안나오겠죠~

이상 아티언스 필진 Nisha 였습니다. 감사합니다 ^^