alt 태그와 figcaption, 어떻게 써야 하나

1. AI는 이미지를 일곱 가지로 이해합니다

• 이미지 자체 (컴퓨터 비전)
• 파일명
• alt 텍스트
• 캡션 (figcaption)
• 주변 텍스트
• 페이지 전체 맥락
• 구조화 데이터

이 중 대표님이 직접 손댈 수 있는 건 2번부터 5번까지입니다.

2. alt 태그 — 무엇이 담겼는지 쓰십시오

“이미지”, “제품”은 아무 정보가 없습니다. 키워드를 나열하는 것도 역효과입니다. 검색엔진이 스팸으로 판단합니다.

나쁜 예

<img src="IMG_1234.jpg" alt="이미지">
<img src="product.jpg" alt="제품">
<img src="sale.jpg" alt="세일 세일 대박세일 특가">

좋은 예

<img src="organic-baby-wipes.jpg"
     alt="유기농 순면 아기물티슈 200매 팩 제품 이미지">

<img src="coffee-brewing-guide.jpg"
     alt="핸드드립 커피 추출 과정 - 뜸들이기 단계">

장식용 배경 이미지는 alt를 빈 값(alt="")으로 두십시오. 내용이 없는 이미지에 억지로 설명을 붙이면 오히려 방해가 됩니다.

3. 파일명도 읽힙니다

한글 파일명은 피하십시오. 주소로 바뀌면서 알아볼 수 없는 문자열이 됩니다. 영문 소문자와 하이픈으로 쓰십시오.

4. figcaption — 이미지에 맥락을 붙입니다

alt는 화면에 보이지 않습니다. figcaption은 이미지 아래에 실제로 표시되므로, 사이즈 표나 도해처럼 설명이 사용자 이해에 도움이 될 때 선택합니다. 기존 디자인을 해치거나 주변 본문으로 맥락이 충분하면 생략해도 됩니다.

figcaption 예시

<figure>
  <img src="size-guide.jpg" alt="이불 사이즈 가이드 표">
  <figcaption>
    <strong>사이즈 가이드</strong>:
    싱글·퀸·킹 사이즈별 가로세로 치수 (단위 cm)
  </figcaption>
</figure>

5. 이미지 주변 텍스트도 함께 읽힙니다

이미지 바로 앞뒤에 한 문장씩 넣어주십시오. 검색엔진은 이미지를 해석할 때 주변 문장을 함께 봅니다.

앞뒤 문장까지

<p>다음은 사이즈별 치수를 정리한 표입니다.</p>

<figure>
  <img src="size-guide.jpg" alt="이불 사이즈 가이드 표">
  <figcaption>싱글·퀸·킹 사이즈별 가로세로 치수</figcaption>
</figure>

<p>퀸 사이즈는 침대 폭 150cm 기준으로 제작되었습니다.</p>

6. 체크리스트

• 파일명이 상품을 설명하는가
• 파일명이 영문 소문자 + 하이픈인가
• alt에 무엇이 담겼는지 구체적으로 적었는가
• alt에 키워드를 나열하지 않았는가
• 장식용 이미지의 alt를 빈 값으로 두었는가
• 정보를 담은 이미지에 화면 설명이 실제로 필요한지 판단했는가
• 이미지 앞뒤에 설명 문장이 있는가