요즘 종종 <img>태그를 사용하여 수행 한 작업 <div>은 CSS 'sprite'와 오프셋을 사용하여 CSS 배경 이미지를 사용하여 수행됩니다.
altGoogle이 색인을 생성 하는 속성 을 효과적으로 잃어 버리고 '제목'속성 (내가 이해하는 한 색인화되지 않음)에 갇혀서 SEO에 어떤 영향을 미치는지 궁금 합니다.
이것이 중대한 단점입니까?
요즘 종종 <img>태그를 사용하여 수행 한 작업 <div>은 CSS 'sprite'와 오프셋을 사용하여 CSS 배경 이미지를 사용하여 수행됩니다.
altGoogle이 색인을 생성 하는 속성 을 효과적으로 잃어 버리고 '제목'속성 (내가 이해하는 한 색인화되지 않음)에 갇혀서 SEO에 어떤 영향을 미치는지 궁금 합니다.
이것이 중대한 단점입니까?
답변:
CSS 스프라이트는 이러한 이유로 장식 요소에만 사용해야 <img>합니다. 페이지에 고유 한 요소에 사용하고 표시된 콘텐츠와 문맥 상 관련이없는 장식 요소에 스프라이트를 사용하십시오.
탐색 항목에 대한 단추 이미지가 필요한 경우 다음과 같이 마크 업이 아닌 탐색 링크의 배경으로 해당 이미지를 추가하는 것이 좋습니다.
<a href="/">
<img src="/images/home.gif" title="Home" alt="Home Button" />
Home
</a>(즉, 이미지의 내용이 페이지의 텍스트 내용에 중복되거나 이미지의 내용이 "장식"으로 가장 잘 설명 될 수있는 곳)
사이트 템플릿 요소를 스프라이트로 분리하면 보너스로 나중에 기존 디자인 이미지 파일을 덮어 쓰거나 모든 HTML 마크 업을 다시 쓰는 대신 스타일 시트를 변경하여 사이트의 "스킨"을 변경할 수 있습니다.
<img>CSS 스프라이트와 함께 태그를 사용할 수 있습니다 .
<img alt="description of image" src="images/sprite.png" id="someSprite" />sprite.png <50 바이트로 압축 된 1x1 투명 픽셀 일 수 있습니다.
스타일:
#someSprite {
width:74px;
height:38px;
background:url('/images/sprites.png') left 0px top 84px;
}그렇게하면 스프라이트에서 성능 최적화를 얻고 alt태그를 유지할 수 있습니다 .
alt태그는 과대 평가된다. 너무 많은 사람들이 alt자신의 페이지에 태그 가 있는지 확인하기 위해 길을 떠났다고 생각합니다. 나는 그것이 당신을 아프게한다고 믿지 않습니다. 그것은 당신이있는 경우에 확인하는 단지 문제 img, 당신은이 alt할당 태그를.
로드 시간과 사이트 성능은 alt태그 보다 SEO에 전반적으로 더 큰 영향을 미치며 모든 이미지 요청 또는 HTTP 요청에 대해 사이트 속도가 느려질 것으로 생각합니다. CSS 스프라이트의 목적은 이러한 요청을 최소화하고 페이지로드 시간을 단축하는 데 도움이됩니다.
alt텍스트는 스크린 리더에 의해 사용된다. 맹인이라면 대체 텍스트에 대해 다른 의견을 가질 수 있다고 생각합니다.