본문 바로가기

Web/Coding

이미지의 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 이미지 태그와 예시는 아래와 같습니다.

<img src=”http://ludens.kr/image.jpg” alt=”대체문구 예시” width=”300” height=”238”>
대체문구 예시

이미지의 Title태그란?

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

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

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

<img src=”http://ludens.kr/image.jpg” alt=”대체문구 예시” title=”타이틀태그 예시” width=”300” height=”238”>
대체문구 예시

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

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

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

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


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

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