티스토리 블로그 최적화 방법 9가지(+ 체크리스트)

티스토리 블로그 최적화 방법 9가지(+ 체크리스트)  | 이 글은 2022년 9월 3일 업데이트 되었습니다.

 

티스토리 블로그 최적화 과정

티스토리 블로그를 최적화하기 위한 여러 가지 과정들 중에서 티스토리는 결국 사이트로 이해하고 접근하는 것이 중요하다는 생각이 들었다. 티스토리 블로그를 최적화하기 위한 여러 시행착오에 대한 내용을 담고 있다.

이러한 시도는 티스토리뿐만 아니라 워드프레스, 텀블러, 구글 블로그, 기타 웹빌더로 제작된 사이트 등 기본적인 SEO 내용을 담고 있기 때문에 모두 비슷하다. 다만, 티스토리는 루트 도메인에 접근할 수 없으므로 제한된 SEO 작업을 할 수밖에 없을 것이다. 이러한 상황에서 개인이 티스토리 블로그를 통해 조금이라도 더 검색이 잘 되는 사이트로 만들기 위한 방법을 정리해본다.

 

1. 티스토리 블로그 특징

티스토리는 네이버블로그와도 다르지만, 워드프레스와도 다르다. 다음카카오가 제공하고 있는 블로그 서비스 중 하나이며, 또 다른 블로그는 다음 블로그가 있다. 다음 블로그보다 티스토리 블로그가 더 유명한 이유는 구글 애드센스 때문이라고 해도 과언이 아니다. 이러한 이유때문에 많은 사람들이 티스토리를 하고 있으며, 수익을 올리기 위한 수단으로 블로그를 운영하는 경우가 많다.

티스토리 블로그와 함께 네이버블로그를네이버 블로그를 하는 경우가 많다. 또는 네이버 블로그를 하다가 티스토리 블로그를 운영하는 경우가 많은데, 그 이유는 네이버 블로그를 운영하다가 저품질 현상이 발생했거나 검색 노출이 어려워 그 대안으로 티스토리 블로그를 운영하는 것이다.

그러나, 티스토리 블로그는 네이버 블로그보다 더 복잡하고 확장된 기능을 제공하고 있다. 티스토리 블로그에서는 HTML이나 CSS 편집이 가능하기 때문에 네이버 블로그보다 더 많은 퍼포먼스를 보여줄 수 있으며, 대부분 코드가 허용된다.

구글 애드센스는 광고 코드를 웹페이지에 삽입해서 운영되는 방식이기 때문에 네이버 애드포스트와 많은 부분에서 다르다. 내 사이트나 블로그에 더 많은 광고를 배치할 수 있고 일부 광고 단위의 같은 경우에는 디자인도 수정할 수 있으며, 광고 개수도 조절할 수 있다.

또한 개성 넘치는 블로그로 꾸밀 수도 있기 때문에 네이버 블로그에 익숙한 사람이라면 티스토리 블로그는 더 복잡하게 느껴질 수밖에 없다. 따라서, 티스토리 블로그는 블로그에 속해있지만 일반적으로 웹사이트의 성격을 가졌다고 볼 수 있을 것이다.

 

2. 스킨 편집

티스토리 블로그에서 할 수 있는 작업 중 하나는 스킨 편집이다. 스킨 편집을 통해 대부분의 최적화 작업이 이뤄진다고 봐도 무방하다. 물론, 콘텐츠를 작성할 때, 글의 구조나 키워드의 선택 등 여러 방법을 사용할 수 있지만, 지속적으로 검색에 영향을 끼치는 것은 바로 사이트의 구조와 문서에 작성된 각종 코드들일 것이다.

기본적으로 가장 먼저 해야할 것은 메타 정보의 제공이다.

즉, 메타 태그 또는 메타 데이터라고 하는데, 대부분 많은 티스토리 블로그에서는 이 내용을 제대로 기재되어 있지 않다. 따라서, 티스토리 블로그에 적용하면 좋을만한 메타데이터를 정리해해보고자 한다. 또한 치환자가 포함되어 있어 그대로 티스토리에 적용해서 사용할 수 있다.

다만, 메타 키워드 태그 같은 경우에는 별도로 자신이 운영하고 있는 블로그나 사이트의 주제에 맞게 설정해야 하기 때문에 이 부분만 별도로 수정해주는 것을 권장한다. 메타 키워드는 6개 키워드 이내로 적용하는 것이 가장 효과가 좋다.

 

2-1. 티스토리 블로그에 적용하기 좋은 메타태그

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<meta http-equiv="Cache-Control" content="No-Cache"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta http-equiv="Pragma" content="No-Cache"/>
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="[키워드1], [키워드2], [키워드3] …"/>
<meta name="theme-color" content="#FFFFFF"/>
<meta name="robots" content="All"/>
<meta name="robots" content="index,follow"/>
<meta name="subject" content="라이브러리 브랜드"/>
<meta name="author" content="라이브러리 브랜드"/>
<meta name="publisher" content="라이브러리 브랜드"/>
<meta name="writer" content="라이브러리 브랜드"/>
<meta name="copyright" content="©라이브러리 브랜드®. All Rights Reserved."/>

 

2-2. 이외의 메타태그들

<meta name="Other Agent" content="웹책임자 이름">
<meta name="Classification" content="카테고리위치(분류)">
<meta name="Generator" content="">
<meta name="Reply-To" content="" />
<meta name="Filename" content="index.html" />
<meta name="Email" content="" />
<meta name="Location" content="위치" />
<meta name="Distribution" content="name" />
<meta name="Build" content="date" />
<meta http-equiv="Expire" content="-1">
<meta http-equiv="Last-Modified" content="Mon,20 Jul 2016 19:30:30" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Refresh" content="15;URL=">
<meta http-equiv="Content-Scription-Type" content="text/javascription">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=10, Transition=50)">
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=10, Transition=50)">

위의 메타태그들은 다 알 필요도 없고, 전부 기재할 필요도 없다. 잘못 기재한다고 해서 블로그 운영에 치명적인 결함이 생기는 것도 아니다. 그러나, 메타태그는 해당 블로그나 웹사이트 문서를 정의하고, 어떤 키워드를 담고 있는지 쉽게 이해할 수 있도록 해 준다.

메타태그에서 인코딩 방식은 HTML4와 HTML5에서 조금 다르지만, 큰 문제는 없다.

 

HTML4.01    :    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
HTML5       :    <meta charset = "UTF-8">

다만, 이러한 메타태그의 기재는 로봇이 훨씬 블로그와 사이트를 쉽게 분석할 수 있게 도와주고, 결과적으로 데이터 수집을 더욱 용이하게 해준다. 이는 검색 노출이 향상되는 효과를 보여준다. 다만, 메타태그는 중복 기재할 필요는 없기 때문에 중복된 내용이 있다면 삭제해준다.

기존의 메타태그는 검색엔진에 있어 아주 중요한 역할을 했다. 불행하게도, 이제는 실제 페이지의 연관성에 대한 알고리즘을 분석하기 때문에 이전보다 메타태그의 중요성은 떨어졌지만, 여전히 메타태그는 중요한 데이터를 담고 있다. 또한, 검색 노출에 있어서 메타태그는 중요한 역할을 하고 있다.

 

<meta name="Robots" content="ALL">
검색 로봇의 접근 관련 설정
<meta name="robots" content="index,follow" />
문서 크롤링 가능, 링크 크롤링 가능
<meta name="robots" content="noindex,follow" />
문서 크롤링 불가능, 링크 크롤링 가능
<meta name="robots" content="index,nofollow" />
문서 크롤링 가능, 링크 크롤링 불가능
<meta name="robots" content="noindex,nofollow" />
문서 크롤링 불가능, 링크 크롤링 불가능

위와 같이 한 줄의 코드만으로도 검색로봇이 글을 색인하는 것을 원천 차단할 수 있다. 이처럼, 메타 태그는 정말 중요한 부분을 차지한다. 티스토리 블로그도 웹문서이기 때문에 예외는 없다. 오히려, 이용자 입장에서는 스킨 편집을 잘못하게 되면 검색 노출이 아예 안될 수도 있다는 것이다.

 

3. 헤딩 태그의 활용

대부분의 블로그 스킨에서는 헤딩 태그, 즉 헤드라인 태그가 적절하게 적용되었다고 생각하지만, 일부 스킨의 경우에는 이러한 부분이 누락된 경우가 있다. 예를 들어서, 웹사이트의 대표적인 헤드라인은 사이트 제목이나 페이지 제목이 되어야 한다. 즉, 티스토리 치환자 기준으로 [###_title_###] 또는 [###_page_title_###]를 헤드라인으로 지정해주거나 각 글의 콘텐츠 제목을 헤드라인으로 설정해줘야 한다는 것이다.

그렇다면, 어떻게 적용해야 할까? 일반적으로 H1 태그를 적용하기 적절한 위치는 로고 이미지와 타이틀 부분에 적용하는 것이다. 예를 들면 아래와 같다.

 

<h1 class="logo">
    <img src="./logo.jpg>
    <span class="blind>[###_title_###]
    </span>
</h1>

위와 같이 스킨 편집에서 적절한 위치를 찾는다면 위와 같이 구성할 수 있을 것이다. 이 경우 [###_title_###] 같은 경우에는 티스토리 블로그의 제목 문자 치환자 값이기 때문에 블로그 제목으로 표현된다. 하지만, 이미지 로고와 문자가 같이 있으면 어색하기 때문에 데이터는 작성하고 보이지 않게 .blind로 숨겨주는 것이다. 이는 일반적인 웹사이트에서 활용되는 방법이다.

하지만, 내가 방문자들에게 보여주고 싶은 것은 내 블로그 제목이 아니라, 내가 작성한 글일 것이다. 그러기 위해서는 내가 작성한 글의 제목이 헤드라인이 되어야 한다. 흔히, SEO에서는 H1태그는 하나만 있어야 한다고 말한다.

하지만, 아래의 유튜브 링크에 의하면 HTML5에서는 H1의 개수가 크게 문제 되지 않는다고 한다. HTML5 이전에는 구조화된 데이터 구성에 있어 여러 개의 H1태그는 사이트 구성에 있어 문제가 될 수 있었으나 HTML5에서는 큰 문제가 없다는 것이다.

 

따라서, 우리는 각 게시글 제목에도 H1태그를 적용해줄 수 있다. 이는 아래와 같은 방법으로 활용할 수 있을 것이다.

<h1>[###_article_rep_title_###]</h1>
<div class="content">[###_article_rep_desc_###]</div>

 

물론 스킨마다 구성 방법은 다를 수 있다. 하지만, 일반적으로 티스토리 치환자를 활용한다고 했을 때, 각 게시글의 제목은 [###_article_rep_title_###]를 활용할 가능성이 높으며, 이를 H1 태그로 묶어주는 것이다.

일반적인 SEO에서 중요한 헤딩 태그는 H1과 H2의 활용이다. 이러한 트리 구조는 콘텐츠를 훨씬 구조적으로 만들어준다. 따라서, 스킨 편집을 통해 일부 레이아웃을 수정해줌으로써, 영구적인 SEO 향상 효과를 얻을 수 있다는 것이다.

 

<H1> 사이트/블로그 이름 또는 제목
    <H2> 콘텐츠 제목(주제)
        <H3> 콘텐츠 주요 주제(부주제)
            <H4> 콘텐츠 소주제
                …<H5> 기타
                …<H6> 기타

 

4. 이미지의 ALT와 TITLE 태그 추가

대부분의 블로그에서 놀랍게도 각 콘텐츠에 첨부된 이미지뿐만 아니라, 웹사이트에서 기본적으로 사용되는 이미지에도 alt와 title요소가 포함되지 않았다는 점이다. 이는 SEO에 있어 아쉬울 수밖에 없다. 로봇이 이미지를 이해할 때, 기본적으로 데이터를 제공해주는 좋은 정보가 된다. 예를 들면 아래와 같이 내 블로그의 스킨 편집에서 이미지 부분에 위의 요소를 추가해준다.

<img src="./apple.jpg" alt="사과" title="사과">

위와 같이 <img>요소에 alt와 title 요소를 한 번만 추가해주면 검색 노출에 도움이 된다. 각 콘텐츠에 첨부하는 개별 사진들에 대해 항상 alt와 title 태그 요소를 적용할 수 없더라도 기본적인 사이트 레이아웃에 적용된 요소에 추가해주는 것은 중요하다.

 

5. 앵커 태그에 TITLE 태그 추가

대부분의 블로그에서도 앵커 태그는 많이 활용되지만, 해당 링크가 어떤 것을 의미하는지 기재되지 않고 있다. 이러한 문제는 title 태그를 추가해주면 간단하게 해결된다. 웹페이지의 링크는 중요한 의미를 갖고 있기 때문에 스킨 편집을 통해 앵커 텍스트에 title 태그가 없다면 추가해주는 것이 좋다.

 

6. 이미지 사이즈 조절

이미지 최적화는 많은 의미를 가지고 있다. 티스토리 블로그는 기본적으로 치환자를 통해 레이아웃을 형성하고 썸네일을 구현할 수 있다. 하지만, 썸네일 사이즈와 달리 실제 이미지는 작거나 크게 표현되는 경우가 있다면 이미지가 선명하지 않거나 불필요하게 이미지 용량이 커질 수 있기 때문에 이러한 이미지 사이즈를 수정해줄 수 있다.

 

썸네일 타입	치환자 예시	원본 비율	원본 속성	설명
C (Crop)	C300x200	무시	유지	원본 이미지 비율은 유지하면서 썸네일 크기를 벗어난 부분 이미지는 잘린 채 썸네일 이미지가 표현된다.
P (Portrait)	P300x300 (비율 유지)	무시	유지	원본 이미지 비율을 유지하면서 썸네일 크기 안에 표현되며, 가로 또는 세로 부분 중 부족한 부분은 흰색 배경으로 채워진다.
R (Resize)	R200x300 R600x0 R0x150	유지/무시	유지	강제적으로 지정한 이미지 크기로 이미지를 늘려준다. 가로와 세로 모두 지정할 수 있으며, 가로 또는 세로 하나만 지정할 수도 있다. 한쪽만 지정하는 방법을 일반적으로 활용할 수 있으며, 한쪽 비율을 기준으로 이미지를 늘려 썸네일을 가득 채울 수 있다.
S (Snapshot)	S200x200	무시	무시	움짤 등 Gif 이미지를 활용할 때, 멈춘 장면, 즉 스냅 이미지를 제공한다.

<img src="//i1.daumcdn.net/thumb/R500x0/?fname=[###_cover_item_thumbnail_###]" alt="썸네일">

위와 같이 내 썸네일 사이즈와 비슷하게 치환자 값을 수정해주면 이미지 사이즈가 줄어들어 용량이 작아지고, 결과적으로 내 티스토리 블로그 속도가 빨라질 수 있다.

속도가 빠르면 검색 노출에 유리하기 때문에 가능하면 수정해주는 것이 좋다. 또는 썸네일이 필요가 없다면 아예 썸네일을 없애주거나 썸네일을 노출하지 않는 리스트 타입으로 글을 게시하는 것도 좋은 방법이다.

 

7. 페이지 경험 / 코어 웹 바이탈 / 모바일 사용 편의성

티스토리 블로그를 구글 서치 콘솔에 등록했다면 구글 서치 콘솔의 다양한 기능을 활용할 수 있을 것이다.

일반적으로 사이트맵을 제출하고 RSS를 등록하는 것은 어렵지 않지만, 블로그나 사이트의 문제점을 해결하는 것에는 어려움을 겪는다. 따라서, 구글 서치 콘솔의 실적을 통해 지속적으로 유입이 늘어나는지 확인하고, 글을 꾸준히 작성해도 유입이 발생하지 않는다면 다른 문제가 발생할 가능성이 크다.

이러한 문제점은 빠르거나 좋은 웹 페이지가 없기 때문이며, 그러한 경우는 여러 가지 복합적인 이유로 작용하는 경우가 많다. 실제로 모바일에서 속도가 빠른 티스토리 블로그는 썸네일이 없는 경우가 많으며, 이는 검색이 더 잘되는 결과를 보여준다. 또한, 잘못된 CSS 수정으로 클릭할 수 있는 요소가 서로 너무 가까움이나 콘텐츠 폭이 화면 폭보다 넓음 등의 문제가 발생하는 경우도 마찬가지다.

 

8. 티스토리 블로그 최적화 - 웹페이지 문제 해결을 위한 도구

이러한 문제들은 스킨의 구조적인 문제일 가능성이 크기 때문에 스킨의 구조와 CSS 코드를 수정해서 해결할 수 있을 것이다. 이는 각 스킨마다 다르기 때문에 개별적으로 해결해야 한다. 위와 같은 문제들을 확인하기 위해서는 좋은 웹 툴을 활용할 수 있다.

• 웹페이지 속도 측정 : Google PageSpeed
• 웹페이지 속도 측정 : Gtmetrix
• 마크업 유효성 체크 : The W3C Markup Validation Service
• CSS 유효성 체크 : W3C CSS 검사 서비스
• 키워드 밀집도 분석 : Keyword Density Analyzer
• 웹사이트 트래픽 체크 : Drive More Website Traffic with Competitive Analysis
• 안전한 사이트 체크 : Google 세이프 브라우징
• SEO Tools : Website Analytics and SEO Tools | MetricSpot
• 리치 검색 결과 체크 : 리치 검색결과 테스트 - Google Search Console
• SEO 기본 가이드 : SEO 기본 가이드: 기본사항 | Google 검색 센터

 

9. 구글 검색 노출 확인방법

구글 검색엔진에서 내 티스토리 블로그가 제대로 노출이 되고 있는지 확인하는 방법은 아주 간단하다. 아래와 같은 방법으로 쉽게 검색할 수 있다. 일반적으로 site:, link:를 통해 내 도메인 주소를 검색하면 내가 작성한 콘텐츠가 노출된다. 정상적으로 노출이 된다면 문제없이 검색로봇이 색인하다는 것을 확인할 수 있다.

define:	기본적으로 구글에 내장된 사전의 기능을 하는 명령어이며 검색어에 대한 정의가 표시합니다.
site:	해당 웹사이트에서 색인된 결과만을 보여줍니다.
cache:	해당 명령어 뒤에 URL을 추가하여 검색하면 구글에 가장 최근 색인된 해당 웹페이지의 캐시 버전을 보여줍니다.
intitle:	페이지 제목(타이틀 태그)에 특정 검색어가 포함된 페이지를 찾도록 명령하는 기능을 합니다.
allintitle:	intitle: 명령어와 같은 기능을 하지만 여러 개의 검색어를 모두 포함된 결과만을 표시합니다.
inurl:	페이지 URL에 특정 검색어가 포함된 페이지를 찾도록 명령하는 기능을 합니다.
allinurl:	inurl: 명령어와 같은 기능을 하지만 여러 개의 검색어가 모두 포함된 결과만을 표시합니다.
intext:	본문에 검색어를 포함하는 페이지를 찾도록 명령하는 기능을 합니다.
allintext:	inurl: 명령어와 같은 기능을 하지만 여러 개의 검색어가 모두 포함된 결과만을 표시합니다.
filetype:	검색 결과를 특정 파일 확장자로 제한하는 명령어이며 “ext:”로 대체할 수 있습니다.
related:	특정 웹사이트와 비슷한 웹사이트를 찾아주는 명령어입니다.
AROUND(X)	두 검색어의 간격이 X 개의 단어 또는 구 이하인 결과를 표시합니다.

이외에도 여러 구글 명령어가 있다. 하지만, 내 도메인 주소를 입력해서 내 콘텐츠가 제대로 노출되고 있는지 확인하는 것이 중요하기 때문에 다른 명령어들은 크게 의미가 없다. 구글 검색 엔진에 노출되는 것 외에도 구글 서치 콘솔을 통해 로봇이 내 블로그 글을 제대로 색인하고 있는지 확인할 수 있다.

 

보다 더 유용한 정보제공을 위한 블로그 최적화

이외에도 티스토리 블로그를 개선하기 위한 더 많은 방법이 있지만, 일단 위의 문제들을 개선하는 것만으로도 빠르고 검색 노출이 잘 되는 블로그가 될 것이라 믿어 의심치 않는다.

불필요한 자바스크립트나 사용하지 않는 CSS 요소를 제거하거나, 웹페이지에 캐시를 적용하는 방법, 이미지의 사이즈를 실제 표현되는 이미지와 동일하게 변경하거나 애니메이션 이미지를 사용하지 않는 방법, 차세대 이미지 확장자(Webp) 등을 활용하거나 사용하지 않는 웹폰트를 제거하는 방법, 요소 색상의 고대비에 맞게 수정해주는 등 정말 다양한 방법들이 있을 것이다. 하지만, 이는 많은 작업 시간이 필요하기 때문에 효율적이라고 말할 수 없을 것이다.

따라서, 필요한 부분과 할 수 있는 부분들만 먼저 수정해주고 콘텐츠에 집중한다면 티스토리 블로그의 트래픽을 늘릴 수 있을 것이다. 검색이 잘 되는 블로그는 우연하게 만들어지지 않는다. 검색 유입이 높은 블로그는 그러한 이유가 있을 수밖에 없다.

 

관련 콘텐츠 같이 보기

티스토리 속도 최적화 CSS minify

티스토리 광고배치 최고의 방법 3가지

티스토리 구글 검색 노출 및 검색 등록 방법

구글애드센스 수익 향상을 위한 사용자 환경 개선

구글 애드센스 승인 조건 및 방법 6가지

구글 애드센스 승인 후기(+콘텐츠 구성 팁)

워드프레스 구글 검색엔진 최적화 색인을 위한 5가지 방법

구글 SEO 이미지 최적화 하는 방법

트래픽을 증가시키기 위한 3가지 핵심 방법

제너레이트 프레스(GeneratePress) 티스토리 스킨 무료 배포

메타 키워드(meta keywords)는 SEO에 의미가 없습니다.

블로그 진단 방법·핵심 비법 6가지

티스토리 블로그 스킨 헛소문

티스토리 블로그 설정

티스토리 썸네일 알고리즘

구글 검색 상위랭크(SEO) 이해하기 - 시작편

티스토리 블로그 속도 최적화를 위한 12가지 방법