이미지의 Alt태그와 Title태그의 중요성

HTML에 쓰이는 이미지태그(img)에 보면 Alt속성Title속성이 있습니다. 이 두가지 속성의 존재를 아는 분들은 귀찮아서 안쓰고, 모르는 분들은 몰라서 못쓰고 하는 그런 속성이죠. 아시는 분들은 아시겠지만 의외로 쓸모 없어보이는 이 두가지 속성이 웹사이트 또는 블로그 유입에 영향을 끼칩니다.(국내는 그렇게 큰 영향은 없습니다만;;) 긴 글이긴 한데, 저도 한번 자세히 알고싶어서 번역해보았습니다.

이 글은 The Importance of Adding Alt Tags and Title Tags to Images on Your Website의 번역입니다.


검색엔진최적화(이하 SEO)의 전문가가 아닌 사람들에게는 ‘SEO’가 뭔가 대단해 보일 수 있습니다. 하지만 의외로 여러분이 기본적인 내용만 잘 따른다면, 관리하고 있는 웹사이트를 검색엔진(구글, 빙, 야후 등)에 성공적으로 최적화 시킬 수 있습니다.
웹디자이너나 웹개발자들조차 간과하고 넘어가는 중요한 사항 중 하나는 ‘웹사이트에 있는 이미지를 검색엔진에 최적화시키기’입니다. 이미지는 방문객 수에 꽤 큰 영향을 끼칠 수 있습니다.

사람들은 일상적으로 ‘구글 이미지 검색’과 같은 도구를 사용하여 웹서핑을 합니다. 만약 웹사이트에 올려진 이미지에 올바른 키워드로 검색엔진에 맞춰져있다면, 더 많은 트래픽을 유도할 수 있을 것입니다.

이미지의 Alt태그란?

Alt태그 또는 Alt속성은 이미지의 “대체문구”(alternative text)입니다. 보통 Alt태그는 이미지를 설명하는 목적으로 만들어집니다. 웹사이트라면 Alt태그는 사람들에게 보여지지 않습니다. 웹사이트에서 Alt태그가 사용되는 경우가 한가지 있는데, 시각장애인이 음성기반의 소프트웨어로 웹서핑을 할 때 쓰입니다. Alt태그는 시각장애인들에게 어떤 컨텐츠가 지금 보고있는 웹사이트에 있는지 알려주는데 도움을 줍니다. 반면에 시각장애인들을 제외한 다른 대부분의 사람들을 위해서는 검색엔진에 사용됩니다. 검색엔진이 여러분의 웹사이트를 크롤링할때, Alt태그를 이용하여 컨텐츠를 더 잘 이해하고 검색결과 순위에서 적절하게 색인합니다.

Alt태그를 “볼 수 있는” 곳이 한군데 있습니다. 바로 HTML형식의 이메일을 읽을때죠. HTML형식의 이메일을 Macy’sKohl’s와 같은 회사에서 받아본 적이 있나요? 가끔 이런 이메일들은 이미지를 보여줄 것인지 물어봅니다. 그러면 여러분은 상단의 어딘가를 클릭해서 이미지를 표시합니다. 이렇게 이미지를 표시하기 전에 스크롤을 내려보면 이미지의 배치와 그 안에 있는 글을 볼 수 있을 것입니다(Alt태그가 있다면 말이죠)

Alt태그가 적용된 HTML 이미지 태그와 예시는 아래와 같습니다.

이미지의 Title태그란?

Title태그는 간단하게 말하면 이미지의 제목입니다. 웹사이트에 있는 이미지에 마우스를 올리면 나오는 문구를 본 적이 있나요? 바로 그 문구는 이미지의 Title태그가 표시되는 것입니다. Title태그의 가장 큰 목적은 웹페이지를 읽는 사람들에게 이미지에 대한 정보를 좀 더 제공하기 위함입니다. Title태그는 이미지 이외에 다른 웹페이지를 링크할때도 쓰입니다. 물론 이 경우에도 링크된 컨텐츠에 마우스커서를 올리면 Title태그의 내용을 볼 수 있습니다. 보이지 않는 Alt태그에는 딱히 완전한 문구를 넣을 필요가 없지만, Title태그는 여러분의 독자가 볼 수 있기 때문에 정확한 키워드와 완전한 문구가 들어가야 합니다.

Title태그는 3~5개정도의 단어로 구성되어야 합니다. 어떤 사람들은 미련하게 긴 문장(문단)을 Title태그에 넣습니다. Title태그는 짧으면서 유익해야 합니다. Alt태그에서 이야기했던 SEO가 Title태그에도 같이 적용됩니다.

Title태그가 적용된 HTML 이미지 태그와 예시는 아래와 같습니다.

Alt태그와 Title태그 사용의 장점

Alt태그와 Title태그로 이미지를 최적화했을 때 얻을 수 있는 장점은 다음과 같습니다.

  • 검색유입의 증가
  • 웹사이트에 대한 높은 품질의 검색
  • 더 많은 유효방문자

Alt태그와 Title태그를 적용한다고 해서 다양한 이익을 가져다 주지는 않습니다. 하지만, 가장 큰 장점은 검색유입의 (꽤 큰) 증가입니다. 잠깐만 생각해보세요. 여러분 웹사이트의 트래픽과 관련한 문제에 두 손 놓고 있을건가요? 여러분들은 약 25% 더 트래픽을 높일 수 있습니다. 단지 지금 올려져 있는 이미지를 최적화하고 새로 업로드 할 이미지를 최적화하는 것만으로 말이죠. 특히 이미지검색으로 큰 효과를 볼 수 있을 것입니다.


국내사정에는 다 맞는다고 할 수는 없지만, 안하는 것보다는 낫다는 생각입니다. 네이버에서 안받아 주더라도 구글에서는 받아주겠죠?(…)

덧) 제목만 보고 번역해봤는데 어째 글이 좀 그렇네요.
덧2) 워드프레스에는 자동으로 Alt태그와 Title태그를 달아주는 플러그인도 있습니다.

Advertisements

3 thoughts on “이미지의 Alt태그와 Title태그의 중요성”

  1. 모르고 있었는데 유용한 정보였군요! 글 하나에 사진을 여러 장 집어넣을 경우 대표적인 사진 하나에다 이 태그들을 집어넣는 방법을 생각해 보아야겠어요! 매우 유용한 정보 잘 보고 갑니다 ^^

    1. 티스토리에서는 글을 쓸때 이미지를 넣고 이미지를 클릭하면 대체텍스트(Alt태그)는 바로 입력할 수 있지만, title태그는 안된다죠ㅠㅠ

댓글 남기기

This site uses Akismet to reduce spam. Learn how your comment data is processed.