Alt 태그란 무엇이며 어떻게 사용해야 합니까?

이미지는 웹사이트를 매력적이고 시각적으로 매력적으로 만드는 데 도움이 됩니다. 그러나 대체 텍스트("대체 텍스트" 또는 "대체 태그"라고도 함)로 이미지를 최적화하지 않으면 사이트의 사용자 경험과 접근성을 개선할 수 있는 중요한 기회를 놓치게 됩니다.

올바르게 사용하려면 먼저 alt 태그가 무엇인지 이해하는 것이 중요합니다. 이 포스트에서 우리는 alt 태그가 무엇이고 왜 사용되는지에 대해 논의할 것입니다. 또한 WordPress의 이미지에 alt 태그를 추가하는 방법을 설명하고 이를 위한 몇 가지 모범 사례를 소개합니다.

시작하자!

YouTube 채널 구독

Alt 태그란 무엇입니까?

Alt 태그는 HTML의 이미지에 추가되어 웹 페이지의 내용과 컨텍스트를 설명합니다. 미디어 파일을 제대로 로드하거나 표시할 수 없는 경우에도 alt 태그가 이미지 컨테이너 내에 나타납니다.

Alt 태그는 시각 장애가 있는 사용자와 같이 스크린 리더를 사용하는 사람들이 웹사이트의 콘텐츠를 이해하는 데 도움이 됩니다. 또한 검색 엔진 봇은 사이트를 크롤링, 인덱싱 및 순위를 매길 때 이미지를 해석하는 데 사용합니다.

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

<img src="motorcycle-sunset.png" alt="Man in black and red checkered shirt riding an orange motorcycle at sunset."/>

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

이미지에 Alt 태그를 사용하는 이유는 무엇입니까?

Alt 태그는 여러 용도로 사용됩니다. 반드시 사용할 필요는 없지만 그렇게 하면 몇 가지 주요 이점이 있습니다. 검색 엔진 크롤러와 화면 읽기 도구에서 모두 사용되기 때문에 웹 접근성 및 SEO(검색 엔진 최적화)의 중요한 구성 요소입니다.

웹 접근성 향상

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

alt 태그가 없으면 화면 판독기가 대신 이미지 파일 이름을 읽을 수 있습니다. 이것은 일반적으로 이미지를 적절하게 설명하는 데 효과적이지 않을 뿐만 아니라 특히 파일 이름이 SEO에 최적화되지 않은 경우 혼란스럽고 혼란스러울 수 있습니다.

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

그들은 검색 엔진 순위를 높일 수 있습니다

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

Alt 속성은 이미지 번역, 특히 관련 키워드 통합을 위한 텍스트 기반 대안을 제공합니다. 대상 키워드가 포함된 텍스트 설명은 이미지 검색에서 높은 순위를 얻을 가능성을 높일 수 있습니다.

SEO에서 이미지(및 Alt 태그)의 중요한 역할을 강조하려면 "킹 사이즈 침구"에 대한 검색 엔진 결과 페이지(SERP)를 고려하십시오.

첫 번째 페이지는 텍스트 기반 결과를 생성하지 않습니다. 이미지 결과도 많이 있습니다. 최적화되고 올바르게 사용되면 Alt 태그는 SEO를 향상하고 이와 같은 검색에 표시될 하이퍼링크된 클릭 가능한 이미지를 생성하는 데 도움이 될 수 있습니다. 이는 전자 상거래 사이트 및 방문 페이지에 특히 유용합니다.

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

웹사이트에서 이미지 대체 속성을 사용할 때의 이점을 이해했다면 이제 실제로 이를 수행하는 방법을 배울 차례입니다. 다행히 WordPress는 이 작업을 매우 간단하고 간단하게 만듭니다.

WordPress에 이미지 대체 태그를 추가하려면 관리자 대시보드에 로그인하고 이미지를 추가하려는 페이지 또는 게시물로 이동합니다. WordPress 편집기 내에서 더하기 아이콘을 클릭하고 이미지 블록을 선택합니다.

그런 다음 이미지를 업로드하거나 미디어 라이브러리에서 이미지를 선택합니다. 블록에 이미지를 삽입하면 오른쪽 사이드바에 이미지 설정 패널이 열립니다. Alt 텍스트 상자에 설명을 입력할 수 있습니다.

완료되면 변경 사항을 저장합니다. 기존 이미지에 대해서도 이 작업을 수행할 수 있습니다. 예를 들어 사이트에 이미 게시된 게시물의 이미지를 업데이트하려면 이미지를 클릭하고 사이드바에 새 alt 태그를 입력하기만 하면 됩니다.

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

WordPress 또는 Alt 태그 추가 및 편집 모듈이 포함된 다른 CMS를 사용하면 HTML 코드가 자동으로 추가됩니다. 그러나 코드를 직접 추가하고 싶다면 쉽게 할 수 있습니다.

WordPress에 alt 태그 HTML을 추가하려면 관련 이미지 블록을 클릭하십시오. 블록 도구 모음에서 세 개의 수직 점이 있는 버튼을 선택 하고 HTML로 편집을 선택합니다.

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

완료되면 미리보기 버튼을 클릭하여 비주얼 편집기로 돌아간 다음 변경 사항을 저장합니다. 모든 파일의 HTML 이미지 태그를 편집할 때 이와 동일한 구문과 형식을 사용할 수 있습니다.

이미지 대체 태그 작성을 위한 팁 및 모범 사례

대체 태그를 생성할 때 염두에 두어야 할 몇 가지 핵심 사항이 있습니다. 다음 모범 사례를 준수하면 대체 태그를 더 효과적으로 만드는 데 도움이 됩니다.

• 구체적이고 설명적이어야 합니다. alt 태그의 목적은 이미지를 설명하는 것이므로 가능한 한 구체적이어야 합니다. 설명이 충분한지 확실하지 않은 경우 해당 텍스트 줄만 본 경우 시각화할 이미지를 고려하십시오.
• 짧게 유지하세요. 상세하게 설명하고 싶지만 alt 태그를 한 단락(또는 전체 문장)으로 길게 만들 필요도 없습니다. 최대 100~125자 정도를 목표로 합니다.
• 중복하지 마십시오. alt 태그를 최대한 활용하려면 불필요한 단어를 포함하고 싶지 않습니다. 여기에는 설명 앞에 "~의 사진" 또는 "~의 이미지"를 추가하는 것이 포함됩니다. 이러한 요소는 이미 암시되어 있으므로 필요하지 않습니다.
• 관련 키워드를 자연스럽게 통합합니다 . 타겟 키워드를 고려하고 가능한 경우 페이지 컨텍스트 내에서 유기적으로 통합하십시오. 텍스트에 해당하는 관련성이 높은 이미지를 사용하면 더 쉽습니다.
• 키워드 스터핑을 피하십시오. Alt 태그에 키워드를 사용하면 SEO를 향상시킬 수 있지만 과도하게 사용하지 않도록 주의하십시오. 키워드 스터핑은 실제로 SEO에 피해를 주고 사용자 경험을 저하시킬 수 있습니다.
• 텍스트 대신 이미지를 사용하지 마십시오. alt 태그의 주요 목적은 페이지의 시각적 요소를 처리하고 해석할 수 없는 시스템에 텍스트 컨텍스트를 제공하는 것입니다. 따라서 이미지 내, 특히 제목과 페이지 제목에 텍스트를 사용하는 것은 이치에 맞지 않습니다.

이미지에 대한 alt 태그를 만들 때 목표는 이미지를 볼 수 없는 사람들에게 이미지를 설명하는 것임을 항상 기억하십시오. SEO와 키워드를 고려하는 것은 확실히 현명한 생각이지만 실제 사용자를 염두에 두고 alt 태그를 작성하면 더 긍정적인 결과를 생성하는 데 도움이 될 수 있습니다.

결론

이미지는 웹 페이지의 모양을 개선하고 더 흥미롭고 유익하며 매력적으로 만드는 데 도움이 될 수 있습니다. 그러나 그 가치를 극대화하려면 alt 태그로 보완하는 것이 가장 좋습니다. 이 간단하지만 설명적인 설명은 사용자와 검색 엔진 모두에 대한 컨텍스트를 제공합니다. 이미지 대체 태그는 사용자 경험을 향상하고 접근성을 개선하며 관련 키워드에 대한 순위를 쉽게 지정하는 데 도움이 됩니다.

Alt 태그가 무엇인지 또는 WordPress에 추가하는 방법에 대해 다른 질문이 있습니까? 아래 의견 섹션에서 알려주십시오!

Honza Hruby의 추천 이미지 / shutterstock.com