`img` HTML 요소는 웹 페이지에 이미지를 삽입하는 역할을 합니다. 이 요소는 일반적으로 개별적으로 사용되며, 특별한 종료 태그가 필요하지 않습니다. 하지만, img 요소를 구성할 때는 `alt` 속성이 필요하며, 이 속성은 이미지에 대한 대체 텍스트를 제공합니다. 즉, 이미지가 표시되지 않을 때 또는 이미지를 이해할 수 없는 유저 에이전트(예: 텍스트 브라우저, 음성 브라우저, 검색 엔진 등)에게 이미지의 내용을 설명하는 역할을 합니다. 다음과 같이 img 요소와 alt 속성을 사용할 수 있습니다:
<img src=”image.png” alt=”이미지에 대한 설명” width=”180″ height=”24″ />
alt 속성에 사용되는 문자열은 일반적으로 메타 정보의 한 부분이며, 이는 이미지의 내용을 간결하게 표현해야 합니다. 이 alt 속성은 특히 검색 엔진에 의해 신중하게 처리되며, 이로 인해 여러 가지 문제가 발생할 수 있습니다. 예를 들어, 검색 엔진은 alt 속성에 키워드를 집어넣는 것을 스팸으로 간주할 수 있습니다. 이러한 행위는 검색 결과에 부정적인 영향을 미칠 수 있으므로, alt 속성에 키워드를 무분별하게 넣는 것은 지양해야 합니다.
alt 속성은 다음과 같은 다양한 방식으로 처리될 수 있습니다:
– alt 속성의 문자열은 인식하지만, 검색 결과에 가산점을 주지 않는다.
– alt 속성의 문자열을 완전히 무시한다.
– img 요소가 a 요소의 내용으로 사용될 때만 alt 속성의 값을 링크 텍스트(anchor text)로 취급한다.
– alt 속성의 문자열을 일반 텍스트와 동일하게 취급한다.
이러한 이유로, SEO에 관한 관점에서는 다음과 같은 지침을 따르는 것이 좋습니다:
– img 요소는 사진이나 그래프와 같은 그림을 표현할 때 사용한다.
– alt 속성은 이미지를 대체할 적절한 텍스트를 제공한다.
– 이미지로 변환된 문자는 사용하지 않는다. 문자의 장식은 CSS를 사용한다.
이미지를 h 요소의 내용으로 사용하는 경우, alt 속성에 입력된 문자열이 검색 엔진에 의해 제목으로 인식되는 것은 그다지 기대하기 어려울 수 있습니다. 검색 엔진은 일반적으로 텍스트 기반의 제목(h1, h2, h3 등)을 우선적으로 고려하기 때문입니다. 따라서, 이미지를 제목 요소의 일부로 사용하려면 다음과 같은 방법을 고려해 볼 수 있습니다:
- 제목 요소 내에 이미지와 별개로 텍스트를 포함시키세요. 이 텍스트는 시각적으로 숨겨질 수 있지만, 스크린 리더나 검색 엔진은 해당 텍스트를 파악할 수 있습니다.
- 이미지 대신 CSS를 사용하여 스타일링된 텍스트를 제목으로 사용하세요. 이 방법은 웹 접근성과 SEO에 모두 좋은 영향을 미칠 수 있습니다.
이미지와 관련된 SEO 전략은 다양하며, 대체 텍스트를 포함한 다양한 속성들이 중요한 역할을 수행합니다. 따라서, 웹사이트에서 이미지를 효과적으로 활용하려면 이러한 요소들을 꼼꼼하게 고려해야 합니다.