티스토리 이동경로·카테고리 경로(Breadcrumb navigation) 적용

브레드크럼 : 이동경로·카테고리 경로

• 해당 적용 위치는 카테고리 리스트 페이지 내에서 적용할 수 있습니다.
• 카테고리 이동 경로와 카테고리 타이틀을 지정할 수 있습니다.
• 기본적으로 리스트 치환자를 활용하여 적용합니다.
• 로봇에게 사이트를 훨씬 구조적으로 인식하게 합니다.
• 방문자에게 쉽게 이전 카테고리로 이동할 수 있게 합니다.
• 카테고리 리스트와 게시글 본문에 적용할 수 있습니다.

Breadcrumb은 무엇인가?

빵 부스러기라는 뜻으로 사이트 이동경로를 보여줍니다. 각 카테고리 리스트 페이지 또는 게시글 본문에 적용함으로써 사이트가 훨씬 구조적으로 보일 수 있습니다. 이는 로봇도 마찬가지이므로, 수집로봇이 사이트를 방문했을 때, 사이트를 훨씬 더 잘 수집할 수 있고 구조적으로 높은 점수를 주기 때문에 사이트의 SEO 점수도 올라가는 효과를 볼 수 있습니다.

이와 같이 사이트를 검색하면 우측의 사이트 이동경로를 확인할 수 있습니다. 티스토리의 페이지 기능을 활용하여 제작하면 티스토리에서는 해당 페이지의 구조를 파악하여 수집합니다.

이것이 바로 Breadcrumb(브레드크럼)을 적용해야하는 이유입니다. 안타깝게도 티스토리에서는 플러그인이나 다른 기능으로도 이 기능을 제공하지 않습니다. SEO는 정말 중요한 요소인데 말입니다. 그래서 아래와 같은 방식으로 구현할 수 있습니다. 다만, 티스토리 스킨 구조에 따라 코드를 편집해야 할 수 있습니다.

적용방법

기본적으로 아래와 같은 방식으로 코드를 적용합니다.

<s_list>
    <div class="list_category">
        <script>
            (function () { // 카테고리 경로 만들기
                var str = "";
                if (str === "분류 전체보기") {
                    str = ' <span class="arrow">&gt;</span> 전체';
                } else {
                    str = str.split('/');
                    if (str.length >= 1) {
                        var str2 = "",
                            thisURL = "";
                        for (var c = 0; c < str.length; c++) {
                            thisURL = thisURL + "/" + str[c];
                            str2 = str2 + ' <span class="arrow">&gt;</span> ' + '<a href="/category' + thisURL + '">' + str[c] + '</a>';
                        }
                        str = str2;
                    }
                }
                document.write('<a href="/">Home</a>' + str);
            })();
        </script>
    </div>
    <div class="list_title">
        <span class="title">
            <script>
                (function () { // 리스트 타이틀 지정
                    var str = "",
                        hasChild = false;
                    if ($('#tt-body-search').length === 0) {
                        hasChild = str.match('\/');
                        if (hasChild) {
                            str = str.split('/');
                            document.write(str[str.length - 1]);
                        } else {
                            if (str === "분류 전체보기") {
                                str = "전체";
                            }
                            document.write(str);
                        }
                    } else {
                        document.write(str);
                    }
                })();
            </script>
        </span>
    </div>
</s_list>

적용된 예시

<카테고리 리스트의 경우>

카테고리 리스트 페이지 부분에서 위와 같이 사이트를 구조적으로 만들었습니다. 홈은 랜딩페이지로 이동하고 디자인은 현재 보여지고 있는 카테고리의 주소를 나타냅니다. 티스토리에서 제공되는 치환자인 티스토리 이동경로·카테고리 경로(Breadcrumb navigation) 적용를 활용하여 현재 페이지의 타이틀을 가져오고, <s_list>치환자를 활용하여 를 적용한 모습입니다.

리스트 그룹 치환자에서 은 카테고리의 이름, 검색어, 태그명을 표시해줍니다. 따라서, 치환자를 활용하기 위해서는 리스트그룹 치환자로 묶어줘야합니다.

티스토리 리스트 치환자(GitBook)에 관하여

스타일시트 적용(CSS)

스타일시트의 경우에는 스킨마다 어울리게 지정해주면 되는데, 일단 기본적으로 저 같은 경우에는 아래와 같이 적용했습니다.

카테고리 리스트에 적용된 스타일시트

/* 카테고리 이동경로 */
.list_title {
    letter-spacing: -1px;
    line-height: 1em;
    height: 1em;
    vertical-align: middle;
    font-size: 70px;
    font-weight: 700!important;
    padding: 0 0 0px;
    margin-top: -60px;
    display: block;
    text-align: center;
}

.list_category {
    display: block;
    color: #231815;
    font-size: 16px;
    letter-spacing: -.2px;
    top: 12px;
    position: relative;
    margin-bottom: 40px;
    text-align: center;
}

.list_category a {
    color: #231815;
}

본문에 적용된 스타일시트

/* 본문 카테고리 이동경로 */
.breadcrumb {
    font-size: .875rem;
    list-style: none;
    text-align: left;
    position: fixed;
    width: 230px;
    font-weight: 500;
    top: 125px;
    z-index: 9996;
    padding-right: 25px!important;
    left: 85px;
        color: #999;
}
.breadcrumb a {
        color: #999;
}
.breadcrumb a:hover {
        color: #666;
}
#breadcrumb_spy {
    position: relative;
    float: left;
}
@media screen and (max-width: 1600px) {
    .breadcrumb {display:none}
}

각 스킨마다 스타일시트를 수정해서 적용해줘야합니다.

참고사항

다른 방법으로도 치환자를 적용할 수 있지만, 제가 알고 있는 가장 쉬운 방법이 위의 방법입니다. 코드도 매우 쉽고 간결하죠. 게시글 본문에서는 리스트 타이틀은 제외하고 카테고리 이동경로 코드 부분만 적용해줘도 됩니다. 훨씬 사이트가 구조적이고 깔끔해집니다.