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

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

구 에디터와 새 에디터

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

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

저는 새 에디터가 편리하여 새로운 에디터를 사용하고 있습니다. 이미지 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(검색엔진최적화)에 유리합니다. 티스토리에는 자동 목차 플러그인이 없지만, 목차 스크립트를 사용하여 자동 목차를 만들 수 있습니다. 티스토리에서 자동으로 목차를 만드는 방법은 다음 글을 참고해보세요.

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

소제목 스타일

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

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

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

 

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

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