alt 태그는 정확히 말하면 img 요소의 alt 속성으로, 이미지를 볼 수 없을 때 이미지 대신 전달되는 대체 텍스트입니다. 구글은 alt 텍스트를 컴퓨터 비전, 페이지 내용과 함께 이미지 주제를 이해하는 데 쓰므로, 이미지 내용을 짧고 구체적으로 설명하는 문장을 넣으면 됩니다. alt만으로 순위가 오르지는 않지만, 이미지 검색 노출과 웹 접근성의 기본 요소입니다.
alt 태그(img alt)란 무엇인가요?
alt 태그는 alternative text(대체 텍스트)를 담는 HTML 속성입니다. 흔히 alt 태그라고 부르지만 독립된 태그가 아니라 img 요소에 붙는 속성이라 ‘img alt 속성’이 정확한 표현입니다. 기본 형식은 아래와 같습니다.
<img src="이미지 주소" alt="이미지 내용을 설명하는 대체 텍스트">네트워크 오류나 콘텐츠 차단으로 이미지가 표시되지 않으면 브라우저는 그 자리에 alt 문구를 보여 줍니다. 스크린 리더는 alt를 소리로 읽어 주며, alt 속성이 아예 없으면 일부 스크린 리더는 파일 이름을 대신 읽기도 합니다. 아래 화면처럼 개발자 도구에서 img 요소를 선택하면 alt 값이 보입니다.
alt 태그는 SEO에 어떤 영향을 주나요?
alt 태그는 검색엔진이 이미지 내용을 파악하도록 돕는 신호입니다. 구글 이미지 SEO 문서는 이미지 주제를 이해할 때 alt 텍스트를 컴퓨터 비전 알고리즘, 페이지 내용과 함께 사용한다고 설명합니다. 이미지를 링크로 쓸 때는 alt가 그 링크의 앵커 텍스트 역할도 합니다.
그래서 alt는 이미지 검색 결과에 노출될 기회를 넓히는 기본 작업에 가깝고, 그것만으로 상위 노출이 되지는 않습니다. 콘텐츠 품질, 페이지 구조, 기술 설정이 함께 갖춰져야 합니다. 전체 그림은 검색 엔진 최적화 글에서, 제목 구조는 h 태그 작성법에서 볼 수 있습니다.
alt 태그는 어떻게 작성하나요?
이미지에 무엇이 보이는지와 이 글에서 왜 필요한지를 한 문장으로 쓰면 됩니다. 구글 문서의 예시를 한국어로 옮기면 아래와 같습니다.
<!-- 나쁨: alt 없음 -->
<img src="puppy.jpg">
<!-- 나쁨: 키워드 나열 -->
<img src="puppy.jpg" alt="강아지 강아지사진 아기 강아지 강아지 분양 강아지들">
<!-- 보통 -->
<img src="puppy.jpg" alt="강아지">
<!-- 좋음 -->
<img src="dalmatian-puppy.jpg" alt="공을 물어 오는 달마시안 강아지">키워드를 반복해 채우면 사용자 경험이 나빠지고 스팸으로 보일 수 있습니다. ‘이미지’, ‘사진’ 같은 말로 시작하거나 파일 이름을 그대로 쓰는 것도 피합니다. 파일 이름은 구글에 아주 약한 단서만 주지만, IMG00023.jpg보다 내용을 담은 이름이 낫습니다. 모든 이미지에 같은 방식으로 쓰지 않고, W3C 접근성 지침의 판단 순서에 따라 이미지 역할별로 나눕니다.
| 이미지 종류 | alt 작성법 | 예시 |
|---|---|---|
| 내용을 전달하는 사진·그림 | 전달하려는 의미를 짧게 설명 | alt=”공을 물어 오는 달마시안 강아지” |
| 링크·버튼으로 쓰는 이미지 | 이동할 곳이나 동작을 설명 | alt=”다음 페이지” |
| 글자가 들어간 이미지 | 본문에 없는 글자라면 그 글자를 그대로 | alt=”여름 할인 30%” |
| 꾸밈용·본문과 같은 내용 | 빈 alt | alt=”” |
| 그래프·복잡한 도표 | 짧은 alt + 본문에 수치 설명 | alt=”월별 방문자 추이 그래프” |
워드프레스에서는 alt 태그를 어디에 입력하나요?
이미지 블록을 선택한 뒤 오른쪽 설정 사이드바의 ‘대체 텍스트’ 칸에 입력합니다. 블록에서 입력한 값은 그 글에만 적용되고, 미디어 라이브러리에서 입력한 값은 이미지를 새로 넣을 때의 기본값이 됩니다. 꾸밈용 이미지는 장식 이미지로 표시해 스크린 리더가 건너뛰게 할 수 있습니다. 나머지 기본 설정은 워드프레스 SEO 세팅 가이드에 정리했습니다.
alt 태그가 적용됐는지 어떻게 확인하나요?
확인할 페이지에서 F12를 눌러 Console 탭에 아래 코드를 붙여 넣으면 alt 속성이 없는 이미지가 목록으로 나옵니다.
document.querySelectorAll('img:not([alt])')
.forEach(img => console.log(img.src));페이지 여러 개를 빠르게 훑어볼 때는 크롬 확장 프로그램 SEO META in 1 CLICK이 편합니다.
확장 프로그램을 설치하고 확인할 페이지에서 실행한 뒤 IMAGES 탭을 열면 전체 이미지 수와 alt가 없는 이미지 수(without ALT)가 표시됩니다. 0이 아니면 해당 이미지를 찾아 대체 텍스트를 채웁니다.
alt 속성과 title 속성은 무엇이 다른가요?
alt는 이미지를 볼 수 없을 때 이미지를 대신하는 텍스트이고, title은 마우스를 올렸을 때 보이는 보조 설명입니다. title은 많은 기기와 브라우저에서 표시되지 않으므로 대체 텍스트 역할은 alt로 해야 합니다.
alt를 비워 두어도 되는 경우가 있나요?
꾸밈용 이미지나 바로 옆 본문과 같은 내용을 반복하는 이미지는 alt를 빈 값으로 두는 것이 맞습니다. 다만 alt 속성 자체를 빼면 일부 스크린 리더가 파일 이름을 읽을 수 있으니 속성은 남기고 값만 비웁니다.
alt 텍스트는 몇 글자로 써야 하나요?
구글 문서와 MDN에는 정해진 글자 수가 없습니다. 이미지가 글에서 맡은 역할을 짧고 구체적으로 설명하면 충분하고, 긴 설명이 필요한 도표라면 본문에 따로 풀어 씁니다.