본문 바로가기
후기

티스토리 스킨 변경 절대로 하지마세요

by 행복한 와와씨 2025. 1. 30.
반응형

오디세이스킨을 사용하다가 북클럽스킨이 좋다고 해서 생각없이 북클럽스킨으로 변경하고 그 과정에서 잦은 수정으로 저품질이 돼서 엄청 고생하는 중입니다.

스킨을 변경하면 단순히 형태만 바뀌는 것이 아니라 기존 스킨에 설정되어 있던 구글애드센스, 구글서치콘솔, 네이버서치어드바이저, 구글애널리틱스설정이 초기화 돼서 설정을 다시 해야 됩니다.

 백업이나 메타태그와 코드를 잘 메모해 두었다면 변경작업이 수월하겠지만 그렇지 않다면 힘들어요. 스킨변경후에는 꼭 기본 설정이 제대로 되어있는지  확인하셔야 돼요.

기본설정이 잘 되어있다면 그 다음에는 북클럽스킨이 가지고 있는 문제점을 수정해야 합니다. 

북클럽스킨의 문제점은 글의 제목인 h1태그가 2개 있는 것과  alt이미지태그의 오류가 있다는 점입니다.

스킨변경하신 분들은 아래사항을 체크해 보세요

 

스킨변경 후 기본 설정 확인하기

기본 설정은 스킨편집-html편집- HTML에서 <head>와 </head> 사이에 삽입되어 있습니다.

애드센스 코드 확인하기

애드센스 코드가 잘 삽입되어 있는지 확인해야 합니다. 제 경우는 애드센스코드는 잘 달려 있어서 다시 삽입할 필요는 없었어요. 스킨변경 후 <head> </head>사이에 애드센스코드가 없다면 애드센스사이트에서 왼쪽에 있는 메뉴 광고로 들어가 Google에서 자동으로~ 아래에 있는 '코드 가져오기'를 눌러서  코드를 복사해 티스토리 스킨편집-html편집- HTML 에서<head></head> 사이에 삽입하고 적용-확인하면 됩니다.

 

구글서치콘솔 메타태그 확인하기 

구글서치콘솔 태그는 없어서 다시 삽입했어요. 구글서치콘솔 사이트에서 왼쪽 메뉴 톱니바퀴 설정 - 사용자 및 권한 클릭- 사용자및 귄한 화면에서 아래 사용자 소유자 옆에 있는 점 세 개 클릭 소유권 인증 세부정보 클릭- 기존에 사용한 확인방법에 HTML태그를 복사해서 <head> </head>사이에 삽입-적용-확인하면 됩니다. 티스토리 플러그인 메타태그에 name과  content를 구별해서 따옴표안에 있는 내용만 입력해줍니다. 삽입 후에는 구글서치콘솔에 가서 왼쪽메뉴 Sitemaps에서  새 사이트맵 추가를 합니다. 티스토리주소/sitemap.xml과 티스토리주소/rss를 제출합니다.

네이버 서치어드바이저 확인하기

네이버 서치어드바이저사이트에서 오른쪽 상단 웹마스터도구로 들어갑니다. 네이버 서치어드바이저는 기존 사이트를 삭제 후 다시 사이트를 등록해야 한다고 합니다. 사이트 등록에 티스토리주소를 입력하고 옆에 화살표를 클릭합니다. HTML태그를 복사해서 티스토리-스킨편집-html편집-HTML에서 <head></head> 사이에 입력-적용-확인합니다. 다시 네이버 서치어드바이저로 와서 소유확인을 클릭합니다.  

삽입이 끝난 뒤에는 메뉴 요청에서 사이트맵제출에 티스토리주소/sitemap.xml를  rss제출에는 티스토리주소/rss를 제출합니다. 티스토리 플러그인에 메타태그를 name과  content를 구별해서 따옴표안에 있는 내용만 입력합니다.

구글 애널리틱스 확인하기

애널리틱스 사이트에서 톱니바퀴 관리로 들어갑니다. 왼쪽 속성 -아래  데이터수집 및 수정 - 아래 데이터스트림에서 티스토리주소 옆에 화살표를 클릭 - 웹스트림 세부정보 화면에서 맨 아래에 있는 태그 안내보기 클릭- 설치안내 화면에 직접설치를 선택- 거기 있는 태그를 복사해서 티스토리에서 스킨편집- html편집- HTML에서 <head></head> 사이에 삽입-적용-확인하면 됩니다. 

그리고 웹스트림 세부정보스트림 이름에 있는 측정 ID를 복사해서 티스토리 플러그인 측정 ID에 입력하면 됩니다.

 

 북클럽스킨 오류 수정하기

글 제목 h1태그 두 개 수정하기 

(HTML에서 수정 후  CSS에서 수정합니다.)

스킨편집- html편집 - HTML을 선택합니다. 빈 칸에 커서를 놓고 Ctrl+f를 눌러 찾기 창이 나오면 찾기 창에 <h1>을 입력하고 찾습니다.

검색된  <h1> </h1>을 <p></p>로 바꿔줍니다.  글의 제목이 두 개 있으면 안 되기 때문에 제목h1을 문단p로 바꿔줍니다.

<h1>을 <h2>로 바꾸거나 <blog-header>로 바꾸는 경우도 있는데  p로 바꾸는 경우가 대부분이라 저도 p로 바꿔주었습니다.

h1태그-수정-순서1
h1태그-수정-순서1

그 다음은 CSS에 가서 ctrl+f로 <#header h1>을 입력 후 찾습니다. 검색결과  h1이 총 5개가 나오는데 모두 p로 바꿔줍니다.

h1 3개는 150~180사이에 있고 h1 2개는 2700번대에 있으니 잘 찾아서 바꿔주면 됩니다.

h1태그-수정-순서2
h1태그-수정-순서2
h1태그-수정-순서3
h1태그-수정-순서3

 

alt이미지태그의 오류

티스토리-스킨편집- html편집 CSS에서 ctrl+f로 <alt="">를 찾으면   alt= "" 이런 식으로 따옴표 안이 비어있어서 이미지가 누락되는 오류가 발생합니다. 이미지가 제대로 인식이 되려면  ""안을 설정해 주어야 하는데  검색결과 여러 방식이 있었으나 티스토리블로그 liviai 님의 설정을 따라했습니다.

http://liviai.tistory.com/m/2

 

스킨을 변경하고 안해도 되는 고생을 하는 중입니다. 혹시 스킨 변경을 고려 하신다면 백업과 메타태크, 코드를 잘 메모해서  새 스킨에 잘 적용하시기 바랍니다. 

 

 

 

반응형