H1 텍스트를 로고 이미지로 대체: SEO 및 접근성을 위한 최선의 방법?

H1 텍스트를 로고 이미지로 대체: SEO 및 접근성을 위한 최선의 방법?

몇 가지 다른 기술들이 있는 것 같아요. 그래서 저는 이것에 대한 "확정적인" 대답을 얻고 싶었습니다.

웹 사이트에서는 홈 페이지에 연결되는 로고를 만드는 것이 일반적입니다.저는 검색 엔진, 화면 판독기, IE 6+ 및 CSS 및/또는 이미지를 비활성화한 브라우저에 최적화하면서 동일한 작업을 수행하고 싶습니다.

예 1: h1 태그를 사용하지 않습니다.SEO한테 별로 좋지 않죠?

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

예 2: 이것을 어딘가에서 찾았습니다.CSS는 좀 엉성해 보입니다.

<h1 id="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
#logo {
    padding: 70px 0 0 0;
    overflow: hidden;
    background-image: url("logo.png");
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:70px;
}

예 3: 동일한 HTML, 텍스트 독립형을 사용하는 다른 접근법.이것이 이미지 교체에 대한 "파크" 접근법입니다.

<h1 id="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
#logo {
    background: transparent url("logo.png") no-repeat scroll 0% 0%;
    width: 250px;
    height: 70px;
    text-indent: -3333px;
    border: 0;
    margin: 0;
}

#logo a {
    display: block;
    width: 280px; /* larger than actual image? */
    height: 120px;
    text-decoration: none;
    border: 0;
}

예 4:Leahy-Langridge-Jefferies 방법.이미지 및/또는 CSS가 꺼져 있을 때 표시됩니다.

<h1 id="logo" class="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
h1.logo {
    margin-top: 15px; /* for this particular site, set this as you like */
    position: relative; /* allows child element to be placed positioned wrt this one */
    overflow:hidden; /* don’t let content leak beyond the header - not needed as height of anchor will cover whole header */
    padding: 0; /* needed to counter the reset/default styles */
}

h1.logo a {
    position: absolute; /* defaults to top:0, left:0 and so these can be left out */
    height: 0; /* hiding text, prevent it peaking out */
    width: 100%; /* 686px; fill the parent element */
    background-position: left top;
    background-repeat: no-repeat;
}

h1#logo {
    height: 60px; /* height of replacement image */
}

h1#logo a {
    padding-top: 60px; /* height of the replacement image */
    background-image: url("logo.png"); /* the replacement image */
}

어떤 방법이 이런 일에 가장 좋습니까?답변에 html과 css를 제공해주시기 바랍니다.

옵션이 누락되었습니다.

<h1>
  <a href="http://stackoverflow.com">
    <img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

href와 img to h1의 제목은 매우 매우 중요합니다!

저는 대부분 위와 같이 하지만 접근성 때문에 브라우저에서 이미지가 비활성화될 가능성을 지원해야 합니다.그래서, 저는 페이지의 링크에서 텍스트를 들여쓰기 보다는, 절대적으로 위치시킴으로써 그것을 덮습니다.<span>의 까지.<a> 및사용을 사용합니다.z-index스택 순서에서 링크 텍스트 위에 배치합니다.

의 빈 가개은 1비격입니다.<span>하지만 나는 그것을 기꺼이 그곳에 가지고 있다, 예를 들어 중요한 것을 위해.<h1>.

<h1 id="logo">
  <a href="">Stack Overflow<span></span></a>
</h1>

#logo a {
   position:relative;
   display:block;
   width:[image width];
   height:[image height]; }

#logo a span {
   display:block;
   position:absolute;
   width:100%;
   height:100%;
   background:#ffffff url(image.png) no-repeat left top;
   z-index:100; /* Places <span> on top of <a> text */  }

접근성 이유가 중요한 경우 첫 번째 변형 모델을 사용합니다(고객이 스타일이 없는 이미지를 보고 싶어 할 때).

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

위의 HTML 코드는 올바른 구조를 가지고 있으며 사용자만 방문자에게 적합한지 결정해야 하기 때문에 가상 SEO 요구 사항을 준수할 필요가 없습니다.

또한 HTML 코드가 적은 변형을 사용할 수 있습니다.

<h1 id="logo">
  <a href=""><span>Stack Overflow</span></a>
</h1>

/* position code, it may be absolute position or normal - depends on other parts of your site */
#logo {
  ...
}

#logo a {
   display:block;
   width: actual_image_width;
   height: actual_image_height;
   background: url(image.png) no-repeat left top;
}

/* for accessibility reasons - without styles variant*/
#logo a span {display: none}

다른 모든 CSS 스타일과 해킹은 작업과 일치하지 않기 때문에 제거하였습니다.특정한 경우에만 유용할 수 있습니다.

여기서 조금 늦게 들어왔지만, 저항할 수 없었습니다.

당신의 질문은 반쯤 결함이 있습니다.설명하겠습니다.

이미지 교체에 대한 당신의 질문의 전반부는 유효한 질문이며, 제 의견은 로고의 경우 단순한 이미지, alt 속성, 그리고 포지셔닝을 위한 CSS로 충분합니다.

로고에 대한 H1의 "SEO 값"에 대한 질문의 후반부는 다른 유형의 콘텐츠에 사용할 요소를 결정하는 잘못된 접근 방식입니다.

로고는 기본 표제도 아니고 표제도 아니며, H1 요소를 사용하여 사이트의 각 페이지에 로고를 표시하는 것은 순위에 득보다 실이 더 될 것입니다.의미론적으로 제목(H1 - H6)은 콘텐츠의 제목과 부제목에 적합합니다.

HTML5에서는 페이지당 두 개 이상의 제목이 허용되지만 로고는 그 중 하나를 사용할 수 없습니다.로고는 흐릿한 녹색 위젯일 수 있고 일부 텍스트는 머리글 옆에 있는 이미지에 있습니다. 로고는 일종의 "스탬프"이지 내용을 구성하는 계층적 요소가 아닙니다.사이트의 각 페이지의 첫 번째 H1(사용자가 더 많이 사용하는지 여부는 제목 계층에 따라 다릅니다)은 제목에 제목을 붙여야 합니다.인덱스 페이지의 기본 제목은 'NYC의 퍼지 그린 위젯을 위한 최상의 소스'일 수 있습니다.다른 페이지의 기본 제목은 'Fuzzy Widget의 배송 세부사항'일 수 있습니다.다른 페이지에서는 'Bert's Fuzzy Widget Inc.에 대하여'일 수 있습니다.당신은 이해합니다.

참고 사항:믿기 힘들겠지만, 올바른 마크업의 예를 위해 Google 소유 웹 속성의 출처를 보지 마십시오.이것은 그 자체로 전체 게시물입니다.

HTML과 해당 요소에서 "SEO 값"을 최대한 얻으려면 HTML5 사양을 살펴보고 검색 엔진 전에 (HTML) 의미론과 사용자에 대한 가치를 기반으로 마크업 결정을 내리면 SEO에서 더 나은 성공을 거둘 수 있습니다.

W3C는 어떻습니까?

https://www.w3.org/ 을 한 번 보세요.이미지에 다음이 있습니다.z-index:1는 텍트는여뒤있에습다니지있만기에 때문에 .z-index:0에결된합에 position: absolute;

원본 HTML:

<h1 class="logo">
    <a tabindex="2" accesskey="1" href="/">
        <img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C">
    </a>
    <span class="alt-logo">W3C</span>
</h1>

원본 CSS:

#w3c_mast h1 a {
    display: block;
    float: left;
    background: url(../images/logo-w3c-screen-lg) no-repeat top left;
    width: 100%;
    height: 107px;
    position: relative;
    z-index: 1;
}
.alt-logo {
    display: block;
    position: absolute;
    left: 20px;
    z-index: 0;
    background-color: #fff;
}

당신은 H1 토론에 관심이 있을 거라고 생각합니다.페이지 제목에 h1 요소를 사용할지 로고에 사용할지에 대한 토론입니다.

개인적으로 저는 당신의 첫 번째 제안에 동의합니다. 다음과 같은 것입니다.

<div id="header">
    <a href="http://example.com/"><img src="images/logo.png" id="site-logo" alt="MyCorp" /></a>
</div>

<!-- or alternatively (with css in a stylesheet ofc-->
<div id="header">
    <div id="logo" style="background: url('logo.png'); display: block; 
        float: left; width: 100px; height: 50px;">
        <a href="#" style="display: block; height: 50px; width: 100px;">
            <span style="visibility: hidden;">Homepage</span>
        </a>
    </div>
    <!-- with css in a stylesheet: -->
    <div id="logo"><a href="#"><span>Homepage</span></a></div>
</div>


<div id="body">
    <h1>About Us</h1>
    <p>MyCorp has been dealing in narcotics for over nine-thousand years...</p>
</div>

물론 이것은 당신의 디자인이 페이지 제목을 사용하는지에 따라 다르지만, 이것은 이 문제에 대한 저의 입장입니다.

에서 제목을 놓쳤습니다.<a>원소의

<h1 id="logo">
  <a href="#" title="..."><span>Stack Overflow</span></a>
</h1>

제목을 넣을 것을 제안합니다.<a>클라이언트가 해당 이미지의 의미를 알고 싶어할 것이기 때문입니다.당신이 설정했기 때문입니다.text-indent을 시험하기 위해<h1>따라서 프런트 엔드 사용자는 로고 위에 마우스를 올리는 동안 메인 로고에 대한 정보를 얻을 수 있습니다.

<h1>
  <a href="http://stackoverflow.com">
  Stack Overflow<img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

이것은 SEO가 H1 태그에 높은 우선순위를 부여하기 때문에 SEO에 대한 좋은 옵션이었고, H1 태그 내부는 사용자의 사이트 이름이어야 합니다.SEO에서 사이트 이름을 검색하면 사이트 로고도 표시됩니다.

사이트 이름을 숨기거나 텍스트를 음수 값으로 사용하십시오. ex

h1 a {
 text-indent: -99999px;
}

아무도 언급하지 않은 한 가지 점은 h1 속성이 모든 페이지에 특정되어야 하며 사이트 로고를 사용하면 사이트의 모든 페이지에서 H1을 효과적으로 복제할 수 있다는 사실입니다.

저는 최고의 SEOh1이 판매나 미적 가치에 가장 적합하지 않은 경우가 많기 때문에 각 페이지에 숨겨진 z 지수 h1을 사용하는 것을 좋아합니다.

위의 해결책을 다 읽은 후, 저는 CSS Grid 솔루션을 사용했습니다.

1. h1 텍스트와 이미지를 포함하는 div를 만듭니다.
2. 두 항목을 동일한 셀에 배치하고 둘 다 상대적으로 배치합니다.
3. 기존의 zeldman.com 기법을 사용하여 텍스트 채우기, 공백 및 오버플로 속성을 사용하여 텍스트를 숨깁니다.

<div class="title-stack">
    <h1 class="title-stack__title">StackOverflow</h1>
    <a href="#" class="title-stack__logo">
        <img src="/images/stack-overflow.png" alt="Stack Overflow">
    </a>
</div>

.title-stack {
    display: grid;
}
.title-stack__title, .title-stack__logo {
    grid-area: 1/1/1/1;
    position: relative;
}
.title-stack__title {
    z-index: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

이미지를 포장할 때 브라우저 스타일을 적용하지 않으려면<h1>당신은 동일한 접근성과 SEO 개선을 얻을 수 있습니다.<h1>속성을 사용하여role="heading"그리고.aria-level="1"

예를 들어, Voice Over에 관한 한.

<h1>
    <a href="/">
        Stack Overflow
    </a>
</h1>

와 동일합니다.

<div role="heading" aria-level="1">
    <a href="/">
        <img src="https://via.placeholder.com/150" alt="Stack Overflow" />
    </a>
</div>

모르겠어요, 하지만 이 형식은...

<h1>
    <span id="site-logo" title="xxx" href="#" target="_self">
        <img src="http://www.xxx.com/images/xxx.png" alt="xxx" width="xxx" height="xxx" />
        <a style="display:none">
            <strong>xxx</strong>
        </a>
    </span>
</h1>

단순하고 제 사이트에 해를 끼치지 않았습니다.당신은 그것을 css 할 수 있지만 나는 그것이 더 빨리 로딩되는 것을 보지 못합니다.

새로운 (Keller) 방법은 -99999px 방법보다 속도를 향상시킬 것으로 예상됩니다.

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

여기서 추천: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

SEO 이유:

<div itemscope itemtype="https://schema.org/Organization">
 <p id="logo"><a href="/"><span itemprop="Brand">Your business</span> <span class="icon fa-stg"></span> - <span itemprop="makesOffer">sell staff</span></a></p>
 </div>
   <h1>Your awesome title</h1>

<h1><a href="/" title="Some title">Name</a></h1>

h1 a{
  width: {logo width};
  height: {logo height};
  display:block;
  text-indent:-9999px;
  background:url({ logo url});
}

<div class="logo">
    <h1><a href="index.html"><span>Insert Website Name</span></a></h1>
    <p>Insert Slogan Here</p>
</div>

#header .logo h1 {
    background: red; /* replace with image of logo */
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a {
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a span {
    display:none;
}

언급URL : https://stackoverflow.com/questions/665037/replacing-h1-text-with-a-logo-image-best-method-for-seo-and-accessibility