img요소는 이미지를 삽입 하는 In-Line요소로, alt속성으로 대체 text를 지정합니다. 검색 엔진인 img요소 및 alt속성을 다루는 방법은 항상 일정하지는 않지만, 기본이 되는 최적화 방법에 대해 설명합니다.
img요소와 alt속성이란
img요소는 지정 한 장소에 이미지를 삽입 할 수 있는 In-Line요소로, 내용이 없는（독립 된 종료tag가 없는） 빈 요소입니다. 영상을 대체하는 문자열을 alt속성 수치로 작성하는 것이 문법 상 필수사항이기도 합니다. 작성 방법은 아래와 같습니다.
<img src="image.png" alt="이미지와 대체할 text" width="180" height="24" />
img요소를 작성 할 때에는, 그 내부에 alt속성을 「alt=”속성치”」의 형태로 작성합니다. 작성할 내용은 「그 이미지 내용과 같은 text」이고 이미지를 이해하지 못하는 유저 에이전트에게 이미지 내용을 전달하는 역할을 담당합니다. 이미지를 이해하지 못하는 유저 에이전트는 음성 브라우저나 text브라우저 이외에 검색 엔진 로봇 등도 여기에 해당합니다. 하지만, 검색 엔진 로봇에 대해서는 alt속성치를 다루는 방법이 상당히 애매하기도 하고 시기에 따라서는 검색 결과에 전혀 반영되지 않는 일도 있기 때문에 이 점에 주의해야 할 필요가 있습니다.
검색 엔진과 alt속성
alt속성치에 작성 된 문자열은 meta정보의 한 종류로, 영상이나 이미지 표시에 대응 한 일반적인 브라우저에서는 유저가 alt속성 수치에 어떤 것이 쓰여져 있는지에 유의할 일은 없습니다. 그렇기 때문에 alt속성치는 키워드 주입과 같은 스팸 행위에 사용 되어 온 경위가 있기도 하여, 검색 엔진은 이 alt속성에 지정 된 문자열을 신중히 다루게 됩니다.
- alt속성치의 문자열은 인식하되, 가산점에는 사용하지 않는다.（meta요소 description이나 keywords와 같은 취급）
- alt속성의 문자열을 완전히 무시한다.
- a요소의 내용으로 사용된 경우에만 alt속성치를 Anchor-Text와 동일 취급한다.（image link로 사용）
- alt속성치도 일반적인 text와 동일 취급한다.
검색 엔진을 이용한 alt속성을 다루는 방법에는 위와 같이 여러 패턴이 있어 항상 일정하지 않습니다. 그렇기 때문에 SEO 관점에서 보면 다음과 같은 지침을 가지고 img요소를 사용하는 것이 안전한 방책의 한 종류로 정착 되어 있습니다. 매우 상식적인（어쩌면 HTML 작성으로 사용하기에도 적절한）것이라고 생각되고 있습니다.
- img요소는 사진이나 그래프 등 그림을 취급할 시에만 사용한다. alt속성은 영상이나 이미지 대신 적절한 문자열을 작성한다.
- 이미지화 된 문자는 사용하지 않는다. 문자의 장식은 CSS를 사용한다.
alt속성치의 작성
img요소에는 반드시 alt속성을 부가하여, 이미지와 동등한 text정보를 작성합니다. 이미지와 대등한 text란 단순히 그 이미지의 설명에 대한 것 뿐 아니라, 문맥 상으로 봤을 때 그 이미지와 같은 text라는 의미입니다. text브라우저 등에서 열람 할 때 의미가 통하도록 작성하도록 주의해야 합니다. 또, spacer에 사용 하고 있는 이미지나 특히 의미 없는 Marker로 배치 되어 있는 이미지일 경우에는, alt=”” 등으로 작성하여 빈 공간으로 속성치를 지정합니다.
SEO의 기본은 유저에게는 물론 검색 엔진 로봇에게도 동등한 접근성을 확보하는 것입니다 검색 엔진 대책, 검색 엔진 공략 등과 같은 문맥에서 SEO를 다루는 업자가 수없이 존재하기 때문에 오해를 불러일으키기 쉽지만, 검색엔진의 Scoring과 유저에 대한 배려는 본래 같은 도착 지점을 목표로 하는 것으로, 모순 없이 양립되어야 하는 것입니다. 유저에게 지지 받는 것이 검색 엔진에도 평가 된다라는 것에 유의하여 검색 엔진보다도 오히려 유저를 배려 한 웹사이트 제작을 해주시기 바랍니다.
h요소의 내용으로 이미지를 사용하는 케이스
아래와 같이 작성하면 h요소에 이미지를 사용 할 수 있습니다. 이것은 문법 상으로는 전혀 문제가 없는 작성법이긴 하지만, img요소의 alt속성치에 작성 된 문자열이 검색 엔진에 표제로서의 문자열로 가중치를 받는 일은 그다지 기대할 수 없습니다.
<h1> <img src="image/title.gif" alt="표제 문자열" width="180" height="24" /> </h1>
이처럼 단순한 문자열을 이미지로 대체하는 경우에는 처음부터 이미지를 사용하지 않고 text를 사용하고 장식은 CSS를 사용하는 것을 기본이라고 생각해주시기 바랍니다. 또, CSS이미지 변환을 사용할 경우 Google은 추천하지 않습니다. 가능한 한 Google 사용은 피해 주시기 바랍니다.
a요소의 내용에 이미지를 사용하는 케이스
a요소의 내용에 이미지를 사용하는（image link）경우, 검색 엔진은 기본적으로 alt속성치를 Anchor-Text와 동일 취급하는 경우가 많습니다. 이것은 문법 상으로도 문제가 없습니다. 하지만, 정말 이미지를 사용한 Link가 적절한 하는 점은 다시 한 번 생각해 볼 필요가 있습니다. 왜냐하면, 이미지를 이용한 Link에는 다음과 같은 문제들이 있기 때문입니다.
- Border를 0으로 지정 했을 경우（대부분 그렇다고 생각합니다）에는, 미방문 Link와 방문완료 Link의 구별이 잘 되지 않아, User bility상에 결함이 생긴다.
- 배경변환을 사용하여 Link 이미지（로 보이는 것）를 설정했을 경우, Visual브라우저에서 이미지 표시 off를 한 유저나, 속도가 느린 회선을 사용하고 있는 유저가 Link를 인식 할 수 없게 되어 accessibility상에 결함이 생긴다.
- 기능적으로는 단순한 Link를 꾸미는 것이 목적이라면 그것은 구조와 표현의 분리 원칙에서 CSS로 설정하는 것이 적절하다고 판단된다.
위와 같은 문제점을 인식 한 후에, 그래도 image link를 사용할 수 밖에 없는 경우에는 그것이 이미지가 아닌 경우에 사용할 Anchor-Text작성과 같은 작성법을 alt속성의 속성치에 작성하도록 합니다. alt속성치에 키워드를 주입하는 것은 백해무익으로 즉, 이로울 것이 하나도 없습니다.
<a href="./tigers.html"> <img src="image/tigers.png" alt="한신 타이거즈" width="80" height="20" /> </a>
어쩔 수 없이 img요소를 Link에 사용 할 경우에는 위에 작성한 것처럼 링크처의 페이지와 관련 된 키워드를 포함하여, 링크처의 내용을 정확하게 나타내주는 alt속성을 부가합니다. 이 때, alt속성치의 문자열은 링크 레벨의 작성법에 맞는 것이 적절합니다. 검색 엔진이 alt속성치를 Anchor-Text처럼 해석할지 말지는 때에 따라 달라지지만, 음성 브라우저나 text브라우저의 Navigation에 문제가 없도록 작성하는 것이 해결책이 될 것입니다.
키워드를 함부로 넣지 않는다
비표시 요소나 각종 속성치 등에 키워드를 나열하는 스팸 트릭을 주입 text 스팸이라고 합니다. 속성치에 넣는 text 스팸 중에서도 대표적인 것은 img요소의 alt속성입니다. 특히 1*1pixel의 이미지를 사용하고 alt속성에 키워드를 넣는 트릭은, 지금으로써는 무시되거나 페널티를 받게 됩니다.
<img src="spam.png" alt="키워드1,키워드2,키워드3,……" width="1" height="1" />
사진이나 그래프 등의 img요소의 alt속성치에 작성 된 text는, 대부분 SEO와는 상관없습니다. 그렇기 때문에, 표시 하고 싶은 이미지의 실제 내용과는 상관없이 키워드를 나열하는 것은 아무 의미가 없을 뿐더러 일부 유저에 대응하는 접근성에 중대한 손해를 입힙니다.
Comments
comments