구글 블로그스팟(Blogger)은 자유도가 높고 구글 애드센스와 연동이 쉬워 많은 블로거들이 선택하고 있는 플랫폼입니다. 하지만 기본 템플릿은 SEO나 사용자 경험(UX) 측면에서 다소 부족한 부분이 있는 것도 사실입니다.
.png "블로그스팟 테마에 자동 목차")
이번 글에서는 구글 블로그스팟 테마에 자동 목차 기능과 함께, H2~H4 소제목 디자인을 시각적·구조적으로 개선하여 SEO 최적화에 도움을 줄 수 있는 방법을 소개합니다. 특히 구글 검색 엔진이 좋아하는 구조화된 콘텐츠 형태로 만들 수 있어 매우 유용합니다.
스타일 적용 방법
- 블로그스팟 관리자로 들어가 ‘테마’를 클릭합니다.
- ‘맞춤설정’ 옆의 ▼ 버튼을 눌러 ‘HTML 편집’에 들어갑니다.
- HTML 소스에서 Ctrl + F 키를 누른 후 ‘</style>,
</body>’ 을 검색합니다. - 찾은 태그 바로 위에 복사한 CSS 스타일 코드를 붙여넣습니다.
- 우측 상단에 있는 ‘저장’을 클릭하면 CSS 설정은 끝입니다.
자동 목차 기능 적용 (H2 기준)
구글 SEO는 본문 구조의 명확성을 중요하게 생각합니다. 따라서 자동 목차는 방문자 편의성을 높이는 동시에 검색엔진에 콘텐츠 구조를 잘 전달하는 도구입니다.
📌 스크립트 코드 (본문 글에 자동 삽입)
<script>
document.addEventListener("DOMContentLoaded", function () {
const tocTarget = document.createElement("div");
tocTarget.id = "auto-toc";
tocTarget.className = "toc-container";
tocTarget.innerHTML = `
<strong>📚 목차</strong>
<ol id="toc-list"></ol>
`;
const content = document.querySelector(".post-body");
if (content) content.insertBefore(tocTarget, content.firstChild);
const tocList = document.getElementById("toc-list");
const headers = document.querySelectorAll(".post-body h2");
headers.forEach((header, index) => {
const id = `toc-h2-${index}`;
header.setAttribute("id", id);
const li = document.createElement("li");
const a = document.createElement("a");
a.href = `#${id}`;
a.textContent = header.textContent;
li.appendChild(a);
tocList.appendChild(li);
});
});
</script>
👉 이 스크립트는 <b:skin>이 아닌 </body> 태그 바로 위에 넣습니다.
H2, H3, H4 제목 스타일 CSS
✅ H2 스타일 (중요 섹션 제목)
.post-body h2 {
font-size: 24px !important;
line-height: 1.5;
border-style: solid;
border-width: 0 0 3px 10px;
border-image: linear-gradient(to right, #FF4500, #FFB347) 1;
padding: 10px 15px;
margin: 35px 0;
width: 100%;
background: linear-gradient(to right, #fff5f0, #fff0e0);
color: #222;
font-weight: bold;
box-sizing: border-box;
border-radius: 4px;
box-shadow: 2px 2px 6px rgba(255, 69, 0, 0.2);
}
✅ H3 스타일 (서브 섹션)
.post-body h3 {
font-size: 22px !important;
line-height: 1.5;
font-weight: bold;
display: table;
border-left: 10px solid #00BFFF;
background: linear-gradient(to right, #FFA500, #FFD700);
padding: 7px 20px 7px 7px;
margin: 30px 0;
border-radius: 0 20px 20px 0;
color: #222;
}
✅ H4 스타일 (하위 제목)
.post-body h4 {
font-size: 20px !important;
line-height: 1.5;
font-weight: bold;
display: table;
background-color: #FFD700;
padding: 7px 15px;
margin: 30px 0;
border-radius: 20px;
color: #333;
}✅ 자동 목차 전용 CSS 스타일
/* 📚 자동 목차 디자인 - Blogger 테마 CSS 삽입용 */
.toc-container {
border: 2px solid #FF7F50; /* 선명한 주황 테두리 */
background: #fffaf0; /* 부드러운 배경 */
padding: 20px;
margin-bottom: 30px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0,0,0,0.05);
font-family: 'Noto Sans KR', sans-serif;
}
.toc-container strong {
font-size: 20px;
color: #333;
display: block;
margin-bottom: 10px;
font-weight: bold;
border-left: 5px solid #ff6347;
padding-left: 10px;
}
.toc-container ol {
list-style: decimal inside;
padding-left: 0;
margin: 0;
}
.toc-container li {
margin: 8px 0;
font-size: 16px;
color: #222;
line-height: 1.6;
}
.toc-container li a {
text-decoration: none;
color: #ff4500;
transition: color 0.2s;
}
.toc-container li a:hover {
color: #d32f2f;
text-decoration: underline;
}
🎨 이 모든 스타일은 Blogger 테마 XML 파일의 </style> CSS 영역 위에 삽입하세요.
리뷰를 마치며
위의 설정은 단순한 디자인 변경을 넘어 사용자 중심 UX 구성과 구글이 선호하는 구조화 콘텐츠 방식으로 블로그를 재정비하는 작업입니다.
자동 목차는 콘텐츠 탐색을 쉽게 만들고, H2~H4 스타일 개선은 명확한 정보 전달을 돕습니다.
특히 블로그스팟은 기본 기능이 심플하기 때문에, 이렇게 직접 커스터마이징을 통해 SEO 경쟁력을 확보하는 것이 매우 중요합니다.
꾸준히 콘텐츠 퀄리티를 높이면서 시각적 안정감까지 갖추면, 검색 노출 향상 및 애드센스 수익 증가에도 긍정적인 효과를 기대할 수 있습니다.
.png&description=구글 블로그스팟 테마에 자동 목차 & H2~H4 소제목 스타일 적용하는 법){kind=link}