서론: 왜 시맨틱 구조인가
티스토리 글의 가독성과 검색 노출을 동시에 올리려면 HTML5 시맨틱 요소로 문서의 역할을 명확히 해야 합니다. <header>–<nav>–<main>–<article>–<section>–<aside>–<footer> 흐름을 지키면 크롤러가 문맥을 바르게 해석하고 보조공학 사용자 역시 더 쉽게 탐색합니다. 또한 대표 썸네일과 본문 이미지 슬롯, 표준 OG 메타를 준비하면 SNS 미리보기와 애드센스 레이아웃 안정성(CLS)까지 챙길 수 있습니다.
구조 설계 핵심
- 페이지에는 <main> 한 개만 사용하고, 글 단위는
<article>로 감쌉니다. - 소주제는
<section>으로, 보조 정보는<aside>로 분리합니다. - 이미지는 의미 기반
alt를 쓰고, 설명이 필요하면<figure>/<figcaption>을 사용합니다. - 시간 정보는
<time datetime="YYYY-MM-DD">로 표기해 검색엔진이 이해하도록 합니다. - 광고 블록은 콘텐츠와 상하 16~24px 여백 +
min-height로 CLS를 방지합니다.
Html Base Template (with Image Slots)
아래 템플릿은 대표 썸네일과 본문 이미지 1·2·3을 슬롯으로 마련했습니다. URL만 교체해 바로 배포하세요.
<!-- 대표 썸네일(OG) -->
<meta property="og:image" content="https://your.cdn/cover-tistory-html5.webp" />
<!-- 본문 이미지 슬롯 1 -->
<figure>
<img src="https://your.cdn/body-1.webp" width="1200" height="675" loading="lazy"
alt="시맨틱 구조 다이어그램">
<figcaption>문서 흐름을 명확히.</figcaption>
</figure>
<!-- 본문 이미지 슬롯 2 -->
<figure>
<img src="https://your.cdn/body-2.webp" width="1200" height="675" loading="lazy"
alt="figure와 figcaption을 사용한 이미지 설명 예시">
<figcaption>이미지엔 의미 있는 ALT와 캡션.</figcaption>
</figure>
<!-- 본문 이미지 슬롯 3 -->
<figure>
<img src="https://your.cdn/body-3.webp" width="1200" height="675" loading="lazy"
alt="광고 블록과 본문 사이 여백으로 CLS를 방지하는 레이아웃">
<figcaption>광고와 본문 사이 충분한 여백.</figcaption>
</figure>
<!-- 광고 자리 예시 -->
<aside class="ad" aria-label="광고 영역">애드센스 자리(샘플)</aside>
팁: 한 문서에 H1은 1개만, 섹션 제목은 H2→H3 순으로 논리적 계층을 유지하세요.
운영 팁
- 내부 링크를 목차↔결론에 배치해 회전율을 높이세요.
- 스키마(Article/BlogPosting)와 GA4 스크롤 이벤트(예: 90%)로 품질 지표를 추적하세요.
- 이미지는 WebP, 파일명에 핵심 키워드 포함,
loading="lazy"권장.
배포 전 체크리스트
- ·수정일 메타/스키마가 있는가?
- 모바일(375px)·데스크톱(1280px) 모두 줄바꿈/여백이 자연스러운가?
- 광고 영역에
min-height와 충분한 마진이 설정됐는가? - 대표 썸네일 1200×630, 본문 1200×675(WebP) 규격을 지켰는가?
결론
HTML5 시맨틱 구조 + 표준 이미지 슬롯만 갖춰도 읽기 쉬운 정보 설계, 안정적인 광고 레이아웃, 깔끔한 SNS 미리보기를 동시에 얻을 수 있습니다. 본 템플릿을 기본값으로 저장해 두고 글마다 제목·설명·이미지 URL·alt만 빠르게 교체해 운영 효율을 높여보세요.