티스토리 블로그 북클럽 스킨 <h1> 중복 현상 제거

티블로그에서는 포스팅 글에 h1태그가 1개여야 하는데, 문제는 사용하는 스킨에 따라서 "블로그의 이름"도 h1으로 설정된 경우가 있어서 오류가 뜬다. 내가 설정해 놓은 '북클럽'스킨에서 이런 문제가 발생했다.

 

 

태그 중복 문제 해결

메뉴 이동하기

1. 먼저 티스토리 관리자 페이지로 접속한다.

2. 아래 메뉴를 따라간다.

티스토리 블로그 관리 페이지 > 스킨 편집 > html편집>으로 이동한다. 중복 오류가 뜰만한 h1 코드를 찾아서 변경할 예정이다.

 

 

소스코드 수정하기

- html 코드 수정

3. html 소스창을 클릭하고 먼저 코드를 찾는다. " ctrl + f " 를 눌러서 "본문 바로가기" 를 검색한다.

4. 그 뒤에 나오는 최초의 <H1> 코드를 찾아서 <div class="first">라고 수정한다. 따옴표 안에 글자는 본인이 정해도 된다. 

5. 다시 그 뒤에 나오는  </H1> 코드를 찾아서  </div> 코드로 변경해 준다. 

 

*<h1>태크는 그 뒤에 </h1> 태그를 동반한다. 마찬가지로 <div> 태그도 </div> 태그를 동반해야 한다. 

 

 

html페이지에서 총 1회 적용했다.

 

 

- CSS코드 수정

6. 티스토리 블로그 관리 페이지 > 스킨 편집 > html편집> 에서 상단 메뉴 CSS를 선택한다. 

7. 소스창을 클릭한 후 " ctrl + f " 를 눌러서 "header"를 검색한다.

8. header 뒤에 h1 소스를  .first 로 변경한다. 

 

#header .h1 {  ~
#header .h1 a {  ~
#header .h1 img {  ~

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

 

#header .first {  ~

#header .first a {  ~

#header .first img {  ~

 

 

총 3회 적용했다. 

 

 

9. 다시 " ctrl + f " 를 눌러서 "media"를 검색한다. h1코드를 화살표 아래 따옴표 모습으로 변경한다.

@media screen and (max-width:1080px) {
  #header .h1,

 

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

 

" @media screen and (max-width:1080px) {

  #header .first,  "

 

 

 

@media screen and (max-width:767px) {
  #header .h1 { 

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

" @media screen and (max-width:767px) {

  #header .first {  "

 

총 2회 적용했다.

 

CSS 페이지에서는  전체 5회 수정했다. 

 

저장 및 완료

변경을 마쳤다면 상단의 메뉴 "적용"을 눌러준다. 그럼 변경이 완료되었다.

 

 

티스토리의 블로그 제목도 h1 태그가 적용되고, 포스팅한 글 제목도 h1태그가 적용되어 <h1> 태그 중복 메시지가 뜨는 것이다. 

티스토리 블로그에서 h1이 2개 이상 중복되면 seo 최적화에서 불리한 경우가 생길 수 있다고 한다. 내가 적용한 '북클럽' 스킨의 경우에도 이런 오류가 떠서 이런 방법으로 수정하였더니 오류가 사라졌다. 북클럽 스킨이 아니더라도 이런 h1 태그 중복 오류가 뜬다면 이렇게 수정하는 건 어떨까?