티스토리 블로그 이미지에 알트 태그(Alt Tag) 추가하기

티스토리 블로그 이미지에 알트 태그(Alt Tag) 추가하는 방법을 알아보겠습니다. 이미지를 넣을 때 알트 태그를 작성해 주면 구글 SEO에 맞는 글을 작성하는데 도움이 됩니다.

티스토리에서는 2가지 방법으로 알트 태그를 넣을 수 있습니다.

티스토리 인터페이스는 네이버 블로그와 달리 HTML 형식으로 글을 쓸 수 있으며 코드를 수정할 수 있도록 되어 있습니다. 따라서  HTML에 대한 기본 지식이 있으면 좀 더 깔끔하게 글을 작성할 수 있다는 장점이 있습니다.

알트 태그(Alt Tag)란?

알트 태그는 이미지를 대체하는 텍스트입니다. 시각장애인들이 인터넷에서 이미지에 대한 정보를 확인할 수 없을 때 음성으로 공유하는 기능을 제공한다고 보시면 됩니다. 검색엔진에서도 이미지 인식을 할 때 알트 태그를 체크합니다.

구글이나 빙처럼 검색엔진에 글이 잘 노출되기를 원한다면 SEO에 맞게 작성하는 것이 중요합니다. SEO에서 강조하는 것 중 하나가 이미지에 알트 태그의 유무이니 가급적이면 작성하시는 것을 권합니다.

티스토리 블로그 이미지 옵션

예전에는 티스토리 블로그 기본모드에서 알트 태그를 입력하는 기능이 없었지만, 인터페이스가 업그레이드된 후에는 이미지 옵션에 추가되었습니다.

현재 지원되고 있는 티스토리 블로그의 이미지 옵션은 다음과 같습니다.

  • 대표 이미지 설정
  • 이미지 편집
  • 이미지 크기 변경
  • 이미지 정렬 방법
  • 이미지에 링크 걸기
  • 알트 태그(대체 텍스트)
  • 캡션(이미지 설명)
이미지-옵션

이미지 안에는 대표 이미지로 설정할 수 있는 버튼이 오른쪽 상단에 붙어 있습니다.

이미지 하단에는 ‘이미지를 설명해 보세요’라는 표시가 뜨는데, 이것은 Alt Tag가 아니라 Caption입니다.

이미지에 알트 태그(Alt Tag) 추가하기

기본모드

기본모드에서 상단 맨 왼쪽에 있는 메뉴를 선택해 이미지를 추가합니다. 추가한 이미지를 누르면 위에 해당 옵션이 뜹니다.

이미지-추가

가장 오른쪽에 있는 톱니바퀴 모양의 아이콘을 선택하면 대체텍스트(Alt Tag)를 입력하는 란이 뜹니다. 이미지를 설명하는 내용을 넣은 후 확인을 누르면 됩니다.

alt-tag가-추가된-모습
이미지 설명은 caption입니다.

HTML 모드

상단 오른쪽에 있는 기본모드를 누르면 HTML 모드로 전환할 수 있습니다.

HTML모드

HTML모드에서는 일반모드에서 작성한 글을 코드 형태로 보여줍니다. 여기에서 알트 태그를 추가하거나 변경, 삭제할 수 있습니다.

헷갈려하는 분들이 있을 것 같아서 하단에 있는 caption도 함께 작성해 보았습니다.

Alt Tag는 시각장애인들을 위해 검색봇이 음성으로 변경해 주는 기능을 한다면 caption은 이미지에 대한 부가 설명을 한다고 보시면 될 것 같습니다.

HTML코드

티스토리 블로그 이미지에 알트 태그(Alt Tag) 추가는 어떻게 하는지 정리해 보았습니다. HTML모드는 어렵게 느껴질 수 있지만 필요 없는 코드들을 지울 때 유용하니 차근차근 살펴보시기 바랍니다.