티스토리 Odyssey 스킨 수정 - 애드센스 코드 추가, H 태그 변경

티스토리에서 기본으로 제공되는 Odyssey 스킨을 수정해서 애드센스 코드와 H1 태그가 2개 생기는 현상을 없애도록 반영되도록 해보자.

 

애드센스 코드 가져오기

아래 그림처럼 Adsense 페이지에 들어가면 광고>코드 가져오기>복사하기 를 통해서 애드센스 적용 코드를 가져올 수 있다. 

애드센스 자동 코드 가져오기

가져온 코드는 대부분 동일하다.  ca-pub-고유숫자 부분만 변경될 뿐이다. 

자신의 코드를 알고 있으면 그냥 아무곳에서 가져와서 코드만 변경하면 된다. 

일단 가져온 애드센스 코드를 참고용을 남겨둔다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-사용자코드"
     crossorigin="anonymous"></script>

 

이제 이 코드를 오디세이 티스토리 스킨이 추가해 보자.

티스토리 스킨 수정하기

티스토리 스킨을 수정하려면, 관리자 모드에서 스킨 편집으로 가면 된다.

티스토리 스킨 편집

그러면, HTML 코드를 수정할 수 있는 상태로 변경 할 수 있는 화면이 나타난다.

티스토리 스킨 HTML 편집

이제 스킨 HTML을 수정하여 자신만의 스킨을 만들 수 있다.

애드센스 코드 추가하기

아래 화면처럼 HTML 수정화면에서 받아온 애드센스 코드를 추가하고 저장을 누르면 자신의 티스토리에 반영이된다.

티스토리 스킨 애드센스 코드 추가

아주 쉽게 애드센스 코드를 추가할 수 있다. 

문제는 애드센스 승인이 안나온다는... 이번에 결과가 치명적이네

H1 코드 2개 발생 수정

오디세이 스킨에 단점으로 지적되는 것 중에 가장 큰 것은 H1 태그가 블로그 제목으로 되어 있고 정작 되어 있어야할 글 제목은 h2로 되어 있어 검색 봇이 헷갈리게 한다는 지적이 많다. 그 부분도 수정해 본다.

 

편집창에서 Ctrl+F 를 누르면 문자열 검색이 가능하다. 아래 그림처럼 title-logo 를 입력해 보면 1개 나와 수정이 쉽다.

아래 그림대로  h1 을 div 로 변경하면 되고, 당연히 닫힘 태그도 </h1> 대신에 </div>로 변경해 줘야 한다.

h1 -> div 로 변경

그리고 글 제목을 H1 태그로 변경해 준다.

마찬가지로 Ctrl+F 로 "title-article" 로 찾으면 3개의 검색 결과가 나온다.

H2 -> H1 태그로 변경

그림처럼, 다 찾아가서 h1 으로 변경해주자. 반드시 클로징 태그도 </h1> 으로 같이 변경해 줘야 한다.

참고 - 애드센스 고시 실패

몇번 신청을 했더니 애드센스에서 횟수 제한이라는 메시지가 등장하였다. 알아서 기간을 벌어주는 효과가 발생해 버렸네 그동안 글만 많이 써두고 방문자 수가 늘도록 많은 노력을 해야겠다.

애드센스 사이트 검토 요청 가능 횟수 제한

이런 것이 있는 줄 알았으면 좀 더 신중히 신청을 해볼껄 생각이 많이 드네

 

아무튼 티스토리 기본 스킨 Odyssey 스킨에 애드센스 코드를 추가하는 방법을 알아봤습니다. 구글 검색을 위한 SEO나 본문에 애드센스 광고 코드를 추가하는 방법에 대해서도 더 작성해 볼 예정입니다. 방문 많이 부탁드려요 :)