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

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

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

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

    *주의* 해당 스킨은 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"을 클릭하자.

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

    <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 상관없다.

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

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

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

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

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

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

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

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

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

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

    이렇게 넣으면 끝이다.

     

    티스토리 댓글 작성하기

    비즈니스 문의: vxev93@gmail.com

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