[티스토리 초기설정] <h1> 태그 2개 중복 문제 해결

웹 페이지들은 하나의 h1 태그만 사용하는 것이 좋습니다. h1 태그가 2개 이상 존재하는 경우 검색 엔진에게 혼란을 줄 수 있습니다. 그러나 티스토리 블로그는 처음부터 h1 태그가 2개가 되는 문제점이 있습니다. h1 태그가 2개 이상 있어도 실제로 우리가 사용하는 데는 별다른 문제가 없지만 검색엔진에서 원활하게 검색되도록 하기 위해서는 가능하면 h1 태그는 하나만 사용하는 것이 좋습니다. 

 

■ 티스토리 블로그 문제점 : <h1> 태그가 2개 존재

티스토리 블로그에는 <h1> 태그를 사용하는 제목이 2개 존재하는 문제점이 있습니다. '블로그 전체의 타이틀(제일 위에 나오는 제목)'과 '개별 포스팅의 제목' 두 가지 모두 <h1> 태그를 사용하고 있기 때문입니다. 따라서 개별 포스팅 기준에서 살펴보면 문서에 <h1> 태그가 2개 있는 셈이 되고 검색엔진 프로그램은 문서에 뭔가 문제가 있다고 인식하게 됩니다.

 

그러나 실제로 많은 티스토리 유저분들이 <h1> 태그가 몇 개인지 관계없이 오랫동안 사용하고 계신 점으로 미루어 보아 정량적으로 어느 정도의 영향을 미치는지는 알기 어렵지만, 다음(Daum) 검색뿐만이 아닌 구글 등 외부 검색엔진 유입을  고려한다면 이왕이면 SEO 기준을 준수하여 페이지를 만들어주는 것이 장기적으로 유리할 것으로 판단됩니다. 

 

■ 내 블로그 제목의 <h1> 태그를 지워도 문제없을까?

위에서 말씀드린 바와 같이 "내 블로그 제목"과 "개별 포스팅 제목"이 둘 다 <h1> 태그를 사용하고 있습니다. 만약 "내 블로그의 제목"의 <h1> 태그를 없앤다면 "개별 포스팅 제목"만 <h1> 태그를 사용하니 개별 포스팅 관점에서는 <h1>은 1개만 있는 정상 문서가 되어 문제가 해결됩니다. 

 

그러나 개별 포스팅이 아니라 "홈 메인 화면"이라던가 "카테고리 메뉴 화면" 등과 같이 개별 포스팅이 아닌 나머지 페이지들은 <h1> 태그가 없는 문서가 되어버리게 됩니다. 이 경우 검색엔진에서는 <h1> 태그가 없는 문서라는 알림을 띄우게 됩니다. 

 

그렇다고 내 블로그 제목의 <h1> 태그를 지우지 않고 그대로 둔다면 개별 포스팅 문서들은 <h1> 태그가 2개 이상 있는 문서라는 오류를 가지게 됩니다. 

 

오류와 알림 중에서 선택하라고 한다면 저는 알림을 택하겠습니다. 또한 <h1> 태그라는 것이 해당 문서의 제목을 나타내 주는 것인데, 해당 문서라 함은 우리가 작성하는 개별 포스팅의 제목이 더 타당하다고 생각되며, 문서의 수량도 개별 포스팅 문서들이 나머지 페이지들에 비해 훨씬 많을 것이기 때문에 크게 고민할 필요는 없다고 생각됩니다.

 

현재로써는 양쪽 모두의 문제를 해결할 수 있는 방안은 딱히 떠오르지 않는데, 혹시나 나중에라도 방법을 알게 되면 추가로 포스팅하도록 하겠습니다. 

 

■ 내 블로그 제목의 <h1> 태그 삭제 방법

"블로그 관리 → 스킨 편집 → HTML 편집"으로 들어갑니다. 

HTML에서 대략 27 번열 부근에서 블로그 제목 부분이 시작됩니다. 

잘 보시면, <h1>과 </h1>으로 둘러싸인 부분에 "아이디어 노트"이라고 되어 있는 부분이 보입니다. 여기가 바로 내 블로그 제목이 표시되는 부분입니다. 

HTML 태그에서 타이틀의 h1 을 p로 변경하기

여기서 <h1>과 </h1>을 일반 본문을 의미하는 <p>와 </p>로 변경해버리면 문제가 해결됩니다. 

그런데, 단순히 HTML 태그만 <p>와 </p>로 바꾸어 버리면 내 블로그 제목의 폰트와 사이즈 등 설정이 모두 없어지게 됩니다. 따라서, CSS 파일도 함께 수정해주어야 합니다.

 

위에 HTML 태그에서 내 블로그 제목이 나타나는 부분을 잘 보면 <header id="header">라고 되어 있는 것을 알 수 있습니다. CSS 파일에서 해당 부분을 꾸며주는 위치를 찾아갑니다. CSS 파일 126열 부근을 찾아보시면 "#header h1"이라고 되어 있는 부분이 보입니다. header라는 부분에 있는 h1의 설정값입니다. 우리는 HTML에서 h1을 p로 바꾸었으니, 여기서도 h1을 p로 바꾸어줍니다. (아래 제 CSS 태그 기준으로 126열, 135열, 142열 모두 바꾸어줍니다.)

CSS 태그에서 타이틀의 h1 을 p로 변경하기

 

이상으로 <h1> 태그가 2개 중복되는 문제를 해결하는 방법에 대해 알아보았습니다.

조치하는 방법은 생각 외로 단순했습니다. 

 

※ 참고로, 내 블로그 제목의 폰트나 폰트 사이즈, 굵기, 색깔 등의 수정이 필요하신 분은 위의 CSS 태그에서 126열부터 133열 사이에 있는 font-weight, font-size, color 등 수정하여 사용할 수 있으니 활용하시기 바랍니다.