본문 바로가기

SNS와 블로그

티스토리 제목 H1 태그로 바꾸기

반응형

티스토리 제목 H1 태그로 바꾸기 방법을 알아보겠습니다. 구글 SEO에서 좋은 점수를 받으려면 H1 태그를 사용해야 합니다. H태그는 제목을 나타내는 태그로 1이 가장 중요한 제목을 나타냅니다. 그런데 H1 태그를 너무 많이 사용하면 안되고, 1개만 사용해야 합니다. 티스토리에는 여러 스킨이 있는데 제목이 H1 태그가 아닌 경우가 있습니다.

#1 스킨이 다른 스킨보다 빠르고 구조가 간단해서 많은 사람들이 사용하고 있습니다. #1 스킨의 제목은 h3 태그입니다. 그러면 #1 스킨을 기준으로 티스토리 제목 H1 태그로 바꾸기 방법을 알아보겠습니다.

티스토리 제목 H1 태그로 바꾸기
티스토리 제목 H1 태그로 바꾸기

 

목차

  • 티스토리 제목 H1 태그로 바꾸기 방법
    • 1. 크롬 개발자 도구 열기
    • 2. 제목의 class 확인하기
    • 3. 스킨 편집하기
    • 4. class를 찾아서 H1 태그로 바꾸기
    • 5. H1 태그 개수 확인하기

 

티스토리 제목 H1 태그로 바꾸기 방법

1. 크롬 개발자 도구 열기

아래 사진은 #1 스킨의 제목을 캡처한 화면입니다. 먼저 제목이 어떤 class를 사용했는지 확인합니다. class는 HTML에서 CSS를 꾸밀 때 많이 사용합니다.

티스토리 제목부분
티스토리 제목부분

 

F12키를 누르면 아래와 같은 화면이 나옵니다. 여기서 빨간색으로 표시한 <선택 아이콘>을 클릭합니다.

개발자 도구
개발자 도구

 

2. 제목의 class 확인하기

그리고 제목에 갖다대면 아래와 같이 HTML와 class나 id를 알 수 있습니다. 현재 #1 스킨은 H3로 tit_post class를 사용하고 있습니다.

class 확인하기
class 확인하기

 

개발자 도구에 보면 자세한 내용을 확인할 수 있습니다.

개발자 도구에 보면 자세한 내용을 확인
개발자 도구에 보면 자세한 내용을 확인

 

이 제목을 H1로 바꾸는 방법을 잘 몰라서 본문 제목에 직접 H1 태그를 넣어서 포스팅을 하는 경우가 있습니다. 신에디터에서는 제목1은 H2 태그를 사용합니다. H1 태그가 중복해서 사용하지 않도록 막은 것입니다.

H1 본문에 넣는 경우
H1 본문에 넣는 경우

 

HTML 모드에서 H1태그로 바꾸지 말고, 포스팅 위의 제목을 H1 태그로 바꾸는 것을 추천합니다.

 

3. 스킨 편집하기

티스토리 관리화면에서 <스킨 편집>을 클릭합니다.

스킨 편집하기
스킨 편집하기

 

html 편집을 클릭합니다.

html 편집
html 편집

 

HTML에서 tit_post라는 class를 쓰고 있는 부분을 찾아야 합니다. 개발자 도구에서 class 이름을 복사합니다.

tit_post라는 class
tit_post라는 class

 

Ctrl+F키를 눌러서 찾기 기능을 사용해서 찾습니다. 개발자 도구 복사한 class 이름을 붙여넣습니다. 그리고 Enter키를 누릅니다.

Ctrl+F키
Ctrl+F키

 

4. class를 찾아서 H1 태그로 바꾸기

그러면 아래와 같이 tit_post class를 찾을 수 있습니다. tit_post 클래스를 사용하는 것 중에서 '##_article_rep_title_##'가 있는 것을 찾아야 합니다. '##_article_rep_title_##'는 치환자로 포스팅의 제목을 나타냅니다. Ctrl+G키로 계속 찾으면 됩니다.

class를 찾기
class를 찾기

 

오른쪽 바에 노란색으로 표시한 곳이 Ctrl+F키로 찾은 class가 위치한 곳입니다.

Ctrl+F키로 찾은 class가 위치한 곳
Ctrl+F키로 찾은 class가 위치한 곳

 

Ctrl+G키로 찾다보니 '##_article_rep_title_##'가 있는 H3 태그를 찾았습니다. H3 태그를 H1으로 바꿔주면 제목이 H1으로 바뀝니다.

##_article_rep_title_##
##_article_rep_title_##

 

아래와 같이 h1를 여는 태그와 닫는 태그에 입력하고 적용을 합니다.

H1 태그로 바꾸기
H1 태그로 바꾸기

 

계속 찾다보면 h3 태그 중에 tit_post class를 사용하고 '##_article_rep_title_##'가 있는 코드를 찾을 수 있습니다. 이것을 다 h1으로 바꿔줍니다.

H1 태그로 바꾸기
H1 태그로 바꾸기
H1 태그로 바꾸기
H1 태그로 바꾸기
H1 태그로 바꾸기
H1 태그로 바꾸기

 

다 바꿨으면 적용 버튼을 클릭하고 개발자 도구로 다시 확인합니다. 아래와 같이 H1 태그로 잘 바뀌었습니다.

제목 확인하기
제목 확인하기

 

5. H1 태그 개수 확인하기

개발자 도구에서 Ctrl+F키를 입력하고 <h1 이라고 검색해서 몇 개의 H1 태그가 있는지 확인해봅니다. H1 태그가 2개 있다고 나옵니다.

H1 태그 개수 확인하기
H1 태그 개수 확인하기

 

확인해보니 screen_out를 class로 사용하는 코드가 있습니다. #1에서 블로그 제목을 나타내는 곳입니다.

screen_out
screen_out
블로그 제목
블로그 제목

 

티스토리 스킨편집 메뉴에서 screen_out을 찾고 '##_title_##'가 들어있는 코드를 찾습니다. '##_title_##'는 블로그 제목을 나타내는 곳입니다.

##_title_##
##_title_##

 

이것을 H2 태그로 바꿔줍니다.

H2 태그로 바꾸기
H2 태그로 바꾸기

 

그러면 개발자 도구를 확인했을 때 H1 태그가 하나만 들어있는 것이 볼 수 있습니다. 이번 포스팅에서는 티스토리 제목 H1 태그로 바꾸기 방법을 알아봤습니다. H1 태그가 하나만 있어야 SEO 점수가 좋아진다고 합니다. 이 포스팅이 여러분에게 작은 도움이 되었으면 좋겠습니다.

 

추천 포스팅

 

H2 태그 티스토리에서 사용하기

 

반응형