구글 검색엔진 최적화 방법 h 태그 활용

h 태그를 적절하게 사용하여 문법에 알맞은 HTML을 작성하면 검색엔진은 이를 체계적이고 전문성을 갖춘 글로 판단한다.

 

티스토리 블로그의 글쓰기 '기본 모드' 화면에서는 '제목 1, 제목 2, 제목 3, 본문 1, 본문 2, 본문 3'을 선택하여 글을 작성할 수 있다. '본문 1, 2, 3'은 글자 크기만 다른 것이므로 원하는 크기를 선택하여 작성하면 된다.

 

그러나 '제목 1, 2, 3'은 서로 다른 h 태그를 사용한 것이므로 마음대로 섞어 사용하지 말고 글의 흐름에 맞게 '제목 1, 2, 3'을 순서대로 사용하는 것이 좋다. '제목 1'은 h2, '제목 2'는 h3, '제목 3'은 h4이다. 

 

검색 엔진은 '제목 1, 2, 3' 순서대로 작성한 글을 전문적이고 좋은 글이라고 판단한다. 그렇다고 '제목 1, 2, 3'을 모두 사용할 필요는 없다. 다만 본문을 작성할 때 소제목에 반드시 '제목 1, 2, 3' 중 한 가지를 사용하는 것을 추천한다.

 

 

제목에 특수문자를 사용한다면? 하이픈(-), 콜론(:), 막대(|)만 사용하기

 

티스토리 블로그에서 글의 제목은 구체적이지만 간결하게 핵심 키워드와 매력적인 문구를 섞어 20글자 이내로 작성한다. 15~20글자로 이야기한 이유는 검색 화면에 작성한 제목이 잘리지 않고 잘 보이게 하기 위함이다. 많은 사람이 제목에 반복적인 단어를 사용하거나 특수문자를 넣지 말라고 이야기한다. 

 

그러나 특수문자의 경우 제목이 너무 길다면 하이픈(-), 콜론(:), 막대(|)와 같은 구분 문자로 분리하여 작성하라고 '구글 SEO 가이드'에서 안내한다. 제목을 간결하게 작성하되 길어질 경우 가독성을 위하여 하이픈(-), 콜론(:), 막대(|) 특수문자를 사용하도록 한다.

 

글쓰기에 관한 내용은 앞서 다룬 '빠르게 구글 애드센스 승인받는 글쓰기 노하우'를 참고하기 바란다. 여기서는 h 태그 위주로 설명해 보겠다. 

 

글의 제목을 작성하면 HTML에서는 제목 내용을 h1로 인식한다. 그렇기에 HTML에서 h 태그를 수정할 때 본문에서 h1을 사용하지 말고 h2부터 사용하라고 권한다. 가독성과 체류시간을 높이기 위하여 HTML에서 본문의 글자 크기를 변경할 때도 h1의 글자 크기는 h2의 글자 크기보다 커야 한다.

 

 

본문의 소제목은 '제목 1, 제목 2, 제목 3'을 사용하여 'h2, h3, h4 태그'로 하기

 

본문을 작성할 때 전문적이고 체계적인 글로 인식하도록 소제목을 붙이는 것이 좋다. 글 쓰는 입장에서도 소주제를 활용하면 글을 작성하기가 한결 수월하므로 약 3가지의 소주제를 제시하고 각 주제를 설명하는 형태로 글 쓰는 습관을 들이기를 권한다.

 

만약 소제목의 설정을 '제목 1'만 선택하여 여러 번 사용한다면 '제목 1, 2, 3'의 글자 크기를 비슷하게 하여 '제목 1, 2, 3'을 골고루 사용하는 방법도 있다. 

 

블로그 관리에서 '꾸미기' 메뉴 아래 있는 '스킨 편집'을 누른다. 왼쪽 상단에 '홈'을 '글'로 바꾸고 오른쪽에 'CSS' 탭을 선택한다. 'Ctrl+ F' 키를 누르고 'Entry Content'를 입력한다. 두 가지가 검색될 것이다. 첫 번째 'Entry Content'는 'CSS CONTENTS 06. Entry Content'일 것이다.

 

구글 검색엔진 최적화 방법_ h 태그 활용

 

검색창에 있는 화살표 아래 방향을 눌러 두 번째로 검색된 'Entry Content'로 이동한다. 각 h 태그 별로 'font-size'가 있을 것이다. 여기서 숫자를 변경하여 크기를 수정할 수 있다.

 

필자의 경우 h2, h3, h4의 글자 크기를 모두 '1.35em'으로 하였다. 원하는 크기로 수정하되 h1의 '1.6876em'보다 작게 수정한다. 수정 후 오른쪽 상단의 '적용' 버튼을 누르고 글 화면의 '새로고침' 버튼을 눌러 소제목의 크기를 확인해 본다.

 

본문에서 소제목을 작성할 때 티스토리에서 제공하는 글자 크기를 선택하여 '제목 1, 제목 2, 제목 3'을 사용하는 경우라면 대부분 'h 태그 수정 시 주의해야 할 점'에 크게 신경 쓸 필요가 없다. 다만 소제목을 여러 개 사용할 경우 h 태그가 부족한 경우 'CSS'에 h 태그를 추가하여 작성할 수 있다. 

 

 

소제목이 많아서 h 태그가 부족하다면,

 

구글 검색엔진 최적화 방법_ h 태그 추가

 

'스킨 편집'에서 'HTML 편집'을 누른다. 왼쪽 화면 상단의 '홈'을 '글'로 선택한다. 오른쪽 화면에서 'CSS' 탭을 누른다.

 

'Ctrl+F' 키를 눌러 검색 창을 띄우고 'Entry Content'를 검색한다. 'Entry-Content h4' 코드가 끝나는 괄호 아래에 엔터 키를 누른 후 'Entry-Content h4' 코드를 두 개 복사하여 붙여 넣고 'h4'를 'h5'와 'h6'으로 각각 바꾼다. 작업이 완료되면 오른쪽 위에 있는 '적용' 버튼을 누른다.

 

구글 검색엔진 최적화 방법_ h 태그 추가 소제목 설정하기

 

글쓰기 '기본 모드'에서 '추가 소제목'을 작성한다. '추가 소제목'에 h 태그를 적용하려면 'HTML 편집'에 들어가 <p>로 시작하는 부분을 <h5>, <h6>로 변경하고, </p>를 </h5>,</h6>로 수정한다. 수정 후 오른쪽 위의 '적용' 버튼을 누르면 '추가 소제목'의 크기가 변경된 것을 확인할 수 있다. 

 

이 외에도 소제목을 더 추가하고 싶다면 본문 글자 크기로 작성한 후 'HTML'에서 <font size=숫자>와 같이 원하는 크기의 숫자를 넣고 줄 마지막에 </font>를 입력하는 방법도 있다.

 

그러나 필자가 설정해 본 결과 h 태그로 설정한 소제목의 크기와 비슷하게 맞추는 것이 생각보다 어려웠다. h5, h6를 설정하는 방법은 비교적 간단하지만 매번 'HTML 편집'에서 별도의 작업을 해야 한다는 점이 다소 번거로워 필자의 경우 자주 사용하지는 않을 것 같다.