반응형
티스토리 블로그 HTML 편집 기능 완전 정복 가이드
핵심 요약: HTML 편집 모드는 글 구조·가독성·접근성·SEO의 품질을 좌우합니다. 기본 태그를 올바로 쓰고, 이미지 ALT·목록·내부링크·코드 블록·메타 구성을 갖추면 심사 인상과 사용자 만족도가 함께 올라갑니다.
1. HTML 편집 모드란?
티스토리 글쓰기 화면에는 기본 모드와 HTML 편집 모드가 있습니다. HTML 편집 모드는 글의 구조·서식·이미지·스타일을 코드로 직접 제어할 수 있는 고급 기능입니다. 이를 활용하면 레이아웃을 세밀하게 조정하고, 구조화 데이터·메타·OG 태그 등 검색 친화 구성을 명확히 관리할 수 있습니다.
2. HTML 문서의 기본 뼈대 이해
HTML 문서는 <html> 안에 <head>와 <body>가 위치합니다. <head>에는 문서 메타 정보가, <body>에는 화면에 보이는 실제 콘텐츠가 들어갑니다.
| 영역 | 주요 태그 | 목적 |
|---|---|---|
| head | <title>, <meta>, OG/Twitter |
검색·미리보기·SNS 공유 정보 |
| body | <h1~h6>, <p>, <ul/ol>, <figure> |
사용자가 읽는 본문과 구조 |
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>페이지 제목</title>
<meta name="description" content="120~150자 요약" />
</head>
<body>
<h1>문서의 유일한 최상위 제목(H1)</h1>
<h2>소제목(H2)</h2>
<p>본문 단락</p>
</body>
</html>
3. HTML 편집기를 활용한 실전 예시
3-1) 구조화된 제목
<h2>소제목</h2>
<h3>세부 소제목</h3>
<p>해당 단락의 본문 내용</p>3-2) 목록 정리
<ul>
<li>항목 1</li>
<li>항목 2</li>
</ul>3-3) 이미지 삽입(접근성·성능 포함)
<figure>
<img src="이미지주소.webp" alt="이미지 설명"
width="1200" height="675" loading="lazy" />
<figcaption>이미지 캡션(선택)</figcaption>
</figure>3-4) 내부 링크 삽입
<p>관련 글: <a href="/entry/슬러그" title="관련 글 보기">카테고리 구조 재정비 가이드</a></p>팁: 이미지에는
alt·width·height·loading을 지정해 접근성과 코어 웹 바이탈을 함께 개선하세요.4. HTML 편집기를 사용해야 하는 이유
- 전문성 강화: 글 구조와 의미론을 스스로 통제
- SEO 최적화: 제목/요약/헤딩/링크/이미지 ALT의 정밀 제어
- 가독성·체류시간 개선: 목록·표·캡션으로 읽기 흐름 최적화
- 유연한 확장: 코드 블록, 경고/팁 상자, 시맨틱 마크업
5. 주의할 점
- 태그의 열고/닫기를 반드시 맞춘다(검사기/미리보기 활용).
- 모바일 기준 여백·폰트·표/이미지 폭을 확인한다.
- 중복 헤딩(H1 다중 사용)·의미 없는 키워드 반복을 피한다.
주의: 레이아웃을 위해
<br>를 남발하거나 헤딩을 단순 스타일 용도로 사용하면 구조 품질이 떨어집니다.6. 발행 전 체크리스트
- H1은 1개, H2→H3로 단계적 계층 유지
- 메타 설명 120~150자, 중복 키워드 과다 삽입 금지
- 이미지에
alt·width·height·loading=\"lazy\"지정 - 카테고리 내 내부 링크 2개 이상 연결
- 모바일 미리보기로 폰트·여백·표시 오류 확인
오늘부터 바로 할 수 있는 실행 요약
- 글쓰기 → HTML 모드로 전환해 H2/H3 구조부터 적용
- 이미지에 ALT·크기·지연 로딩 지정
- 본문에 목록·표·캡션을 활용해 가독성 강화
- 관련 글 내부 링크 1~2개 추가
처음이신가요? 이 글은 시리즈의 일부예요. 먼저 블로그 소개와 읽는 순서를 살펴보면 이해가 더 쉬워요.
→ 상단 공지 안내 공지에는 카테고리 구조 · 아카이브 가독성 · HTML 편집 가이드의 빠른 링크가 있어요.
→ 상단 공지 안내 공지에는 카테고리 구조 · 아카이브 가독성 · HTML 편집 가이드의 빠른 링크가 있어요.
반응형
'티스토리 활용법' 카테고리의 다른 글
| 글 목록(아카이브) 최적화｜목록형/썸네일형 가독성 체크리스트 (0) | 2025.11.11 |
|---|---|
| 티스토리 카테고리 구조 다시 짜기｜3~5개 핵심 주제로 탐색성 높이기 (0) | 2025.11.11 |
| 티스토리 메인 화면 꾸미기｜심플한 첫 인상으로 체류 시간 늘리는 법 (0) | 2025.11.10 |
| 티스토리 애드센스 승인 핵심 전략｜콘텐츠 구조부터 재심사 요청까지 (0) | 2025.11.09 |
| 티스토리 시작 가이드｜첫 설정부터 글쓰기까지 (0) | 2025.11.09 |