워드프레스나 티스토리 등 웹사이트에서 이미지를 사용할 때 alt(알트) 속성 태그, 혹은 TITLE 속성 태그를 넣으라는 말을 들어보신 적이 있으실 텐데요. 이번 시간에는 이게 왜 필요한지 그 중요성에 대해 설명드리려고 합니다. 그리고 귀찮으면 안해도 되는지, 자동으로 대신해주는 플러그인은 없는지 그런 부분에 대해서 한 번 정리해볼까 합니다. 아랫글을 참조해주세요
웹 페이지에 검색크롤러가 접근하게 되면, 모든 글과 이미지에 대한 정보를 수집하게 됩니다. 이 때 이미지 파일들은 그림 자체의 의미를 봇이 이해할 수 없기 때문에, 이미지에 대한 정보를 제공하고 웹 접근성을 향상시키기 위해 “alt” 속성과 “title” 속성을 사용할 수 있습니다. 그럼 이 두가지 태그가 어떤 의미인지 알아보겠습니다.
alt 속성 (Alternative Text)
- “alt”는 “대체 텍스트”의 약어로, 이미지를 설명하는 텍스트를 나타냅니다.
- “alt” 속성은 주로 웹 접근성을 개선하고 시각 장애인 또는 화면 판독기 사용자가 웹 페이지에서 이미지에 대한 정보를 얻을 수 있도록 도와줍니다.
- “alt” 속성은 이미지가 로드되지 못할 때 대체 텍스트를 보여주며, 텍스트 브라우저에서 이미지를 대체하는 역할도 합니다.
- “alt” 속성을 입력할 때는 이미지가 나타내는 내용을 간결하게 설명하는 텍스트를 포함해야 합니다. 만약 이미지가 본문의 주요 내용이라면 이 내용을 “alt” 속성으로 전달하는 것이 좋습니다.
쉽게 말해 이미지를 잘 볼 수 없는 환경에서 이 이미지가 어떤 이미지다 라는 정보를 주는 개념이라고 보시면 됩니다.
예시) <img src="apple.jpg" alt="사과 이미지">
워드프레스에서 알트 속성은 이미지를 넣으면 우측에 대체텍스트라는 문구로 나와 있습니다. 이곳에 원하는 텍스트를 넣으면 알트 속성이 추가됩니다.
title 속성 (Title Attribute)
- “title” 속성은 이미지 위에 마우스를 올렸을 때 마우스 오버되는 박스(tool tip)로 그림을 설명해줍니다.
- 이 속성은 이미지에 대한 추가 정보를 제공하거나 설명을 더 자세하게 나타내는 데 사용될 수 있습니다.
- “title” 속성은 주로 사용자 경험을 개선하기 위해 사용되며, 웹 접근성에는 “alt” 속성이 더 중요합니다.
- “title” 속성은 이미지와 관련된 부가적인 정보를 제공하는 데 유용합니다.
보통 이미지 위에 마우스오버를 하면 텍스트가 나왔던 경험이 있으실텐데요, 바로 그걸 지정하는 속성입니다.
예시) <img src="apple.jpg" alt="사과 이미지" title="신선한 빨간 사과">꼭 이 태그를 써야하나요?
alt” 속성은 필수이고 “title” 속성은 선택 사항입니다.
“alt” 속성은 웹 접근성 및 HTML의 기본 규칙에 따라 이미지 태그에 필수로 포함해야 하는 속성 중 하나입니다. “alt” 속성을 사용하지 않으면 웹 접근성이 저하되고 시각 장애인 또는 텍스트 브라우저 사용자가 이미지에 대한 정보를 얻을 수 없습니다. 따라서 “alt” 속성은 반드시 입력해야 합니다.
“title” 속성은 선택 사항입니다. 이 속성은 단지 사용자 경험을 향상시키기 위해서나, 이미지에 대한 부가적인 정보나 설명을 제공할 때 유용합니다. 하지만 “title” 속성을 사용하지 않아도 이미지는 정상적으로 표시되며 웹 접근성에 큰 영향을 미치지 않습니다.
자동 플러그인 소개
티스토리 같은 경우는 알트태그를 수동으로 다 입력해야겠지만 워드프레스에서는 자동으로 알트속성 및 타이틀 속성을 넣어주는 플러그인이 있습니다. 둘 다 비슷한 기능이 있지만 저는 랭크매스에서 해당 기능을 쓰고 있습니다. 그 이유는 아랫글에서 확인하실 수 있습니다.
참고로 티스토리에서 알트태그를 자동으로 넣는 방법 공유드립니다.