🖼️ alt 속성과 title 속성, 뭐가 다른가요?
블로그 스팟 첫 글을 작성하고 이미지를 올릴 때
<img> 태그를 사용방법이 티스토리랑 살짝 달려서 당황했어요.
바로 alt(대체텍스트)와 title(제목텍스트)입니다.
“둘 다 설명 같은 건데 뭐가 다르지?” 하고 궁금해서 찾아 봤어요.
📌 alt(대체 텍스트)란?
- 의미: 이미지가 로딩되지 않거나, 시각장애인용 스크린리더에서 읽히는 대체 텍스트
- 역할: SEO(검색 노출)에 직접 영향 + 웹 접근성 향상
- 작성 팁: 이미지 내용을 간결하게 설명하며 핵심 키워드 자연스럽게 포함.
- 이건 꼭 쓰세요!
🔍 title(제목 텍스트)란?
- 의미: 사용자가 마우스를 이미지 위에 올렸을 때 뜨는 설명창 (툴팁 텍스트)
- 역할: 사용자에게 부가 정보 제공 (SEO에는 영향 적음)
- 작성 팁: alt와 비슷한 내용을 조금 더 상세하게 설명하거나, 사용자에게 팁 제공
- 이건 선택사항!
📊 alt vs title 한눈에 비교
| 속성 | 설명 | 검색 최적화(SEO) | 사용자 경험 | 필수 여부 |
|---|---|---|---|---|
| alt | 이미지의 대체 텍스트 |
✅ 직접적인 영향 있음 |
✅ 시각장애인도 정보 이해 가능 |
✅ 꼭 써야 함 |
| title | 마우스 올리면 뜨는 설명창 |
❌ 영향 거의 없음 | ✅ 툴팁 제공 | ❌ 선택 사항 |
🧪 실제 예시
alt="이미지 태그에서 alt와 tile 속성의 위치와 역할을 설명한 인포그래픽"
title="alt는 검색 최적화, title은 사용자 편의 툴팀 역할"
둘 다 잘 쓰면 내 블로그 이미지도 '읽히는 콘텐츠'가 되겠죠?💬 꼭 기억해두세요!
- alt는 검색엔진이 이미지를 '읽게' 해주는 길잡이
- title은 사람에게 살짝 알려주는 설명 도구
두 속성을 잘 활용하면 내 블로그의 이미지도 검색에 잘 노출되고,
방문자에게도 친절한 블로그라는 인상을 줄 수 있다고 해요. 😊
📎 관련 참고 자료
- MDN Web Docs – <img> 태그와 alt 속성 설명
- 코딩에브리바디 – title 속성의 올바른 이해와 사용
- 일모리 – alt와 title 속성의 바른 의미
- 디지털 노마드 블로그 – 이미지 태그 속성 alt와 title 설명
✨ 오늘의 일상에 작은 플러스가 되셨길 바랍니다 ✨
플러스지기 | Plus Keeper🍀