핵심 정보를 대표이미지에만 넣지 마세요: AI가 읽는 HTML·이미지 이중 작성법

핵심만 먼저

가격, 영업시간, 신청 조건, 비교표를 보기 좋은 이미지 한 장에만 넣으면 사람에게는 편해 보여도 검색과 AI 답변의 근거로 쓰기 어렵습니다. Google 공식 문서는 AI 기능에 별도 전용 마크업이 필요한 것은 아니며 기본 SEO, 크롤링 가능한 텍스트, 적절한 이미지 요소와 주변 문맥이 중요하다고 안내합니다. 핵심 정보는 HTML 본문에 먼저 쓰고, 이미지는 이해를 돕는 보조 자료로 연결하세요.

HTML·이미지 이중 작성은 무엇인가요

같은 내용을 두 번 복사해 페이지를 길게 만드는 일이 아닙니다. 정보의 원본은 사람이 선택·복사하고 검색엔진이 읽을 수 있는 HTML 텍스트로 두고, 이미지는 관계와 차이를 빠르게 보여 주는 시각 자료로 쓰는 방식입니다. 이미지에는 짧은 요약을 담을 수 있지만 상세 조건과 예외는 본문에서 확인할 수 있어야 합니다.

예를 들어 메뉴 가격표를 이미지로 올렸다면 대표 메뉴명, 가격 기준일, 변동 가능 여부, 예약 문의 경로를 본문에도 적습니다. 이미지 `alt`는 표 전체를 억지로 복사하는 곳이 아니라 이미지의 목적을 간결하게 설명하는 곳입니다. 긴 표는 HTML 표나 목록으로 제공하고 이미지는 미리보기로 사용합니다.

오늘 이슈와 근거

Google 이미지 권장사항은 표준 HTML `img` 요소의 `src`를 사용하면 크롤러가 이미지를 찾을 수 있다고 설명하며, CSS 배경 이미지는 이미지 색인 대상이 되지 않는다고 안내합니다. 또한 이미지가 포함된 페이지의 본문과 메타데이터가 이미지의 검색 노출에 영향을 줄 수 있고, 대표 이미지는 페이지와 관련되며 실제 내용을 대표해야 한다고 권고합니다.

Google AI 기능 가이드는 AI 개요·AI 모드에 표시되기 위한 추가 요구사항이나 특별한 최적화가 없다고 설명합니다. 일반 검색에서 적용되는 기술 요구사항과 사용자 중심 콘텐츠가 기본입니다. 따라서 “AI가 이미지 안 글자를 알아서 모두 이해할 것”이라고 기대하며 본문을 비워 두는 전략은 공식 가이드와 맞지 않습니다. 이미지 OCR 정확도나 AI 인용 확률은 공식 수치가 없으므로 임의의 성과 숫자를 쓰지 않습니다.

사장님 실무 적용 6단계

1. 페이지의 결론을 한 문장으로 씁니다. 이미지 없이도 무엇을 선택하고 행동해야 하는지 본문 첫 부분에 적습니다.
2. 조건과 예외를 HTML로 만듭니다. 가격, 대상, 기한, 지역, 환불 조건은 문단·목록·표로 제공하고 기준일을 표시합니다.
3. 이미지 역할을 정합니다. 흐름도, 전후 비교, 공간 배치처럼 시각화가 실제 이해를 높이는 부분만 이미지로 만듭니다.
4. 표준 이미지 요소를 사용합니다. CSS 배경에 핵심 이미지를 숨기지 말고 `img`와 실제 `src`를 사용합니다. 반응형 이미지도 대체 `src`를 둡니다.
5. alt와 주변 문맥을 연결합니다. alt에는 “2026년 9월 신청 단계 흐름도”처럼 목적을 설명하고, 바로 앞뒤 문장에서 핵심 내용을 풀어 씁니다.
6. 이미지 없이 읽어 봅니다. 이미지를 차단하거나 스크린리더 순서로 확인했을 때도 결론, 조건, CTA가 이해되는지 검수합니다.

예를 들어 ‘지원사업 신청 가능 여부’ 카드뉴스가 있다면 카드 이미지 아래에 대상 지역, 업종, 신청기한, 제출처, 제외 조건을 텍스트로 제공합니다. 이미지 속 작은 글자를 그대로 alt에 모두 넣기보다 본문 표를 기준 원본으로 삼아 수정 시 두 자산이 함께 바뀌도록 운영합니다.

흔한 실수

• 대표이미지 안에 제목·가격·기간을 모두 넣고 본문에는 “이미지를 참고하세요”만 씁니다.
• 디자인 편의를 위해 중요한 이미지를 CSS 배경으로만 넣습니다.
• alt에 키워드를 반복하거나 이미지와 무관한 검색어를 채웁니다.
• 가격표 이미지가 바뀌었는데 본문 기준일과 금액은 그대로 둡니다.
• AI 전용 스키마 하나를 넣으면 빈 본문을 보완할 수 있다고 생각합니다.

제스토코스트의 판단

AEO에서 중요한 것은 AI에게 문장을 먹이는 기술보다 정보 원본을 한 곳에서 관리하는 운영입니다. 이미지와 본문이 서로 다르면 AI뿐 아니라 고객도 어느 정보가 최신인지 판단하기 어렵습니다. 기준 원본을 HTML로 두고 이미지 제작일과 본문 수정일을 연결해야 합니다.

이미지의 가치는 없애는 것이 아니라 정확히 나누는 데 있습니다. 본문은 검색·접근성·수정 이력을 담당하고, 이미지는 복잡한 관계를 빠르게 이해시키는 역할을 맡습니다. 이 구분이 되면 검색엔진, AI 답변, 모바일 사용자, 스크린리더 이용자에게 동시에 강해집니다.

자주 묻는 질문

이미지 속 글자를 AI가 읽을 수 있지 않나요?

일부 시스템이 읽을 수 있더라도 항상 정확하고 최신이라고 보장할 수 없습니다. 핵심 조건은 선택 가능한 HTML 텍스트로 함께 제공하는 편이 안전합니다.

alt에 표의 모든 내용을 넣으면 되나요?

alt는 이미지 목적을 간결하게 설명하는 데 적합합니다. 긴 가격표와 복잡한 조건은 HTML 표나 목록으로 제공하고 alt는 그 표의 시각 자료임을 설명하세요.

구조화된 데이터가 있으면 본문은 짧아도 되나요?

구조화된 데이터는 페이지의 실제 보이는 내용과 일치해야 합니다. 사용자에게 필요한 조건과 설명을 본문에서 제공하는 것이 먼저입니다.

출처

• Google 검색 센터: 이미지 검색엔진 최적화 권장사항
• Google 검색 센터: AI 기능 및 웹사이트
• Google 검색 센터: 유용하고 신뢰할 수 있는 사용자 중심 콘텐츠

CTA

가장 중요한 가격표나 신청 안내 이미지 한 장을 골라, 이미지가 없어도 이해되는 결론·조건·예외·행동을 HTML 본문에 작성해 보세요.

편집 고지: 이 글은 공식 자료 조사와 초안 정리에 자동화 도구를 활용했으며, 공개 전 출처·표현·실무 적합성을 검수합니다.