본문 바로가기
블로그

티스토리 블로그 운영자가 반드시 알아야 할 alt 태그란? SEO 노출부터 작성법까지

by 라이프 시프터 2025. 4. 26.
반응형

ALT 태그 삽입 필수, 적용 방법 꿀팁
ALT 태그 작성방법

티스토리 블로그를 운영하다 보면 ‘alt 태그(대체 텍스트)’라는 용어를 자주 접하게 됩니다. 많은 초보자분들이 alt 태그가 무엇인지, 왜 꼭 넣어야 하는지, 실제로 어떻게 작성해야 하는지 궁금해하실 텐데요.
오늘은 alt 태그의 개념부터 SEO(검색엔진최적화)와의 관계, 그리고 티스토리에서 alt 태그를 다는 방법까지 초보자도 이해하기 쉽도록 자세히 알아보려고 해요.


■ alt 태그란 무엇인가?

alt 태그(정확히는 alt 속성)는 HTML에서 이미지를 설명하는 텍스트예요. 웹페이지에 이미지를 삽입할 때 `<img>` 태그 안에 `alt="이미지 설명"` 형태로 추가하는데, 이 텍스트는 이미지가 보이지 않을 때 대신 나타나거나, 시각장애인을 위한 프로그램이 이미지를 읽어줄 때 사용됩니다.

예를 들어, ‘고양이 자는 모습’ 그림을 올릴 때 alt 태그에 ‘고양이 자는 모습 사진’이라고 입력하면, 이미지를 볼 수 없는 사용자나 프로그램이 이 그림이 무엇인지 알 수 있습니다.


■ alt 태그를 꼭 넣어야 하는 이유

1. 웹 접근성 향상

alt 태그는 시각장애인 등 이미지 정보를 직접 볼 수 없는 사용자에게 이미지의 내용을 전달해 줍니다. 시각장애인을 위한 프로그램이 alt 태그에 입력된 설명을 읽어주기 때문에, 모든 사용자가 콘텐츠를 이해할 수 있도록 도와준다고 합니다.

2. 검색엔진최적화(SEO)에 유리

검색엔진(구글, 네이버 등)은 이미지 자체를 ‘읽지’ 못해요. 대신 alt 태그에 입력된 텍스트를 통해 이미지의 내용을 파악하고, 페이지의 주제와 연관성을 분석합니다. alt 태그가 잘 작성되어 있으면 이미지가 검색엔진에 노출될 확률이 높아지고, 블로그 전체의 노출 순위(SEO)에도 긍정적인 영향을 줍니다. (저도 처음엔 몰랐던 사실이에요. 그래서 정말 후회했죠)

특히 구글 이미지 검색, 네이버 이미지 검색 등에서 내 블로그의 이미지가 상위에 노출될 수 있는데, 이때 alt 태그가 중요한 역할을 합니다.

3. 이미지가 깨졌을 때 대체 정보 제공

네트워크 문제 등으로 이미지가 로드되지 않을 때, alt 태그에 입력한 텍스트가 대신 표시되어 방문자가 어떤 이미지였는지 알 수 있습니다.

★ 어떤 검색엔진에 유리할까?
alt 태그는 구글, 네이버, 다음 등 모든 주요 검색엔진에서 이미지와 웹페이지의 내용을 이해하는 데 활용됩니다. 특히 구글은 alt 태그를 매우 중요하게 여기며, 이미지 검색 결과와 웹페이지 순위 결정에 alt 태그 정보를 적극적으로 반영합니다. 네이버 역시 이미지 검색 및 페이지 주제 파악에 alt 태그를 참고합니다.

 

■ 티스토리에서 alt 태그 작성 방법 

1. 기본(에디터) 모드에서 입력하기

   - 이미지를 삽입한 뒤, 이미지를 클릭합니다.
   - 우측 상단의 톱니바퀴(설정) 아이콘을 클릭합니다.
   - ‘대체 텍스트’ 입력란에 이미지 설명을 작성합니다.
   - '확인' 하면 자동으로 alt 태그가 적용됩니다. 이걸로 끝!

기본 모드에서 alt 태그 입력하기
기본 모드에서 alt 태그 입력하기


2. HTML 모드에서 직접 입력하기

    * 단, 티스토리에서는 HTML 모드에서 직접 입력할 때 오류가 발생할 수 있으니, 기본 모드에서 입력하는 방법을 추천해요.
   - 에디터를 HTML 모드로 전환합니다.
   - 아래의 alt 태그 적용 전 - 적용 후 예시를 참조해 보세요.

alt 태그 적용 전 html 예시
alt 태그 적용 전 html 예시

 

alt 태그 적용 후 html 예시
alt 태그 적용 후 html 예시



■ alt 태그 작성 시 주의사항 및 팁

  • 이미지를 명확하고 간결하게 설명해야 해요.
      예: “노란 튤립 꽃다발”
  • 키워드를 자연스럽게 포함하면 SEO에 도움이 됩니다. 
      예: “서울 남산타워 야경 사진” 
  • 키워드만 나열하거나 의미 없는 문장은 피하세요. (이러면 오히려 불리할 수 있어요)
  • 장식용 이미지(예 : 단순 구분선 등)는 alt를 비워두거나 “ ”로 처리할 수 있습니다.

alt 태그는 단순히 ‘이미지 설명’ 그 이상이네요~!🤓
웹 접근성을 높이고, 검색엔진에 내 블로그를 더 잘 알릴 수 있는 필수 요소입니다. 티스토리 블로그를 운영하신다면, 앞으로 이미지를 올릴 때 반드시 alt 태그를 꼼꼼히 작성해 보세요.
작은 습관이 블로그의 성장과 더 많은 방문자 유입에 큰 도움이 될 거예요.
이 글을 읽은 여러분 모두 도움이 되셨으면 좋겠습니다!!🤩

반응형