대체 텍스트: 텍스트의 정의 및 작성 방법

소개

이 가이드에서는 대체 텍스트(대체 텍스트라고 함)의 정의, 페이지 내 SEO에 중요한 이유, 올바른 사용 방법 등에 대해 알아봅니다.

대체 텍스트는 간과되는 경우가 많지만 웹사이트의 모든 이미지에는 대체 텍스트가 포함되어야 합니다. 정보가 많을수록 좋으며, 시각적 정보를 텍스트로 변환하는 것은 검색 엔진 봇과 화면 리더 사용자를 위해 매우 중요합니다. 대체 텍스트는 웹사이트의 아이디어와 콘텐츠를 서로 연관시키는 정보 소스입니다.

이 실용적인 가이드에는 웹사이트의 이미지 SEO와 접근성을 개선하는 데 즉시 사용할 수 있는 팁과 조언이 포함되어 있습니다.

대체 텍스트란 무엇인가요?

대체 텍스트(또는 대체 텍스트)는 대체 속성 또는 대체 태그(태그가 아니므로 기술적으로 정확하지 않음)라고도 하며 HTML 코드에서 이미지를 설명하는 텍스트 조각입니다.

대체 텍스트의 용도는 무엇인가요?

대체 텍스트의 원래 기능은 로드할 수 없는 이미지를 설명하는 것이었습니다. 인터넷 속도가 느렸던 수년 전에는 대체 텍스트가 너무 무거워 로드할 수 없는 이미지의 내용을 사용자가 이해하는 데 도움이 되었습니다.

오늘날 대체 텍스트는 검색 엔진 봇이 이미지의 콘텐츠와 문맥을 이해하는 데 도움이 됩니다. 더 중요한 것은 대체 텍스트가 접근성과 화면 리더를 사용하는 사람들에게 매우 중요하다는 점입니다:

• 접근성용: 대체 텍스트는 장애가 있는 사용자(예: 스크린 리더 사용)가 이미지의 콘텐츠를 이해하는 데 도움이 됩니다.

• SEO용: 대체 텍스트는 검색 엔진에 추가적인 컨텍스트를 제공하여 페이지의 콘텐츠를 더 잘 이해할 수 있도록 도와줍니다.

대체 텍스트가 중요한 이유

웹은 시각적 경험이기 때문에 대체 텍스트가 매우 중요합니다. 대체 텍스트는 이미지의 콘텐츠를 단어로 번역하여 모든 이미지와 문맥, 의미를 완전히 이해하지 못하는 장애인과 검색 엔진 봇을 포함한 더 많은 사용자가 액세스할 수 있도록 합니다.

SEO에 대체 텍스트가 중요한 이유

대체 텍스트는 페이지 내 SEO 최적화의 필수 요소입니다. 적절한 대체 텍스트 최적화는 Google 이미지 검색에서 웹사이트의 순위를 높일 수 있으며, 특히 사용자가 Google 이미지 검색으로 제품 검색을 시작하는 경우가 많은 전자상거래 웹사이트의 경우 트래픽의 중요한 원천이 될 수 있습니다.

접근성을 위해 대체 텍스트가 중요한 이유

대체 텍스트는 SEO 외에도 화면 리더를 사용하는 장애인을 포함한 모든 사람을 위한 포용적인 웹을 만드는 접근성을 위해 매우 중요합니다. 대체 텍스트에 이미지의 콘텐츠를 설명하면 이러한 사용자가 이미지와 페이지의 콘텐츠를 이해하는 데 도움이 됩니다.

대체 텍스트 예제

좋은 대체 텍스트 예시

Google Search Console 및 Screaming Frog와 같은 도구의 스크린샷이 포함된 SEO 감사 가이드를 참조하세요. 대체 텍스트의 좋은 예는 다음과 같습니다:

<img src="google-search-console-coverage-report.jpg" alt="색인된 페이지와 제외된 페이지의 수를 보여주는 Google 검색 콘솔의 커버리지 보고서"> <img src="google-search-console.jpg" alt="구글의 구글 검색 콘솔 도구"> <img src="screaming-frog-html-pages.jpg" alt="스크림링 프로그의 HTML 페이지 목록"> <img src="screaming-frog.jpg" alt="스크림링 프로그 크롤링 진행 중">

불량 및/또는 스팸성 대체 텍스트 예시

잘못된 대체 텍스트의 예로는 키워드 스터핑 또는 스팸이 있습니다:

<img src="구글 검색 콘솔 커버리지 보고서.jpg" alt="서치 무료, 서치 저렴, 서치 전문가, 서치 감사, 서치 감사"> <img src="google-search-console.jpg" alt="구글서치, 구글서치, 구글, 서치, 구글검색콘솔서치"> <img src="screaming-frog-html-pages.jpg" alt="서치 감사, 서치 감사, 서치 감사"> <img src="screaming-frog.jpg" alt="seo 감사">

일반적인 대체 텍스트 실수

• 대체 텍스트를 사용하지 못했거나 빈 대체 텍스트를 사용했습니다.

• 다른 이미지에 동일한 대체 텍스트를 사용합니다.

• 이미지를 설명하지 않는 매우 일반적인 대체 텍스트를 사용합니다.

• 파일 이름을 자동으로 대체 텍스트로 사용합니다.

대체 텍스트 작성 팁

• 대체 텍스트에 키워드를 넣지 마세요.

• 이미지를 자세히 설명하되 비교적 짧게 작성하세요.

• 이미지 설명의 일부로 타겟 키워드를 자연스럽게 사용하세요.

• 이미지에 텍스트를 사용하지 마세요. HTML 코드에 모든 텍스트를 추가합니다.

• "이것은 이미지입니다."라고 쓰지 마세요. 이미지의 콘텐츠만 설명하세요.

• 이미지의 대체 텍스트만 읽어도 이미지의 콘텐츠를 시각화할 수 있는지 확인하세요.

이미지 대체 텍스트 문제 해결 방법

요소 검사

요소를 검사(이미지 위에 마우스 오른쪽 버튼을 클릭한 후 검사를 선택)하여 지정된 이미지에 대체 텍스트가 있는지 확인합니다.

대량 분석

대량 분석의 경우 Screaming Frog 또는 Sitebulb와 같은 도구를 사용하여 사이트를 크롤링하고 모든 웹사이트 이미지의 대체 텍스트를 검토하세요.

대체 텍스트는 우선 순위가 낮아 보일 수 있지만 중요합니다.

콘텐츠에 대한 모든 정보 소스에는 가치가 있습니다. 대체 텍스트는 시각 장애가 있는 사용자를 위한 것이든 봇을 위한 것이든 웹사이트의 이미지에 맥락을 부여하는 데 도움이 됩니다. 접근성을 위한 노력을 보여주는 것 또한 최신 디지털 마케팅의 중요한 요소입니다.

자주 묻는 질문

HTML에서 대체 텍스트의 용도는 무엇인가요?

대체 텍스트는 이미지가 표시되지 않는 경우 이미지에 대한 텍스트 설명을 제공하여 사용자가 이미지 콘텐츠를 이해하는 데 도움을 주고 검색 엔진 봇이 이미지의 주제를 이해하는 데 도움을 줍니다.

대체 텍스트로 웹사이트 접근성을 개선할 수 있나요?

예, 대체 텍스트는 웹사이트 접근성을 위해 필수적입니다. 시각적 정보를 시각 장애가 있는 사용자가 사용하는 스크린 리더로 읽을 수 있는 설명 텍스트로 변환하여 웹을 더욱 포용적으로 만듭니다.

이 팁을 따르면 웹사이트의 이미지에 대한 접근성을 확보하고 SEO에 최적화하여 사용자 경험과 검색 엔진 성능을 모두 향상시킬 수 있습니다.