검색엔진 최적화(SEO)활용-헤더태그에 스타일시트 적용하기(티스토리 블로그)

블로그 검색엔진 최적화(SEO)를 위한 헤더 태그 (header tag) 스타일 시트 적용

 

헤더 태그란? HTML 태그에서 본문안에 제목,중제목,소제목 등을 구분하기 위해 사용합니다.

시작태그 와 마침태그 는 아래와 같이 구분되며
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

이는 검색엔진 최적화에 있어서 타이틀 태그 <title></title> 만큼이나 중요합니다.

지난 게시글에서 간단히 설명한 바 있으므로 해당 글을 먼저 보시고 오시면 더 도움이 될거 같습니다.

2010/07/20 - [쇼핑몰 운영 A-Z/검색엔진 최적화(SEO)] - 검색엔진 최적화(SEO)로 쇼핑몰을 알리자
2010/07/23 - [쇼핑몰 운영 A-Z/검색엔진 최적화(SEO)] - 블로그 게시물로 검색순위 1등을 노리는 당신, 글작성방법을 바꿔보자

문제는 이 헤더태그를 사용했을때 글 크기가 말도 안되게 커져서 보기 좋지 않다는 것이 문제점인데요
티스토리 에서는 이 문제점을 CSS 를 사용해서 보완할 수 있습니다.

*CSS 란? 문서에 적용되는 글자크기,여백,디자인 레이아웃 등을 정해주는 ‘html 문서 스타일 정의’ 라고 이해하시면 되겠습니다.

 

변경하고 나면 아래와 같이  

글자 크기를 적당히 줄일 수 있으며, 글자 색상도 본문 기본색이 아닌 별도 색으로 지정할 수 있습니다.

 

 

1. 관리자의 스킨 > html/css 항목으로 갑니다.

2. style.css 소스의 맨 아랫줄로 커서를 이동합니다.

(스크롤바를 최대한 내리기만 하면 됩니다)

 

3. 아래 태그를 복사해 붙여넣습니다.(붉은색 표시된 부분만)

 

.article h1 {
    color:#663399;
    padding-top:6px;
    font-size:24px;
    text-decoration:none;
}

.article h2 {
   padding-top:6px;
   color:#663399;
   font-size:20px;
   text-decoration:none;
}

.article h3 {
   color:#663399;
   font-size:16px;
   text-decoration:none;
}

.article h4 {
   color:#663399;
   font-size:14px;
   text-decoration:none;
}

 

/* 태그는 H4 까지만 만들어놨습니다. H5,H6 는 잘 쓰지 않기때문에 이정도만 해도 충분합니다 */

/* 수정하시고자 하는 항목은 아래 설명을 보시고 약간씩 변경해 보세요 */

 

4. 하단의 저장을 누릅니다.

 

 

 

5. 태그에 대한 자세한 설명 입니다.

 

.article h4 {       : 본문의 H4 태그의 경우

padding-top:6px;     : 글자 위에 약간 띄움(6픽셀)

color:#663399;        : 색상은 보라색(#663399)

font-size:14px;       : 글자 크기는 14픽셀

text-decoration:none;               : 글자 형태는 아무것도 적용안함