라이브러리 브랜드

2021. 6. 28. 07:02

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

공유하기

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

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

Breadcrumb은 무엇인가?

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

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

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

적용방법

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

<s_list>
    <div class="list_category">
        <script>
            (function () { // 카테고리 경로 만들기
                var str = "[##_list_conform_##]";
                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 = "[##_list_conform_##]",
                        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>

적용된 예시

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

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

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

티스토리 리스트 치환자(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}
}

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

참고사항

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