티스토리 블로그 작성 - tiseutoli beullogeu jagseong

티스토리 블로그 만들기:총 정리 가이드(2022년)

  • 에스이오
  • 마케팅 개론/티스토리
  • 2021. 8. 5.

티스토리 블로그 수익 때문에, 블로그 만들기를 많이 시작을 한다. 그러나, 네이버 블로그와 달리 스킨 꾸미기부터 관리까지 너무나도 어렵기 때문에 대부분 포기를 한다.

해당 글은 "티스토리 블로그 만들기" 어려움을 느끼는 사용자 그리고 "에스이오" 전자책 구매자를 위해 특별히 만들어졌다.

처음부터 끝까지 같이 시작해보자.

*주의* 해당 스킨은 JB Factory 기준으로 작성되었다.

혹시나 다른 스킨을 사용하는 경우, 해당 스킨 블로그를 참고하여 작성하도록 하자.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
티스토리 로고

 


1장. 티스토리 블로그 만들기, 스킨 편집 및 변경

이 장에서는 계정 가입 후 블로그 만들기 그리고 스킨 편집으로 이루어진다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
새 블로그 블로그 주소 넣기

처음 가입 후, 새 블로그 만들기 창을 만날 수 있다.

블로그 이름은 독자가 원하는 대로 작성한다.

그러나, 블로그 주소는 매우 중요하다.

예를 들면 아래와 같다.

건강과 관련됐으면 health~~~. tistory.com으로 작성하는 것이 좋다.

경제와 관련됐으면 economic~~~. tistory.com으로 작성하는 것이 좋다.

URL은 검색엔진 최적화와 관련이 있다.

URL과 콘텐츠가 일치하지 않는다면 잡블로그로 인식할 수 있다.

최대한 처음부터 맞추는 것이 좋다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
스킨변경 하는 법

블로그 개설 후, 왼쪽 하단에 꾸미기 -> 스킨 변경을 클릭한다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
스킨등록 하기

처음에 세팅된 사용 중인 스킨이 뜨게 된다.

오른쪽에 "스킨 등록 +" 버튼을 클릭한다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
스킨등록 추가 하는 모습

그럼 위와 같이 스킨 등록 화면이 뜨게 된다.

오른쪽 상단 "추가" 버튼을 클릭하자.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
티스토리 블로그 작성 - tiseutoli beullogeu jagseong

스킨 파일 넣기

JB 스킨 경우, 위 폴더 1개와 아래 4개 파일이 있다.

폴더는 안 들어가므로 따로 폴더 안에 파일 + 외부 파일을 드래그해서 넣자.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
파일 목록 리스트

그러면 스킨 등록 부분에 "파일목록"에 파일이 업로딩 된 것을 볼 수 있다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
스킨 저장하는 모습

그리고 오른쪽 하단에 "저장" 버튼을 누르면 위와 같은 화면이 뜬다.

스킨명은 독자가 원하는 데로 설정하자.

일단 스킨 등록 끝이다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
스킨 보관함 클릭하기

그리고 다시 스킨 목록 탭에 돌아와서, 오른쪽에 "스킨 보관함"을 클릭한다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
스킨 등록 완료

스킨 보관함을 클릭하게 되면 위와 같이 방금 적용한 스킨이 뜨게 된다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
사용중인 스킨 노출되는 모습

클릭 후 "적용" 버튼을 누르면 스킨 적용이 완료된다.

하나씩 따라 하면 스킨 편집은 매우 쉽다.

다시 한번 말하지만 해당 스킨은 JB스킨이다.

다른 스킨 사용자 경우 해당 개발자 블로그를 방문하는 것을 권장한다.


2장. 블로그 설정

티스토리 블로그 설정

중요하면서도 중요하지 않은 부분이 기본 블로그 설정이다.

이 장에서는 어떤 것을 설정할지, 그리고 하면 안 되는지에 대해서 알아보자.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
블로그 설정하기

블로그 설정에 들어가면 위와 같은 화면이 나온다.

위 + 부분은 프로필 이미지가 들어가는 칸이다.

프로필 이미지는 원하는 데로 넣으면 된다.

"블로그 이름" 경우, 이전에 설정한 대로 되어있다.

원하는 대로 바꿔도 된다.

닉네임 수식어 경우 "블로그 이름"앞에 붙는 수식어이다.

예를 들어, 예쁜 로 넣으면 "예쁜 티스토리 만들기 연습용"이라는 이름으로 만들어진다.

"블로그 설명"탭은 해당 블로그가 어떤 블로그인지 설명하는 탭이다.

해당 부분은 나중에 소개할 <meta description>과 동일하게 하면 된다.

"아이콘" 경우, 아까 프로필 이미지를 그대로 넣으면 최적 사이즈 32x32, 64x64 알아서 바뀐다.

 

파비콘 만들기

"파비콘" 경우, 따로 만들어줘야 한다.

파비콘 웹사이트에 접속하자.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
파비콘 만드는 방법

그럼 위와 같은 화면이 나온다.

파일 선택을 누르고 원하는 이미지 파일 선택 후 "Create Favicon"을 누른다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
파비콘 완료된 모습

위와 같이 파비콘이 만들어진다.

파비콘을 넣으면 끝이다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
기타 설정 셋팅

파비콘까지 마무리 후 아래로 내려오면 "주소 설정", "개인 도메인 설정" 그리고 "기타 설정"이 있다.

주소 설정 경우 원래라면 "한글"로 해야 검색엔진 최적화(SEO)에 유리하다.

하지만, 티스토리 경우 오류가 날 수 있으니, 포스트 주소는 숫자로 그대로 설정한다.

기타 설정에 RSS "전체 공개" 그리고 공개될 RSS "10"개로 기본 설정되어있을 것이다.

RSS"10개"를 "50개"로 바꿔야 한다.

RSS는 검색엔진이 콘텐츠를 수집할 때 10개를 수집하느냐 혹은 50개를 수집하느냐 때문에 사용된다.

 

모바일 설정

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
모바일 설정하기

JB 스킨 경우 반응형 스킨으로 모바일 최적화가 되어있다.

이로 인해, 모바일 화면을 꺼야 한다.

"꾸미기" -> "모바일" 화면으로 들어간다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
모바일 꾸미기 설정

그럼 위와 같은 화면이 뜬다.

티스토리 모바일 웹 자동 연결을 "사용하지 않습니다"로 바꾼 후, 오른쪽 하단에 변경사항 저장을 누르자.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
콘텐츠 설정하기

마지막으로, "콘텐츠" -> "설정" 들어간다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
콘텐츠 앞뒤 공백 설정

"콘텐츠 설정" 부분에서 단위 앞뒤에 공백을 "사용합니다"로 변경한다.

공백을 사용하는 이유는, 단락별로 글자가 붙어있는 경우 안 좋다.

"검색엔진 최적화에 글씨 크기가 너무 작아 인식하기 어려움"이라는 오류가 뜰 수 있다.

 

레이아웃 / 글자 모양 변경하기

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
스킨편집에서 레이아웃 변경

위까지 완료됐다면 다시 "스킨 편집"에 들어가자.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
레이아웃 변경하는 모습

그리고 "레이아웃 / 글자 모양"에 본문 가로 크기 "702" 그리고 사이드바 가로 크기 "300"으로 변경하자.

변경하는 이유는, 반응형이기 때문에 나중에 애드센스 노출 시 잘림을 방지하기 위해서이다.

이로써 기본 세팅은 끝이다.

 

메타태그 설정

위와 같이 블로그에 메타태그를 심어주는 것이 중요하다.

메타태그란? 검색엔진 로봇이 해당 사이트 정보를 쉽게 가지고 갈 수 있게 만드는 코드이다.

"스킨 편집"에 들어가자.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
메타태그 설정하기

<head> 밑에 아래 코드를 넣자.

<meta name="title" content="블로그 제목">
<meta name="keywords" content="롱테일 키워드">
<meta name="description" content="블로그 설명">
<meta property="og:type" content="website">
<meta property="og:title" content="블로그 제목">
<meta property="og:description" content="블로그 설명">
<meta property="og:url" content="블로그 주소">

그럼 끝이다.


3장. 플러그인 사용

네이버와 달리 워드프레스 및 티스토리는 플러그인이 존재한다.

플러그인은 HTML 사용이 어려운 사용자에게 쉽게 도움이 될 수 있다.

이 장에서는 티스토리 내에서 어떤 플러그인을 사용하면 편한지 알아보자.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
플러그인 설정하기

블로그 대시보드에 들어가면 왼쪽 하단에 "플러그인" 화면이 있다.

해당 부분을 클릭한다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
전체 플러그인 설정하는 모습

위와 같이 다양한 플러그인이 있다.

티스토리는 안타까운 점이 워드프레스와 달리 SEO 플러그인이 존재하지 않는다.

플러그인은 개인에 따라 다를 수 있지만, "필연적으로 사용해야 할 플러그인"은 아래와 같다.

*사용해야 할 것*

  • 영어 댓글/방명록 스팸 방지
  • 이미지 크게 보기
  • 이전 발행 글 넣기
  • 배너 출력
  • 구글 서치 콘솔
  • 구글 애널리틱스

여기에서 중요한 것은 "구글 서치 콘솔"과 "구글 애널리틱스" 플러그인이다.

 

구글 서치 콘솔

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
구글 서치콘솔 계정 연결하기

"구글 서치 콘솔" 플러그인을 클릭하면 위와 같이 "계정 연결하기"가 나타난다.

더 자세한 내용은 구글 서치 콘솔 사용법: 총 정리 가이드(2021년) 참고하도록 하자.

 

구글 애널리틱스

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
구글 애널리틱스 설정하기

"구글 애널리틱스" 플러그인을 클릭하면 위와 같이 측정 ID 또는 추적 ID를 입력하라고 한다.

더 자세한 내용은 구글 애널리틱스 사용법:총 정리 가이드(2021년)에서 참고할 수 있다.

3장 플러그인은 이 정도만 하면 충분히 기초 세팅이 완료된다.

 


4장. 애드센스 설정

티스토리를 시작하는 대부분 이유는 애드센스에 있을 것이다.

유튜브 수익 창출은 어렵고, 애드센스 코드는 어떻게 사용해야 할지 모르겠으며, 티스토리도 HTML 때문에 힘든 점이 많다.

이 장에서 애드센스 설정 방법에 대해서 배울 것이다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
애드센스 설정하기

다시 "스킨 편집"에 들어간다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
티스토리 블로그 작성 - tiseutoli beullogeu jagseong

스킨편집 하는 모습

"상단" "사이드바" "글목록" "글" 경우 개인에 따라 커스터마이징 하면 된다.

아니면 위를 보고 그대로 따라 해도 좋다 :)

그리고 내리다 보면 "Adsense" 화면이 나온다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
티스토리 블로그 작성 - tiseutoli beullogeu jagseong

애드센스 광고 설정하기

**주의 사항** JB스킨은 "티스토리" 애드센스 자동연결을 사용하지 않는다.

간단하게 위에 코드만 넣으면 된다.

독자가 신경 써야 할 Adsense 입력란은 아래와 같다.

  • Adsense Client ID : 각자 애드센스 클라이언트 아이디가 다르다.
  • 본문 상단 왼쪽 SLOT
  • 본문 상단 오른쪽 SLOT
  • 본문 하단 SLOT
  • 본문 중간 SLOT
  • 인피드 LAYOUT KEY
  • 인피드 SLOT
  • 인피드 광고 간격: 3(이미 설정되어 있음)

그리고 위와 같이 모바일 전체 폭 광고 사용 / 본문 상단 두 개 / 본문 하단 / 본문 중간 / 인피드 광고를 ON 시키자.

이렇게 하면 스킨 내 애드센스 세팅은 완료이다.

 

구글 애드센스 광고 만들기

이제 구글 애드센스 홈페이지로 접속하자.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
애드센스 광고란 설정

구글 애드센스 홈페이지에 접속하면 왼쪽에 "광고" 버튼을 클릭한다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
디스플레이 및 인피드 광고 설정

상단에 "사이트 기준" "광고 단위 기준" "전체 설정"이 있다.

"광고 단위 기준"을 누르면 위와 같이 화면이 나온다.

처음에 설정할 것은 "디스플레이 광고" "인피드 광고"만 이해하면 된다.

 

디스플레이 광고

일단 "디스플레이 광고" 부분부터 만들어보자.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
디스플레이 광고 설정하기

이름은 아까 설정한 대로 본문 상단 왼쪽 / 오른쪽 / 하단 / 중간으로 나눠서 설정하면 좋다.

총 4개를 만들면 된다.

왜 그래야 할까?

나중에 애드센스 수익을 계산할 때 "어느 광고"에서 수익이 많이 나왔는지 알 수 있다.

그리고 "반응형"으로 설정하자.

반응형으로 설정하는 이유는, 해당 스킨이 이미 반응형 페이지이기 때문에 알아서 잘 나올 수 있다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
광고코드 복사하기

만들면 위와 같은 코드가 나온다.

정리하면 아래와 같다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-클라이언트 ID"
     crossorigin="anonymous"></script>
<!-- 실험 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="클라이언트 ID"
     data-ad-slot="슬롯 번호"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []). push({});
</script>

위 "클라이언트 ID" 및 "슬롯 번호"를 따로 메모장에 복사해놓자.

다음은 인피드 광고 부분이다.

 

인피드 광고

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
측면 이미지 사용하기

"광고 스타일 직접 만들기"를 클릭한 후, "측면 이미지"를 클릭한다.

왜 "측면 이미지"일까?

"측면 이미지"가 JB 스킨과 가장 알맞기 때문이다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
전체옵션 활용하기

"인피드 광고"는 개인에 따라 커스터마이징 할 수 있지만, 이대로 저장 및 코드 생성해도 문제가 되지 않는다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
코드 복사하기

코드를 생성하게 되면 위와 같은 화면이 뜬다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-클라이언트 ID"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="레이아웃 키"
     data-ad-client="클라이언트 코드"
     data-ad-slot="슬롯 번호"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []). push({});
</script>

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
가져온 코드를 해당 란에 넣기

자 이제 "클라이언트 아이디" "디스플레이 광고" "인피드 광고"가 완료됐다.

여기에 각자 개설한 광고 코드를 넣으면 끝이다.

 

애드센스 서식 만들기

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
서식 관리 설정

수동으로 애드센스를 매번 코드를 심기에는 어려움이 있을 수 있다.

이럴 때 해야 하는 것이 "서식"을 사용해야 한다.

"콘텐츠" -> "서식 관리"에 들어간다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
서식쓰기 설정

오른쪽 상단에 "서식 쓰기"를 클릭한다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
기본모드에서 HTML 클릭

제목은 독자가 어디에 해당 서식을 넣을지 "제목"에 넣으면 된다.

그리고 오른쪽 상단에 "HTML"을 클릭하자.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
HTML에서 애드센스 서식 넣기

위와 같이 화면이 바뀔 것이다.

<div align="center">
<ins class="adsbygoogle" style="display: block;" data-ad-client="클라이언트 ID" data-ad-slot="슬롯 번호" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []). push({});
</script>
</div>

아까 만든 "디스플레이형 광고" 코드를 복사 붙여 넣기 하면 끝이다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=클라이언트 ID"
     crossorigin="anonymous"></script>

그냥 복붙 하면 위 코드가 딸려오는데 삭제하면 된다.

그리고 그 자리에 <div align="center"> 코드를 붙이자.

</div> 그리고 마지막으로 닫아주자.

 

해당 코드는 애드센스가 가운데 정렬로 오도록 도와주는 코드이다.

여기까지 하면 끝이다.

 


5장. 콘텐츠 만들기

여기까지 잘 따라왔다면 블로그 기본 세팅은 끝이다.

집을 지었으면 안에 내용물을 채워야 하는 것이 우선이다.

특히 제대로 바이럴이 되려면 콘텐츠 마케팅이 중요하다.

콘텐츠를 만들 때 어떤 점이 필요한지 알아보자.

 

소제목 설정하기

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
콘텐츠 목차 설정

위와 같은 목차로 나오기 위해서는 소제목 설정이 중요하다.

소제목을 사용해야 하는 이유는 무엇일까?

콘텐츠가 단락별로 나뉘어있어야 구글 로봇이 쉽게 가져갈 수 있다.

그래서 소제목을 사용하면 콘텐츠를 단락별로 이해할 수 있다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
본문 및 제목 관리하기

상단에 "본문 2"라고 적혀 있는 탭을 클릭하자.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
제목 재설정하기

그러면 위와 같이 나온다.

  • <제목 1> = H2(대 카테고리)
  • <제목 2> = H3(중 카테고리)
  • <제목 3> = H4(소 카테고리)

개인에 맞게 커스터마이징 후 사용하면 끝이다.

 

ALT 설정하기(과거)

ALT를 설정해야 하는 이유는 무엇일까?

만약에 이미지가 노출되지 않은 경우 대체할 수 있는 텍스트가 있어야 한다.

검색엔진 최적화에도 좋으며 최종적으로 "눈이 안 좋은 질병을 가지고 있는 사람"에게는 음성 텍스트로 인식이 될 수 있다.

독자를 배려하기 위해 만들어졌으며 구글 또한 SEO에 영향을 준다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
ALT 설정하기

위에 보시다시피 파일 이름 뒤에 Alt="쓰고 싶은 말" 삽입하면 된다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
ALT 설정하기

이런 식으로 쓰면 된다.

대문자 ALT 혹은 소문자 alt 상관없다.

최대한 이미지와 관련된 말을 작성하는 것이 SEO에 도움된다.

 

ALT 태그 넣기(현재)

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
alt 태그 넣는 방법

에디터에서 이미지를 삽입한 후, 그림 파일을 클릭하면 위와 같은 화면이 나온다.

티스토리alt 태그는 이러한 방식으로 넣으면 끝이다.

SEO alt 태그 즉, HTML 및 img alt 태그는 중요하니 꼭 활용하자.

 

 

애드센스 20 / 50 / 80% 서식 넣기

애드센스 왜 20% / 50% / 80% 정도에 넣으라고 할까?

실험해본 결과 독자가 글을 읽을 때 "쉬는 텀"이 단락별로 이 정도 된다.

아까 4장에서 만든 서식을 이제 사용하면 된다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
서식 활용하여 애드센스 넣기

아까 만든 서식은 오른쪽 상단 "서식" 탭에서 볼 수 있다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
애드센스 번호 서식

이렇게 "서식"을 만들고 원하는 위치에 넣으면 된다.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
위와 같이 넣기

애드센스 "서식" 만들어 놓은 것을 넣으면 위와 같이 표시가 된다.

그리고 20% / 50% / 80% 최적의 위치는 어디일까?

  • 20%: 2번째 단락
  • 50%: 소제목 4~5번 정도
  • 80%: 마지막 단락 전

이렇게 넣으면 끝이다.

 

ALT 태그 넣기

티스토리 블로그 작성 - tiseutoli beullogeu jagseong
alt 태그 넣는 방법

에디터에서 이미지를 삽입한 후, 그림 파일을 클릭하면 위와 같은 화면이 나온다.

티스토리 alt 태그는 이러한 방식으로 넣으면 끝이다.

SEO alt 태그 즉, HTML 및 img alt 태그는 중요하니 꼭 활용하자.

티스토리 블로그 작성 - tiseutoli beullogeu jagseong

공유하기

게시글 관리

구독하기에스이오_마케팅

-->

'마케팅 개론/티스토리' 관련 글

더 보기

티스토리 구글 노출: 5초 만에 확인 방법(저품질 테크닉)

  • 2021.10.11

더 읽기

빙(bing) 웹마스터 도구: 총 정리 가이드(2021년)

  • 2021.09.10

더 읽기

네이버 웹마스터도구 최적화: 총 정리 가이드(2021년)

  • 2021.09.07

더 읽기

카카오 뷰 창작센터 설정: 총 정리 가이드(2021년)

  • 2021.09.01

더 읽기

티스토리 댓글 작성하기

    비밀 글

    등록