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

240

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.

Andrzej
źródło
powinieneś sprawdzić ten temat na: stackoverflow.com/questions/1874895/…
meo
15
Matt Cutts odpowiadając na to pytanie. youtu.be/fBLvn_WkDJ4
troynt
2
Czy titleatrybut nie powinien znajdować się w <a>?
bobo
23
To pytanie nie powinno być oznaczone jako nie na temat. Jest to dość jasno określone pytanie dotyczące CSS i optymalizacji pod kątem wyszukiwarek. To, że nie jest to C #, nie oznacza, że ​​nie jest to kod.
MikeMurko
3
@troynt Czasami znajduję Matta Cuttsa, który udziela mylących rad. Jako taki raczej go nie obserwuję.
TheBlackBenzKid

Odpowiedzi:

221

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!

Rahul
źródło
12
czy owijanie h1 wokół obrazu tekstem alternatywnym ma taką samą wagę (seo-mądrość), jak zwykły tekst owinięty h1?
Andrew
11
Nawiasem mówiąc, logo jest częścią zawartości witryny, nie jest używane do dekoracji, więc użyj <img> z atrybutem alt, a nie CSS dla swojego logo.
Boris Guéry
14
Matt Cutts odpowiadając na to pytanie. youtube.com/user/GoogleWebmasterHelp#p/search/0/fBLvn_WkDJ4
troynt
34
Niestety link w komentarzu pozostawionym przez @troynt jest teraz zepsuty. Oto nowy bezpośredni link do treści: youtu.be/fBLvn_WkDJ4
ahsteele
10
Dla wszystkich, którzy zastanawiają się, co jest w połączonym filmie: Matt Cutts w zasadzie mówi, powinieneś użyć atrybutu alt tagu img zamiast ukrywać tekst za pomocą css.
bjunix
17

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 */  }
Rob Knight
źródło
1
Co jest złego w wcięciach? Moje założenie było takie, że czytniki ekranu i roboty wciąż zbierają tekst pomimo wcięcia.
ckarbass
2
Przepraszam, że tyle czasu zajęło mi powrót tutaj. Jedynym problemem z wcięciem jest to, że obrazy są wyłączone w przeglądarce użytkownika, ale CSS jest włączony, nic się nie pojawia, tekst lub obrazy. To rodzaj skrajnego przypadku, ale dla mnie ważne, aby pracować na stronie uniwersyteckiej.
Rob Knight
hmm ... Nie mogłem tego uruchomić. Tekst kotwicy pojawiał się na górze obrazu.
Andrew
<nitpicker> zamiast tego użyj #logo span, renderowanie w przeglądarce będzie bardziej wydajne </nitpicker>
Chris Missal
1
W niektórych przypadkach potrzebujesz {top: 0}, aby #logować zakres.
Marcus
11

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.

se_pavel
źródło
3
display:nonenie jest dostępne.
KPM
Najlepszą metodą jest zawijanie logo pod div ze względu na jego dostępność, użyteczność i optymalizację SEO i jest ono najczęściej stosowane w dużych organizacjach internetowych. Twitter, Amazon, Mozilla nie używają <h1> dla swoich logo, ale główne nagłówki, aby lepiej uchwycić wartość strony. bit.ly/1MR4fr5
Oriol
4

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.

Mattypants
źródło
1
Dodając do tego, że wszystko to jest prawdą, a logo nie powinno być h1 na żadnej innej stronie oprócz strony głównej (i idealnie nie na stronie głównej). Jednak często na stronie głównej najodpowiedniejszym miejscem dla h1 będzie logo, ponieważ treść banera bohatera może nie być wystarczająco precyzyjna w temacie witryny (tj. Może dotyczyć bieżącej usługi lub produktu, który jest wypychany, a nie główny temat witryny). Jeśli strona ma tylko jeden obszar zainteresowania (np. Strona dla aplikacji), obszar bohatera może działać dla h1. Kiedy to nie działa, obraz z altem owiniętym w h1 jest lepszy niż nic.
elmarko
3

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.

Ross
źródło
Jestem prawie pewien, że IMG są uważane za treść, podczas gdy obrazy tła css nie. Dlatego skłaniam się w stronę obrazów tła dla obrazów w całej witrynie i tego rodzaju rzeczy, które nie są wyraźnie przeznaczone dla tej zawartości strony.
Joe Phillips
@ d03boy: Cóż, w takim przypadku możesz utworzyć div inline, który ma prawidłową wielkość dla rozmiaru logo i daje to tło. Zakres w nim (który ma widoczność: ukryty;) zapewni zastąpienie tekstu alternatywnego.
Ross
6
Debata H1 jest teraz martwym ogniwem
alex
3
<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;
}
Vishal Gupta
źródło
2

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.

30 ml
źródło
2

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;
}
Sebastien Horin
źródło
1

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.

DFA
źródło
Zawsze możesz użyć H1 dla logo tylko na stronie głównej.
Mariusz Jamro
0

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.

Taswiz
źródło
0

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>
Potky
źródło
0

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;
}
Dani Amsalem
źródło
-1
<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});
}
Rodrigo Reis
źródło
Najlepiej nie używać takich masywnych wcięć tekstu, ponieważ powoduje to potencjalnie duży spadek wydajności. Szczegółowe wyjaśnienie tutaj .
Nick F
-1
<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;
}
Daniel Boundy
źródło