반응형


티스토리 블로그에 반응형 스킨 적용

스킨 수정

  1.폰트를 나눔 고딕으로 변경

구글 애드센스 삽입

  1.구글 애드센스 반응형 광고 생성

  2. 티스토리 스킨에 에드센스 반응형 광고 코드 삽입

    2-1. 본문글 우측 상단에 광고 넣기

    2-2. 본문글 하단에 광고 넣기

 3. 한글 광고만 나오게 하기

구글 애널리틱스 재설정

구글 웹 마스터 도구(Search console)에 블로그 등록

구조화된 데이터 테스트 도구 사용하기


티스토리 블로그에 반응형 스킨 적용

1. 티스토리 반응형 스킨으로  Square - 티스토리 스킨 무료 배포"( http://wallel.com/179 )에서 공개 배포하고 있는  square final 1.0.2 버전으로 결정하였습니다. 웹페이지 크기가 변해도 이미지가 잘리지 않고 제대로 보인다네요.. 다운로드 후 압축을 풀어 둡니다.


2. 티스토리에 로그인 후,  티스토리 관리 페이지의 왼쪽에 있는 메뉴에서  꾸미기 > 스킨을 선택합니다.


3. 우측 상단에 있는 스킨등록을 선택합니다.


4.  스킨 저장명에 이름을 적어 준 후, 추가를 클릭합니다.  나중에 스킨을 적용시킬 때 업로드되어 있는 스킨들의 목록 중에서 방금 입력한 "반응형 스킨 square"을 찾으면 됩니다.


 5. images 폴더를 제외한 파일들을 선택하고 열기를 클릭합니다.


해당 파일들이 잠시 후, 업로드 된 것을 볼 수 있습니다.


6. 다시 추가를 클릭합니다. 


images 폴더 안에 있는 파일들을 모두 선택하고 열기를 클릭합니다.


images 폴더안에 있던 파일들이 image폴더 내로 업로드 된 것을 볼 수 있습니다.


7.  하단에 있는 저장을 클릭합니다.


8.  티스토리 관리 페이지의 왼쪽에 있는 메뉴에서 꾸미기 > 스킨을 선택합니다.


PC보관함을 선택합니다.


9. 업로드 되어있는 스킨 목록이 보이는데 그 중에서 방금 업로드한 "반응형 스킨 square"를 찾아서 적용을 클릭합니다.


10. 블로그 주소로 이동해보면 스킨이 적용된 것을 확인 할 수 있습니다.


11.  티스토리 관리 페이지의 왼쪽에 있는 메뉴에서 꾸미기 > 스킨을 선택합니다.


모바일을 선택하고, 우측 상단의 모바일웹 옆에 있는 OFF를 체크합니다.


하단에 있는 저장을 클릭합니다.


12. 모바일에서 확인해보면 스킨이 적용된 것을 볼 수 있습니다.



스킨 수정

1. 폰트를 나눔 고딕으로 변경

1-1.  티스토리 관리 페이지의 왼쪽에 있는 메뉴에서 꾸미기 > HTML/CSS 편집을 선택합니다.


1-2. 우측 상단에 있는 CSS를 선택합니다. 


1-3. 2번째 줄에서 주석을 제거 해줍니다.

수정전


수정후


1-4. 11번째 줄에서 font-family: 다음에 "나눔고딕", "NanumGothic", 이 오도록 수정합니다.

수정전


수정후


1-5. 우측 상단에 있는 저장을 선택합니다.


1-6. 블로그 주소로 접속해보면 폰트가 변경된 것을 확인 할 수 있습니다.

폰트 변경 전


폰트 변경 후



구글 애드센스 삽입

1. 구글 애드센스 반응형 광고 생성

기존에 구글 애드센스를 삽입하여 블로그를 운영하던 상태에서 반응형 스킨으로 변경 후,  다시 구글 에드 센스를 삽입하는 과정을 진행하려고 합니다. 그래서 구글 애드센스 가입 및 승인 과정은 생략하겠습니다. 구글 애드센스 사이트( https://www.google.com/adsense )로 접속합니다. 


1-1. 왼쪽 메뉴에서 내 광고를 클릭하면 자동으로 광고단위가 선택되면서 기존에 사용하던 광고들의 목록이 보입니다.  블로그의 스킨을 변경했음에도 불구하고 아직 상태가 활성으로 되어있습니다.  모두 체크박스를 선택한 후,  액션을 선택하면 보이는 메뉴에서 숨기기가 보입니다.  숨기기를 클릭해줍니다.


선택된 모든 광고가 목록에서 사라지게 됩니다. 이렇게 숨기기가 된 광고는 일정시간이 경과하면 운영중지 상태가 됩니다.


1-2. 예전에 숨기기한 광고가 어떻게 되어왔는지 학인 해보도록 하겠습니다. 우측 상단에 있는 고급 필터를 선택하고 바로 밑에 보이게 되는 운영 중지, 숨김 앞에 있는 체크 박스를 모두 선택해줍니다.  그러면 숨기기 했던 모든 광고가 보이게 됩니다. 


파란색 배경에 있는 방금 숨기기한 광고들은 활성, 숨긴 상태이지만 그 외 예전에 숨기기 했던 광고들은 운영중지, 숨김 상태로 되어 있는 것을 확인 할 수 있습니다. 


이제 고급 필터 밑에 있는 체크 박스들을 모두 선택 안함으로 합니다. 그리고 나서 다시 고급 필터를 클릭하면 체크 박스 항목들이 다시 사라지면서 보이던 광고들이 다시 안보이게 됩니다. 


1-3. 새로 변경한 스킨에서 보여줄 광고들을 만들기 위해서 새 광고 단위를 클릭합니다. 


광고는 2개만 생성하려고 합니다. 블로그 본문의 우측 상단에서 보여줄 광고와 본문의 하단에 보여줄 광고 입니다.  기존에 블로그에 적용했던 일반 스킨에서는 PC용 고정광고 2개, 모바일용 고정크기 광고  2개를 따로 생성헀어야 했지만, 이번에 변경한 반응형 스킨에서는 PC와 모바일에서 같이 보여줄 반응형 광고 2개만 생성하면 됩니다.  


광고의 이름으로 "반응형 광고 글상단" 이라 적고 광고 크기는 디폴트로 선택되어 있는 반응형으로 그냥 두고, 하단에 있는 "저장 및 코드 생성"를 클릭합니다. 


잠시 후, 광고가 생성완료 되면서,  티스토리 블로그에 광고를 보여주기 위해 스킨에 삽입해야 하는 광고 코드가 보여지게 됩니다.  생성된 광고 코드가 포함되어 있는 박스를 클릭하면 배경이 파란색으로 변하게 되는데 이때 CTRL + C를 눌러서 광고 코드 내용을 복사하여 메모장에 붙여놓기 해두었습니다. 물론 필요한 모든 광고를 생성하고 나서 나중에 광고 코드를 복사해도 됩니다.  닫기를 클릭하면 다시 광고 목록을 보여주던 페이지로 돌아갑니다. 


1-4. "반응형 광고 글상단"이라는 이름의 광고가 목록에 추가되었는데 상태는 현재 신규입니다.  본문 하단에 넣을 광고를 만들어 주기 위해서 다시 "새 광고 단위"를 클릭합니다. 


이름에 "반응형 광고 글하단"이라 적고, 광고 크기는 반응형이 선택된 상태로 두고, 글하단에 있는 "저장 및 코드 생성"을 클릭하였습니다. 


앞에서 했던 방식으로 광고 코드가 포함되어 있는 박스를 클릭하여 파란색으로 배경이 바뀌면 CTRL + C를 눌러 광고 코드를 복사하고, 메모장에 붙여 넣기 해두었습니다. 


1-5. 이제 본문 상단에 들어갈 반응형 광고와 본문 하단에 들어갈 반응형 광고를 모두 생성하였습니다. 혹 앞에서 광고 코드를 미리 복사해놓지 않았다면 목록에있는 광고 이름아래에 있는 "코드 가져오기"를 클릭하여 광고 코드를 가져올 수 있습니다. 지금은 광고의 상태가 신규로 되어 있지만 티스토리 스킨에 애드센스 광고 코드를 삽입 후, 일정시간이 지나면 활성 상태로 바뀌게 됩니다.



2. 티스토리 스킨에 에드센스 반응형 광고 코드 삽입

2-1. 본문글 우측 상단에 광고 넣기

2-2-1. 티스토리 관리 페이지의 왼쪽에 있는 메뉴에서 꾸미기 > HTML/CSS 편집을 선택합니다. 


2-1-2. 아래 있는 문자열을 마우스 왼쪽 버튼을 누른채 드래그하여 모두 파란색 배경에 포함되면 CTRL + C를 눌러 복사합니다. 

[##_article_rep_desc_##]


2-1-3. 오른쪽에 있는 코드창을 마우스 왼쪽 버튼으로 클릭하고 나서 CTRL + F를 누르면 노란색 배경의 검색단어 옆에 커서가 깜빡이게 됩니다. 


2-1-4. CTRL + V를 누른 후, 엔터를 누르게 되면 코드 창에서 앞에서 복사했던 문자열이 검색됩니다. 


2-1-5.  <div class="article"> [##_article_rep_desc_##] 사이에 다음 코드를 붙여 넣기 합니다.  지금 수정중 인 스킨과 달리  [##_article_rep_desc_##] 앞뒤로 div가 둘러싸고 있지 않다면 [##_article_rep_desc_##] 앞에  다음 코드를 넣어주면됩니다. 

1
2
3
4
5
6
7
8
<style>
  .jb-ad { float: right; margin: 5px 0px 20px 20px; width: 336px; height: 280px; }
  @media ( max-width: 1024px) { .jb-ad { width: 300px; height: 250px; } }
  @media ( max-width: 767px) { .jb-ad { float: none; margin: 20px 0px; width: 100%; height: auto; } }
</style>
<div class="jb-ad">
  구글_애드센스_광고_코드
</div>
cs

코드 출처 - Tips > 반응형 애드센스 광고 본문 상단 오른쪽에 넣는 방법 https://www.cmsfactory.net/node/20875


2-1-6. 이제 아래 캡쳐화면에 보이는 구글_애드센스_광고_코드 문자열을 앞에서 메모장에 복사해두었던 본문글 상단에 보여줄 애드센스 광고의 코드로 바꾸어줍니다. 


2-1-7.  이제 모든 필요한 코드가 모두 추가되었습니다. 


2-1-8.  우측 상단에 있는 저장을 클릭합니다. 


2-1-9.  PC에서 블로그 주소를 접속하여  웹브라우저의 창크기를 바꾼후, 새로고침을 해보면 웹브라우저의 크기에 따라 광고의 크기가 변하는 것을 볼 수 있습니다.  광고가 본문글의 우측상단에 위치하다가 일정크기 이하로 작아지면( 코드상으로는 767px ) 광고가 분문글 상단으로 올라가고 광고크기가 긴배너로 변경됩니다. 자세한 내용은 5번에있는 코드 출처로 방문해서 확인하시길 바랍니다. 



2-1-10. 모바일에서는 본문글 상단에 긴배너로 광고가 보입니다. 


2-2. 본문글 하단에 광고 넣기

2-2-1. 티스토리 관리 페이지의 왼쪽에 있는 메뉴에서 플러그인 > 플러그인 설정을 선택합니다.


2-2-2. 플러그인 항목들 중에서 Google Adsense (반응형)을 클릭한 후,  위치에서 광고가 하단에 있는 두번째 항목을 선택합니다. 그리고나서 광고2(하단) 평에 있는 박스에 메모장에 복사해두었던 본문 하단에 보여질 광고에 대한 코드를 붙여넣기 합니다.  확인을 클릭하면 설정이 저장됩니다. 


2-2-3.  PC와 모바일에서 화면크기에 맞추어 하단 광고가 출력된는 것을 확인 할 수 있습니다. 


3. 한글 광고만 나오게 하기

아래 포스팅을 참고하여 적용했습니다. <ins 태그내에 data-language="ko"를 추가해주면 됩니다.


구글 애드센스 외국어 광고 안 나오게 만들기(영어, 일본어) :: 문돌이의IT

http://improver.tistory.com/81


구글 애널리틱스 재설정

1. 구글 애널리틱스( https://www.google.com/intl/ko/analytics/ )에 접속하여 로그인 후,  왼쪽 상단에 있는 관리를 클릭합니다. 


2. 추적 정보를 클릭하고나서 보이는 하위 메뉴에서 다시 추적 코드를 클릭합니다.  


3. 웹사이트 추적 아래에 있는 박스 안에 있는 코드를 클릭한 후, CTRL+C를 눌러 코드를 복사합니다. 


4. 티스토리 관리 페이지에서 꾸미기 > HTML/CSS 편집을 클릭합니다. 


5. HTML 코드창에서 </head> 위 줄에 복사했던 코드를 붙여넣기하고 저장을 클릭합니다.


6. 다시 구글 애널리틱스 사이트로 돌아와서, 보고를 클릭하고 왼쪽 메뉴에서 실시간 > 개요를 클릭할때 마다 현재 사이트의 활성 사용자 수가 갱신되는 것으로 봐서 연결이 제대로 된 듯합니다.



구글 웹 마스터 도구(Search console)에 블로그 등록

1. 구글 웹 마스터 도구 사이트 ( https://www.google.com/webmasters/tools/home?hl=ko )에 방문하여 블로그 주소를 입력하고 속성 추가를 클릭합니다.


2. 앞에서 구글 애널리틱스 재설정을 해주었기 때문에 이미 블로그의 소유자로 확인 되었다고 나옵니다. Google 애널리틱스을 체크한 후, 확인을 클릭합니다.


계속을 클릭합니다.


3. 이제 Sitemaps를 제출해야 합니다.  왼쪽 메뉴에서 크롤링 > Sitemaps를 클릭합니다. 


4. 우측 상단에 있는 SITEMAP 추가/테스트를 클릭합니다.

5. rss를 입력한 후, 제출을 클릭합니다.

 

 티스토리 블로그의 관리 페이지로 이동하여  글 설정을 클릭합니다.


RSS의 공개 정책을 전체 공개로 변경하고 옆에 콤보박스를 클릭하여 50개로 갱신을 선택합니다.



6.  F5를 눌러서 페이지를 새로고침하면 제출한 사이트맵이 목록에 추가된 걸 확인할 수 있습니다.


7. http://www.web-site-map.com/xml_sitemap.php에 방문하여 1번 항목에 블로그 주소를 입력하고 2번 항목에 이미지대로 보안코드를 입력합니다.  Last modifed date 를 Use exact value (UTC)로 선택하고 나머지는 아래 캡처 이미지대로 설정합니다. 하단에 있는 Create free XML Sitemap을 클릭하면 사이트맵 생성이 시작됩니다.


하단에 있는 Status 아래에 페이지수가 증가되기 시작합니다. 


8. Status가 COMPLETED로 바뀌면 "download your Sitemap"을 클릭합니다.


sitemap.xml 옆에 있는 download를 클릭하여 생성된 사이트맵 파일을 다운로드를 받습니다.


9. 티스토리에서 새로운 글을 작성하여 적당한 제목을 적고 파일을 클릭하여 sitemap.xml을 본문에 첨부합니다. 


10. HTML을 체크합니다.


HTML에서 다음 붉은색 부분을 메모장에 복사해두고 작성한 글을 비공개로 발행합니다.

1
2
<p><br /></p> cfile21.uf@26024F4A583A065417B28F.xml
cs


블로그주소/attachment/ 다음에 메모장에 복사해두었던 것을 연결합니다. 예를들어 제 경우에는 아래 주소가 됩니다.

webnautes.tistory.com/attachment/cfile21.uf@26024F4A583A065417B28F.xml


웹브라우저에서 해당 주소를 접속하여 sitemap.xml 파일이 다운로드 된다면 정상적으로 된것입니다. 


11. 구글 웹 마스터 도구사이트로 이동하여 왼쪽에 있는 메뉴에서 크롤링 > Sitemaps를 선택합니다.


우측 상단에 있는 SITEMAP 추가/테스트를 클릭합니다.


위에서 조합했던 주소에서 attachment이후로 복사하여 붙여넣기 하고 제출을 클릭합니다.


12. F5키를 눌러서 웹페이지를 새로고침하면 Sitemap 목록에 방금 입력한 사이트맵 주소가 추가되어 접수중 인 것을 볼 수 있습니다. 제출 및 색인 생성되기까지는 좀 시간이 걸립니다.


일정시간이 지나면 처리된 날짜가 업데이트되고 제출된 항목의 갯수가 표시됩니다.  색인 생성됨에 숫자가 증가하여 모두 완료되는 데까지는 오랜시간이 걸립니다.


2016.11.28일에 추가.. 오전에 확인해보니 색인이 일부 생성된 상태입니다. 


2016.11.30일 추가..

검색 트래픽 > 검색 애널리틱스를 선택했는데 스킨을 변경한 이후로, 데이터가 업데이트 되지 않았습니다.  구글 애널리틱스를 통해 인증만 해서 문제가 된거 같아서 추가로 티스토리 블로그 스킨 내에 인증용 HTML 태그을 추가해주었습니다.


오른쪽 상단에 있는 톱니모양을 클릭하여 나온 메뉴에서 "사용자 및 속성 소유자"를 선택합니다.

속성 소유자 관리를 선택합니다.

다른 방법으로 사이트를 확인하세요을 선택합니다.

HTML 태그를 선택하고 확인을 누르면 HTML 태그가 생성됩니다.  티스토리 관리 페이지의 HTML/CSS 편집을 선택합니다.  생성된 HTML 태그를 </head>에 붙여 넣고 저장합니다. 이제 다시 구글 웹마스터 도구로 돌아와서 확인을 누르면 인증이 완료됩니다.




구조화된 데이터 테스트 도구 사용하기

구글 웹마스터 도구( https://www.google.com/webmasters/tools/home?hl=ko )에 접속하여 왼쪽 메뉴에서 기타 리소스를 클릭합니다. 그리고 나서 오른쪽에서 구조화된 데이터 테스트 도구를 클릭합니다. 구글이 웹페이지를 크롤링할 때 마크업 데이터를 제대로 읽고 추출할 수 있는지 테스트해 줍니다.


블로그의 포스팅 주소 하나을 입력하고 테스트 실행을 클릭합니다.


2개의 항목이 감지되었고 오류나 경고가 없습니다. BlogPosting을 클릭해보면 


구글이 입력한 주소의 웹페이지를 크롤링할 때 마크업 데이터를 제대로 읽고 올바른 구조화된 데이터를 뽑을 수 있음을 보여줍니다.




반응형

포스트 작성시에는 문제 없었지만 이후 문제가 생길 수 있습니다.
질문을 남겨주면 가능한 빨리 답변드립니다.

여러분의 응원으로 좋은 컨텐츠가 만들어집니다.
지금 본 내용이 도움이 되었다면 유튜브 구독 부탁드립니다. 감사합니다 ~~

유튜브 구독하기


제가 쓴 책도 한번 검토해보세요 ^^

  1. Favicon of https://landmarks.tistory.com BlogIcon Amigo Secreto 2017.06.30 05:59 신고

    친절한 설명 감사드려요. 제가 필요한 모든 것들이 잘 정리되어 있네요!

+ Recent posts