내 블로그 포스팅이 구글 검색엔진이 쉽게 인식할 수 있도록 제목을 구성 하는 것은 글을 작성하면서 고려해야할 요소 중 하나이다. 이번 포스팅에서 제목 태그를 제대로 이해하고 설정하는 방법에 대해 알아보자.
 |
| 제목 태그 설정하기 |
제목 태그
제목 태그는 H 태그 (H tag) 또는 헤더 태그라고도 하는데, 웹 사이트나 블로그 포스트를 구성하는 데 도움이 되는 HTML 요소이다. 콘텐츠를 작성하면서 하위 섹션을 구분하는데 사용되며, 이는 길이가 긴 포스트를 작성하는데 특히 중요하다.
표준 HTML은 페이지 구조를 구성하는데 있어서 <h1> (H1)부터 <h6> (H6)까지 지원한다.
H1 태그는 주로 페이지의 기본 제목에 사용되며, 일반적으로 페이지 제목과 유사하거나 동일하다. 현재 읽고 있는 이 포스트의 <h1> 태그는 "제목 태그 쉽게 이해하고 설정하기 How to set heading tags"에 해당한다.
H2 태그는 <h1> 태그 아래에서 콘텐츠를 큰 챕터별로 나눌때 사용한다.
이어서 세부적인 하위섹션으로 구분을 할때 H3, H4, H5 및 H6 태그를 계속 사용한다.
제목 태그 어떻게 설정할까?
티스토리, 워드프레스, 블로거와 같은 블로그 제작 플랫폼에서는 제목 태그를 사전에 형식화해서 사용자들이 쉽게 설정할 수 있도록 해준다.
티스토리에서는 글쓰기-"문단모양", 블로그스팟에서는 "단락형식"에서 설정이 가능하다.
티스토리 제목 태그 설정하기
티스토리는 가장 많이 쓰는 스킨인 북클럽 기준이다.
티스토리 글쓰기 - 문단모양에서는 제목1 <h2>, 제목2 <h3>, 제목3 <h4>, 본문1 <p>, 본문2 <p>, 본문3 <p>을 각각 선택할 수 있다.
기본적으로 설정된 폰트 크기는 다음과 같다.
제목1 <h2> "size26"
제목2 <h3> "size23"
제목3 <h4> "size20"
본문1 <p> "size18"
본문2 <p> "size16"
본문3 <p> "size14"
글쓰기 기능에 설정된 각 제목 태크의 글씨 크기와 상관없이 실제로 보여지는 글씨를 조정할 수 있다.
티스토리 관리자 페이지에서 "꾸미기" - "스킨 편집"으로 들어간 후, "html 편집" - "CSS"를 선택한다.
CSS에서 보여지는 코드들 가장 상단에 "CSS CONTENTS"가 있는데, "06. Entry Content"에 작성된 내용을 설정해주면 된다.
CSS 코드 내용 중 아무곳이나 클릭하고 Ctrl+F를 누르면 검색창이 뜨고, "Entry Content"를 검색하면 빠르게 찾을 수 있다.
아래에 빨간색으로 표시된 부분은 수정된 부분이다.
.entry-content h1 {
clear: both;
margin: 29px 0 22px;
font-size: 1.6875 em;
line-height: 1.5;
color: #000;
}
.entry-content h2 {
clear: both;
margin: 29px 0 22px;
font-size: 1.4 em;
line-height: 1.5;
color: #000;
}
.entry-content h3 {
clear: both;
margin: 29px 0 22px;
font-size: 1.4 em;
line-height: 1.5;
color: #000;
}
.entry-content h4 {
clear: both;
margin: 29px 0 22px;
font-weight: 400;
font-size: 1.4 em;
line-height: 1.5;
color: #000;
}
.entry-content a {
color: #04beb8;
}
.entry-content p {
margin-bottom: 32px;
word-break: break-word;
font-size: 1.15 em;
line-height: 2;
color: #555;
블로거 제목 태그 설정하기
블로거에서는 글쓰기 창에서 "단락 형식"으로 제목 태그를 설정할 수 있는데, 기본 설정은 다음과 같다.
- 주 제목 (Major heading) = h1
- 제목 (Heading) = h2
- 부제목 (Sub-heading) = h3
- 소제목 (Minor heading) = h4
- 단락형식 (Paragraph) = <p></p>
- 보통 (Normal) = <div></div>
블로거는 글쓰기 창의 가장 상단 포스트 "제목"이 "h3"로 설정되어 있다. 그렇기 때문에 블로거에서 글쓰기를 하며 제목 태그를 설정할때는 가장 처음에 "단락형식"의 "주 제목"이 포함되도록 작성하는 것이 좋다.
아니면 블로거의 포스트 제목을 h1 tag로 설정해 사용할 수도 있다.
블로거 관리 페이지에서 "테마" - "맞춤설정" 드롭다운 - "html 편집"에서 "post-title entry-title"를 검색하고 <h3>를 <h1>으로 바꾸면 된다.
< h1 class='post-title entry-title'>
<b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
<a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</ h1 >
포스트 제목을 <h1>으로 설정할 경우에는 "단락 형식"의 "주 제목 (Major heading)"을 사용하지 않는 것이 하나의 페이지에 두 개의 <h1> 태그가 달리는 것을 막는 방법이다.
이상 제목 태그가 무엇인지 어떻게 설정하는지 알아봤다. 티스토리나 블로거에서 사전 정의된 형식이 있어 편하게 설정할 수 있고, 본인만의 스타일대로 간단히 수정도 가능하다. 앞으로 포스트를 작성할때는 제목 태그를 적절하게 사용해서 검색 엔진이 쉽게 나의 글들을 찾을 수 있도록 하자.