alt 태그는 이미지의 의미나 기능을 글로 전달하는 HTML 속성입니다. 이미지를 보지 못하는 사용자에게 대체 정보를 제공하고 검색엔진의 이미지 이해도 돕습니다. 흔히 alt 태그라고 부르지만, 정확한 명칭은 <img> 요소의 alt 속성입니다.
alt에 담을 이미지의 의미와 기능
마케팅팀의 회의 사진이라면 파일명이나 키워드 목록을 적는 대신, 사진이 본문에서 전달하는 상황을 설명합니다.
<img src="team-meeting.jpg" alt="콘텐츠 성과를 검토하는 마케팅팀">
alt에는 이미지가 그 페이지에서 전달하는 정보를 적습니다. 회의 모습을 보여 주는 사진이라면 사람들의 옷차림이나 배경을 모두 묘사할 필요 없이, 본문에서 설명하려는 활동을 중심으로 작성합니다.
Google은 alt뿐 아니라 주변 본문, 캡션, 파일명과 이미지의 시각 정보도 참고해 주제를 파악합니다. alt에 관련 키워드를 나열하기보다 본문 맥락에 맞는 설명을 짧은 문장이나 구로 적습니다.
장식 이미지의 빈 alt 처리
정보를 전달하는 사진, 기능을 실행하는 아이콘과 단순 장식은 역할이 다릅니다. 그 역할에 맞춰 설명을 넣거나 alt를 비워 둡니다.
| 이미지 역할 | alt 작성 방식 | 예시 |
|---|---|---|
| 정보를 전달하는 사진 | 핵심 대상과 상황 설명 | alt="콘텐츠 성과를 검토하는 마케팅팀" |
| 수치가 중요한 차트 | 차트가 전달하는 핵심 결과 설명 | alt="2025년 자연 검색 유입이 전년보다 32% 증가한 그래프" |
| 기능이 있는 아이콘 | 동작이나 목적 설명 | alt="검색" |
| 장식용 이미지 | 빈 alt 사용 | alt="" |
정보나 기능이 없는 장식 이미지에는 alt=""를 넣습니다. 빈 alt는 스크린 리더가 해당 이미지를 건너뛰도록 하는 표시입니다. 속성을 아예 생략하면 일부 스크린 리더가 파일명을 읽을 수 있으므로 생략과 구별해야 합니다. ‘장식 이미지’라는 문구도 본문 이해에 필요 없는 음성 안내를 추가하므로 넣지 않습니다.
alt와 캡션의 역할 구분
alt는 이미지를 볼 수 없는 상황에서 의미와 기능을 대신 전달합니다. 캡션은 이미지를 보는 독자에게 배경, 출처나 추가 설명을 알려 줍니다.
차트라면 alt에 핵심 변화나 결과를 적고, 캡션에 조사 기간과 데이터 출처를 덧붙일 수 있습니다. 두 문구를 그대로 복사할 필요는 없습니다.
복잡한 인포그래픽이나 긴 표는 alt 한 줄로 충분히 설명하기 어렵습니다. alt에는 핵심을 요약하고 세부 수치와 설명은 본문 텍스트로도 제공하세요.
이미지 링크 alt의 역할
이미지가 링크의 내용을 단독으로 전달한다면 alt에 클릭 후 이동할 페이지나 실행할 기능을 적습니다.
<a href="/glossary/internal-link">
<img src="internal-link-guide.png" alt="내부 링크 가이드 보기">
</a>
Google은 링크 이미지의 alt를 앵커 텍스트로 활용합니다. 위 예시에서 필요한 정보는 그림의 모양이 아니라 ‘내부 링크 가이드를 연다’는 동작입니다. 같은 링크 안의 텍스트가 이미 목적을 충분히 설명한다면 이미지에 빈 alt를 넣어 중복 안내를 줄일 수 있습니다.
alt 태그에서 자주 생기는 실수
- 모든 이미지에 같은 키워드를 반복하는 경우
image.jpg같은 파일명을 그대로 적는 경우- “이미지”, “사진”처럼 내용이 없는 말만 쓰는 경우
- 장식 이미지에도 불필요한 설명을 넣는 경우
- 통이미지 안의 긴 문장을 alt 한 줄로 대신하는 경우
자주 묻는 질문
alt에 핵심 키워드를 꼭 넣어야 하나요?
이미지를 정확하게 설명하는 단어라면 넣어도 됩니다. 검색 노출만 생각해 같은 키워드를 반복하거나 이미지와 관계없는 단어를 추가하지 마세요.
alt는 몇 자로 써야 하나요?
사진은 핵심 대상과 상황을 짧게 설명하고, 기능 아이콘은 ‘검색’처럼 실행할 동작을 적습니다. 차트나 인포그래픽처럼 설명이 길어지는 이미지는 alt에 요점을 적고 자세한 내용은 본문 텍스트로 제공합니다.
워드프레스의 대체 텍스트가 alt인가요?
네. 워드프레스 미디어 설정의 대체 텍스트는 보통 alt 속성으로 출력됩니다. 테마나 블록에 따라 결과가 달라질 수 있으므로, 발행한 페이지의 실제 HTML에서도 값을 확인하세요.
함께 알아두면 좋은 용어
- 대체 텍스트: 이미지를 볼 수 없을 때 의미나 기능을 전달하는 텍스트
- 이미지 SEO: 검색엔진이 이미지를 발견하고 이해할 수 있게 관리하는 작업
- 내부 링크: 사이트 안의 페이지를 서로 연결하는 링크
- 앵커 텍스트: 링크의 목적지를 설명하는 클릭 가능한 문구