» web » blog-tips

티스토리 스킨 변경 방법 & 스킨 변경 시 주의 사항 및 필수 세팅

티스토리 스킨 변경 방법과 스킨을 변경할 때 주의해야 하는 것들을 설명하도록 하겠습니다. 티스토리 운영 시 주의해야 해야 하는 것들이 있습니다. 특히 네이버에 길들여졌거나 익숙한 사람들은 더욱 주의해야 합니다. 이 글에서는 기본적으로 주의해야 할 것들을 알려드리겠습니다.

티스토리 스킨 변경

네이버 블로그만 경험해서 그런 것인지 정말 조심해서 진행해야 하는 티스토리 스킨 변경 작업을 아무 준비 없이 그것도 눈 하나 깜짝하지 않고 진행하는 경우를 종종 보았습니다.

티스토리 스킨 변경 전 백업은 필수

네이버 블로그의 경우는 스킨 변경 시 직접 수정하거나 설정하는 부분이 거의 없기에 큰 문제가 발생하지 않습니다. 하지만 티스토리 블로그는 스킨을 변경할 때 작은 실수를 하더라도 큰 문제가 발생할 수 있습니다.

티스토리 스킨 변경 작업 전에는 반드시 스킨을 백업해야 하며, 입력한 사용자 소스 코드(메타 태그, 애널리틱스 추적 코드, 디자인 요소, 애드센스 광고 코드 등)는 별도로 백업하는 것이 좋습니다. 백업하지 않고 스킨을 변경할 경우 기존에 사용하던 사용자 소스 코드를 사용할 수 없거나, 기존 상태로 되돌리는 것이 불가능할 수 있습니다.

티스토리 스킨 변경 전 필수로 진행해야 하는 작업과 스킨 변경 방법을 설명하겠습니다. 그리고 스킨 변경 후 기본적으로 복구해야 하는 사용자 소스 코드를 설명하겠습니다.

이 글에서는 기본적인 내용만 설명하겠습니다. 스킨 변경 후 필수로 해야 하는 검색 엔진 최적화(SEO) 작업은 별도의 게시물로 설명하겠습니다.

 

티스토리 스킨 변경 전 필수로 해야 하는 작업

스킨 변경은 검색 엔진 최적화(SEO)에 큰 영향을 끼칠 정도로 매우 중요한 작업인데요. 기본적인 것들만 잘 지키면 큰 문제는 발생하지 않습니다.

아래 설명하는 기본적인 백업만 해놓고 진행하면 스킨 변경 후 SEO 작업도 금방 끝낼 수 있습니다.

1. 사용하던 스킨 보관함에 저장하기

기존에 사용하던 스킨으로 되돌리고 싶을 경우를 대비한 백업 작업입니다. 티스토리의 “스킨 보관함”에 저장된 스킨은 적용 버튼을 클릭하여 블로그에 적용 시킬 수 있습니다.

티스토리 블로그 사용 중인 스킨 보관

  1. 티스토리(tistory.com)에 방문하여 블로그 관리 > 꾸미기 > 스킨 변경으로 진입합니다.
  2. 상단 사용 중인 스킨 항목에서 보관을 클릭합니다.

스킨 이름 입력하여 보관함에 저장

  1. 스킨 보관 창이 열리면 스킨명을 입력한 후 확인 버튼을 클릭합니다.
  2. 스킨 목록 메뉴바의 스킨 보관함으로 진입하여 저장한 스킨을 확인합니다.

2. 기존에 사용하던 스킨 파일 백업

  1. 상단 사용 중인 스킨 항목에서 다운로드를 클릭합니다.
  2. 사용 중인 스킨 파일이 CustomSkin(년-월-일).zip 압축 파일로 다운로드됩니다.
  3. 스킨 보관함에 저장된 스킨 썸네일 이미지에 마우스 커서를 올립니다.
  4. 표시된 메뉴 중 다운로드를 클릭하면 보관 중인 스킨 파일이 SavedSkin(년-월-일).zip 압축 파일로 다운로드됩니다.

3. 메타 태그, 애드센스 광고 코드, 애널리틱스 추적 코드 백업

스킨 변경 후 입력해야 하는 “사용자 소스 코드”를 백업하는 작업입니다. 사용 중인 스킨에서 백업하거나, 스킨 보관함에 저장된 스킨 파일을 내려받아 사용자 소스 코드를 추출해도 됩니다.

티스토리 플러그인(구글 애널리틱스, 구글 서치콘솔 메타 태그 등록)을 이용하여 소유자 인증 등을 하였을 경우 해당 메타 태그는 백업하지 않아도 됩니다.

빙 검색, 네이버 애널리틱스 등의 메타 태그만 백업하면 됩니다. 디자인 요소, 애드센스 자동광고 소스 등의 직접 입력한 사용자 소스 코드는 백업해야 합니다.

  1. 티스토리에 방문하여 블로그 관리 > 스킨 편집 > html 편집으로 진입합니다.
  2. HTML에서 필요한 메타 태그, 애널리틱스 추적 코드, 디자인 요소, 애드센스 광고 코드 등을 복사합니다.
    • 참고로 메타 태그, 자동광고 소스는~사이의 위치해 있습니다.
  1. 복사한 소스 코드를 텍스트 문서 등에 붙여 넣고 저장합니다.

빙 웹마스터도구 소유자 인증용 메타 태그 예시

html 태그는 마지막 부분이 /> 등으로 닫혀있어야 합니다. 소스가 닫혀있지 않게 되면 에러가 발생하니 반드시 />으로 닫혀서 끝나야 합니다.

4. CSS 소스 코드 백업

  1. HTML 우측의 ‘CSS’ 탭을 선택합니다.
  2. CSS에서 필요한 선택자 및 디자인 소스 코드를 복사합니다.
  3. 복사한 선택자 및 디자인 소스 코드를 텍스트 문서 등에 붙여 넣고 저장합니다.

 

티스토리 스킨 변경 방법

티스토리 스킨 변경

  1. 블로그 관리 > 꾸미기 > 스킨 변경을 선택합니다.
  2. 스킨 목록이 열리면 마음에 드는 스킨 썸네일에 마우스 커서를 올립니다.
  3. 표시된 메뉴 중 적용을 선택합니다.

스킨이 적용되며, 사용 중인 스킨에 표시됩니다.

티스토리 스킨 변경 후 필수 세팅

티스토리 스킨 변경 후에는 기본적으로 해줘야 하는 작업이 있습니다.

이 작업을 하기 위해 스킨을 백업하고 사용자 소스 코드를 백업하였다고 봐도 됩니다. 티스토리 블로그에서 수익형 블로그를 운영하는 것이 아니라면 보통 일반적으로 아래와 같은 메타 태그 등을 복구해야 합니다.

소유권을 인증하는 메타 태그와 방문자 추적용 소스 코드는 반드시 복구해야 합니다.

참고로 구글 애널리틱스, 구글 서치 콘솔, 네이버 애널리틱스는 플러그인으로 복구할 수 있습니다. 대부분의 메타 태그는 “메타 태그 등록” 플러그인을 이용하여 삽입할 수 있습니다.

참고로 애널리티스에서 서치 콘솔을 연결하는 방법을 이용하면 서치 콘솔 소유권을 확인하지 않아도 됩니다.

  • 구글 서치 콘솔 메타 태그
  • 구글 애널리틱스 추적 ID
  • 애드센스 자동광고 소스 코드

  • 네이버 웹마스터도구 메타 태그
  • 빙 웹마스터도구 인증용 메타 태그
  • 네이버 애널리틱스 메타 태그

1. 변경한 스킨에 메타 태그 삽입하기

  1. 티스토리에 방문하여 ‘블로그 관리’ > ‘스킨 편집’ > ‘html 편집’으로 진입합니다.
  2. HTML에서~사이에 위에서 백업한 메타 태그를 추가합니다.
  3. 상단 우측 ‘적용’을 눌러 변경 사항을 저장합니다.

2. 애드센스 자동광고 소스 코드 등 삽입하기

애널리틱스 추적 코드, 애드센스 광고 코드 등도 삽입해야 합니다. 메타 태그 작업에 이어 필요한 소스 코드를 스킨에 삽입하면 됩니다.

 

스킨 변경 후 티스토리 사이트맵(sitemap.xml)이나 RSS 피드 등을 재수집 요청할 필요는 없습니다. 스킨 변경으로 RSS 피드 주소와 사이트맵 주소는 변경되지 않습니다. 다만 알 수 없는 이유로 티스토리 사이트맵 또는 RSS 피드에 에러가 발생될 수 있습니다. 에러 발생 시에는 티스토리 사이트맵 관련 주의 사항 글에 설명된 방법으로 문제를 해결할 수 있습니다.

스킨을 변경하면 검색 결과에 반영된 색인에 큰 변화가 생길 수 있습니다. 또한 스킨 변경이 엔진 최적화(SEO)에 악영향을 끼칠 수 있습니다.

그렇다고 하더라도 너무 겁낼 필요는 없습니다. 스킨 변경 후 필수로 해야 하는 검색 엔진 최적화(SEO) 작업을 해준다면 큰 문제는 발생하지 않습니다. 물론 당연히 준수해야 하는 기본적인 것들만 잘 지키면 큰 문제는 발생하지 않습니다.

Leave a Comment