이미지는 웹 사이트를 매력적이고 시각적으로 돋보이게 만드는 데 많은 도움이 된다. 그러나 대체 텍스트('Alt Text' 또는 'Alt Tag')로 이미지를 최적화하지 않으면 사이트의 사용자 경험과 접근성을 향상시킬 수 있는 중요한 기회를 놓치기 된다.

웹사이트 내 이미지를 올바르게 사용하려면 먼저 대체 텍스트(Alt Tag)가 무엇인지 이해하는 것이 중요하다. 이 글을 통해서 Alt Tag가 무엇이며 왜 사용되는지 설명한다. 또한 그에 대한 모범 사례를 소개한다.

Alt 태그란 무엇인가?

대체 텍스트(Alt Tag)는 HTML의 이미지에 추가되어 웹페이지의 내용과 컨텍스트를 설명한다. 미디어 파일을 제대로 로드하지 못해 표시할 수 없는 경우 대체 텍스트(Alt Tag)가 이미지 컨테이너에 나타난다.

대체 텍스트(Alt Tag)는 시각 장애가 있는 사용자와 같은 스크린 리더를 사용하는 사람들이 웹사이트의 내용을 이해하도록 도와준다. 또한 검색엔진 봇이 사이트를 크롤링하고 색인을 생성하여 순위를 지정할 때 이미지를 해석하는데 사용한다.

이미지 태그 내에 추가된 품질 대체 태그는 이미지의 내용뿐만 아니라 페이지에서의 목적을 설명하는 간단한 설명이다. HTML 코드에서 사용하면 전체 이미지 태그는 다음과 같다.

이미지 대체 태그는 이미지 제목 또는 캡션과 혼동되기도 한다. 그러나 이미지 제목은 다른 유형의 속성이다. 사용자가 이미지 위로 마우스를 가져 가면 팝업 텍스트로 표시된다. 반면에 캡션은 일반적으로 그 아래에 이미지와 함께 나타나며 이에 대한 추가 정보 나 세부 정보를 제공한다. 정상적인 상황에서는 방문자가 이미지의 대체 태그를 볼 수 없다.

이미지에 Alt Tag를 사용하는 이유는 무엇인가?

Alt 태그는 다양한 용도로 사용된다. 그것들을 사용할 필요는 없지만, 사용하면 몇 가지 주요 이점이 있다. 검색엔진 크롤러와 화면 읽기 도구에서 모두 사용되므로 웹 접근성 및 검색엔진 최적화(SEO) 의 중요한 구성 요소다.

그것들은 웹 접근성을 향상시킵니다.

Alt 태그는 보조 기술이나 텍스트 전용 브라우저를 사용하는 경우에도 방문자가 웹 사이트의 콘텐츠에 액세스하고 즐길 수 있도록 한다. 시각 장애가 있는 사용자가 웹 사이트를 방문하면 스크린 리더가 해당 페이지의 텍스트를 읽는다. 이미지에 도달하면 alt 태그를 사용하여 해당 이미지가 무엇인지 설명한다.

alt 태그가 없으면 스크린 리더가 대신 이미지 파일 이름을 읽을 수 있다. 이는 일반적으로 이미지를 올바르게 설명하는 데 효과적이지 않을뿐만 아니라 특히 파일 이름이 SEO 최적화되지 않은 경우 혼란스러울 수 있다.

WordPress에서 이미지의 대체 태그 필드를 비워 두는 경우와 같이 화면 판독기는 해당 이미지를 모두 건너 뛴다. 웹 페이지에 포함된 이미지가 목적에 부합한다고 가정하면, 이러한 부재는 방문자가 여러분의 콘텐츠를 소비할 때 의도한 가치나 경험을 충분히 얻지 못하고 있음을 의미한다.

그것들은 여러분 웹 사이트의 검색엔진 순위를 높일 수 있다.

이미지 대체 태그를 사용하면 타겟팅하려는 키워드의 순위를 쉽게 지정할 수 있다. 검색엔진 봇(bot)은 지능적이지만 인간이 할 수 있는 것과 같은 방식으로 이미지의 시각적 측면을 해석하고 이해할 수 없다.

대체 속성은 이미지를 번역하고 보다 구체적으로 관련 키워드를 통합 하기 위한 텍스트 기반 대안을 제공한다. 대상 키워드가 포함된 텍스트 설명은 이미지 검색에서 순위가 ​​높아질 가능성이 높아진다.

검색엔진 최적화(SEO)에서 이미지가 수행하는 중요한 역할을 강조하려면 “킹 사이즈 침구”에 대한 검색엔진 결과 페이지(SERP)를 고려하길 바란다.

첫 번째 페이지는 텍스트 기반 결과만 생성하는 것이 아니다. 이미지 결과도 많이 있다. alt 태그는 최적화되고 올바르게 사용되면 검색엔진 최적화(SEO)를 강화하고 하이퍼 링크로 클릭 가능한 이미지를 생성하여 이와 같은 검색에 표시 할 수 있다. 이는 전자 상거래 사이트 및 방문 페이지에 특히 유용하다.

HTML에서 이미지 대체 태그를 추가하는 방법

대체 태그를 추가하고 편집하기 위한 모듈이 포함된 WordPress 또는 다른 CMS를 사용하면 HTML 코드가 자동으로 추가된다. 또한, 코드를 직접 추가하려면 쉽게 할 수 있다.

HTML 코드는 이미지 태그를 표시한다. alt 속성이 비어 있음을 알 수 있다. 따옴표 안에 텍스트를 넣으면 된다.

이미지 Alt 태그 작성을 위한 팁과 모범 사례

alt 태그를 만들 때 명심해야 할 몇 가지 핵심 사항이 있다. 이러한 모범 사례를 준수하면 대체 태그를 보다 효과적으로 만들 수 있다.

• 구체적이고 서술적이어야 한다.
  alt 태그의 목적은 이미지를 설명하는 것이므로 가능한 한 구체적이기를 원한다. 설명이 충분한지 확실하지 않은 경우 해당 텍스트 줄만 볼 경우 어떤 이미지를 시각화할 지 고려한다.
  
  
• 짧게 유지한다.
  자세하게 설명하고 싶지만, alt 태그를 단락 길이(또는 전체 문장)로 만들 필요는 없다. 최대 100 ~ 125자를 목표로 한다.
  
  
• 중복하지 말하야 한다.
  alt 태그를 최대한 활용하기 위해 불필요한 단어를 포함하지 않도록 한다. 여기에는 설명 앞에 “그림의” 또는 “이미지의”를 추가하는 것이 포함된다. 이러한 요소는 이미 암시되어 있으므로 불필요하다.
  
  
• 관련성 높은 키워드를 자연스럽게 통합한다.
  타겟 키워드를 고려하고 가능한 경우 페이지 컨텍스트 내에 유기적으로 통합한다. 텍스트와 일치하는 관련성이 높은 이미지를 사용할 때 더 쉽다.
  
  
• 키워드 스터핑(Keyword stuffing)을 피하라.
  alt 태그에 키워드를 사용하면 SEO를 개선할 수 있지만 과도하게 사용하지 않도록 주의한다. 키워드 스터핑은 실제로 검색엔진 최적화(SEO)에 해를 끼치고 사용자 경험을 저하시킬 수 있다.
  
  
• 텍스트 대신 이미지를 사용하지 말아야 한다.
  alt 태그의 주요 목적은 페이지의 시각적 요소를 처리하고 해석할 수 없는 컴퓨터에 텍스트 컨텍스트를 제공하는 것이다. 따라서 이미지 내에서 텍스트, 특히 제목과 페이지 제목에 텍스트를 사용하는 것은 적합하지 않다.

이미지에 대한 대체 태그를 만들 때 항상 목표는 이미지를 볼 수 없는 사람들에게 이미지를 설명하는 것이다. 검색엔진 최적화(SEO)와 키워드(keyword)를 고려하는 것은 분명히 현명한 아이디어(idea)이지만 실제 사용자를 염두에 두고 alt 태그를 작성하면 보다 긍정적인 결과를 얻을 수 있다.

결론

이미지는 웹 페이지의 모양을 개선하고 더 흥미롭고 유익하며 흥미 진진하게 만들 수 있다. 그러나 가치를 극대화하려면 alt 태그를 추가하는 것이 가장 좋다. 이처럼 간단하지만 설명적인 설명은 사용자와 검색 엔진 모두에 대한 컨텍스트를 제공한다. 이미지 대체 태그는 사용자 환경을 개선하고 접근성을 향상시키며 관련 키워드에 대한 순위를 쉽게하도록 도와준다. (참조: What Is an Alt Tag and How Should You Use It?)

출처: https://www.designlog.org/2512732?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+DesignlogOfMaru+(DESIGN+LOG+-+Design+%26+Digital+Convergence+Webzine) [디자인로그(DESIGN LOG)]