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

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

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

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

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

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

    티스토리 블로그 만들기:총 정리 가이드(2021년) 메인 이미지
    티스토리 로고

     


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

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

    블로그 만들기 이미지 예시
    새 블로그 블로그 주소 넣기

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

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

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

    예를 들면 아래와 같다.

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

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

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

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

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

    스킨변경 이미지
    스킨변경 하는 법

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

    스킨등록 이미지
    스킨등록 하기

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

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

    추가 이미지
    스킨등록 추가 하는 모습

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

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

    스킨 파일 이미지
    스킨 파일 넣기

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

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

    파일 목록 리스트

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

    스킨 저장하는 모습

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

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

    일단 스킨 등록 끝이다.

    스킨 보관함 클릭하기

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

    스킨 등록 완료

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

    사용중인 스킨 노출되는 모습

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

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

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

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


    2장. 블로그 설정

    티스토리 블로그 설정

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

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

    블로그 설정하기

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

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

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

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

    원하는 대로 바꿔도 된다.

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

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

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

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

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

     

    파비콘 만들기

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

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

    파비콘 만드는 방법

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

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

    파비콘 완료된 모습

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

    파비콘을 넣으면 끝이다.

    기타 설정 셋팅

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

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

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

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

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

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

     

    모바일 설정

    모바일 설정하기

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

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

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

    모바일 꾸미기 설정

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

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

    콘텐츠 설정하기

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

    콘텐츠 앞뒤 공백 설정

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

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

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

     

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

    스킨편집에서 레이아웃 변경

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

    레이아웃 변경하는 모습

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

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

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

     

    메타태그 설정

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

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

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

    메타태그 설정하기

    <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 사용이 어려운 사용자에게 쉽게 도움이 될 수 있다.

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

    플러그인 설정하기

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

    해당 부분을 클릭한다.

    전체 플러그인 설정하는 모습

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

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

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

    *사용해야 할 것*

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

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

     

    구글 서치 콘솔

    구글 서치콘솔 계정 연결하기

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

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

     

    구글 애널리틱스

    구글 애널리틱스 설정하기

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

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

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

     


    4장. 애드센스 설정

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

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

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

    애드센스 설정하기

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

    스킨편집 하는 모습

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

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

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

    애드센스 광고 설정하기

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

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

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

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

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

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

     

    구글 애드센스 광고 만들기

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

    애드센스 광고란 설정

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

    디스플레이 및 인피드 광고 설정

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

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

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

     

    디스플레이 광고

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

    디스플레이 광고 설정하기

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

    총 4개를 만들면 된다.

    왜 그래야 할까?

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

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

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

    광고코드 복사하기

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

    정리하면 아래와 같다.

    <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" 및 "슬롯 번호"를 따로 메모장에 복사해놓자.

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

     

    인피드 광고

    측면 이미지 사용하기

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

    "측면 이미지"일까?

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

    전체옵션 활용하기

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

    코드 복사하기

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

    <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>

    가져온 코드를 해당 란에 넣기

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

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

     

    애드센스 서식 만들기

    서식 관리 설정

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

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

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

    서식쓰기 설정

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

    기본모드에서 HTML 클릭

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

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

    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장. 콘텐츠 만들기

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

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

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

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

     

    소제목 설정하기

    콘텐츠 목차 설정

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

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

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

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

    본문 및 제목 관리하기

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

    제목 재설정하기

    그러면 위와 같이 나온다.

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

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

     

    ALT 설정하기(과거)

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

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

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

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

    ALT 설정하기

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

    ALT 설정하기

    이런 식으로 쓰면 된다.

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

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

     

    ALT 태그 넣기(현재)

    alt 태그 넣는 방법

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

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

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

     

     

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

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

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

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

    서식 활용하여 애드센스 넣기

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

    애드센스 번호 서식

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

    위와 같이 넣기

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

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

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

    이렇게 넣으면 끝이다.

     

    ALT 태그 넣기

    alt 태그 넣는 방법

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

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

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

     

    블로그에 대한 궁금한 점 댓글로 남겨주세요!

    1주 1회 Q&A 진행합니다 :)

     

    -->

    티스토리 댓글 작성하기

    비즈니스 문의: vxevvxev@naver.com

    자바스크립트를 허용해주세요.
    [ 자바스크립트 활성화 방법 ]
    from Mohon Aktifkan Javascript!