구글 블로그 수익화 [5편] 복붙으로 쉽게 끝내는 구글 블로그스팟 목차 자동 생성(TOC)

구글 블로그스팟(Blogger) 자동 생성 목차 만들기!

블로그 스팟(Blogger) 기본 설정에서 빼놓을 수 없는 부분이 자동 생성 목차인데요. 오늘은 구글 블로그스팟(Blogger)에서 자동으로 목차를 생성하는 방법을 정리해보려고 합니다.

자동 목차가 필요한 이유

방문자들이 원하는 정보를 빠르게 찾을 수 있어 체류 시간이 늘어남
글의 구조가 한눈에 들어와 가독성이 좋아짐
SEO(검색 최적화)에도 긍정적인 영향을 미침

자동 목차 설치 준비: 블로그스팟 HTML 편집

먼저 블로그 관리자 페이지에서 테마 > 맞춤설정 > HTML 편집 메뉴로 들어갑니다. 이 작업은 블로그의 디자인을 바꾸는 중요한 과정이니, 혹시 모를 실수에 대비해 테마 백업을 꼭 해두세요.

1단계: 자동 목차 스크립트 삽입

Ctrl+F로 </head>를 검색해 바로 위에 아래 스크립트를 붙여넣습니다. 이 스크립트는 글 본문 내의 h2, h3 태그를 읽어 자동으로 목차를 생성해주는 역할을 해요.

        <!-- custom setting 자동목차 -->    
    <script type='text/javascript'>
    //<![CDATA[
    //*************Table of Content (TOC) plugin by anantvijaysoni.in
    function avsTOC() {
        var avsTOC = i = headlength = gethead = 0;
        var currentH2 = null; // 현재 처리 중인 h2 요소를 저장하기 위한 변수

        // h2와 h3 요소 처리
        var headings = document.querySelectorAll("#post-toc h2, #post-toc h3"); // h2와 h3 요소 선택
        var tocHTML = ""; // 목차의 HTML을 저장할 변수

        for (i = 0; i < headings.length; i++) {
            gethead = headings[i].textContent;

            if (headings[i].tagName === "H2") {
                // 새로운 h2 요소를 만난 경우
                if (currentH2 !== null) {
                    tocHTML += "</ul>"; // 이전 h2의 하위 목차 종료
                }
                currentH2 = headings[i];
                currentH2.setAttribute("id", "point" + i);
                tocHTML += "<li><a href='#point" + i + "'>" + gethead + "</a><ul>"; // h2 아래에 하위 목차 시작
            } else if (headings[i].tagName === "H3" && currentH2 !== null) {
                // h3 요소를 만나고, 현재 처리 중인 h2가 존재하는 경우
                headings[i].setAttribute("id", "subpoint" + i);
                tocHTML += "<li><a href='#subpoint" + i + "'>" + gethead + "</a></li>";
            }
        }

        if (currentH2 !== null) {
            tocHTML += "</ul>"; // 마지막 h2의 하위 목차 종료
        }

var avsTOCObj=document.getElementById("avsTOC");
if(avsTOCObj!==null) {
	avsTOCObj.innerHTML = tocHTML;
}
    }

    function avsToggle() {
        var avs = document.getElementById('avsTOC');
        if (avs.style.display === 'none') {
            avs.style.display = 'block';
        } else {
            avs.style.display = 'none';
        }
    }

    // TOC 초기화
    window.onload = avsTOC;
    //]]>

</script>

2단계: CSS로 목차 디자인 적용

Ctrl+F로 ]]></b:skin>을 검색해, 그 바로 위에 아래 CSS 코드를 붙여넣습니다. 저는 기본 디자인을 사용했지만, 색상이나 여백 등은 취향에 맞게 수정하셔도 좋아요.

/* 자동 목차 css */
.avsTOC{
border: 1px solid rgba(133 , 133, 133, 0.33);
font-weight:500;
border-radius:0.55rem;
line-height:0.8rem;
margin:15px auto;
margin-top:0px;
padding:10px 30px 25px 10px;
display: inline-block;
width: auto;
min-width: 200px;
max-width: 600px;
transition: box-shadow 0.25s linear;
box-shadow: 0px 0px 3px rgba(0, 0, 2, 0.1);
    &:hover {
        box-shadow: 0px 1px 6px rgba(0, 0, 4, 0.5);
    }
}
.avsTOC li:first-child {
    padding-top: 20px;
}
.avsTOC ul li:first-child {
padding-top:17.5px;
}

.avsTOC ol,.avsTOC ul {margin:0;padding:0;}
.avsTOC ul {list-style:none;}
.avsTOC ol li,.avsTOC ul li {
padding:15px 0 0;
margin:0 0 0 30px;
font-size:0.9rem;
}


.avsTOC ul li {
	font-size:0.8rem;
    margin: 0 0 0 13px;
}

.avsTOC ul li:last-child {
  padding:15px 0 7.5px;
}

.avsTOC a{text-decoration:none;}
.avsTOC a:hover{
text-decoration:underline; 
font-weight:600;
}

.avsTOC button{

font-size:0.9rem;
background-color:#fff;
position:relative;
outline:none;cursor:pointer; border:none;
padding:0 0 0 8px;

font-weight:600;

3단계: 실제 목차 사용하기

실제로 목차를 사용하는 방법은 두 가지가 있습니다. 먼저 매번 글을 쓸 때마다 포스팅에 목차 자동 생성용 코드를 추가하는 법이 있는데요. 아래 3-1에서 설명합니다. 그리고 블로그 테마의 html을 수정해서 아예 정말 목차가 자동으로 생성되기 하는 방법입니다. 이 내용은 아래 3-2에서 설명할게요.

3-1: html에서 본문 태그 변경하고 포스트 작성 시 목차 코드 추가하기

본문 태그 변경

이제 <data:post.body/>를 <div id="post-toc"><data:post.body/></div>로 변경해줍니다. 이 과정이 중요한 이유는, 자동 목차 스크립트가 이 div(post-toc) 영역 안의 h2, h3 태그만 읽어들이기 때문이에요.

포스트 작성 시 목차 코드 추가

실제로 글을 쓸 때, 아래와 같은 방식으로 글을 작성해주시면 됩니다. 템플릿에 아래와 같이 등록해서 사용하면 편합니다.

<div class="avsTOC"><ol id="avsTOC"></ol></div>
[본문 작성]
<script>avsTOC();</script>

[본문 작성] 부분에 h2, h3 태그로 제목과 부제목을 나누어 글을 작성하면, 자동으로 목차가 생성되는 것을 확인할 수 있습니다.

3-2: html에 목차 코드 추가하여 진짜 자동 목차 설정하기

html에서 <data:post.body/>를 검색하여 아래의 내용으로 변경해주면 끝입니다. 포스팅 할 때마다 뭔가 설정해 줄 필요도 없습니다. 저는 이 방법을 사용하고 있어요! 다만 글 쓸 때마다 h2, h3 태그로 제목과 부제목을 나누어 작성해야만 목차가 작성되니 이 점만 유의하면 되겠습니다!

<div class='avsTOC'><ol id='avsTOC'/></div><div id='post-toc'><data:post.body/></div>
<script>avsTOC();</script>

직접 사용해본 후기와 팁

목차가 자동으로 생성되니, 글이 길어져도 방문자들이 원하는 소제목으로 바로 이동할 수 있어 편리합니다.
SEO 측면에서도 h2, h3 태그를 적극적으로 활용하게 되어 검색 노출에도 도움이 됩니다.
간혹 목차가 보이지 않는 경우, div id나 스크립트 위치를 다시 한 번 확인해보세요.
아예 html에 코드를 넣는 방법을 추천합니다. 포스팅 할 때 매번 목차 생성 코드를 넣는 것도 번거롭고, 잘못 넣어서 목차가 생성이 안되는 경우도 있으니까요.

마치며

구글 블로그 스팟에서 자동 목차를 구현하는 방법은 생각보다 어렵지 않습니다. 저도 충분히 따라할 수 있었고, 적용 후 블로그가 좀 더 깔끔해진 것 같아요! 위 글을 참고하셔서 차근차근 따라해보시길 추천드립니다!

워킹맘 개발자의 컨닝페이퍼

이 블로그 검색