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

Wygląda na to, że istnieje kilka różnych technik, więc miałem nadzieję uzyskać „ostateczną” odpowiedź w tej sprawie ...

Na stronie internetowej powszechną praktyką jest tworzenie logo, które prowadzi do strony głównej. Chcę to zrobić, jednocześnie optymalizując pod kątem wyszukiwarek, czytników ekranu, IE 6+ i przeglądarek, które wyłączyły CSS i / lub obrazy.

Przykład pierwszy: nie używa znacznika h1. Nie tak dobre dla SEO, prawda?

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

Przykład drugi: Znalazłem to gdzieś. CSS wydaje się trochę zrzędliwy.

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

Przykład trzeci: Ten sam HTML, inne podejście z użyciem wcięcia tekstu. Jest to podejście „Phark” do zastępowania obrazów.

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

Przykład czwarty: metoda Leahy-Langridge-Jefferies . Wyświetla się, gdy obrazy i / lub css są wyłączone.

<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 */
}

Jaka metoda jest najlepsza do tego rodzaju rzeczy? W odpowiedzi podaj kod HTML i CSS.

Brakuje Ci opcji:

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

tytuł w href i img do h1 jest bardzo, bardzo ważny!

Robię to głównie jak wyżej, ale ze względu na dostępność muszę obsługiwać możliwość wyłączenia obrazów w przeglądarce. Więc zamiast wcięcia tekstu z linku poza stroną, zakrywam go absolutnie pozycjonując <span>do pełnej szerokości i wysokości <a>i używając, z-indexaby umieścić go nad tekstem linku w kolejności układania.

Cena jest jedna pusta <span>, ale jestem gotów mieć ją tam dla czegoś 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 musisz spełniać wyimaginowanych wymagań SEO, ponieważ powyższy kod HTML ma prawidłową strukturę i tylko Ty decydujesz, czy jest to odpowiednie dla odwiedzających.

Możesz także 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}

Pamiętaj, że usunąłem wszystkie inne style CSS i hacki, ponieważ nie odpowiadały zadaniu. Mogą być przydatne tylko w szczególnych przypadkach.

Trochę się tutaj spóźniłem, ale nie mogłem się oprzeć.

Twoje pytanie jest na wpół wadliwe. Pozwól mi wyjaśnić:

Pierwsza połowa twojego pytania, dotycząca zastąpienia obrazu, jest ważnym pytaniem, a moim zdaniem jest to proste logo; atrybut alt; i CSS do jego pozycjonowania są wystarczające.

Druga połowa twojego pytania, dotycząca „wartości SEO” H1 dla logo, jest niewłaściwym podejściem do decydowania, które elementy zastosować dla różnych rodzajów treści.

Logo nie jest głównym nagłówkiem ani nawet nagłówkiem, a użycie elementu H1 do oznaczenia logo na każdej stronie witryny wyrządzi (nieznacznie) więcej szkody niż pożytku dla twoich pozycji w rankingu. Semantycznie, nagłówki (H1 - H6) są odpowiednie do, no cóż, tylko: nagłówków i podtytułów dotyczących treści.

W HTML5 na stronie dozwolony jest więcej niż jeden nagłówek, ale logo nie zasługuje na żaden z nich. Twoje logo, które może być rozmytym zielonym widżetem, a jakiś tekst znajduje się z boku nagłówka z jakiegoś powodu - to coś w rodzaju „stempla”, a nie elementu hierarchicznego do strukturyzacji treści. Pierwsza (to, czy wykorzystasz więcej, zależy od hierarchii nagłówków) H1 każdej strony witryny powinna zawierać nagłówek z jej tematem. Główny główny nagłówek strony indeksu może brzmieć „Najlepsze źródło rozmytych zielonych widżetów w Nowym Jorku”. Podstawowym nagłówkiem na innej stronie może być „Szczegóły wysyłki dla naszych rozmytych widżetów”. Na innej stronie może to być „About Bert's Fuzzy Widgets Inc.”. Masz pomysł.

Uwaga dodatkowa: Choć brzmi to niesamowicie, nie patrz na źródło poprawnych właściwości internetowych Google. To jest cały post sam w sobie.

Aby uzyskać jak najwięcej „wartości SEO” dla HTML i jego elementów, zapoznaj się ze specyfikacjami HTML5 i podejmij decyzje dotyczące znaczników na podstawie semantyki (HTML) i wartości dla użytkowników przed wyszukiwarkami, a będziesz mieć większy sukces ze swoją SEO.

Myślę, że zainteresowałaby Cię debata H1 . To debata na temat tego, 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 sprawie.

<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. Przy użyciu tej metody, jeśli wyszukujesz nazwę witryny w SEO, wyświetli się również logo Twojej witryny.

chcesz ukryć nazwę strony LUB tekst, użyj wcięcia tekstu w wartości ujemnej. dawny

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

Brakowało tytułu w <a>elemencie.

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

Proponuję umieścić tytuł w <a>elemencie, ponieważ klient chciałby wiedzieć, jakie jest znaczenie tego obrazu. Ponieważ ustawiłeś text-indentjuż test <h1>, ten użytkownik może uzyskać informacje o głównym logo, gdy najedzie na logo.

Jak działa W3C?

Wystarczy spojrzeć na https://www.w3.org/ . Obraz ma z-index:1, tekst jest tutaj, ale z tyłu ze względu na z-index:0sprzężony zposition: absolute;

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

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

Jedną kwestią, której nikt nie dotknął, jest fakt, że atrybut h1 powinien być specyficzny dla każdej strony, a użycie logo witryny skutecznie powiela H1 na każdej stronie witryny.

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

Nowa metoda (Keller) ma poprawić prędkość w porównaniu z metodą -9999px:

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

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

Nie wiem, ale tego formatu używali ...

<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 wyrządziło mojej stronie żadnej szkody, o ile widzę. Możesz css go, ale nie widzę, aby ładował się szybciej.

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>

Po przeczytaniu powyższych rozwiązań użyłem rozwiązania CSS Grid.

1. Utwórz div zawierający tekst h1 i obraz.
2. Ustaw dwa elementy w tej samej komórce i ustaw je relatywnie.
3. Użyj starej techniki zeldman.com, aby ukryć tekst za pomocą właściwości wcięcia, białych znaków i przepełnienia tekstu.

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