워드프레스 간편한 목차 플러그인 - 목차 항목 앞에 둥근 원이 표시되는 문제

어제 워드프레스 수익형 블로그 세팅 작업을 맡아 진행했습니다. 처음부터 세팅하는 작업은 수월한 편이지만, 운영하고 있는 블로그에서 다시 테마와 플러그인을 설치하여 세팅하는 작업의 난이도는 복불복입니다. 어제 맡은 사이트는 필요한 테마와 차일드 테마를 설치하고 플러그인도 설치한 후에 세팅을 해도 원하는 레이아웃으로 표시가 안 되어 원인을 찾느라 시간이 걸렸습니다. 그리고 간편한 목차 플러그인이 설치되어 있었는데, 이상하게 목차 항목 앞에 둥근 원이 표시되어 있었습니다.

세팅 작업과 무관하게 원래부터 목차 상자 내의 목차 항목에 원이 표시되는 문제가 발생했기 때문에 그냥 넘어갈 수도 있었지만, 왜 이런 현상이 발생하는지 원인을 찾아서 해결하고 싶었습니다. 간단히는 CSS로 동그라미 문자를 숨기는 것이 가능했습니다. 원인은 목차 설정에서 불필요한 옵션이 선택되어서 발생하는 문제였습니다.😥

워드프레스 목차 플러그인

목차(TOC)는 검색엔진에 직접적인 순위 보너스를 주기보다, 글 구조를 더 명확하게 보여줘서 간접적으로 SEO에 도움이 됩니다. 특히 H2·H3 같은 헤딩을 기반으로 목차를 만들면 검색엔진이 콘텐츠의 주제와 섹션 구성을 이해하기 쉬워지고, 독자는 원하는 부분으로 바로 이동할 수 있어 체류 시간과 클릭 편의성이 좋아집니다.

티스토리나 블로그스팟은 목차를 표시하려면 스킨/테마 편집을 통해 코드를 추가해야 하지만, 워드프레스는 무료 또는 유료 목차 플러그인을 사용하여 쉽게 목차를 표시할 수 있습니다.

가장 인기를 끄는 무료 목차 플러그인으로 '간편한 목차'(Easy Table of Contents, 구명칭 '쉬운 목차')가 있습니다.

간편한 목차는 현재 60만 개가 넘는 사이트에 설치되어 실제로 사용되고 있습니다. 이 플러그인은 디자인까지 상세하게 지정할 수 있는 상세한 옵션을 제공하여 무료지만 유료 플러그인 못지않은 기능을 제공합니다.😊

저는 메인 워드프레스 블로그에 Tocer(이전 명칭 "Fixed TOC")라는 유료 목차 플러그인을 한동안 사용했습니다. 기능 자체는 무료 플러그인보다 좋은 편이지만, 무료 목차 플러그인이든, 유료 플러그인이든 사이트 속도에 약간의 영향을 미칠 수 있습니다.

지금은 자바스크립트를 이용하여 자체 코딩으로 목차를 만들어 PC 화면에서는 사이드바에 목차를 표시하고 있습니다. 위키피디아가 이와 비슷한 목차를 사용하지만, 위키 목차에 비해 기능은 거의 없는 편입니다.

간편한 목차 플러그인 - 목차 항목 앞에 둥근 원이 표시되는 문제

어제는 워드프레스 블로그에 수익형 블로그 레이아웃을 적용하는 설정 작업을 맡았습니다. 세팅을 모두 마치고 사이트를 체크해 보니 목차 상자 내의 목차 항목에 그림과 같이 작은 둥근 원이 표시되고 있었습니다.

이런 현상을 처음 접해서 왜 이런 현상이 발생하는지 궁금해졌습니다.

살펴보니 '간편한 목차' 플러그인이 설치되어 있었는데, 설정 » 목차 페이지에서 카운터 옵션에 대하여 '원형'이 설정되어 나타나는 문제였습니다.

카운터에 대하여 '없음'으로 설정하면 목차 항목 앞에 둥근 원이 표시되는 현상이 사라집니다.

다른 방법으로, 그리 권장하지는 않지만, 어떤 이유로 설정을 변경하지 못하는 경우 다음과 같은 CSS 코드를 워드프레스 관리자 페이지 » 모양 » 사용자 정의 » 추가 CSS나 차일드 테마의 스타일시트 파일(style.css)에 추가할 수 있습니다.

.ez-toc-counter nav ul li a::before {
	content: none !important;
}

마치며

이상으로 간편한 목차 플러그인을 사용할 때 목차 상자 내의 목차 항목 앞부분에 작은 원형 기호가 표시되는 경우 해결 방법에 대하여 살펴보았습니다.

이 티스토리 블로그에 자동 목차를 직접 코드로 만들어 표시했습니다만, 티스토리에서 목차가 표시된 블로그에 대하여 복불복 제재를 가하고 있습니다.

티스토리에서 목차 기능을 위책 위반으로 제재하기 시작하네요

목차를 자동으로 표시하는 티스토리 블로그도 있는 것으로 봐서 누군가가 신고하거나 우연히 티스토리에 의해 발견되면 제재를 하는 것으로 생각됩니다.

안전하게 티스토리 블로그를 운영하려면 목차를 제거하는 것이 바람직할 것 같습니다. (티스토리는 제재가 심해지네요.😥)

참고

https://avada.tistory.com/3927

한 페이지에 H1 태그가 여러 개 있어도 괜찮을까? 구글의 입장과 SEO 실무 관점

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 vs. 카페24 비교 (Cloudways vs. Bluehost vs. Cafe24)