티스토리 블로그 초기 세팅 - (1) H1 중복 태그 없애는 법

티스토리 블로그 글 작성 후 HTML 소스를 보게 되면 특이한 점이 있습니다. 바로 H1 태그가 2개가 발견이 된다는 것인데요. H1 태그는 블로그의 주제를 나타내는 역할을 합니다. 즉, 페이지의 대제목으로 볼 수 있는데요. 검색 엔진은 H1 태그로 감싸진 텍스트를 통해 주요 제목을 알 수 있는 것입니다.

 

H1이 중복으로 사용된다는 것은 검색 엔진 최적화에도 크게 도움이 되지 않습니다. 하지만 필요에 따라서는 중복으로 사용되는 경우도 있기는 하지만 SEO 권장사항은 한 개의 페이지 내에서 H1 태그는 한 번만 사용하는 것을 권장합니다.

 

 

티스토리 H1 중복 없애는 이유

예를 들면 이렇습니다.

1. 뿡뿡이의 유용한 팁
2. 가을 단풍 여행지 TOP 10

1번은 내 블로그 이름입니다. 그리고 2번은 내 블로그 한 개의 게시물 제목입니다.

티스토리는 1번과 2번 모두 H1으로 표시가 되는데, 1번과 2번을 보면 어떤게 느껴지시나요? 동일한 레벨의 H1인데 어떤 것을 보고 이 페이지의 주제를 판단해야 할까요? 

 

물론 내 블로그 이름이 <header> 안에 들어가 있는 H1 이기는 하지만, 전통적인 SEO 방식 측면에서 좋은 방법은 아닙니다. 애매한 부분이라면 검색 엔진이 쉽게 판단할 수 있도록 변경해 주는 것이 좋습니다.

 

티스토리 H1 1개만 표시되도록 수정하기

스킨별로 조금씩 다를 수 있지만 일반적으로 H1은 비슷한 구조로 되어 있습니다. 

북클럽 스킨을 예시로 작성되었습니다.

1. 관리 메뉴 → 꾸미기 / 스킨 편집을 클릭합니다.
2. 오른쪽 상단의 html 편집 버튼 클릭
3. ##_blog_link_## 부분을 찾습니다.

 

수정 방법은 HTML 수정 후, CSS 추가

HTML 수정

찾으셨나요? 위, 아래로 <h1> </h1>으로 감싸져 있는것이 보이시죠?

이 <h1>과 </h1> 부분을 <p class="btitle"> </p>로 변경해 주세요. <h1>은 <p class="btitle">로 변경하고, </h1>은 </p>로 변경 후 상단 검은색 "적용" 버튼을 눌러주세요.

 

적용을 하셨다면 아래 이미지와 같이 수정이 되셨을거에요

 

💡알아두면 좋아요

HTML 태그는 대부분 시작과 끝을 가지는데요. <P>로 시작하면 </P> 태그로 닫게 됩니다. 예외적인 태그도 존재하는데 예를 들면 <img> <br> <meta> <input>과 같은 셀프 크로징 태그는 닫는 태그 없이 사용됩니다.

 

CSS 수정

H1로 감싸져 있던 태그는 원래 큰 글씨로 보이게 되는데, H1을 없앴기 때문에 기본 글자크기로 표시가 되는데요. 이를 원래 표시되던 사이즈와 폰트로 보일 수 있게 세팅하는 것입니다.

 

변경 CSS는 아래 링크를 활용하세요. 

Blog-Title-P-Tag.txt

0.00MB

 

 

이렇게 하셨다면 수정 완료입니다. 소스보기로 확인해 보시면 기존 블로그 제목을 감싸던 <h1>블로그 제목</H1>이 <P>태그로 감싸져 있고, 블로그 게시물의 제목이 <H1> 태그로 되어 있을 거예요.

 

변경 후 블로그 게시물 제목에 H1이 적용된 모습