티스토리 블로그를 하다보면, 목차가 없어서 아쉬운 적이 많고 손으로 만들려면 너무 불편합니다. 티스토리 블로그에서 자동 목차 생성 방법을 알아보고, SEO에 어떻게 중요한지도 알아보겠습니다. 더 높은 검색 엔진 랭킹을 위해 자동 목차를 만드는 법을 알려드립니다.
Table Of Contents
티스토리 블로그와 html 문서에서 목차 그리고 SEO
목차와 SEO 간의 관련성은 블로그 컨텐츠의 가독성과 검색 엔진 순위에 중요한 영향을 미칩니다. 이에 관한 설명은 다음과 같습니다:
- 가독성 향상: 목차는 글의 구조를 시각적으로 보여주며, 독자가 원하는 정보를 쉽게 찾을 수 있도록 도와줍니다. 길고 복잡한 글에서는 특히 유용합니다. 가독성이 높으면 방문자가 글을 더 오래 머무르며 컨텐츠를 이해하기 쉽게 됩니다.
- 검색 엔진 색인화: 목차는 검색 엔진에게 컨텐츠 구조를 이해하는 데 도움을 줍니다. 검색 엔진은 웹 페이지의 내용을 분석하고 인덱싱하는데 목차 정보를 활용하여 페이지의 중요한 부분을 파악할 수 있습니다.
- 키워드 포함 기회: 목차 항목은 주요 키워드를 포함할 수 있는 좋은 기회를 제공합니다. 키워드를 포함하면 해당 키워드로 검색하는 사용자에게 노출될 가능성이 높아집니다.
- 시간 단축: 목차는 글의 구조를 미리 계획하고 정리하는 데 도움을 줍니다. 이렇게 하면 글을 작성하는 시간을 단축하고 더 집중적으로 풍부한 콘텐츠를 제공할 수 있습니다.
- 긴 글에 대한 유지 및 유입: 검색 엔진은 긴 글에 더 주목하고, 목차는 긴 글을 작성할 때 필요한 효과적인 요소 중 하나입니다. 더 긴 페이지는 평균 체류 시간을 높일 수 있으며, 사용자 유입 및 유지에 도움이 됩니다.
- 사용자 경험 향상: 목차를 통해 독자는 필요한 정보를 쉽게 찾을 수 있으므로 사용자 경험을 향상시킵니다. 만족한 독자는 웹 페이지를 공유하고 돌아오는 방문자를 유치하는 데 기여합니다.
종합하면, 목차는 SEO를 개선하고 사용자 경험을 향상시키며 웹 페이지의 가치를 높이는 중요한 요소입니다.
티스토리 블로그에 목차 넣기
티스토리 블로그에 목차를 넣는 방법은 이전 포스팅에서 구글 블로그에 목차를 넣은것과 동일하게 진행합니다.
구글 블로그에서 자동 목차 생성하는 방법은 3가지로 설명하고 있는데, 여기서도 가장 깔끔하게 나왔던 3번째 방법으로 진행합니다. 관련 내용을 확인하고 오시면 티스토리 블로그에 목차 넣는 방법을 이해하는데 도움이 되니 한번씩 확인해 보시길 추천드립니다.
티스토리 블로그에는 다음과 같이 "1. java script 넣기-> 2. css 넣기 -> 3. 목차용 코드 넣기 -> 4. 서식으로 편리하게 목차 넣기" 순으로 진행합니다.
티스토리 블로그 관리 페이지는 아신다는 가정으로 설명드리겠습니다.
1. html에 java script 넣기
먼저 티스토리 블로그의 관리 > 스킨편집 > html에 들어가서 아무 위치에 다음의 java script를 넣으면 됩니다.
저의 경우 구글 블로그나 다른 블로그도 </head> 앞에 넣기 때문에 일관되게 해당 위치에 넣었습니다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<link href=' http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
function createTOC() {
var toc = "<ul>";
var level = 0;
var contentElement = document.getElementsByClassName('entry-content')[0];
contentElement.innerHTML =
contentElement.innerHTML.replace(
/(<h[23].*?>)(.*?)(<\/h[23]>)/gi,
function (str, openTag, titleText, closeTag) {
if (openTag.toLowerCase().match(/<h2/gi)) {
level = 2;
} else if (openTag.toLowerCase().match(/<h3/gi)) {
level = 3;
}
if (level == 2) {
toc += "</ul><li><a href='#" + titleText.replace(/\s+/g, '') + "'>" + titleText
+ "</a><ul>";
} else if (level == 3) {
toc += "<li><a href='#" + titleText.replace(/\s+/g, '') + "'>" + titleText
+ "</a></li>";
}
return '<' + 'a name="' + titleText.replace(/\s+/g, '') + '"></' + 'a>'
+ openTag + titleText + closeTag;
}
);
toc += "</ul>";
// 새로 생성된 TOC 코드를 원하는 위치에 삽입합니다.
// 여기서는 id가 "toc"인 요소 안에 삽입되도록 설정되어 있습니다.
document.getElementById("toc").innerHTML += toc;
};
window.onload = function () {
createTOC();
};
function tocToggle() {
var avs = document.getElementById('toc');
if (avs.style.display === 'none') {
avs.style.display = 'block';
} else {
avs.style.display = 'none';
}
}
//]]>
</script>2. css 넣기
다음으로 티스토리 블로그 관리 > 스킨편집 > html편집 > CSS 에 제일 아래부분에 다음의 CSS를 넣습니다 .
.tocstyle {
border: 1px solid #595757;
box-shadow: 1px 1px 0 #656565;
background-color: #EFEDED;
color: #656565;
line-height: 1.4em;
margin: 30px auto;
padding: 20px 30px 20px 10px;
font-family: oswald, arial;
display: block;
width: 70%;
}
.tocstyle ol,
.tocstyle ul {
margin: 0;
padding: 0;
}
.tocstyle ul {
list-style: none;
}
.tocstyle ol li,
.tocstyle ul li {
padding: 15px 0 0;
margin: 0 0 0 30px;
font-size: 15px;
}
.tocstyle a {
color: #656565;
text-decoration: none;
}
.tocstyle a:hover {
text-decoration: underline;
}
.tocstyle button {
background: #EFEDED;
font-family: oswald, arial;
font-size: 20px;
position: relative;
outline: none;
cursor: pointer;
border: none;
color: #656565;
padding: 0 0 0 15px;
}
.tocstyle button:after {
content: "\f424";
font-family: "Font Awesome 5 Free";
font-weight: 900;
/* For solid style */
position: relative;
left: 10px;
font-size: 20px;
}3. 목차용 코드 넣기
이제 준비는 완료 되었습니다. 티스토리 블로그 글 작성 시 html 화면으로 들어가서 다음의 html을 넣으면 자동으로 목차가 생성됩니다.
<div class="tocstyle"><button onclick="tocToggle()">Contents</button><div id="toc"> </div></div>4. 서식으로 편리하게 목차 넣기
위의 html을 직접 글 작성시마다 넣으셔도 되지만 서식으로 저장해 놓으면 훨씬 편리합니다.
서식으로 저장하는 자세한 방법은 다음의 글을 참고하시면 감사하겠습니다.
