Zastąpienie tekstu H1 obrazem logo: najlepsza metoda na SEO i dostępność?

Robię to głównie jak ten powyżej, ale ze względów dostępności, muszę wspierać możliwość wyłączania obrazów w przeglądarce. Więc zamiast wciąć tekst z linku na stronie, pokrywam go absolutnie pozycjonując <span> do pełnej szerokości i wysokości <a> oraz za pomocą z-index, aby umieścić go nad tekstem linku w kolejności układania.

Cena jest jedna pusta <span>, ale jestem gotów ją mieć za coś tak ważnego jak <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 */  }

Jeśli ważne są względy dostępności, użyj pierwszego wariantu (gdy klient chce zobaczyć obraz bez stylów)

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

Nie ma potrzeby dostosowywania wyimaginowanych wymagań SEO, ponieważ powyższy kod HTML ma poprawną strukturę i tylko Ty powinieneś zdecydować, czy jest to odpowiednie dla Ciebie odwiedzających.

Możesz również użyć wariantu z mniejszym kodem 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}

Proszę zauważyć, że usunąłem wszystkie inne style CSS i hacki, ponieważ nie odpowiadały one zadaniu. Oni może być użyteczny tylko w szczególnych przypadkach.

Myślę, że zainteresuje cię dyskusja H1 . To debata o tym, czy użyć elementu h1 do tytułu strony, czy do logo.

Osobiście wybrałbym twoją pierwszą sugestię, coś w tym stylu:

<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>

Oczywiście zależy to od tego, czy twój projekt używa tytułów stron, ale takie jest moje stanowisko w tej kwestii.

Przegapiłeś tytuł w elemencie <a>.

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

Proponuję umieścić title w elemencie <a>, ponieważ klient chciałby wiedzieć, jakie jest znaczenie tego obrazu. Ponieważ Ustawiłeś text-indent do testu <h1>, aby użytkownik mógł uzyskać informacje o głównym logo, gdy unosi się na logo.

Dzwonienie trochę późno tutaj, ale nie mógł się oprzeć.

Twoje pytanie jest w połowie wadliwe. Pozwól mi wyjaśnić:

Pierwsza połowa twojego pytania, dotyczącego wymiany obrazu, jest słuszna i moim zdaniem dla logo wystarczy prosty obraz, atrybut alt i CSS do jego pozycjonowania.

Druga połowa twojego pytania, na "wartość SEO" H1 dla logo jest złe podejście do decydowania o tym, które elementy do wykorzystania dla różnych typów treść.

Logo nie jest głównym nagłówkiem, ani nawet nagłówkiem, a użycie elementu H1 do oznaczania logo na każdej stronie witryny zrobi (nieco) więcej szkody niż pożytku dla Twoich rankingów. Semantycznie, nagłówki (H1-H6 ) są odpowiednie dla, cóż, tylko, że: nagłówki i podtytuły dla treści.

W HTML5 dozwolone jest więcej niż jeden nagłówek na stronę, ale logo nie zasługuje na jedno z nich. Twoje logo, które może być rozmytym zielonym widżetem, a część tekstu znajduje się w obrazie od strony nagłówka z jakiegoś powodu - jest to rodzaj "znaczka", a nie hierarchiczny element do struktury treści. Pierwszy (czy używasz więcej zależy od hierarchii nagłówków) H1 każdej strony witryny powinien nagłówek jej tematu. Głównym nagłówkiem Twojej strony indeksu może być "najlepsze źródło rozmytych zielonych widżetów w Nowym Jorku". Głównym nagłówkiem na innej stronie może być "szczegóły wysyłki dla naszych rozmytych widżetów". Na innej stronie może być 'o Bert' s Fuzzy Widgets Inc.'. Rozumiesz.

Uwaga na marginesie: choć brzmi to niewiarygodnie, nie patrz na źródło właściwości internetowych należących do Google, aby znaleźć przykłady poprawnych znaczników. To jest cały post dla siebie.

Aby uzyskać jak najwięcej "wartości SEO" HTML i jego elementów, spójrz na specyfikację HTML5 i podejmuj decyzje dotyczące znaczników w oparciu o semantykę (HTML) i wartość dla użytkowników przed wyszukiwarkami, a będziesz miał lepszy sukces z SEO.

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

To była dobra opcja dla SEO, ponieważ SEO nadaje tagowi H1 wysoki priorytet, wewnątrz tagu h1 powinna znajdować się nazwa twojej witryny. Korzystając z tej metody, jeśli wyszukasz nazwę witryny w wyszukiwarce SEO, wyświetli również logo Twojej witryny.

Aby ukryć nazwę strony lub tekst, użyj text-indent w wartości ujemnej. ex

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

Jednym z punktów, którego nikt nie poruszył, jest fakt, że atrybut h1 powinien być specyficzny dla każdej strony, a użycie logo witryny skutecznie powieli H1 na każdej stronie witryny.

Lubię używać indeksu z ukrytego h1 dla każdej strony, ponieważ najlepsze SEO h1 często nie jest najlepsze dla sprzedaży lub wartości estetycznej.

Myślę, że przykład pierwszy jest więcej niż wystarczający, ponieważ tekst alt będzie wyświetlany, jeśli obrazy są wyłączone. Pomoże to również wyszukiwarkom dowiedzieć się o Twojej witrynie.

Update: wygląda na to, że się myliłem. Sprawdź ten Artykuł .

Nie wiem, ale jest to format, który został użyty...

<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>

Proste i nie zrobił mojej stronie żadnej szkody, o ile widzę. Można css to, ale nie widzę, że ładuje się szybciej.

Nowa (Keller) metoda ma poprawić prędkość w stosunku do metody-9999px:

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

Polecane tutaj: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

<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;
}

Z powodu 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>