결론부터 말하겠습니다. AI 엔진은 웹페이지를 읽을 때 글의 완성도부터 평가하지 않습니다. 먼저 HTML을 트리 구조로 분해하고 노이즈로 판단한 요소를 제거한 뒤, 남은 콘텐츠를 일반 텍스트나 Markdown으로 변환합니다. 페이지가 수십 겹의 div로 쌓여 있고 제목조차 크고 굵은 일반 텍스트로 처리되어 있다면, 이 단계에서 콘텐츠가 잘게 나뉘거나 사이드바로 오인될 수 있습니다. 그러면 AI가 참고 자료 후보를 고를 때 포함되기 어렵습니다. 깔끔한 HTML은 개발자의 결벽증이 아니라 AI 인용 가능성을 결정하는 기본 조건입니다.
핵심은 대부분의 AI 엔진이 브라우저처럼 페이지 전체를 완전히 렌더링하지 않는다는 점입니다. 대체로 가독성 판독 도구와 비슷한 추출 절차를 거칩니다. 본문 영역을 찾고, 내비게이션 바와 푸터를 걷어내며, h1부터 h3까지를 뼈대로 삼고 문단과 목록을 내용으로 채웁니다. CSS로 정교하게 만든 시각적 위계는 보지 못하고 HTML 태그에 드러난 구조만 인식합니다. 화면에서는 똑같아 보이는 두 페이지 중 하나는 반복해서 인용되고, 다른 하나는 카피를 아무리 고쳐도 답변에 등장하지 않는 이유가 여기에 있습니다.
div 중첩이 너무 깊으면 검색·추출기가 길을 잃습니다
현대적인 프런트엔드 프레임워크를 사용하다 보면 이른바 ‘div 수프’가 쉽게 만들어집니다. 요소마다 래퍼 div가 덧씌워지면서 하나의 온전한 설명이어야 할 텍스트가 아무 의미도 없는 div 여덟 겹, 열 겹 아래 묻히는 식입니다. 추출기는 텍스트 밀도와 태그 유형을 바탕으로 ‘본문이 어디인지’를 추정합니다. 중첩이 깊어지고 버튼이나 레이블 같은 짧은 텍스트 조각까지 섞이면 판단 신뢰도가 떨어집니다. 엉뚱한 영역을 본문으로 선택하거나, 이어지는 문단을 서로 관계없는 세 조각으로 나눠 처리할 수도 있습니다.
해결책은 단순합니다. 본문을 시맨틱 태그로 감싸면 됩니다. <main>은 페이지 전체에서 가장 중요한 콘텐츠를, <article>은 독립적으로 읽을 수 있는 글을, <section>은 각 장을, <figure>는 이미지와 설명을 담습니다. 이런 태그는 추출기에 ‘여기가 중요한 콘텐츠’라고 직접 알려주는 표지판입니다. 프레임워크가 만든 모든 래퍼를 없앨 수는 없더라도, 적어도 본문의 최외곽은 wrapper라는 클래스를 가진 열두 번째 div가 아니라 <main>이나 <article>이어야 합니다. 시맨틱 태그 한 겹으로 해결할 수 있다면 div를 세 겹씩 둘러싸지 마십시오.
제목 계층은 AI를 위한 목차입니다
추출기는 h1부터 h6까지를 글 전체의 목차로 보고 콘텐츠를 청크로 나눕니다. 구획이 명확하면 AI가 특정 질문에 맞는 문단을 정확히 인용할 수 있습니다. 반대로 구획이 엉켜 있으면 글 전체가 한 덩어리로 뭉치고, 인용 과정에서 문맥도 사라집니다. 지켜야 할 원칙은 세 가지뿐입니다.
- 페이지마다 h1은 하나만 두고, 일반적으로 글 제목에 사용합니다. 나머지 장은 h2부터 아래 단계로 구성합니다.
- 단계를 건너뛰지 마십시오. h2 다음에는 h3이 와야 하며 곧바로 h4로 넘어가면 안 됩니다. 단계를 생략하면 추출기가 문단 간의 상하 관계를 잘못 판단할 수 있습니다.
- 제목은 구조이지 스타일이 아닙니다. 특정 문장을 크게 보이게 하려면 CSS를 사용하십시오. 글자를 키우려고 h2를 쓰거나 SEO를 위해 같은 단계의 제목을 무더기로 넣어서는 안 됩니다.
가장 흔한 실수는 페이지 전체에 h1 하나만 두고, 나머지는 div와 굵은 글씨로 제목처럼 보이는 ‘가짜 제목’을 만드는 것입니다. 크롤러의 관점에서 이런 글에는 장 구분이 없고 긴 문단 하나만 있을 뿐입니다. 따라서 전체를 한 번에 가져오거나 통째로 버릴 수밖에 없습니다. 가짜 제목을 실제 h2와 h3으로 바꾸는 것은 AI에 목차를 건네는 것과 같습니다. 어디서부터 읽고 나눠야 하는지 명확해집니다.
시맨틱 태그와 속성: CSS 없이도 의미를 전달하는 법
구조가 ‘깔끔하게 추출하는’ 문제를 해결한다면, 속성은 ‘추출한 뒤에도 의미를 이해하는’ 문제를 해결합니다. 이미지에 alt를 추가하면 순수 텍스트 환경에서도 내용을 전달할 수 있습니다. 날짜에 <time datetime>을 지정하면 의미 없는 문자열로 읽히는 일을 막을 수 있습니다. 표에 <table>과 <th>를 사용하면 Markdown으로 변환해도 필드 간 관계가 유지됩니다. 용어와 정의를 <dl>, <dt>, <dd>로 묶으면 모델이 깔끔한 문답 형태로 추출할 수 있습니다. aria-label, aria-labelledby 같은 ARIA 속성은 본래 접근성을 위해 설계됐지만, 화면에 텍스트가 없는 요소에도 기계가 읽을 수 있는 의미를 부여합니다.
data 속성은 올바르게 사용하되 마법을 기대하지 마십시오
현실적으로 말하면, 대부분의 AI 수집기는 임의로 만든 data-* 속성을 전혀 읽지 않습니다. 사이트 내부에서 정한 이름을 이해하도록 설계되지 않았기 때문입니다. 폭넓게 지원되는 ‘데이터 속성’은 표준을 갖춘 것들뿐입니다. 마이크로데이터의 itemprop, 해당 문단을 요약에 사용하지 말라고 엔진에 알리는 data-nosnippet, 그리고 가장 신뢰할 수 있는 기계 판독 계층인 JSON-LD가 대표적입니다. AI가 알아서 이해하리라 기대하며 data-geo-* 같은 속성을 잔뜩 만들기보다는 저자, 게시일, 가격, FAQ처럼 인용 가능한 핵심 사실을 JSON-LD에 작성하는 편이 낫습니다. 그래야 검색·추출 결과가 레이아웃에 좌우되지 않는 명확한 사실을 확보할 수 있습니다.
물론 data-*도 여전히 쓸모가 있지만 용도가 다릅니다. 자체 분석이나 내부 도구에서 인용 가능한 문단을 표시하고, 실제로 AI가 어떤 콘텐츠를 가져가는지 추적하는 데 활용할 수 있습니다. data-*는 운영자가 확인하기 위한 좌표이지 AI에 내리는 지시가 아닙니다. 두 역할을 구분해야 아무도 읽지 않는 속성에 불필요한 공수를 들이지 않을 수 있습니다.
바로 적용할 수 있는 HTML 정리 체크리스트
- 본문을 <main>이나 <article>로 감싸 명확한 단일 영역으로 만듭니다.
- 레이아웃만을 위해 존재하는 중첩 div를 줄이고, 가능한 곳에는 시맨틱 태그를 사용합니다.
- 페이지마다 h1은 하나만 사용하고, h2와 h3 단계를 건너뛰지 않으며, 모든 가짜 제목을 실제 제목 태그로 바꿉니다.
- 이미지에는 alt, 날짜에는 <time>, 표에는 <th>, 용어 정의에는 <dl>을 사용합니다.
- 사용자 정의 data-* 속성에만 의존하지 말고 핵심 사실을 JSON-LD에 작성합니다.
- 원고 작업을 마친 뒤 웹페이지를 Markdown으로 변환해 한 번 점검합니다. 그 결과물이 AI의 관점에 가깝습니다.
브라우저에서 보기 좋다는 이유만으로 AI가 인용해 주지는 않습니다. AI는 깔끔하게 추출되고 의미까지 이해할 수 있는 버전을 인용합니다.— Tenten GEO
깔끔한 HTML은 전체 GEO 실무 항목 가운데 성과 회수율이 가장 높으면서도 가장 자주 빠뜨리는 영역입니다. 콘텐츠를 새로 쓸 필요 없이 기존 내용을 기계가 읽을 수 있는 형식으로 정리하면 되므로 비용이 적게 들고 결과도 빠르게 확인할 수 있습니다. AI 추출기의 관점에서 핵심 페이지에 무엇이 빠져 있는지 알고 싶다면 GEO 진단에서 실제 추출 결과를 점검해 드립니다. 먼저 30분 GEO 진단을 예약해 자사 페이지를 함께 살펴보며 현장에서 격차를 확인할 수도 있습니다.
