알트 이미지(Alt Text)란? 블로그 SEO와 접근성을 높이는 숨은 비밀

알트 이미지(Alt Text), 티스토리에서는 이렇게 넣어야 합니다 – SEO와 접근성을 위한 완벽 가이드

블로그에 이미지를 올릴 때, 그냥 삽입만 하고 넘어가시나요?
‘알트 이미지(alt text)’는 화면에는 드러나지 않지만, 검색 최적화(SEO)와 웹 접근성을 높이는 중요한 역할을 합니다.
이번 글에서는 alt 텍스트의 개념부터, 티스토리에서 이를 실제로 적용하는 방법까지 구체적으로 설명드립니다.

 

1. 티스토리에서 이미지를 넣으면 처음엔 이렇게 나옵니다

티스토리 기본 에디터로 이미지를 삽입하면 아래와 같이 자동 코드가 생성됩니다:

이 구조는 이미지 출력은 되지만, alt 속성을 넣을 수 없다는 단점이 있습니다.

 

2. alt 텍스트를 넣기 위한 준비 – 먼저 발행하고 주소를 확인해야 합니다

1. 글을 1회 발행한 후, 이미지에 마우스 오른쪽 클릭 → 이미지 주소 복사

예시 주소 (복사된 실제 이미지 주소):

https://blog.kakaocdn.net/dn/dsVHyQ/btsNUGNVm2N/6zJ9cwDLAWto31NZyb4YK1/img.png

 

3. HTML 모드에서 alt 속성을 포함한 이미지 태그로 수정

복사한 주소를 아래처럼 <img> 태그에 넣고 alt="..." 속성을 추가합니다.

<p style="text-align:center;">
  <img src="https://blog.kakaocdn.net/dn/dsVHyQ/btsNUGNVm2N/6zJ9cwDLAWto31NZyb4YK1/img.png"
       alt="해변을 배경으로 한 손에 든 맥주 한 잔 – 여름 바다와 시원한 맥주의 조화">
</p>

(위 이미지는 alt 텍스트가 적용된 HTML 방식입니다)

 

4. alt 텍스트가 적용되었는지 확인하려면?

alt 속성은 화면에 보이지 않기 때문에 다음과 같은 방법으로 확인할 수 있습니다:

• ① HTML 모드에서 확인
  티스토리 글쓰기 상단의 </> 버튼을 눌러 HTML 모드로 전환 후, <img> 태그에 alt="..."가 포함되어 있는지 확인합니다.
• ② 크롬 개발자 도구(F12)
  발행된 블로그 글에서 F12 → Elements 탭으로 이동해 이미지 태그를 확인하면, alt 속성이 적용되어 있는지 확인할 수 있습니다.
• ③ 이미지 경로를 일부러 깨뜨려보기
  이미지 주소의 파일명을 일부러 틀리게 수정하면 이미지가 깨지는데, 이때 alt 속성이 화면에 텍스트로 표시되면 제대로 입력된 것입니다.
• ④ 스크린 리더 테스트
  Mac의 VoiceOver, Windows의 NVDA 등의 스크린 리더를 사용하면 alt 텍스트가 음성으로 읽힙니다.

✅ 일반 사용자라면 HTML 모드 또는 크롬 개발자 도구(F12)를 활용한 확인이 가장 쉽고 빠릅니다.

 

5. 왜 alt 텍스트가 중요한가요?

• SEO 최적화: 이미지가 검색 결과에 노출될 가능성을 높입니다.
• 웹 접근성: 시각장애인이 스크린 리더를 통해 이미지 내용을 이해할 수 있습니다.
• 이미지 로딩 실패 대비: 이미지가 깨졌을 때 대체 텍스트가 보입니다.

 

6. alt 이미지 적용 순서 정리

1. 티스토리에서 이미지를 삽입
2. 글을 1회 발행 → 이미지 주소 복사
3. 글 수정 → HTML 모드로 진입
4. <img src="..." alt="..."> 형식으로 직접 입력
5. 개발자 도구 또는 코드 보기로 alt 적용 여부 확인

 

 

📌 함께 읽으면 좋은 글

 

블로그 이미지는 왜 WebP로 저장해야 할까? 티스토리 최적화부터 썸네일 속도까지

 

블로그 썸네일, 이젠 직접 만든다 -무료 툴 Inkscape로 대표이미지 완성하기