블로그의 글이 검색엔진에서 어떻게 보여질지에 대해서 아이트래킹 결과를 통해 살펴보고 WordPress 에서 HTML 의 TITILE, DESCRIPTION KEYWORD 를 지정하는 방법에 대해서 살펴본다.
 

문서 제목 (HTML 의 TITLE)

다음은 야후! 코리아와 구글에서 ‘USB 시계’로 검색한 결과 중 내 블로그에 있는 글을 캡처한 것이다.
 
야후! 코리아의 검색엔진

 
구글의 검색엔진

 
문서의 제목은 ‘USB 시계와 Portable FireFox‘ 인데, 검색엔진에서 볼때 실제 문서 제목은 ‘dobiho on HCI Blog Archive’ 의 뒤에 표시되고 있음을 알 수 있다.
이는 검색엔진에서 그렇게 한 것이 아니라 HTML TITLE에 원래 글의 제목에 ‘dobiho on HCI Blog Archive’이 추가적으로 표시되었기 때문이다.
 

사람들은 검색결과 페이지를 볼 때 어디를 볼까?

사람들은 검색결과 페이지를 볼 때 검색결과의 링크에서 주로 앞쪽들을 스캐닝 한다.
그런데 내 블로그의 글 중 ‘USB 시계’를 찾으려는 사람은 ‘USB 시계’ 보다는 앞쪽의 dobiho on HCI를 보게 되는 경우가 많아서 뒷쪽에 있는 ‘USB 시계’는 굵게 표시했지만 지나치게 되는 경우가 생긴다.

 
아이트래킹 스터디를 해 보면 이것을 잘 알 수 있다. 눈이 검색결과 페이지의 링크 앞쪽에서 부터 오른쪽으로 스캐닝 하는 경우도 있지만, 바로 링크 앞쪽을 따라서 내려가는 경우가 많다.
야후! 코리아 검색페이지에 대한 아이트래킹 결과에서 안구의 이동을 보면 더 잘 알 수 있는데, 아직 볼르그에 공개할 수는 없을 것 같다. 대신 eyetools에서 용역을 받아서 한 구글 검색결과 페이지 heatmap 을 봐도 같은 결과를 알 수있다.
heatmap 은 몇 %의 사람이 봤는지를 보여주는 Eyetools 의 분석 방법인데 그림에서 빨간색은 참가자중 100%가 본 영역을 말한다.
그림은 구글의 황금삼각형(Golden Tiangle)을 보여주고 있다. 링크의 앞쪽이 적색으로 되어 있는데 이는 사람들이 링크의 앞쪽을 보고, 페이지의 상단 부분만 본 것을 알 수 있다. 아래 그림을 클릭하면 새창에 큰 이미지를 볼 수 있는데, 긁게 표시된 글자도 빨간색으로 되어 있어서 사람들이 굵게 표시된 글씨도 보는 것을 알 수 있다.
WordPress 의 대부분의 Theme은 그림과 같이 블로그 이름 >> Blog Archive >> 문서 제목으로 되어 있다.
검색결과 페이지에서 위와 같이 표시되는 것은 블로그 시스템에서 만든 글들인 것 같고, 거의 WordPress 를 사용하는 블로그들의 글인 것 같다.
한 페이지를 브라우저로 볼 때에는 브라우저의 타이틀바에 어떻게 표시되었든 페이지에 문서의 제목을 표시하기 때문에 큰 문제는 없다. 문제는 검색엔진에서 보여졌을 때와 글을 북마킹했을 때이다. 윈도우즈의 타이틀바 텍스트에서 이를 지정하는 규칙이 있다. 이것은 나중에 다시 살펴보기로 한다.
 
검색엔진에서 보여질 때를 위해서 블로그 이름 보다는 문서의 제목이 먼저 나오게 하고, ‘Blog Archive’ 는 빼는 것이 나을 것 같다. 그러면 북마크를 할 때나 검색엔진에서 보여질때 실제 문서 제목이 먼저 나오게 되서 문서를 구별하는데 효과적일 것이다. 또한 Yahoo! My Web 2.0 에 웹 페이지를 저장할 때에도 문서 제목이 먼저 나오므로 편리할 것 같다.
 

워드프레스에서 문서 제목을 바꾸려면

WordPress에서 TITLE을 바꾸려면 다음과 같이 한다.
 
1. 해당 테마의 header.php 을 연다. title 부문을 보면 다음과 같이 되어 있다.
<title><?php bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
2. 홈은 blog name 나오고, 목록과 글은 title – blog name 으로 나오게 하려면 다음과 같이 한다.
<title><?php if (!is_home()) { wp_title(”); echo ” – “; } ?> <?php bloginfo(‘name’); ?> </title>
 
2. 설명문 (DESCRIPTION 메타태그)
그리고 사람들은 검색결과에서 키워드를 문서 제목에서도 찾지만 원하는 것을 찾기 위해서 설명문을 본다. 보통 설명문은 META 태그의 DESCRIPTION 이나 본문에서 나온 키워드를 표시한다.
검색엔진의 결과에서 보여지는 문서 제목 말고 설명을 보면 내 블로그의 경우에는 블로그 소개글이 먼저 나오고 있고, 그 아래 링크를 보면 사이트의 설명이 없고 바로 본문에 있는 키워들이 보이고 있다.
 

 
그 이유를 살펴보니 내 블로그의 모든 페이지의 HTML의 META 태그의 DESCRIPTIN 에 블로그 설명이 들어 있는데 검색엔진은 그것을 먼저 보이게 하고, 그런 다음에 키워드가 있는 본문의 내용을 그 다음에 표시하기 때문이다. 대신 DESCRIPTION이 없으면 그냥 본문을 표시하고 있는 것 같다.
블로그의 RSS 에 본문의 내용의 일부를 보이게 할거냐 아니면 요약을 보이게 할지 결정하게 하기 위해서 매 글을 작성할 때 요약을 작성할 수 있는 필드가 있다. WordPress는 excerpt 라는 abstract 와 같은 입력영역이 있다. 이 필드를 매 페이지의 DESCRIPTION에 표시하는 것이 좋을 것 같다는 생각을 했다.
그런데, 검색엔진이 본문에서 찾은 키워드를 보여줄 때에 DESCRIPTION 메타태그의 내용이 또 방해가 될 수 있을지 모른다. 페이지의 의미적인 요약과 본문 안에서 키워드가 사용된 정황과는 또 달라질 수 있기 때문이다.
그래서 홈을 제외하고는 DESCRIPTION 을 빼는 것이 오히려 본문에서 나온 정황을 이해하는 데 좋을지 모르겠다는 생각을 했다.
아래와 같이 글의 제목이 앞으로 오게 해야 한다.

 

워드프레스에서 페이지 설명문 수정하는 방법

WordPress 에 이를 수정하기 위해서는
1. 위에서 오픈한 header.php 파일을 열고
2. 메타 태그 부분을 지우고, 아래와 같이 홈일 때만 DESCRIPTION 태그를 보여지게 코딩을 한다. content 부분은 자기 블로그의 설명을 수정하면 된다.
<?php if (is_home()) { echo “<meta name=\”description\” content=\”HCI(Human-Computer Interaction)의 바다를 항해하는 도비호\”>”; } ?>
3. 키워드 (KEYWORD 메타 태그)
HTML의 메타 태그에 보면 KEYWORD 부분이 있다. 이부분은 해당 글의 키워드를 표시하면 좋을 것 같다. 글에 내 블로그처럼 tag 를 보이게 하려면 플러그인을 설치해야 한다. Tag 플러그은 Jerome’s Keywords Plugin 을 설치 한다.
홈에서는 WordPress에 지정한 블로그의 키워드를 표시하고, 각각의 글에서는 해당 글의 키워드를 메타태그에 표시한다.
워드프레스에서 페이지의 키워드 지정하기
WordPress 에서 이를 하기 위해서는 다음과 같이 한다.
1.header.php 를 열고, KEYWORD Meta 태그 부분을 아래와 같이 바꾸면 된다. 아래의 the_keyword() 함수는 해당 글에 키워드 필드에 입력한 키워드과 카테고리명을 표시한다. the_keyword()를 사용하기 위해선 태그 플러그인인 Jerome’s Keywords Plugin 이 설치되어 있어야 한다.
<?php if (is_home()) {echo “\n <meta name=\”keywords\” content=\”HCI, usability, user interface design, ui design , 사용자 인터페이스, HCI, 사용성, 사용성 평가, 인간과 컴퓨터 상호작용\”> “; }?>
<?php if (is_single()) { ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php echo “<meta name=\”keywords\” content=\” “; the_keywords(); echo ” \”> “; ?>
<?php endwhile; else: ?>
<?php endif; ?>
<?php } ?>