텍스트 들여쓰기:-9999px 텍스트를 이미지로 바꾸는 나쁜 기술이며 대안은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/8971152

  •  12-11-2019
  •  | 
  •  

문제

이 기사 이 기술을 사용하지 말아야 한다고 가정해 보겠습니다. 이 하나 굉장하다고 말합니다.Google이 CSS 파일 내부를 살펴보는 것이 사실인가요? text-indent: -9999px; 그리고 당신을 처벌합니까?:|

나는 그 재산을 사용하고 있습니다 많이 텍스트를 숨기려면.예를 들어 아이콘으로 표시되는 버튼이 있습니다.

<a href="#" class="mybutton">do Stuff</a>

CSS:

.mybutton{
  text-indent: -9999px;
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
  display: block;
  width: 16px;
  height: 16px;
}

내 코드에 대한 대안이 없습니다.이를 이미지로 바꾸면 각 버튼 이미지에 대해 자동으로 +20개의 HTTP 요청을 받게 됩니다.

링크를 비워두면 화면 판독기가 링크가 무엇인지 알 수 없기 때문에 접근성이 떨어집니다.그리고 빈 링크는 이상하게 보입니다. 아마도 Google도 그것을 좋아하지 않을 것입니다.

그렇다면 그러한 상황을 처리하는 가장 좋은 방법은 무엇입니까?

도움이 되었습니까?

해결책

-9999px 메소드를 사용하지 않는 좋은 이유는 브라우저 가이 요소가 적용되는 각 요소에 대해 9999px 상자를 그리는 것입니다.분명히, 잠재적으로 성능이 뛰어난 성능을 발휘합니다. 특히 여러 요소에 적용하는 경우

대체 방법은이 하나를 포함합니다 ( Zeldman.com ) : 

text-indent: 100%; white-space: nowrap; overflow: hidden;
.

... 또는 에서) : 

height: 0; overflow: hidden; padding-top: 20px;
.

(여기서 '패딩 탑'은 요소가 원하는 높이)입니다.

첫 번째 방법이 정상적인 방법으로 높이를 설정할 수 있으므로 IE7 에서 더 잘 작동하는 것을 발견했습니다.

다른 팁

Google에서는 부정적인 표현 사용 개념을 홍보하지 않는다는 것을 읽었습니다. text-indent 앵커 태그에 - http://maileohye.com/html-text-indent-not-messing-up-your-rankings/.이상적으로는 검색 엔진에 링크에 대해 더 많은 정보를 제공하기 위해 제목 태그와 rel 속성을 사용해야 합니다.

또한 다음 스레드를 읽어볼 수도 있습니다.

가능한 경우 상대 및 제목 태그를 사용하고 이미지에 대체 태그를 적용하는 사이트맵, 로봇, 앵커 태그는 SEO 향상에 도움이 됩니다.

Google은 이제 shebang(#!) 연산자를 사용하여 AJAX 기반 콘텐츠도 탐색하므로 이에 대해 읽어보고 싶을 수도 있습니다. http://www.seomoz.org/blog/how-to-allow-google-to-crawl-ajax-content

HTML5와 JQuery를 사용하여 Ajax 링크의 북마크와 딥링크를 허용하는 다양한 플러그인이 있습니다.

도움이 되었기를 바랍니다.

텍스트 들여 쓰기는 작업 단추에 대해 ok이어야하며, 대상 페이지의 페이지 순위를 무게 만나는 동안 링크 텍스트를 고려할 수 있도록 검색 엔진을 원하는 경우

Google이 스팸으로 고려하기 전에 Google이 여러 가지 휴리스틱스를 사용하기 전에 귀하가 텍스트 들여 쓰기를 원활하게 사용하는 것으로 도망쳐 야합니다.

Google이 문제가 있는지 전혀 모르겠지만 Google 직원의 블로그 게시물







/ P>

html 
<a href="#" class="mybutton"><img alt="do Stuff" src="1-pixel-spacer-image.gif" width="16" height="16"></a>
.

CSS 
.mybutton,
.mybutton img {
  display: block;
  width: 16px;
  height: 16px;
}

.mybutton img {
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
}
.

<img> 태그의 배경 이미지는 IE 6에서도 안정적으로 작동합니다.

물론 Google의 수행하려는 것은 보이지 않는 텍스트를 인덱싱하지 않으며 background-image 텍스트가 표시되지 않습니다.그러나 Google 알고리즘이 귀하의 페이지의 위험이있을 수 있습니다.

및이 메소드는 사용자가 브라우저에서 이미지를 비활성화하는 경우, <img>가 그렇지 않으면 텍스트가 표시됩니다.

잘 대안이 있습니다 (내가 꽤 자주 사용하는 것). 

<a href="#" class="mybutton"><span>do Stuff</span></a>
.

컨텍스트를 기반으로 스팬을 강력한 / h1 등으로 변경할 수 있습니다. 

.mybutton{
  background: transparent url(images/SpriteWithButtons.png) no-repeat 20px 20px;
  display: block;
  width: 16px;
  height: 16px;
}
.mybutton span{
    display: none;
}
.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top