HTML - 이미지의 alt tag, caption, description에도 단어 사이에 스페이스보다 대쉬(-)를 쓰는게 더 나은가?

by줌인온코리아 • • 2 min read
0

블로그나 홈페이지를 운영할 때, SEO나 접근성 측면에서 HTML 페이지 이미지의  alt tag, caption, description를 어떻게 작성하면 좋은지 정리해 보았습니다.

html에서 alt tag, caption, description


✅ 요약

항목스페이스가 좋은가?대시가 좋은가?이유
alt tag✅ 예❌ 아니요사람이 읽는 텍스트이므로 문장처럼 작성 (스페이스)
caption (캡션)✅ 예❌ 아니요사용자 가독성 우선, 자연스러운 문장 형태
description (이미지 설명)✅ 예❌ 아니요SEO와 UX 목적, 문장처럼 읽히게
파일 이름❌ 아니요✅ 예검색엔진은 -를 단어 구분자로 인식함 (예: vocal-range-info.jpg)

🔍 항목별 설명

1. Alt 태그 (alt="...")

  • 용도: 시각장애인을 위한 스크린 리더 / SEO에 이미지 맥락 제공

  • 예시:

    • ✅ alt="여자가 마이크 앞에서 노래하는 모습" ← 스페이스

    • ❌ alt="여자가-마이크-앞에서-노래하는-모습" ← 기계처럼 보임

2. Caption

  • 이미지 아래 보이는 설명 문구

  • 사용자에게 의미를 잘 전달해야 하므로 스페이스를 사용한 문장형이 좋음

3. Description

  • 워드프레스 미디어 상세 정보에서 입력 가능

  • 검색엔진이 참고하거나, 갤러리 플러그인이 사용할 수 있음

  • 자연어 문장처럼 스페이스 사용

4. 파일 이름 (image-name.jpg)

  • ✅ 대시(-) 사용이 좋음.

    • 이유: Google은 대시를 단어 단위로 인식하지만 언더바(_)나 스페이스는 인식하지 못함

    • 예:

      • ✅ g3-to-f5-vocal-range.jpg ← SEO 친화적

      • ❌ g3tof5vocalrange.jpg ← 인식 어려움

      • ❌ g3_to_f5_vocal_range.jpg ← 언더바 무시됨

✅ 결론

항목사용 추천
alt, caption, description✅ 스페이스
이미지 파일 이름✅ 대시 (-)
다음 이전