검색엔진최적화(SEO) 티스토리 한눈에 스킨 배포

안녕하세요. 쭈미로운 생활입니다. 그동안 티스토리 블로그를 하면서 유료 스킨을 포함하여 다양한 스킨을 사용해 보았지만 개선할 부분들이 몇 가지씩 보였고, 그 부분을 수정하는 데에 많은 시간을 썼죠.

그래서 저는 스킨을 적용한 후에도 불필요한 수정 작업을 최소화하고자, 한눈에 스킨을 개발하게 되었습니다. 이 스킨은 기존 스킨들의 장점을 모으고 코드를 최적화해서 SEO를 통해 더 많은 노출을 할 수 있도록 만들었습니다.

한눈에 스킨 소개

가볍고 심플한 디자인으로 구성되어 있으며, 딱 필요한 기능만 넣었습니다. 스킨의 설정화면을 통해 헤더 메뉴, 사이드바, 폰트 및 폰트 색상, 자동 목차 생성, 코드 하이라이팅 등을 간편하게 조정할 수 있습니다. 또한 광고 노출에 최적화된 디자인으로 광고를 더욱 눈에 띄게 배치하여 클릭률을 높일 수 있습니다.

PC화면

모바일 화면

스킨 기본 설정

상단 바 메뉴 :티스토리 블로그 관리 화면의 [꾸미기 > 메뉴]에서 추가할 수 있습니다. 사용하지 않는 경우 헤더 영역에서 보이지 않습니다.
폰트 색상 : 본문을 포함하여 전체 폰트에 적용됩니다. 단, 본문의 폰트색상은 글을 작성할 때 에디터에서 지정한 폰트 색상이 우선적으로 적용됩니다. 따라서 스킨설정을 통해 포스팅의 폰트 색상을 일관되게 유지하려면 별도의 색상을 넣으면 안 됩니다.
코드 하이라이팅 :코드 블록을 사용할 때 코드의 가독성을 높여줍니다. 개발 블로그가 아니라면 사용하지 않는 것이 좋습니다. 코드블록 테마는 VS2015이며, 좌측에 라인넘버가 표시됩니다.

//코드블럭 예시
function fetchData(url) {
  return fetch(url)
    .then(response => response.json())
    .then(data => {
      console.log(data);
      return data; //fetch로 가져온 데이터 반환
    }).catch(error => {
      console.error('데이터를 가져오는 중 에러가 발생했습니다:', error);
    });
}

애드센스 설정

애드센스 설정에서 구글 애드센스 클라이언트 ID를 입력하고, 원하는 위치에 광고번호를 넣으면 광고가 표시됩니다.

댓글 설정

댓글창을 제거하거나, 댓글을 과거순이나 최신순으로 정렬할 수 있습니다. 또한, 댓글 입력 폼의 위치를 댓글 목록의 상단이나 하단으로 조정할 수 있습니다.

한눈에 스킨 특징

구글 검색엔진 최적화

검색 엔진 최적화를 고려하여 개발된 스킨으로 부가적인 디자인이나, 기능을 위해 추가 리소스를 따로 불러오지 않고 기본적으로 제공되는 스크립트와 폰트를 최대한 활용해서 네트워크 지연을 최소화했습니다.

또한 불필요한 파일과, 코드를 제거하고 코드를 최적화하여 seo에 좋은 성능을 발휘할 수 있도록 개발되었습니다. 최적화된 코드는 검색 엔진 크롤러가 웹 페이지를 효율적으로 분석하고 인덱싱할 수 있기 때문에 웹 페이지가 잘 노출될 수 있습니다.

성능 부분은 티스토리 서버에서 각종 리소스를 로드하기 위해 발생하는 네트워크의 지연으로 인한 감점입니다. 참고로 검색 엔진에서 웹 페이지를 노출시키고 순위를 결정하는 데에는 성능만 높다고 되는 게 아닙니다. 나머지 지표들과 상호보완적인 요소로 함께 고려되어야 합니다.

*티스토리에서 기본으로 적용되는 플러그인은 성능에 영향을 줄 수 있으므로, 필요한 플러그인만 활성화하고 나머지는 비활성화하는 것이 좋습니다.

구글 서치 콘솔(필수): 구글 검색 결과에 사이트를 등록하고 사이트맵을 자동으로 제출합니다.
메타태그 등록(필수): 네이버 검색 등록을 위해 소유권 확인을 위한 HTML 코드를 삽입합니다.
이전 발행글 삽입(선택): 글 작성 시 이전에 작성한 글의 링크를 손쉽게 추가할 수 있습니다.
반응형 웹스킨 최적화(추천): 포함된 이미지 크기를 자동으로 조절하여 반응형 웹 스킨을 최적화합니다.
구글 애널리틱스(선택): 방문자 통계를 기본 제공보다 더 자세히 확인할 수 있지만, 데이터 용량이 큽니다.

구글 애드센스 광고

한눈에 스킨은 광고를 적용할 때, 블로그의 디자인을 최대한 유지하면서도 클릭률(CTR)및 단가가 높은 광고를 효율적으로 배치하여 수익이 증대될 수 있도록 했습니다.

한눈에 스킨 애드센스 광고 적용하는 방법

한눈에 스킨 애드센스 자동 광고 적용하는 방법

한눈에 스킨은 효율적인 광고와 최적의 성능을 위해 자동 광고와 수동 광고를 함께 사용합니다. *본문 상단과 하단은 티스토리 자체 광고가 랜덤으로 노출되어 다른 글 보기 영역 하단으로 대체

toyou101.tistory.com

■ 메인 상단 광고

■ 메인화면 하단광고

■ 사이드바 광고

자동 목차 생성

자동 목차 기능은 별도의 목록을 작성하지 않고도, 본문에서 H2, H3 태그를 사용하면 자동으로 목차를 생성합니다.

자동 글자 수 세기

관리자인 경우 본문상단에 공백을 포함한 글자수와 공백을 제거한 글자 수가 표시됩니다.

중복 단어 체크

리자인 경우 중복 단어를 조회할 수 있는 버튼이 표시됩니다.

넓게 보기

본문의 타이틀 영역 우측에 위치한 "넓게 보기" 클릭 시, 가로 1200px의 넓은 화면으로 볼 수 있습니다.

다양한 드롭다운 메뉴

드롭다운 메뉴에 배경 이미지를 넣을 수 있습니다. 이미지가 없는 경우에는 색상으로 대체할 수 있습니다.

이미지 대체 텍스트 자동삽입

이미지 첨부 시 alt 속성, 즉 대체 텍스트를 삽입하지 않아도 이미지 파일명으로 대체 텍스트가 생성됩니다. 이미지가 많을 경우 대체 텍스트를 일일이 입력하는 번거로움을 피하고 간편하게 작업할 수 있습니다. 대체 텍스트는 검색 엔진 최적화에 중요한 역할을 수행하며, 넣지 않는 경우 생각 외로 많은 감점이 되는 항목입니다.

한눈에 스킨 다운로드

hannoone_skin_v1.3.2.zip

0.04MB

유의사항

한눈에 스킨 적용방법

이런저런 파일 필요 없이 아래와 같이 딱 4개의 파일만 업로드하면 됩니다. 이미지 파일은 드롭다운 메뉴의 배경으로 사용될 이미지로 원하시는 이미지를 파일명 "dropdown-profile_bg.jpg"로 업로드해 주세요. 이미지의 사이즈는 가로세로 약 600px 이하로 조정하여 업로드하시는 것이 좋습니다.

모바일에도 스킨을 적용하시려면 티스토리 블로그 관리 화면의 [꾸미기 > 모바일] 메뉴에서 티스토리 모바일웹 자동연결을 "사용하지 않습니다"로 변경하시면 됩니다. 반응형 스킨으로 모바일환경에도 최적화되어 있습니다.

포스팅을 할 때는 항상 "미리 보기"를 클릭하여 실제로 보이는 화면을 확인해 주세요. 목차 생성, 코드 블록 디자인 등은 에디터 화면에서는 보이지 않을 수 있으므로, 미리 보기를 통해 확인하는 것이 좋습니다.

끝으로 스킨을 사용하면서 오류가 발생하거나 개선이 필요한 사항이 있다면 언제든지 댓글로 남겨주세요. 적극적으로 반영하도록 하겠습니다. - 끝 -

저작자표시 비영리 변경금지