SEO, 이미지 Alt Text(대체 텍스트)를 최적화해야 하는 이유
사이트에 대한 SEO (검색엔진 최적화) 트래픽에 관심이 있다면 HTML 메타 태그가 무엇인지, 왜 필요한지, 웹사이트 크롤링 및 Google의 인덱싱을 관리하는 방법, Google 이미지 검색을 위해 이미지를 최적화하는 방법과 같은 기술적 SEO에 대해 한두 가지는 알고 있어야 합니다. Alt text(대체 텍스트) 속성의 중요성과 이를 효과적으로 작성하는 방법에 대해 제대로 알려 드리도록 하겠습니다.
Alt Text란 정확히 무엇인가?
Alt Text(대체 텍스트)는 "alternative text"의 축약형으로, 느린 인터넷 연결 중에 브라우저가 이미지를 렌더링 하지 못할 때 웹 페이지에 표시되는 설명 문구입니다. 또한, 대체 텍스트 태그 (Alt Text Tag)라고도 잘못 언급됩니다. 사실 태그라기보다는 이미지 속성입니다.
이 이미지의 경우 "어두운 배경의 잭오랜턴" 또는 "어두운 배경의 할로윈 호박 웃기"와 같은 대체 텍스트를 사용할 수 있습니다.
이미지 Alt Text의 기능은 무엇인가?
Alt Text(대체 텍스트)의 핵심 기능은 스크린 리더를 사용하는 시각 장애인을 위해 웹 이미지 접근성을 향상하는 것입니다. 이 텍스트는 이미지가 묘사하는 것을 전달하기 위해 스크린 리더에 의해 전달됩니다.
또한 Alt Text(대체 텍스트)는 검색 엔진이 이미지를 올바르게 색인화하고 유기적 트래픽을 유도하는 데 도움이 되는 이미지에 더 나은 콘텍스트를 제공하여 SEO 순위를 향상합니다.
이미지가 어떻게 웹사이트 트래픽을 증가시킬 수 있는가?
한눈에 띄는 장소는 Google 이미지입니다. 그러나 Google 이미지에 국한되지 않으며 더 많은 트래픽을 유도하는 여러 가지 방법이 있습니다. 사용자는 더 많은 텍스트로 연결되는 링크보다 즉시 자신에게 호소하는 이미지를 클릭하는 경향이 있기 때문에 시각적 개체는 웹사이트 참여를 크게 높일 수 있습니다.
Google은 이러한 추세를 활용하고 SERP(검색 엔진 결과 페이지)에 이미지와 동영상을 채워 사용자에게 풍부한 결과를 보여줍니다. 따라서 Google이 웹사이트의 이미지를 올바르게 색인화할 수 있는지 확인하십시오. 그렇지 않으면 검색 결과의 이미지 팩에 나타나지 않습니다.
이미지가 사이트의 핵심 관심사이든 아니든 SEO에 맞게 이미지를 최적화하면 웹사이트 성능과 Google 이미지 검색 순위가 향상됩니다.
웹사이트 이미지에 대한 메타데이터 및 Alt Text(대체 텍스트) 속성을 최적화하면 Google 검색 엔진이 온라인 검색 중에 이미지를 더 빨리 이해하고 발견하는 데 도움이 됩니다.
이미지에 Alt Text를 어떻게 추가할 수 있는가?
HTML 코드에 Alt Text(대체 텍스트)를 수동으로 추가하려면 "" 안에 텍스트를 작성하고 이미지 소스 뒤에 넣기만 하면 됩니다.
CMS 플랫폼 또는 전자 상거래 솔루션에 대체 텍스트를 추가하는 것은 훨씬 간단합니다. 해당 관리자 패널 필드에 설명을 추가하기만 하면 됩니다. WordPress 및 Shopify에서 이미지에 Alt Text(대체 텍스트)를 추가하는 방법은 다음과 같습니다.
사이트의 모든 이미지에 Alt Text가 필요한가?
간단한 대답은 '아니오'입니다. 사용자에게 의미와 가치를 전달하는 이미지에만 Alt Text(대체 텍스트)를 추가하는 것이 가장 좋습니다. 디자인 목적으로만 사용되는 이미지에는 배경 이미지와 같은 Alt Text(대체 텍스트)가 필요하지 않습니다. Alt Text(대체 텍스트) 속성을 비워 두기만 하면 됩니다(alt=””). 결과적으로 스크린 리더는 이 이미지를 완전히 무시합니다. 그러나 대체 텍스트를 사용하지 않으면 스크린 리더는 이미지의 존재를 감지하고 제목을 큰 소리로 읽어 듣는 사람을 오도할 수 있습니다.
덧붙여서 장식 이미지는 HTML보다 CSS로 정의하는 것이 좋습니다.
Alt Text에 가장 적합한 형식은 무엇인가?
SEO를 개선하고 사이트로 더 많은 트래픽을 유도하기 위해 대체 텍스트에 키워드를 입력할 수 있지만 이는 득 보다 실이 더 많습니다. Google 알고리즘은 이러한 Alt Text(대체 텍스트)를 스팸으로 간주하고 색인을 전혀 생성하지 않으므로 사이트 순위가 낮아집니다.
Alt Text(대체 텍스트)가 자연스럽게 들리면 올바른 방향으로 가고 있는 것입니다. 가급적이면 이미지에 콘텍스트를 제공하고 웹페이지의 나머지 텍스트와 관련되어야 합니다.
웹 페이지의 모든 내용이 정확한지 확인하기 위해 실제 스크린 리더기를 설정하여 디지털 텍스트가 오디오 음성으로 얼마나 잘 변환되는지 들을 수 있습니다. 전화로 누군가에게 웹사이트 콘텐츠를 소리 내어 읽어주는 것도 고려해 볼 수 있습니다. 이미지에서 본 것을 어떻게 표현하고 부드럽고 자연스럽게 들립니까?
좋은 Alt Text로 간주되는 예는 무엇인가?
이 이미지에 대한 좋은 Alt Text(대체 텍스트)는 다음과 같습니다.
“수제 빵이 중앙에 있는 소박한 시골 정물의 평면도.” (사진 포트폴리오용)
또는 "소박한 장식과 조미료가 담긴 작은 그릇이 있는 목제 농가 테이블에 제공되는 장인의 갈색 빵." (베이커리 웹사이트 또는 사진 포트폴리오용)
"빵", "빵과 칼", "식탁 위의 빵"과 같은 대체 텍스트 및 이와 유사한 문구는 이미지에 표시된 내용을 충분히 전달하지 못하기 때문에 이상적인 대체 텍스트 속성이 아닙니다.
하지만 그렇다고 해서 이미지의 모든 요소를 설명해야 하는 것은 아닙니다. 지나치게 긴 Alt Text(대체 텍스트)는 페이지의 나머지 콘텐츠와 자연스럽게 어울리지 않습니다.
Alt Text의 이상적인 길이는 얼마인가?
Alt Text(대체 텍스트)는 125자 미만으로 제한하는 것이 좋지만 길이는 5-7 단어 이상이어야 합니다. (위의 예는 공백을 포함하여 길이가 70 및 99자를 계산합니다.)
Alt Text에서 어떤 단어를 사용하지 말아야 하는가?
스크린 리더는 HTML 코드에서 이미지를 참조하고 있음을 알 수 있으므로 Alt Text(대체 텍스트)에 "~의 이미지" 또는 "~의 그림"을 사용하지 마십시오. 지정하면 반복만 됩니다. 검색 엔진도 Alt Text(대체 텍스트)가 이미지에 적용된다는 것을 알고 있으므로 "이미지"라는 단어를 명시적으로 언급하여 공간을 낭비하지 마십시오.
Alt Text에 구두점을 포함해야 하는가?
물론입니다. Alt Text(대체 텍스트)에는 쉼표와 마침표가 포함되어야 합니다. 이렇게 하면 스크린 리더가 텍스트를 이해하고, 더 이해하기 쉽게 소리 내어 읽는 데 도움이 됩니다. 구두점을 사용하지 않으면 Google 크롤러가 텍스트를 키워드 스터핑으로 잘못 해석하여 스팸으로 표시할 수 있습니다.
Alt Text가 이미지를 올바르게 설명하는 것이 중요한가?
예, 대체 텍스트는 이미지와 정확하게 일치해야 합니다. 빨간 모자 이미지가 Alt Text(대체 텍스트)에서 "파란 모자"로 잘못 설명되어 있다고 가정합니다. 처음에는 파란색 모자로 색인이 생성될 수 있지만 Google 알고리즘이 불일치를 감지하면 검색 결과에서 제거됩니다.
텍스트가 있는 이미지의 경우 Alt Text(대체 텍스트)에 보이는 텍스트를 포함해야 합니다.
(alt="저 멀리 거대한 흰색 "Hatta" 표시가 있는 일몰 산의 전망.")
Google은 이미지에 삽입된 텍스트를 감지할 수 있으므로 이미지에 보이는 텍스트를 Alt Text(대체 텍스트)에 포함하지 않으면 이미지를 사기성 또는 스팸으로 표시할 수 있습니다.
요약하자면 Alt Text(대체 텍스트)는 사이트의 SEO를 개선하는 데 중요한 역할을 하는 요소 중 하나입니다. 짧고 구체적이며 간결하게 유지하는 것이 가장 좋지만 맥락을 전달할 수 있도록 적절하게 설명해야 합니다. 고품질 Alt Text(대체 텍스트)를 작성하기 위한 노력과 연구는 여러분의 사이트에 유기적인 트래픽으로 리워드 될 것입니다.