티스토리 소제목 (머리말) 올바로 적용하기

2020. 7. 11. 03:57 | 댓글 10

글을 작성할 때 소제목으로 구분하면 가독성이 향상되어 방문자들이 글의 내용을 보다 쉽게 파악할 수 있고 방문자들이 읽고 싶은 곳으로 빠르게 이동할 수 있습니다. 티스토리에서는 구 에디터와 신 에디터에서 소제목(머리말)이 조금 혼란스럽게 되어 있습니다.

구 에디터와 새 에디터

티스토리 블로그에서 글을 작성할 때 이전 편집기와 새 편집기 중에서 선택할 수 있습니다. 편집기 선택은 콘텐츠 > 설정에서 가능합니다.

새로운 글쓰기를 "사용합니다"를 선택하면 새 에디터에서 글을 작성하게 됩니다. "사용하지 않습니다"를 선택하면 구형 에디터를 사용하게 됩니다.

저는 새 에디터가 편리하여 새로운 에디터를 사용하고 있습니다. 이미지 ALT 텍스트 설정 등 SEO 측면에서는 구 에디터가 더 좋을 수 있습니다.

구 에디터와 신 에디터에서 헤딩 태그(H2, H3, H4...)가 조금 다르게 표시됩니다. SEO를 위해 제대로 차이를 이해하고 헤딩 태그를 제대로 적용하는 것이 바람직합니다.

구 에디터에서 소제목(머리말) 설정하기

구형 편집기에서는 헤딩 태그가 머리말 1, 머리말 2... 등의 용어로 표시되어 있습니다. 

주의해야 할 점은 머리말 1은 H1, 머리말 2가 H2, 머리말 3이 H3, 머리말 4가 H4가 됩니다.

H1 태그는 글 제목에 사용되며, 일반적으로 H1은 한 문서에서 하나만 사용됩니다. 그러므로 글 작성 시 소제목을 설정할 때에는 머리말 2부터 적용하시기 바랍니다. 머리말 2를 선택하면 아래 그림과 같이 H2 태그가 적용됩니다.

새 에디터에서 소제목 (머리말) 설정하기

 

새 편집기에서는 헤딩 태그가 제목1, 제목2, 제목3...으로 표시됩니다. 유의할 점은 제목1이 H2, 제목2가 H3, 제목3이 H4가 됩니다.

그러므로 새로운 글쓰기를 사용하는 경우 소제목을 지정할 때 제목1부터 지정하도록 합니다. 제목1을 지정하면 아래 그림과 같이 H2 태그가 적용됩니다.

새 편집기를 사용하는 경우 소제목 스타일을 잘못 지정할 우려가 없지만, 구 편집기를 사용할 경우 잘못하면 H1 태그부터 지정할 가능성이 있으므로 약간 주의할 필요가 있습니다.

자동 목차 만들기

목차를 표시하면 SEO(검색엔진최적화)에 유리합니다. 티스토리에는 자동 목차 플러그인이 없지만, 목차 스크립트를 사용하여 자동 목차를 만들 수 있습니다. 티스토리에서 자동으로 목차를 만드는 방법은 다음 글을 참고해보세요.

 

티스토리 블로그의 모든 글에 자동으로 목차 표시하는 방법

티스토리 블로그에 목차를 표시하려는 경우 목차 스크립트 파일을 이용하여 목차를 추가할 수 있습니다. 보통의 경우 목차를 표시할 자리에 수동으로 HTML 코드를 추가해야 하는데, 그러면 번거�

avada.tistory.com

소제목 스타일

CSS를 사용하여 소제목(헤딩)의 스타일을 지정할 수 있습니다. 북클럽에서 소제목 스타일을 변경하는 방법을 다음 글의 "티스토리 소제목 (헤딩) 스타일 변경" 부분에서 확인할 수 있습니다.

 

티스토리에 목차 표시하는 방법 (북클럽 스킨)

티스토리에는 모든 글에 자동으로 목차를 표시하는 방법은 없지만, 원하는 글에 자동으로 목차를 삽입할 수 있습니다. 헤딩 태그를 인식하여 자동으로 목차를 생성하는 jQuery를 사용할 수 있습��

avada.tistory.com

다른 티스토리 스킨뿐만 아니라 워드프레스 테마 등에서도 비슷한 방법으로 소제목 스타일을 지정할 수 있습니다.

 

추가: 구 에디터 유지보수 종료

주요 브라우저에서 플래시 지원을 종료함에 따라 금년 하반기에 구 에디터에 대한 유지보수를 더 이상 제공되지 않는다고 합니다. 그러므로 가급적 새 에디터를 사용하시기 바랍니다. Adobe Flash 지원이 종료되면 구 에디터에서 이미지를 업로드하는 데 어려움을 겪게 될 것으로 보입니다.

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    청결원

    포스팅 잘 보고 도움 받고 갑니다

  2. thumbnail
    공수래공수거

    소제목을 잘 보이게 하면 가독성이 높아지죠^^

  3. thumbnail
    Sakai

    새에디터는 구에디터 보다 저한테는 안어울리더라고요.

  4. thumbnail
    MHSW

    답글 주셔서 감사합니다. 제글에서는 제목1을 항상 제목으로 달아주고 그 다음에는 제목 3을 이용해서 단락을 주는 편인데 이래도 생성이 안되는 건가요? 어떻게 해야 생성이 되나요?ㅠㅠ

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2020.07.14 17:45 신고

      새 에디터를 사용하는 경우 제목1이 두 개 이상이어야 https://avada.tistory.com/1789 글에서 제시하는 코드를 사용했을 때 목차가 표시됩니다.

      제목1이 하나만 있어도 목차가 표시되도록 하려면

      if ( $( ".e-content h2" ).length > 1 || $( ".e-content h3" ).length > 1 )

      이 부분을

      if ( $( ".e-content h2" ).length > 0 )

      이렇게 변경하여 테스트해보시기 바랍니다.

      (그리고 제목 1 아래에는 제목 3이 아닌 제목 2가 사용되어야 합니다. )

  5. thumbnail
    MHSW

    감사합니다. 해결하였습니다! (꾸벅)
    글 내용에서 제목은 서식으로 꾸민건가요? 깔끔하니 예쁜데 어떻게 해야 하는지 알 수 있을까요?