검색엔진 최적화(search engine optimization)에 대해

안녕하세요. 키다리디자이너입니다.

오늘은 갈수록 이슈가 되고 있는 홈페이지의 '검색엔진 최적화'에 대해 알아 볼게요.

 

세계에 수많은 검색엔진이 있고 그 검색엔진이 홈페이지의 정보를 수집하는 일의 방법이 다 다른데요, '검색엔진 최적화'란 자신의 홈페이지에 관한 내용이 검색엔진에 최대한 많이 노출될 수 있도록 만드는 작업이라고 할 수 있습니다.

또한 '검색엔진 최적화'는 검색엔진에서 홈페이지내 특정 페이지나 컨텐츠의 수집을 거부하는 용도로도 사용되고 수 있습니다.

 

네이버에 의존도가 높은 한국에서는 아직은 이 '검색엔진 최적화'의 기준이 다소 낯선 개념이지만 구글이나 야후에 의존도가 높은 해외에서는 검색엔진에 좀 더 정확하고 많은 결과를 나타나게 하기 위해서 이 '검색엔진 최적화가' 필수가 되었습니다.

여담이지만 일본지사에서 일하시는 분의 말을 들으면 일본은 구글과 야후의 의존도가 상당히 높고 '검색엔진 최적화'를 하지 않으면 구글이나 야후에 서비스를 전혀 할 수가 없을 정도로 중요하다고 하네요.

아무래도 전세계에서 검색엔진으로 구글을 가장 많이 사용하기 때문에 웹사이트들이 구글에서 제시하는 가이드를 기준으로 제작하는 추세입니다.

사실 구글의 검색 알고리즘은 엄청나게 복잡한데 비해 국내 검색엔진은 아직 초급수준의 알고리즘이라고 봐도 무방합니다.
또한 검색결과도 대부분 광고 위주로 더 돈을 많이 내는 순서에 따라 순위를 매기는 방법을 많이 사용하고 있구요, 데이타수집 또한 단순 키워드 매칭에서 크게 벗어나지 않고 있습니다.
반면 구글은 모든 웹사이트를 봇이 전부 훑어보고 수집하여 그 중요도에 따라 검색 순위를 매기는 방식을 이용하는데 이 알고리즘 구현을 위해 한 해 몇조원씩 투자하고 있다고 하네요.

 

'검색엔진 최적화'의 방법은 사실 구글에서 발표한 가이드만 다 정리해도 책한권을 써도 모자랄 만큼 방대하며 수학관련 지식이 상당부분 요구되어 관련 전문가가 없는 일반 기업에서 이것을 다 지키기에는 많은 무리가 있습니다.
따라서 '검색엔진 최적화' 가이드를 전부 지키는 건 현실적으로 불가능하고 개발자가 아닌 디자이너(혹은 코더)의 선에서 어렵지 않지만 반드시 지켜야 할 내용들에 관해 이야기하도록 하겠습니다.

 

 

 

 

1. 웹주소(URL)를 체계적으로 구성하자.

 

검색엔진이 웹사이트에 접속해 크롤링시 홈페이지의 디렉토리 구조에 맞춰 단계적으로 수집한다고 하는데요, 이 구조가 체계적으로 제작되어 있지 않거나 중간에 끊겨 있다면 더 이상 수집을 진행하지 않는다고 합니다.

 

예를 들어 설명해 볼게요.

http://www.naver.com [네이버 메인페이지]

http://www.naver.com/news/ [네이버 뉴스섹션]

http://www.naver.com/news/sports/ [네이버 뉴스섹션 스포츠섹션]

http://www.naver.com/news/sports/list/article.html [네이버 뉴스섹션 스포츠섹션 리스트]

 

위 구성은 곧 'http://{도메인}/{1차 카데고리}/{2차 카테고리}/{리스트}/{기사명}' 으로 구성되어 있고 이렇게 계층적인 구조로 이루어 졌을 시 URL 뒷 부분을 하나씩 지워 나가면 점점 상위 카테고리로 이동하게 됩니다.

 

http://www.naver.com/news/sports/list/article.html -> http://www.naver.com/news/sports/

이런 계층구조를 정확히 구성하지 않고 구조가 뒤죽박죽 엉켜 있다거나 주소 뒷 부분을 지웠을 때 상위카테고리가 나오지 않고 404에러(not found)가 나타나지 않게 만들어야 검색엔진이 정상적으로 수집할 수 있다고 합니다.

 

2. 정확한 헤더 정보를 입력하자.

 

- meta title
메타타이틀은 검색 결과를 보여줄 때 사이트로 직접 연결되는 링크로 표시됩니다.
제목은 공백 포함 10~70글자 이내로 작성돼야 하며 구글의 경우 제목에 최대 70글자와 처음 12단어를 보여줍니다.
메타타이틀은 가장 중요하고 함축적인 내용이어야 하며, 중복되는 단어는 피하는 것이 좋습니다.

- meta description
메타디스크립션은 웹페이지의 요약된 내용을 작성합니다.
이것은 검색엔진이 보여주는 결과에서 페이지의 내용을 미리 요약하여 보여주는 것으로 간단하고 알기 쉽게 작성해야 하며 키워드로 나열하는 것은 피해야 합니다.
구글의 경우 70~160자를 유지하길 권장하며 각 페이지는 고유의 meta description을 가져야 합니다.

 

- meta keywords
웹페이지의 주요 키워드를 작성합니다.
10~20개의 고유한 단어나 문구로 작성하되 키워드 구분은 콤마(,)로 구분하고 단어 사이에 공백을 넣을 필요는 없습니다.
검색엔진은 한글보다 영문을 우선 검색하기 때문에 가능하면 영문을 먼저 써주는 것이 좋구요, 중요한 키워드는 앞부분에 2~3차례 반복 등록해도 되지만 4~5번 넘게 입력할 시 스팸처리 될 수 있으니 주의해야 합니다.

 

- link rel="canonical" 태그
link rel태그는 웹사이트가 여러개의 URL로 나타나게 될 때 가장 기준이 되는 URL을 지정해 주는 것입니다.

예를 들어..

http://www.naver.com/session.php?id=2
http://www.naver.com/session.php?id=2&page=1
http://www.naver.com/session.php?id=2&page=1&param=2899

이렇게 각기 다른 URL이지만 한 개의 문서인 경우가 있습니다.

이럴 때 link rel="canonical"을 이용해서

< link rel="canonical" href="http://www.naver.com" /> (첫번째 예) 또는
< link rel="canonical" href="http://www.naver.com/session.php?id=2" /> 등으로 코딩할 수 있습니다.

 

이렇게 하면 검색엔진은 똑같은 내용의 페이지가 여러개 발견되는 혼란을 피하고 link rel="canonical"로 지정한 한개의 URL만 크롤링하게 됩니다.
이는 페이지랭크(PageRank)에 미치는 영향도 있습니다.
PageRank의 기본은 해당 페이지로 유입이 많을수록 순위가 올라가게 되어있습니다.
홈페이지 게시자는 가장 유용하고 중심이 되는 페이지를 판단하여 링크를 걸면 됩니다.

 

3. 구조에 맞게 코딩하자.

페이지를 코딩할 때는 페이지 내용의 계층적인 구조에 따라 논리적으로 코딩해야 됩니다.
무슨 말인가 하면은..

 

<span>타이틀</span>
<div>
    <span>목차1</span>
    <span>목자2</span>
<div>
<div>제목</div>
<div>
    내용
</div>

 

위의 코딩을 보시면 제목과 목차와 내용이 각각 유기적인 계층 구조를 갖지 못하고 따로 나열되

어 있는 것을 알 수 있습니다.

이것을 좀 더 체계적으로 바꿔 본다면..

<span>타이틀</span>
<div>
    <ul>
        <li>목차1</li>
        <li>목차2</li>
    </ul>
</div>
<div>
    <div>제목</div>
    <div>
        내용
    </div>
</div>

 

이렇게 각각의 내용들은 부모자식간 계층구조를 명확하게 나타낼 수 있도록 코딩해야 검색엔진은 이 내용을 기계적으로 해석하기가 좀 더 용이합니다.

하지만 이것만으로는 검색엔진이 페이지 내에 구성요소를 제대로 파악할 수 없습니다.
검색엔진은 div나 class의 이름조차 의미있는 단어를 사용해야 하고 페이지내 주요 구성에는 그에 맞는 마크업을 이용해 코딩해야 합니다.

위의 코딩을 다시 바꿔 본다면..

<title>타이틀<title>
<nav>
    <ul>
        <li>목차1</li>
        <li>목차2</li>
    </ul>
</nav>
<article>
    <h1>제목</h1>
    <p>
        내용
    </p>
</article>

대략 이런 방식이 되겠네요.

이런 마크업이나 각각의 클래스명이 정확하다면 검색엔진은 이것을 의미있는 데이터로 인식하고 시멘틱적인 요소로써 활용되어 검색결과에 반영하게 됩니다.
예를 들어 HTML5에서는 <strong>태그를 사용할 경우 중요한 의미를 갖는 것을 나타내게 되고, <i>태그는 외국어나 전문용어, 인용문 등의 의미를 갖게 됩니다.
이 HTML태그에 대해서는 따로 서적등을 이용해서 공부하시길 바랍니다.

 

4. 파일이나 디렉토리 이름은 정확하고 직관적으로 정하자.

 

구글 검색엔진은 파일이나 디렉토리의 네이밍을 분석해 해당 페이지의 성격을 파악한다고 합니다.
네이밍도 반드시 사전을 찾아가며 정확한 의미전달이 될 수 있도록 해야 하는데요,

 

예를 들어
kisa2/naver_sajin.html X
article/photo.html O
이런 네이밍으로 그 의미를 검색엔진에 전달해야 합니다.

 

5. a태그의 목적지를 정의하자.

링크태그(a href)를 사용할 때는 검색엔진이 해당 링크의 목적을 알 수 있도록 정의해 주면 더 정확한 수집을 할 수 있습니다.

사용 방법은 예를 들어

<a href="http://www.naver.com" rel="external"> 네이버 </a> 등으로 사용 되며 그 속성은 아래를 참고하시기 바랍니다.

 

alternate : 현재 웹 페이지의 다른 프레젠 테이션에 대한 링크
author : 웹 페이지의 작성자에 관한 웹 페이지에 대한 링크
external : 외부 도메인을 가리키는 링크
help : 관련 도움말 페이지를 가리키는 링크
license : 현재 문서의 라이센스 조건에 대한 링크
next : 일련의 웹 페이지에서, 이것은 다음의 웹 페이지로 연결
nofollow : 링크가 사이트에 의해 승인되지 않았 음을 나타냅니다
prev : 일련의 웹 페이지에서, 이것은 다음의 웹 페이지로 연결

 

6. 타사이트를 베껴오지 말자.

당연한 말이지만 타사이트의 컨텐츠를 그대로 복사해 오는 경우에는 검색엔진으로부터 패널티를 받을 수 있고 해당 페이지의 랭크가 여러개의 URL로 분산되어 검색랭킹에서 타사이트보다 밀릴 가능성이 높다고 합니다.

 

부득이하게 내용을 그대로 가져다 써야 할 경우에는 헤더 안에

< link rel="canonical" href="http://---원본문서의 URL---" / > 이나
< meta name="original-source" content="http://---원본문서의 URL---" / > 을 작성하여
페널티를 피해야 하겠네요.

여기까지 '검색엔진 최적화'에 대한 기본적인 지식들을 알아봤어요.

이전에도 언급했듯이 '검색엔진 최적화'에 대한 부분은 자세히 얘기하려면 책을 내도 모자랄 만큼 방대해서(실은 저도 모르는게 많습니다.. ㅠㅠ) 다소 수박겉핥기같은 느낌도 있지만 이 정도면 충분히 감은 잡으셨으리라 생각합니다.

 

이제 한국에서도 '검색엔진 최적화'에 대한 필요성에 대한 인식이 점점 커져가고 있고, 특히 국내뿐 아닌 세계를 겨냥한 서비스를 준비하는 웹서비스는 필수적인 부분이라고 할 수 있습니다.

'검색엔진 최적화'는 우리 디자이너들도 반드시 공부해나가야 할 필수 지식이라고 할 수 있겠습니다.