시맨틱 HTML로 완성하는 SEO와 AI 친화적 웹사이트
웹페이지를 만드는 기술은 빠르게 발전해 왔지만, 그 중심에는 변하지 않는 기반 언어 HTML이 있습니다. 특히 HTML 태그에 ‘의미’를 부여하는 시맨틱 HTML은 검색엔진이 페이지를 이해하고, AI가 콘텐츠를 정확하게 인식하도록 돕는 핵심 요소입니다.
이 글에서는 시맨틱 HTML이 SEO와 AI 노출에서 왜 필수인지, 그리고 실제 페이지에서 어떤 태그를 어떻게 활용해야 검색 가시성과 AI 이해도를 동시에 높일 수 있는지 구체적으로 살펴봅니다.
시맨틱 HTML이란?
간단히 시맨틱 HTML이 무엇인지부터 짚어보겠습니다. 웹을 구성하는 언어인 HTML은 텍스트를 둘러싸 구조를 부여하는 마크업입니다.
<p>태그로 감싼 내용은 문단(paragraph)임을 나타냅니다.<h1>태그로 감싼 문장은 페이지의 메인 제목임을 의미합니다.<ol>태그는 순서가 있는 목록을 나타냅니다.<img>태그는 웹페이지에 이미지를 불러올 것임을 나타냅니다.
예전에는 모든 웹페이지가 시맨틱 HTML로 작성됐습니다. 콘텐츠를 의미에 맞는 태그로 감싼 뒤, CSS로 시각적인 요소를 다듬는 방식이었습니다. 완벽하진 않았지만 잘 작동했는데요. 덕분에 페이지의 HTML 원본만 봐도 그 페이지가 어떤 내용을 어떻게 전달하려는지 알 수 있었습니다.
하지만 WYSIWYG 에디터와 이후 자바스크립트 프레임워크가 등장하면서 HTML의 역할은 밀려났습니다. <p>나 <table>을 쓰던 자리에, 이제는 무의미한 <div>와 <span> 태그가 줄줄이 이어지게 됐습니다.
그 결과 페이지 HTML만 봐서는 구조나 의미를 알기 어렵게 되었고, 브라우저에서 완전히 렌더링되어 화면에 표시되기 전까지는 페이지의 목적을 파악할 수 없게 됐습니다. 이는 사용자뿐 아니라, 사용자를 모방하려는 기계 시스템에게도 다르지 않습니다. 이 때문에 구글은 인덱싱 과정에서 페이지를 렌더링하는 과정을 거치게 되었습니다.
구글이 아티클을 순위에 올리기 전까지 렌더링할 시간이 충분치 않다는 사실은 이미 잘 알려져 있습니다. 아티클에 원본 HTML이 매우 중요한 이유가 여기에 있습니다. HTML 구조가 제대로 갖춰져 있으면, 구글은 본문을 손쉽게 추출해 해당 아티클이 구글 생태계 내 적절한 위치에 빠르게 노출될 수 있습니다.
바로 이 지점에서 시맨틱 HTML이 핵심 역할을 합니다. 따라서 타이틀을 반드시 <h1> 태그로 감싸고, 페이지에는 <h1>이 하나만 존재해야 합니다. <h1>은 페이지의 주요 제목을 나타내며, 시작을 알려주는 표지판 역할을 합니다. 이를 통해 구글이 본문을 쉽게 찾을 수 있습니다.
어떤 HTML 태그가 시맨틱 태그인가?
<h1> 제목 태그 외에도, 구글이 본문을 더 쉽게 추출하고 색인할 수 있도록 도와주는 시맨틱 HTML 요소는 많습니다. 다음과 같은 요소들을 활용해야 합니다.
- 문단(Paragraphs): 문단 구분에
<div>나<span>을 사용하지 마세요. HTML에는<p>라는 태그가 있습니다. 그대로 활용하세요. - 소제목(Subheadings):
<h2>,<h3>,<h4>같은 소제목 태그로 페이지에 구조를 부여하세요. 아티클에서는 각 섹션의 내용을 미리 알릴 때 소제목을 사용합니다. 추천 아티클 목록 처럼 구조적 요소 위에도 소제목을 달아주는 것이 좋습니다. - 이미지(Images): 구글이 인식할 수 있도록 이미지를 표시할 때 반드시
<img>태그를 사용하세요. 구글에서도 이를 권장하고 있습니다. - 클릭 가능한 링크(Clickable Links): 다른 페이지(내부·외부)로 연결할 때는
<a>태그와href속성에 대상 URL을 넣어야 합니다. 구글이 문제없이 추적할 수 있는 유일한 링크 방식입니다. - 관계형 링크(Relational Links):
<link>태그를 사용하면 현재 페이지와 다른 페이지 간의 관계를 정의할 수 있습니다. 예를 들어, 캐노니컬 페이지, 스타일시트, 현재 페이지의 다른 언어 버전 등을 지정할 수 있습니다. - 목록(Lists): 불릿 목록에는
<ul>, 번호 매긴 목록에는<ol>을 사용하세요. CSS로 스타일은 자유롭게 바꿀 수 있지만, 기본 구조는 반드시 목록 태그를 사용해야 합니다. - 강조(Emphasis): 특정 단어나 구절을 강조하고 싶다면 시맨틱 HTML 태그를 쓰세요. 기울임은
<em>, 굵게는<strong>입니다.
위의 태그 중 <link>를 제외한 모든 태그는 웹페이지의 콘텐츠를 구조화하고 의미를 전달하는 용도입니다.
여기에 더해, 페이지의 코드 구조와 의미를 명확히 하는 HTML 태그들도 있습니다. 이러한 태그들은 구글이 페이지 안의 다양한 요소(예: 네비게이션, 사이드바 등)를 구분하고, 각각에 맞게 처리할 수 있게 해줍니다.
<head>와<body>:<head>에는 메타데이터를,<body>에는 실제 콘텐츠를 넣습니다. 모든 HTML 페이지는 이 두 부분으로 시작합니다.<header>: 로고, 내비게이션, 기타 상단 UI 요소를 감싸는 영역에 사용합니다.<nav>: 사이트의 주요 내비게이션을 감싸는 태그입니다. 메가 메뉴, 햄버거 메뉴, 상단 네비게이션 링크 등 어떤 형태든<nav>태그 안에 넣으세요.<section>: 페이지를 여러 섹션으로 나눌 때 사용합니다. 예를 들어 한 섹션은 아티클 본문, 다른 섹션은 댓글 영역이 될 수 있습니다.<article>: 페이지의 메인 아티클(제목 포함)이 시작되는 위치를 표시합니다.<aside>: 사이드바, 추천 아티클, 최신 아티클처럼 보조 콘텐츠 블록에 사용합니다.<footer>: 페이지 하단 영역을 표시합니다.
이러한 구조적 시맨틱 태그는 검색 엔진이 HTML 각 영역의 목적과 가치를 이해하는 데 도움을 줍니다. 결과적으로 구글이 콘텐츠를 더 빠르게 색인하고, 페이지 요소별로 적절하게 처리할 수 있도록 합니다.
AI에 어떻게 도움이 되나?
ChatGPT나 Perplexity 같은 LLM(대규모 언어 모델)이 웹을 크롤링해 학습 데이터를 수집하고, 필요한 경우 웹 콘텐츠를 불러와 사용자 질문에 답한다는 사실을 잘 알고 있습니다. 하지만 많은 분이 모르는 점이 있습니다. 대부분의 LLM은 웹페이지를 처리할 때 자바스크립트를 렌더링하지 않습니다.
구글은 예외입니다. 인덱싱 과정에서 페이지를 렌더링하기 위해 막대한 리소스를 투입해 왔고, 구글의 인덱스를 기반으로 한 유일한 LLM이 바로 구글 Gemini입니다. 따라서 완전히 렌더링된 웹페이지 콘텐츠를 활용할 수 있는 LLM은 현재로서는 Gemini뿐입니다.
즉, ChatGPT나 Perplexity에서 인용 출처로 노출될 가능성을 높이고 싶다면, 렌더링이 필요 없는 원본 HTML 상태에서 페이지 전체 콘텐츠가 제공되도록 구성해야 합니다. 시맨틱 HTML을 사용해 코드를 구조화하고 의미를 부여하면, LLM이 핵심 콘텐츠를 훨씬 쉽게 식별할 수 있습니다. ChatGPT 입장에서 수백 개, 수천 개의 중첩된 <div> 태그 속에서 메인 콘텐츠를 찾는 것보다, 몇십 개의 시맨틱 HTML 태그만 읽는 편이 훨씬 간단하기 때문입니다.
만약 ‘에이전틱 웹(agentic web)’이 실제로 구현된다면, 시맨틱 HTML은 성공의 핵심 요소가 될 가능성이 큽니다. <div>와 <span>처럼 의미 없는 태그만 쓰면 AI 에이전트가 수행해야 할 작업을 잘못 이해하기 쉽습니다.
반면 버튼, 링크, 폼 등에 시맨틱 HTML을 사용하면, AI 에이전트가 작업을 실패할 확률이 훨씬 낮아집니다. 제대로 된 HTML 태그에 담긴 의미가 AI 에이전트에게 어디로 가야 하는지, 무엇을 해야 하는지를 알려주기 때문입니다.
구조화된 데이터(Structured Data)는 어떨까?
일부에서는 구조화 데이터가 시맨틱 HTML을 대체했다고 생각합니다. 구조화 데이터를 사용하면, 페이지의 콘텐츠와 목적을 기계가 이해할 수 있도록 기계가 읽을 수 있는 형식으로 간단하게 전달할 수 있기 때문이죠. 이 말이 어느 정도 맞긴 하지만, 구조화 데이터는 애초에 시맨틱 HTML을 대체하기 위해 만들어진 것이 아닙니다. 구조화 데이터에는 시맨틱 HTML이 가진 장점이 없습니다.
예를 들어,
- 어떤 버튼이 ‘장바구니에 담기’ 기능을 하는지,
- 중요한 문단 앞에 어떤 소제목이 있는지,
- 독자가 더 많은 정보를 얻기 위해 클릭해야 하는 링크가 무엇인지,
이런 정보는 구조화 데이터만으로는 알 수 없습니다. 따라서 구조화 데이터는 페이지를 풍부하게 만들고 기계가 콘텐츠를 이해하도록 돕는 용도로 적극 활용하되, 시맨틱 HTML 역시 반드시 함께 사용해야 합니다. 두 가지를 병행하면 시맨틱 HTML과 구조화 데이터는 그야말로 강력한 조합이 됩니다.
