워드프레스 목차 플러그인은 긴 글 구조를 정리할 때 많이 사용하는 기능입니다. 특히 게시물이 길어질수록 원하는 위치를 바로 이동하지 못해 이탈이 발생하는 경우가 많고, 모바일에서는 스크롤 이동 자체가 부담이 되는 상황도 자주 생깁니다.
처음에는 단순히 글 목록 정도로 생각하기 쉽지만 실제로는 내부 구조 정리와 사용자 이동 흐름에 영향을 주는 경우가 많습니다. 특히 Rank Math 같은 SEO 플러그인을 사용하면 목차 사용 여부가 체크 항목으로 표시되는 경우도 있습니다.
문제는 설정을 잘못하면 애드센스 코드가 목차에 들어가거나, 이미지까지 제목으로 인식되는 상황이 생길 수 있다는 점입니다. 특히 자동 광고를 사용하는 사이트에서는 이런 문제가 생각보다 자주 발생합니다.
이번 글에서는 Easy Table of Contents 플러그인을 기준으로 목차 설정 과정과 애드센스 코드가 목차에 표시되는 문제를 해결하는 흐름까지 이미지 순서대로 정리해보겠습니다.
목차
목차 플러그인을 사용하는 이유
워드프레스 목차 플러그인은 단순히 이동 기능만 추가하는 것이 아닙니다. 긴 글 구조를 빠르게 보여주기 때문에 사용자가 원하는 내용을 먼저 확인하기 쉬워집니다.
특히 아래 같은 상황에서 목차 사용 빈도가 높아지는 편입니다.
- 글 길이가 긴 사이트
- 튜토리얼 게시물이 많은 사이트
- 소제목 구조가 많은 사이트
- 워드프레스 설정 글이 많은 사이트
- 지도·서버·SEO 글처럼 정보량이 많은 경우
반대로 소제목 구조가 없는 글에서는 목차가 제대로 생성되지 않을 수도 있습니다.
Easy Table of Contents 플러그인 설치
워드프레스 관리자 화면에서 플러그인 추가 메뉴로 이동한 뒤 “Easy Table of Contents”를 검색하면 설치 화면이 표시됩니다. 이 단계에서 중요한 부분은 단순히 설치 버튼만 누르는 것이 아닙니다.
최근 업데이트 날짜와 워드프레스 버전 호환 여부를 같이 확인하는 편이 좋습니다. 업데이트가 오래 멈춘 플러그인은 충돌이나 속도 문제로 이어지는 경우가 있기 때문입니다.
현재 화면처럼 활성 설치 수가 많은 플러그인은 비교적 안정적으로 유지되는 경우가 많습니다. 특히 목차 플러그인은 글 전체 구조를 분석하기 때문에 오래 업데이트되지 않는 플러그인은 예기치 않은 오류를 만들 가능성도 있습니다.
목차 기본 모습과 동작 확인
플러그인을 활성화하면 게시물 상단에 자동으로 목차가 생성됩니다. 현재 화면처럼 소제목 구조를 기준으로 목록이 만들어지는 방식입니다. 긴 글에서는 이런 구조가 없으면 사용자가 원하는 내용을 찾기 위해 계속 스크롤해야 하는 상황이 생길 수 있습니다.
특히 모바일 환경에서는 이런 차이가 더 크게 느껴지는 경우가 많습니다. 목차는 단순한 링크 모음이 아니라 현재 글 구조를 먼저 보여주는 역할도 합니다. 사용자는 목차를 보고 어떤 내용이 들어 있는지 빠르게 확인한 뒤 원하는 항목으로 바로 이동하게 됩니다.
목차 활성화 설정 정리
목차 플러그인을 설치한 뒤 가장 먼저 해야 하는 작업 중 하나가 활성화 유형 선택입니다. 현재 화면에서는 “글(Post)” 유형만 활성화된 상태입니다. 페이지까지 체크하게 되면 고정 페이지에도 자동으로 목차가 생성됩니다.
하지만 랜딩 페이지나 일반 소개 페이지까지 목차가 표시되면 오히려 화면 흐름이 어색해질 수 있기 때문에 필요한 유형만 선택하는 편이 안정적입니다. 자동 삽입 기능도 중요합니다.
자동 삽입을 사용하면 새 글을 작성할 때마다 직접 목차 코드를 넣지 않아도 되기 때문에 게시물이 많은 사이트에서 작업 흐름이 훨씬 단순해지는 경우가 많습니다.
목차 위치와 표시 조건 설정
목차 위치 설정에서는 목차가 어디에 표시될지 선택하게 됩니다. 기본값은 첫 번째 제목 전으로 되어 있지만 제목 아래나 상단, 하단 형태로도 변경할 수 있습니다. 특히 “언제 보여” 설정은 생각보다 중요한 편입니다. 제목 수가 적은 글까지 강제로 목차를 표시하면 화면이 오히려 복잡해질 수 있기 때문입니다.
예를 들어 H2 제목이 2개 이상일 때만 표시되도록 설정하면 짧은 글에서는 목차가 나오지 않기 때문에 글 흐름이 훨씬 자연스러워지는 경우가 많습니다.
외관 설정과 목차 디자인 변경
외관 설정에서는 목차 폭, 제목 크기, 글꼴, 색상 같은 디자인 요소를 조정할 수 있습니다. 특히 기본 설정 상태에서는 테마와 어울리지 않는 경우가 있는데 폭이나 글꼴 크기를 조정하면 화면 균형이 훨씬 자연스러워지는 경우가 많습니다.
현재 화면처럼 폭을 퍼센트 기준으로 설정하면 모바일 화면에서도 크기가 자연스럽게 줄어드는 편입니다. 반대로 고정 픽셀 크기로만 설정하면 작은 화면에서 목차 영역이 지나치게 커질 수도 있습니다.
CSS 제거와 속도 관련 설정
목차 플러그인 설정 중에는 핵심 CSS 스타일을 로드하지 않도록 설정하는 옵션도 있습니다. 사이트 속도를 최대한 단순하게 유지하려는 경우에는 이런 옵션을 사용하는 경우가 있습니다. 다만 CSS를 제거하면 기본 목차 디자인이 깨질 수도 있기 때문에 현재 사용 중인 테마와 함께 확인하는 편이 좋습니다.
특히 여러 플러그인이 동시에 CSS를 불러오는 사이트에서는 작은 스타일 파일도 누적되면 로딩 흐름에 영향을 줄 수 있습니다. 그래서 일부 사용자는 기본 CSS를 비활성화한 뒤 직접 스타일을 넣는 방식으로 정리하기도 합니다.
애드센스 코드가 목차에 들어가는 문제
목차 플러그인을 사용하다 보면 애드센스 코드가 목차 안에 들어가는 문제가 발생하는 경우가 있습니다. 현재 화면처럼 광고 코드 일부가 제목처럼 인식되는 상황입니다.
처음에는 플러그인 오류처럼 보이지만 실제 원인은 글 내부 HTML 구조인 경우가 많습니다. 특히 광고 코드 근처에 제목 태그(H태그)가 잘못 들어간 상태라면 목차 플러그인이 이를 제목으로 인식하게 됩니다.
이 문제를 그대로 두면 목차 구조가 깨질 뿐 아니라 사용자가 광고 코드를 직접 보게 되는 상황도 생길 수 있습니다.
제목 태그 제거로 문제 해결하기
애드센스 코드가 목차에 들어가는 문제는 텍스트 모드에서 제목 태그를 제거하면 해결되는 경우가 많습니다. 현재 화면처럼 이미지나 광고 코드 주변에 H4 같은 제목 태그가 남아 있으면 목차 플러그인이 이를 실제 제목으로 인식하게 됩니다.
그래서 해결 방법은 비주얼 모드가 아니라 텍스트 모드에서 불필요한 제목 태그를 직접 제거하는 방식입니다. 제목 구조를 정리한 뒤 저장하면 목차 안에 광고 코드가 표시되는 문제가 사라지는 경우가 많습니다.
목차 플러그인 적용 후 변화
목차 플러그인을 적용하면 긴 글에서 원하는 항목으로 바로 이동하기 쉬워집니다. 특히 서버 설정이나 워드프레스 튜토리얼처럼 내용이 긴 게시물에서는 체감 차이가 크게 느껴지는 경우가 많습니다.
또한 소제목 구조가 정리되기 시작하면 글 자체 흐름도 이전보다 읽기 쉬워지는 경우가 많습니다. 반대로 제목 태그를 무분별하게 사용하면 목차 구조가 깨질 수 있기 때문에 H태그 정리도 같이 진행하는 편이 중요합니다.
마무리
워드프레스 목차 플러그인은 단순히 목록을 만드는 기능에 가까운 것이 아닙니다. 긴 글 구조를 정리하고 원하는 위치로 바로 이동하게 만드는 역할이 커서 정보형 사이트에서 자주 사용되는 편입니다.
특히 애드센스 코드가 목차에 표시되는 문제는 플러그인 자체보다 제목 태그 구조 때문에 발생하는 경우가 많기 때문에 HTML 구조를 함께 확인하는 편이 중요합니다.
▶ 워드프레스 이미지 확대 설정 방법과 닫기(X) 표시 플러그인 정리
