인터넷 쇼핑몰 창업과 마케팅을 위한 인터넷 마케팅 초급 지식
인터넷 쇼핑몰 / 홈페이지 / 웹페이지의 검색엔진 최적화 (SEO) 전략 초급 지식
검색엔진 최적화(SEO) Tip [ 04 ] – h1 ~ h6 태그와 그리고 strong 태그
|
검색엔진 최적화를 위해 h1 태그와 strong 태그를 사용하자. h1 태그와 strong 태그는 검색엔진 로봇에게 웹페이지의 핵심 내용을 체계적으로 정리해주는 역할을 한다. 웹페이지를 책, 검색엔진 로봇을 학생으로 보자면, h1~h6는 목차를 정리해주고, strong은 별표/밑줄을 표시해준다. |
이번 글에서는 검색엔진 최적화(SEO)를 위한 h1 ~ h6 태그와 strong 태그의 사용법을 알아보자.
우선 이 태그들이 무엇을 위해 존재하고, 검색엔진이 어떻게 의미를 해석하는지 알아보자.
이해하기 쉽게 그림들을 보면서 살펴보겠다.
검색엔진 로봇은 h1 ~ h6 / strong 태그를 이렇게 본다.
h1 ~ h6 은 쉽게 생각해서 웹페이지의 목차를 만들어준다고 여기면 된다.
무슨 뜻인지 쉽게 알 수 있게 http://www.eshopguide.co.kr/3_1_3_seo.html 를 보면서 이야기 하자. 오른쪽 마우스 버튼을 누르고 소스 보기를 클릭하면 HTML 소스를 볼 수 있다.
상기 페이지를 검색엔진은 이렇게 본다.
당연히 h1 이 가장 중요한 내용(가장 큰 제목)이고, h2 는 그 다음으로 중요한 내용(두 번째로 큰 제목), h3 와 h4 순으로 중요한 내용 (세 번째로 큰 제목과 네 번째로 큰 제목) 이다.
이것은 마치 책의 목차를 보면 파트 1 , 2 , 3 / 섹션 1 , 2 , 3 / 1 장 , 2 장 , 3 장 / 1 절 , 2 절 , 3 절이 있는 것과 같다.
서점에서 굳이 책의 내용을 읽어보지 않아도 목차 페이지만 봐도 책의 내용을 절반 이상은 예상할 수 있다. 실제로, 지금 이 글을 안읽는다 해도 이샵가이드의 목차 페이지를 보면 이샵가이드가 현재 어떤 내용을 담고 있는지 충분히 파악할 수 있다.
h1 ~ h6 는 바로 이렇게 검색엔진 로봇에게 이 페이지의 목차를 손에 쥐어주는 역할을 한다.
h4 는 4 개만 적어봤다. (빨간 글씨가 strong 태그가 적용된 부분이다.)
h4 아래의 박스는 h4 제목에 따라 나오는 상세 내용이다.
그리고 strong 태그는 수업시간에 선생님이 “밑줄 쫙, 돼지 꼬지 땡땡, 별표 하나”처럼 요점을 콕 집어주듯이 어느 문장이 핵심 문장인지 검색엔진 로봇에게 콕 집어주는 역할을 한다.
그래서 검색엔진 로봇은 일단 body 태그 안에 들어오면
[ h1 ▶ h2 ▶ h3 ▶ h4 ▶ h5 ▶ h6 ▶ strong ▶ 나머지 글 ]
의 순서로 정보를 체계화해서 정리한다.
예제 글의 내용을 실제로 적용해서 다시 한 번 표로 보면 다음과 같다.
| h1 |
인터넷 쇼핑몰 마케팅 초급 지식 |
| h2 |
검색엔진 최적화 전략 초급 지식 |
| h3 |
검색엔진 최적화(seo) Tip [01]–타이틀 (title) 태그 |
| h4 |
검색 결과의 질이 검색엔진의 생명을 좌우한다. |
| h4 |
"검색엔진 최적화" 라는 키워드로 실례들을 살펴보겠다. |
| h4 |
검색엔진 최적화 (SEO) [01] - 타이틀 (title) 태그 Tip |
| h4 |
"검색엔진 최적화" 구글/다음 검색 결과 첫 페이지 |
| h4 |
"검색엔진 최적화" 네이버 검색 결과 첫 페이지 |
| h4 |
"검색엔진 최적화" 야후 검색 결과 첫 페이지 |
| h4 |
"검색엔진 최적화" 야후 검색 결과 첫 페이지 |
| h4 |
모든 웹페이지의 타이틀 (title) 을 모두 다 다르게 하라. |
| h4 |
마지막으로 타이틀의 길이에도 제한이 있다. |
| strong |
생략 (웹페이지에서 빨간 글씨들만 골라서 보세요) |
| 나머지 |
생략 (그리고 나머지 글들) |
벌써 검색엔진이 본문을 다 분석을 하기도 전에 이 웹페이지가 검색엔진 최적화와 아주 밀접한 관계가 있는 페이지라는 것을 한 눈에 파악할 수 있다. (각 제목마다 검색엔진 최적화라는 키워드가 반복되므로)
물론 이 웹페이지는 그다지 썩 좋은 예는 아니다. 가장 중요한 h1 에 이 웹페이지의 핵심 키워드가 안들어가 있고, strong 이 적용된 부분도 최적화 되어 있지 않음을 알 수 있다.
그건 쇼천이가 “이 정도면 충분하다. 일단 글부터 쓰고, 나중에 필요해지면 그 때 가서 최적화하자.”고 생각하고 있기 때문이다.
본인의 쇼핑몰/홈페이지에 적용할 때는 h1 과 strong 도 검색엔진 최적화를 해서 적용하기를 바란다. ^^
검색엔진 로봇은 h1 ~ h6 / strong 태그 없는 페이지를 어떻게 볼까?
검색엔진 로봇은 h1 ~ h6 / strong 태그가 전혀 없는 페이지를 어떻게 볼까?
본인의 쇼핑몰/홈페이지의 HTML 소스를 열어서 확인해보자.
만약, h1 ~ h6 / strong 태그가 단 하나도 없다면, 검색엔진 로봇은 당신의 웹페이지를 이렇게 본다.
앞의 알록달록한 그림과 비교해보면 차이점을 확연히 느낄 수 있다.
검색엔진 로봇은 이 내용에서 어떤 내용이 핵심인지 전혀 파악할 수 없다.
이것이 바로 검색엔진 최적화(SEO)를 논할 때 h1 ~ h6 / strong 태그가 빠지지 않고 거론되는 이유이다.
많은 웹디자이너가 h1 ~ h6 는 글씨를 크게 키워주고, strong 은 글씨를 두껍게 만들어준다라고만 알고 있다. 아니다. 순서가 바뀌었다.
가장 중요한 제목이니까 글씨가 큰 것이고, 중요한 부분이니까 두껍게 보여주는 것일 뿐이다.
h1 ~ h6 / strong 태그 마음대로 디자인하기
실제로 h1 ~ h6 / strong 태그를 사용해보면, 웹페이지가 상당히 지저분해진다.
바로 이렇게 말이다.
아무리 검색엔진 최적화(SEO)가 중요하다지만, 이랬다가는 방문자(고객)들이 3 초 이내에 창을 닫고 나가버릴 것이다.
이럴 경우 CSS 를 이렇게 작성을 하면 지금 보고 있는 웹페이지처럼 깔끔하게 사용할 수 있다.
h1, h2, h3, h4, h5, h6 { margin:0 0 0 0; padding:0 0 0 0; font-family:"굴림",sans-serif; font-weight:bold; font-size:12px; line-height:200%; }
h3 {color:white; background-image: url(/guide/img/h4_bg.gif); padding: 3px 0px 3px 10px; margin-top: 10px;}
h4 { background-image: url(/guide/img/h4_bg.gif); background-repeat:no-repeat;}
strong { font-weight:normal; color:red; }
이샵가이드의 CSS 파일에는 위의 내용대로 설정이 되어 있고, 그 결과 지금 보고 있는 웹페이지와 같은 디자인이 나왔다. (물론 h1 ~ h4 / strong 태그에 대한 부분만)
곧 HTML 과 CSS 강좌를 통해 모든 내용을 다뤄볼 계획이니, 지금은 이런 식으로 CSS 파일에서 아주 자유롭게 h1 ~ h6 / strong 을 디자인할 수 있다는 정도만 알아두자.
다음 글에서는 키워드의 밀도에 대해서 살펴보자.
|