본문 바로가기

티스토리 #1 스킨 검색엔진최적화(SEO) 버전 배포

gracenmose 2024. 5. 17.

티스토리 스킨 중 #1 스킨이 사이드바도 없고 깔끔해서 나름 쓸만하다고 추천하고, 실제로 서브 블로그에서도 잘 사용하고 있었는데, 문득 스킨을 뜯어서 보던 중 SEO구조에 맞지 않는 스킨 구조를 갖추고 있는 것을 발견했습니다.

검색엔진최적화(SEO)를 위한 구조로는 포스팅 제목이 제목1(H1) 태그로 구성이 되어야 하는 것이 일반적이지만, #1스킨은 포스팅 제목이 H3로 되어 있었습니다. 이런 부분을 간단하게 고친 버전을 이 페이지를 통해 배포해 보겠습니다. 스킨의 기본 세팅에서 일부 태그 사용만 바꾼 버전입니다.

티스토리 #1 스킨 기본 버전 문제점

#1 스킨은 티스토리에서 제일 처음으로 만든 반응형 스킨이어서 이름이 이렇게 정해진 것입니다. 반응형 스킨이라는 것은 화면의 크기에 맞춰 콘텐츠가 제대로 나올 수 있도록 구성된 스킨을 의미합니다.

티스토리에서 만들어 놓은 기본 버전에서는 아래와 같은 문제점이 발견되었습니다.

  • H1 태그가 올바르게 사용되지 않음
  • 포스트(글)의 제목이 H3 태그로 되어 있음
  • 위젯 등에서 사용되는 제목 태그가 많음

이런 구조로 되어 있으면 검색엔진에 색인을 하는 과정에서, 해당 사이트가 이야기하고자 하는 것이 무엇인지 정확하게 분석하기 어려울 수 있습니다. 일반적으로 H1 태그는 포스트 제목에 한 번만 사용되고, 그 외 영역은 H2 또는 H3로 지정되는 것이 좋습니다.

워드프레스에서 SEO 최적화된 테마들이라고 알려진 것들을 살펴보면 H태그를 많이 사용하지 않아서, 블로거가 글에서 설정한 제목 태그만 내용에서 볼 수 있습니다. 그래서 티스토리 #1 스킨 기본 버전의 수많은 제목 태그를 수정할 필요가 있다고 생각합니다.

(한때 #1 스킨을 추천했던 사람이라 책임을 통감하고 이 부분을 직접 수정했습니다.)

티스토리 #1 스킨
티스토리 #1 스킨

티스토리 #1 스킨 SEO버전

앞에서 언급한 티스토리 #1 스킨에 대해서 일부 내용을 수정한 버전은 아래 파일 링크를 눌러서 받을 수 있습니다.

티스토리 #1스킨 SEO버전_v1.zip
0.46MB

변경한 부분은 아래와 같습니다.

  • 포스트 타이틀만 H1 태그로 수정
  • H2 태그로 되어 있던 영역 모두 제거
    즉, 본문에 제목1~3 사용한 것들만 H2~H4 태그가 사용됨
  • 포스트 제목 사이즈 조절 (작게)
  • 포스트 작성일 날짜만 보이게 설정 (발행 시간까지 보일 필요가 있을까요?)
  • 본문 내 제목 사이즈 조절 (원래 설정보다 작게)
  • 리스트 타입 폰트 크기 조절 (본문 폰트와 동일)

위에서 언급한 수정 외에 다른 영역은 티스토리 #1 스킨 기본형과 동일합니다.

티스토리 스킨 변경은 그리 어렵지 않습니다. 혹시 모르니 반드시 우선 백업을 해 놓으시고, HTML 파일과 CSS 파일의 내용은 메모장 같은 곳에 한 번 복사해 놓는 것도 나쁘지 않습니다.

혹시 사용하시다 이상한 부분이 있으면 댓글로 언제든 제보해 주시면 감사하겠습니다.

제가 다른 커스텀 스킨을 만들 수 있을 정도의 실력은 안 되지만, 있는 스킨에서 조금씩만 다듬는 정도는 가능해서 이번 스킨을 수정했습니다. #1 스킨은 티스토리 이야기를 많이 썼던 제가 괜찮은 스킨이라고 추천을 했던 스킨인데, 뒤늦게 검색엔진최적화와 거리가 가깝지 않다는 것을 알게 되어 직접 수정한 것입니다.

주의사항

검색엔진최적화에 유리하다고 알려진 방법으로 스킨 코드를 일부 업데이트 했을 뿐이지, 이 스킨을 사용한다고 검색엔진최적화가 되어서 구글 검색이나 네이버 검색에 유리해 지는 것은 아닙니다.

구글과 네이버 검색이 잘 들어오게 하기 위해서는 콘텐츠가 가장 중요합니다. 이 스킨의 사용은 검색엔진 로봇이 조금 더 콘텐츠를 쉽게 파악할 수 있도록 샛길이 많던 것을 정리한 정도에 그치는 점을 감안하시기 바랍니다.

구글 블로그 시작해 보기

티스토리에서 블로그에 자체 광고를 2023년 2월 6일 이후 언제든 넣을 수 있게 약관을 바꾼 것에 대응하기 위하여 워드프레스 또는 구글 블로그(블로거, 블로그스팟)을 해 보고 싶으신 분들이 있을 수 있습니다. 그 분들은 아래 링크로 가서 어떻게 개설하고 초기 세팅하면 좋은지 방법을 배워 보세요.

구글 블로그 시작해 보기

티스토리 스킨 관련 팁

티스토리 스킨 추천

이 블로그에 티스토리 스킨 관련되어 팁을 적어놓은 글들이 많이 있으니 한 번 살펴 보시면 티스토리 스킨 변경할 때 도움이 될 수 있습니다.

티스토리 스킨 관련 팁 모아 보기

티스토리 스킨 선택, 어떤 스킨이 좋을 것인가?

티스토리 스킨들의 모바일 화면 비교

티스토리 스킨편집 할 때 꼭 해 두면 좋은 팁 (ft. 메모장)

HTML 편집 없어도 티스토리 스킨 변경 쉽게 하는 방법

그리드형(광고전용)

댓글