이미지 alt 텍스트와 title 태그 사용법
이미지를 올릴 때 단순히 보이기 위한 용도로만 삽입하고 계신가요?
구글 블로그, 티스토리, 워드프레스 등 어떤 플랫폼이든, 이미지 삽입 시 꼭 신경 써야 할 두 가지 속성은 바로 alt
와 title
입니다.
이 두 속성은 검색엔진 최적화(SEO)는 물론, 웹 접근성, 사용자 친화적인 콘텐츠 설계에 결정적인 역할을 합니다.
이 글에서는 alt와 title의 차이, 작성 요령, 실제 HTML 코드 예시, 자주 하는 실수, 검색 노출과의 관계까지 모두 정리했습니다.
초보 블로거부터 애드센스를 준비하는 운영자까지 꼭 알아야 할 이미지 속성 가이드입니다.
🔹1.왜 이미지에도 설명이 필요할까?
블로그에 이미지를 삽입할 때 단순히 <img src="...">
만 사용하는 분들이 많습니다.
하지만 검색엔진 최적화(SEO), 웹 접근성, 사용자 경험(UX) 측면에서
이미지에는 반드시 대체 텍스트(alt) 와 제목 텍스트(title) 를 함께 설정해주는 것이 매우 중요합니다.
특히 구글은 이미지도 ‘텍스트 정보’를 기반으로 인식하므로,
이미지 설명을 제대로 설정해야 검색 노출은 물론, 애드센스 승인 시 콘텐츠 신뢰도 향상에도 큰 영향을 줍니다.
🔹2.용어 정리: alt vs title
속성 | 설명 | 역할 | 사용자에게 보이는가? |
---|---|---|---|
alt (대체 텍스트) | 이미지가 로드되지 않거나 스크린리더 사용 시 노출되는 설명 | 웹 접근성 / SEO 핵심 요소 | 보이지 않음 (HTML 내부) |
title (제목 텍스트) | 이미지 위에 마우스를 올렸을 때 툴팁으로 보여지는 설명 | 사용자 편의 / 부가 정보 | 보임 (툴팁 형태) |
🔹3.기본 이미지 삽입 태그 예시
html<img src="image.jpg" alt="제주도 협재해변의 일몰 풍경" title="2025년 봄 제주 여행 – 협재 해변">
alt
: 검색엔진이 이 이미지가 ‘제주 협재 해변 일몰’을 표현한 것임을 인식title
: 사용자가 마우스를 올렸을 때 “2025년 봄 제주 여행 – 협재 해변”이라는 부가 정보 제공
🔹1. 대체 텍스트(alt) 제대로 쓰는 방법
✅ 올바른 alt 속성 작성 요령
- 이미지를 설명하는 핵심 문장을 작성한다.
→ 무조건 짧게 쓸 필요는 없고, 내용 중심으로 서술 - 중복된 단어 남발 X, 키워드 스팸 X
→ ‘이미지’, ‘사진’, ‘사진 보기’ 등 무의미한 단어 금지 - 해당 이미지가 콘텐츠에서 어떤 의미를 갖는지 요약한다.
✅ alt 속성 좋은 예시
이미지 내용 | alt 속성 |
---|---|
애드센스 승인 화면 캡처 | alt="2025년 구글 애드센스 승인 완료 화면 캡처" |
서울 경복궁 야경 사진 | alt="서울 경복궁의 야경과 조명이 어우러진 사진" |
다이어트 식단 구성표 | alt="저탄고지 다이어트 1주차 식단 구성표" |
❌ alt 속성 잘못된 예시
alt 내용 | 문제점 |
---|---|
alt="사진" | 의미 없음 (검색 불가) |
alt="adsense adsense adsense" | 키워드 스팸으로 처리됨 |
alt="이미지입니다" | 검색엔진이 콘텐츠를 인식하지 못함 |
🔹2. 제목 텍스트(title) 제대로 쓰는 방법
title
속성은 사용자에게 마우스를 올렸을 때 툴팁으로 나타나는 설명입니다.
- alt는 스크린리더/검색엔진용,
- title은 사용자 UX용
즉, alt는 내부 기술용, title은 사용자 체감용이라고 이해하면 됩니다.
✅ title 작성 팁
- 이미지와 관련된 추가 정보를 자연스럽게 서술
- 날짜, 위치, 출처 등 보조 설명 활용
- 클릭 유도 문장은 피하고 정보 중심으로 작성
✅ title 속성 좋은 예시
이미지 내용 | title 속성 |
---|---|
블로그 운영 대시보드 | title="2025년 기준 티스토리 블로그 대시보드 인터페이스" |
애드센스 PIN 입력 화면 | title="구글 애드센스 수익 인증을 위한 PIN 입력 단계" |
🔹3. HTML 코드 통합 예시
html<img
src="https://example.com/korea-palace.jpg"
alt="한국 전통 궁궐인 경복궁의 봄 전경"
title="2025년 서울 봄꽃 여행 – 경복궁 방문기">
🔹4. SEO 관점에서 alt와 title이 중요한 이유
- 구글 검색 결과의 이미지 탭에 노출되기 위해 alt는 필수입니다.
- title은 사용자의 이해도를 높여 체류시간을 늘리는 데 도움이 됩니다.
- 특히 블로그 포스트 내 이미지가 많은 경우, alt는 본문의 보조 설명 역할을 하며 검색 로봇에게 콘텐츠 맥락을 알려주는 역할을 합니다.
🔹5. 이미지가 정보 중심일수록 alt 작성은 필수!
이미지 유형 | alt 설정 필요도 |
---|---|
단순 배경 사진 | 선택 사항 (설정 안 해도 무방) |
인포그래픽, 표, 차트 | 반드시 alt 작성 필요 |
화면 캡처 (설정, 광고, 결과 등) | alt 필수 – 본문 문맥과 연결됨 |
썸네일 이미지 | 제목이나 본문 키워드 포함 시 alt 설정 권장 |
🔹6. 시각장애인을 위한 접근성 개선 효과
스크린 리더를 사용하는 사용자들은 이미지 alt 텍스트를 통해 이미지 내용을 음성으로 듣습니다.
따라서 이미지 alt 텍스트 속성이 없거나 의미 없는 값이면, 웹 접근성 기준에 부합하지 않아 평가 점수가 낮아지고,
애드센스 승인 과정에서 품질 미달 사유로 거절될 수 있습니다.
✅ 결론 – 이미지 alt와 title은 선택이 아니라 기본 설정입니다
단순히 예쁜 이미지를 올리는 것보다,
이미지를 텍스트로 설명해주고, 사용자의 맥락 이해를 돕는 구조가 블로그 콘텐츠 품질을 결정합니다.
✅ 요약 체크리스트
- 이미지 alt 텍스트는 필수! 이미지 내용을 간결하고 구체적으로 설명
- title은 보조 정보로 사용자 편의 제공
- 중복 키워드 남용 금지
- SEO, 접근성, 사용자 경험까지 1석 3조 효과
- 이미지 많은 블로그일수록 alt와 title은 반드시 관리할 것
이미지는 단순한 꾸밈 요소가 아닙니다.
적절한 이미지 alt 텍스트 속성은 검색엔진에게 콘텐츠의 핵심을 전달하고, title 속성은 사용자에게 맥락 있는 보조 정보를 제공하는 중요한 역할을 합니다.
특히 이미지 기반의 콘텐츠가 많은 블로그, 리뷰, 여행, 인포그래픽 포스트에서는 alt와 title 설정이 콘텐츠 품질을 좌우할 수 있습니다.
지금 작성 중인 블로그 글에 삽입된 이미지 alt 텍스트들을 다시 한 번 확인해 보세요.
“의미 있는 설명이 있는지”, “검색에 노출되기에 적절한지” 체크하면서,
SEO와 접근성을 고려한 이미지 alt 텍스트와 title 속성을 정확히 설정해 보시기 바랍니다.
👉 지금 당장 한 포스트만이라도 수정해보세요.
작은 차이가 블로그 전반의 품질 향상과 애드센스 승인 가능성을 크게 높여줍니다.
단순한 설명이 아니라, SEO 핵심 요소입니다.
구글 공식 이미지 SEO 가이드
에서도 alt 속성의 중요성을 강조하고 있습니다.
