이미지는 웹사이트를 매력적이고 시각적으로 돋보이게 만드는 데 많은 도움이 된다. 그러나 ALT 태그 (‘대체 텍스트’, ‘ALT Text’ 또는 ALT Tag’)로 이미지를 최적화 하지 않으면 사이트의 사용자 경험과 접근성을 향상할 중요한 기회를 놓치게 된다.
웹사이트 내 이미지를 올바르게 사용하려면 먼저 대체 텍스트(ALT Tag)가 무엇인지 이해하는 것이 중요하다. 이 글을 통해 대체 텍스트가 무엇이며 왜 사용되는지 설명하려고 한다.
ALT Tag란?
ALT Tag, 즉 대체 텍스트는 HTML의 이미지에 추가되어 웹페이지의 내용과 컨택스트를 설명한다. 미디어 파일을 제대로 로드(load)하지 못해 표시할 수 없는 경우 대체 텍스트가 이미지 컨테이너에 나타난다.
대체 텍스트는 시각 장애가 있는 사용자와 같은 스크린 리더를 사용하는 사람들이 웹사이트의 내용을 이해하도록 도와준다. 또하한 검색엔진 봇이 사이트를 크롤링하고 색인을 생성해 순위를 지정할 때 이미지를 해석하는데 사용한다.
이미지 태그 내에 주관된 품질 대체 태그는 이미지의 내용뿐 아니라 페이지에서의 목적을 서술하는 간단한 설명이다.
이미지 대체 태그는 이미지 제목 도는 캡션과 혼동되기도 한다. 그러나 이미지 제목은 다른 유형의 속성이다. 사용자가 이미지 위로 마우스를 가져 가면 팝업 텍스트로 표시된다. 반면에 캡션은 일반적으로 그 아래에 이미지와 함께 나타나며 이에 대한 추가 정보 나 세부 정보를 제공한다. 정상적인 상황에서는 방문자가 이미지의 대체 태그를 볼 수 없다.
이미지에 ALT 태그를 사용하는 이유
ALT 태그는 다양한 용도로 사용된다. 그것들을 사용할 필요는 없지만, 사용하면 몇가지 주요 이점이 있다. 검색엔진 크롤러와 화면 읽기 도구에서 모두 사용되므로 웹 접급성 및 검색엔진 최적와(SEO)의 중요한 구성 요소다.
웹 접근성 향상
ALT 태그는 보조 기술이나 텍스트 전용 브라우저를 사용하는 경우에도 방문자가 웹사이트의 콘텐츠에 액세스하고 즐길 수 있도록 한다. 시각 장애가 있는 사용자가 웹사이트를 방문하면 스크린 리더가 해당 페이지의 텍스트를 읽는다. 이미지에 도달하면 ALT 태그를 사용해 해당 이미지가 무엇인지 설명한다. ALT 태그 가 없으면 스크린 리더가 대신 이미지 앞일 이름을 읽는다. 그러나 이는 일반적으로 이미지를 올바르게 설명하는 데 효과적이지 않을 뿐 아니라, 파일 이름이 SEO에 최적화되지 않은 경우 혼란스러울 수 있다.
워드프레스에서 이미지의 대체 태그 필드를 비워 두는 경우와 같이 화면 판독기는 해앋 이미지를 모두 건너뛴다. 웹 페이지에 포함된 이미지가 목적에 부합한다고 가정하며, 이러한 부재는 방문자가 여러분의 콘텐츠를 소비할 때 의도한 가치나 경험을 충분히 얻지 못하고 있음을 의미한다
웹사이트의 검색엔진 순위 상승
이미지 대체 태그를 사용하면 타키팅하려는 키워드의 순위를 쉽게 지정할 수 있다. 검색엔진봇(bot)은 지능적이지만 인간이 할 수 있는 것과 같은 방식으로 이미지의 시각적 측면을 해석하고 이해할 수 없다.
대체 속성은 이미지를 번역하고 보다 구체적으로 관련 키워드를 통합하기 위한 텍스트 기반 대안을 제공한다. 대상 키워드가 포함된 텍스트 설명을 이미지 검색에서 순위가 높아질 가능성이 높아진다. 검색엔진 최적화(SEO)에서 이미지가 수행하는 중요한 역할을 강조하려면 “킹 사이즈 침구”에 관한 검색엔진 결과 페이지(SERP)를 고려하길 바란다.
첫 번째 페이지는 텍스트 기반 결과만 생성하는 것이 아니다. 이미지 결과도 많이 있다. ALT 태그는 최적화되고 올바르게 사용되면 SEO를 강화하고 하이퍼 링크로 클릭 가능한 이미지를 생성해 이와 같은 검색에 표시 할 수 있다. 이는 전자 상거래 사이트 및 방문 페이지에 특히 유용하다.
HTML에 이미지 대체 태그를 추가하는 방법
체 태그를 추가하고 편집하기 위한 모듈이 포함된 워드프레스 또는 다른 CMS를 사용하면 HTML 코드가 자동으로 추가된다. 또한 코드를 직접 추가하려면 쉽게 할 수 있다.
<figure class=”wp-block-img size-large”><img src”https://domain.com/wp-content……” alt=”이미지에 대한 설명 넣는 곳” class=”wp-image-1023″/></figure>
HTML코드는 이미지 태그를 표시한다. 대체 태그를 넣지 않으면 alt 속성이 비어 있음을 알 수 있다 따옴표 안에 텍스트를 넣으면 된다.
이미지ALT 태그 작성을 위한 팁과 모범사례
ALT 태그를 만들 때 명심해야 할 몇 가지 핵심 사항이 있다. 이러한 모범 사례를 준수하면 대체 태그를 보다 효과적으로 만들 수 있다.
- 구체적이고 서술적으로: ALT 태그 의 목적을 이미지를 설명하는 것이므로 가능한 한 구체적이기를 원한다. 설명이 충분한지 확실하지 않은 경우 해당 텍스트 줄 말 볼 경우 어떤 이미지를 시각화할지 고려한다.
- 짧게 유지: 자세하게 설명하고 싶지만, ALT 태그를 단락 길이(또는 전체 문잘)로 만들 필요는 없다. 최대 100~125자를 목표로한다.
- 중복않기: ALT 태그를 최대한 활용하기 위해 불필요한 단어를 포함하지 않도록 한다. 여기에는 설명 앞에 “그림의” 또는 “이미지”의를 추가하는 것이 포함된다. 이러한 요소는 이미 암시되어 있으므로 불필요하다.
- 관련성 높은 키워드를 자연스럽게 통합: 타깃 키워드를 고려하고 가능한 경우 페이지 컨텍스트 내에 유기적으로 통합한다. 텍스트와 일치화는 관련성이 높은 이미지를 사용할 때 더 쉽다.
- 키워트 스터핑(keyword stuffing)을 피하기: ALT 태그에 키워드를 사용하면 SEO를 개선할 수 있지만 과도하게 사용하지 않도록 주의한다. 키워드 스터핑은 실체로 SEO에 해를 끼치고 사용자 경험을 저하할 수 있다.
- 텍스트 대신 이미지를 사용하지 말아야: ALT 태그의 주요 목적은 페이지의 시각적 요소를 처리하고 해석할 수 없는 컴퓨터에 텍스트 컨텍스트를 제공하는 것이다. 다라서 이미지 내에서 텍스트, 특히 제목과 페이지 제목에 텍스트를 사용하는 것은 적합하지 않다.
이미지 대체 태그를 만들 때 항상 목표는 이미지를 볼 수 없는 사람들에게 이미지를 설명하는 것이다. SEO와 키워드를 고려하는 것은 분명히 현명한 아이디어이지만 실제 사용자를 염두에 두고 ALT 태그를 작성하면 보다 긍정적인 결과를 얻을 수 있다.
맺음
이미지는 웹 페이지의 모양을 개선하고 더 흥미롭고 유익하며 흥미진진하게 만들 수 있다. 그러나 가치를 극대화하려면 ALT 태그를 추가하는 것이 가장 좋다. 이처럼 간단하지만 설명적인 설명은 사용자와 검색 엔진 모두 컨텍스트를 제공한다. 이미지 대체 태그는 사용자 환경을 개선하고 접근성을 향상하며 관련 키워드의 순위를 쉽게 하도록 도와준다.