4편 : 티스토리에서 h코드, 메타디스크립션, alt 태그를 제대로 쓰는 법

티스토리에서 h코드, 메타디스크립션, alt 태그를 올바르게 설정하는 방법과 기본모드·HTML 모드 활용법을 쉽게 안내한다.

티스토리에서 h코드, 메타디스크립션, alt 태그는 어떻게 써야 할까?

티스토리에는 글을 작성할 수 있는 세 가지 편집 모드가 있다.

• 기본모드: 가장 많이 사용하는 일반 글쓰기 화면이다. 제목, 정렬, 글머리 등을 마우스로 지정할 수 있다.
• 마크다운(Markdown): ## 소제목처럼 기호를 이용해 구조를 간단히 입력하는 방식. 개발자나 텍스트 중심 사용자에게 적합하다.
• HTML 모드: 태그를 직접 입력하거나 구조를 세밀하게 점검할 수 있는 편집기. SEO 태그 확인, 외부 스크립트 삽입에 유용하다.

이 글에서는 티스토리 사용자라면 반드시 알아야 할 h코드, 메타디스크립션, alt 태그의 실제 역할과 사용법, 그리고 각 편집기 모드의 차이와 HTML 모드를 언제 활용해야 하는지를 정리한다.

• 애드센스를 준비하며 많은 블로거들이 h코드(h1, h2), 메타디스크립션, alt 태그 같은 검색 최적화 요소가 중요하다는 말을 접하게 된다.  나역시 처음에는 h 코드가 익숙하지 않아 html 모드에 사용할 코드를 GPT에게 요청해 붙여 넣었지만, 티스토리의 내부 구조를 잘 이해하지 못한 채 삽입하여 AI 생성 문서 특유의 코드 흔적이 남게 되었다. 그 결과 색인 누락이나 구조 혼란을 일으킨 것은 아닐까 하는 의문도 들었다.

h코드란 무엇인가?

h코드는 HTML에서 제목(heading)의 위계를 나타내는 태그이다. 크기에 따라 다음과 같이 구분된다:

• <h1>: 페이지의 가장 큰 제목. 한 페이지에 1회만 사용하는 것이 원칙이다.
• <h2>~<h6>: 그 이하의 소제목들. 문서의 구조와 단락을 구분하는 데 사용된다.

검색엔진은 이 h코드를 통해 글의 전체 흐름과 중요도를 파악한다.
예를 들어 구글은 <h1>을 가장 중요한 주제로 인식하고, <h2>, <h3>를 통해 글의 하위 구조를 분석해 콘텐츠 품질과 주제 집중도를 평가한다. 따라서 h코드를 잘 쓰는 것은 검색 최적화(SEO)에도 도움이 된다.

 

기본모드에서 h코드는 어떻게 적용될까?

티스토리의 기본 글쓰기 모드에서는 직접 태그를 입력하지 않아도 된다.
에디터 상단의 ‘제목 1’, ‘제목 2’ 버튼을 이용하면 자동으로 h코드가 들어간다:

• ‘제목 1’ → <h2>
• ‘제목 2’ → <h3>
• ‘본문’ → 일반 텍스트 (<p>)

즉, 별도로 HTML 모드에서 <h2> 태그를 삽입하지 않아도, 기본모드에서 제목 스타일을 지정하는 것만으로도 SEO 구조는 완성된다.

 

메타디스크립션이란 무엇이고, 어떻게 지정되나?

메타디스크립션(meta description)은 검색 결과에서 페이지를 소개하는 짧은 문장이다.
HTML에서는 다음과 같이 입력한다:

html

복사편집

<meta name="description" content="이 글은 티스토리 블로그에서 h코드와 메타디스크립션을 효과적으로 설정하는 방법을 안내합니다.">

그러나 티스토리에서는 이 작업을 직접 할 필요가 없다.

티스토리는 메타디스크립션을 다음과 같이 자동으로 추출한다:

1. 본문의 첫 문단에 텍스트가 있을 경우 → 그 내용을 메타디스크립션으로 사용
2. 이미지가 먼저 등장할 경우 → 이미지의 alt 속성이나 글자 정보가 없는 경우엔 텍스트 대신 이미지만 뜨기도 한다
3. 단문이나 중복 문장일 경우 → 검색 결과에서 빈약하게 표현될 수 있음

따라서 티스토리에서는 HTML로 메타태그를 넣기보다는, 본문 시작 부분에 핵심 내용을 요약한 문장을 자연스럽게 배치하는 것이 가장 좋다.

예:

이 글은 티스토리 블로그에서 h코드, 메타디스크립션, alt 태그를 올바르게 사용하는 방법을 안내합니다.

이렇게 써주면 구글이 해당 문장을 메타디스크립션으로 활용할 가능성이 높아진다.

티스토리에서 alt 태그는 어떻게 입력하나?

alt는 이미지의 대체 텍스트(Alternative Text)를 의미한다. 시각장애인을 위한 스크린 리더 기능이나, 이미지가 로딩되지 않을 때를 대비한 설명 문구이며, SEO 측면에서도 구글이 이미지를 이해하는 단서로 사용된다.

티스토리에서는 기본모드에서 alt 텍스트를 쉽게 입력할 수 있는 기능을 제공한다. 

✔ 방법 1: 기본모드에서 '대체 텍스트' 직접 입력

1. 글쓰기 화면에서 이미지를 삽입한다.
2. 이미지 위에 마우스를 올리면 작은 툴바(연필 모양 아이콘)가 나타난다.
3. 연필 아이콘을 클릭하면 '이미지 설명' 입력란이 뜬다.
4. 이곳에 내용을 입력하면 해당 텍스트가 자동으로 alt 속성으로 적용된다.

예: “1세 발달 특성을 설명하는 다이어그램 예시”

이 방식은 HTML 코드를 다룰 필요 없이 alt 태그를 자연스럽게 추가할 수 있어 가장 권장되는 방법이다.

✔ 방법 2: HTML 모드에서 직접 alt 속성 입력

만약 이미지가 이미 삽입되어 있고, alt 태그가 누락된 경우에는 HTML 모드에서 아래처럼 직접 삽입해도 된다:

html

복사편집

<img src="example.jpg" alt="티스토리 메타디스크립션 설정 방법 예시">

특히 본문 상단에 배치된 대표 이미지의 alt 텍스트는, 메타디스크립션에 영향을 줄 수 있기 때문에 더욱 신중하게 작성하는 것이 좋다.

HTML 모드는 언제 필요한가?

지금까지 설명했듯, 티스토리에서는 기본모드만으로도 대부분의 구조 설정이 가능하다. 하지만 다음과 같은 상황에서는 HTML 모드를 활용하는 것이 유익하다:

• 글의 h코드 구조가 어색해졌을 때 → <h2>가 반복되거나 누락되지 않았는지 확인
• 이미지에 alt 속성이 없는 경우 → 수동으로 alt 추가
• 메타디스크립션이 이상하게 추출될 때 → 첫 문장 위치 확인
• 애드센스나 외부 스크립트를 삽입해야 할 때 → 정확한 위치 지정

즉, HTML 모드는 기본 설정을 보완하고 확인하는 '점검용'으로 쓰는 것이 가장 안정적이다.

구조를 이해하면 글이 보인다

티스토리는 친숙한 편집 환경을 제공하지만, 내부적으로는 구글 검색엔진이 페이지를 분석할 수 있도록 정교한 구조를 갖추고 있다. 이를 잘 이해하면, 굳이 코드를 복잡하게 다루지 않아도 기본 기능만으로도 충분히 검색에 강한 콘텐츠를 만들 수 있다.

• h코드는 기본모드로도 적용되며, 본문은 <h2>부터 시작한다.
• 메타디스크립션은 첫 문장에 의미 있는 문장을 넣는 것으로 자동 추출된다.
• alt 태그는 HTML 모드에서 이미지 태그를 확인해 보완하면 된다.
• HTML 모드는 설정을 ‘작성’하는 것이 아니라 ‘확인’하고 ‘미세 조정’하는 데에 적합하다.

글에서 가장 중요한 건 물론 내용이다. 하지만 그 내용을 누군가에게 보여주기 위해서는, 검색에 잘 걸릴 수 있는 구조도 필요하다.

글을 잘 쓰는 것과, 검색에 잘 노출되는 글을 쓰는 것은 서로 다르다.
이 두 가지의 차이를 만드는 핵심은, ‘구조를 어떻게 잡느냐’에 달려 있다.