H1 이미지 대체 대체

Question

내 머리글에 h1 요소를 추가하려고하지만 화면 해상도가 변경 될 때 서로를 대체하는 머리글 (배경 이미지가 아님)에 태그를 사용하고 있습니다.

나는 기술

<h1 class="technique-four"> 
<a href="#"> 
    <img src="images/header-image.jpg" alt="CSS-Tricks" /> 
</a> 
</h1> 


h1.technique-four { 
width: 350px; height: 75px; 
background: url("images/header-image.jpg"); 
text-indent: -9999px; 
} 

을 검토 한 ...하지만 내 레이아웃이 유체이기 때문에, 배경이 때 이미지의 변화를 볼 수 있습니다.

h1을 이미지로 바꾸어도됩니까?

을

<h1 class="headerhone">kb-k bwf-kb</h1> 

<a href="#"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/720.jpg" class="show-on-phones"/></a> 

<a href="#"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/980_full.jpg" class="hide-on-phones"alt=""/></a> 

(무시 PHP) 다음 H1에게 0의 높이 제공 : 난 그냥 뭔가를 할 수없는

h1.headerhone{ 
height:0px; 
text-indent: 100%; 
white-space: nowrap; 
overflow: hidden; 

} /*this was suggested to me as an alternative to the -9999px; thing.*/ 

것이 일을? 그것은 부정적인 SEO 의미 또는 유용성 문제가 있습니까?

Answer 1

화면 판독기에서 h1 콘텐츠가 "kb-k bwf-kb"가되고 화면 판독기에서 다음 이미지의 alt 속성이 실제로 h1인지 이해하지 못합니다.

Google의 경우 두 번째 해결 방법은 h1 태그의 콘텐츠를 숨기려고하는 것입니다. 좋지 않습니다.

시각적 인 예제가 유용 할 것입니다. 나는 당신이 달성하기를 원하는 모든 것을 이해하지 못합니다.

Answer 2

Google은 텍스트를 숨기고 이미지를 <h1> 태그로 사용하는 것에 대해 긍정적 인 말을 해 본 적이 결코 없었습니다. 그래서 저는 항상이를 해결책으로 추천하기를 주저합니다. 마지막 기술은 검색 엔진과는 다른 콘텐츠를 제공 할 가능성이 높기 때문에 추천합니다.

두 번째 생각은 올바른 방향입니다. 당신이하고 싶은 것은 responsive design을 사용하여 레이아웃의 너비를 결정하고 이에 따라 이미지를 조정하는 것입니다. 사실 Google has been writing a lot about it in their blog lately입니다. 나는 그것을하는 방법을 배우는 것이 좋습니다.