Powszechną praktyką dla programistów front-end jest umieszczanie tytułu lub logo witryny w tagu H1, a tytuł w H2. Ale w większości przypadków tytuł strony / artykułu jest ważniejszy, ponieważ przenosi wartość treści. Więc moje pytanie brzmi: jakie jest najlepsze podejście z punktu widzenia semantycznego i SEO. Przykłady:
Pod warunkiem inne warianty, jeśli uważasz, że będą miały większy efekt.
Odpowiedzi:
Zwykle nie umieszczam logo ani tytułu witryny w H1. Lubię patrzeć na to, że każda strona jest dokumentem. Ten dokument dotyczy określonego tematu, co znajduje odzwierciedlenie w tytule strony, a także w nagłówku głównym. Sama witryna jest wydawcą dokumentu. Zatem semantycznie niewłaściwe jest używanie logo witryny lub nazwy jako głównego nagłówka każdej strony. Logo są wyświetlane w widocznym miejscu, aby przypomnieć użytkownikowi, gdzie się znajdują i dla celów brandingowych, ale tak naprawdę nie stanowią części treści ani dokumentu.
Mam na myśli, że kiedy oglądasz news, w rogu może być widoczne małe logo kanału informacyjnego, ale nie będzie ono zatytułowane „CNN” ani „BBC News”. Nagłówek będzie dotyczył historii, a nie sieci, która ją publikuje. Podobnie, gdy czytasz czasopismo, w tytule jest używany tylko tytuł artykułu, a nie nazwa publikacji.
Również semantycznie niepoprawne jest używanie znacznika H1 dla logo / nazwy strony i jednego dla tytułu dokumentu. Nagłówki określają hierarchiczną strukturę treści na stronie; użycie jednego dla nazwy strony i drugiego dla tytułu dokumentu jest jak powiedzenie, ta strona ma 2 główne sekcje: „mojadomena.com” i „skontaktuj się z nami”.
h1, ale tylko na ich stronie głównej . Przejdź do konkretnego wpisu, a tytuł wpisu jest teraz w h1.
Zobacz stronę # 37 dokumentu karty raportu Google SEO :
Większość stron głównych produktów ma możliwość korzystania z jednego
<h1>tagu, jak w powyższym przykładzie, ale obecnie używa tylko innych tagów nagłówka (<h3>w tym przypadku) lub większego stylu czcionki. Stylizując tekst tak, aby wyglądał na większy, można uzyskać taką samą prezentację wizualną, ale nie zapewnia on tego samego znaczenia semantycznego wyszukiwarce, co<h1>tag. Nazwa produktu i / lub kilka słów o jego funkcjach świetnie jest umieścić w<h1>tagu na stronie głównej produktu.
Według własnej analizy ofert Google, doszedłem do wniosku, że Google spodziewa się , że w H1 pojawi się wyjątkowa, specyficzna dla strony wartość (ilustruje to ilustracja w dołączonym dokumencie).
Oto dobre uzasadnienie: Twoje logo jest obrazem, a nie <h1>
Semantycznie, <h1>powinien być używany jako tytuł strony, a tytuł strony powinien być unikalny dla każdej strony. Twoje logo lub nazwa witryny nie jest tytułem strony (oprócz być może strony głównej).
Twoje logo / nazwa strony powinna być zapisana zwykłym div, być może z identyfikatorem „nagłówka”. Lub <header>tag, jeśli używasz HTML5.
<img>tagiem, może być tłem, a nie tłem <h1>tagu. Jednak, jak argumentuje linkowany artykuł, twoje logo może być postrzegane jako treść strony.
IMO na stronie powinien znajdować się tylko jeden H1. I H1 powinien zawsze przed H2 - aby zachować prawidłową hierarchię treści.
Logo jest często powtarzane na każdej stronie i, jak mówisz, na większości stron tytuł jest prawie zawsze ważniejszy.
Na stronie głównej rozważę użycie:
logo / tytuł - H1 [, tytuł - H2]
Chociaż na stronie głównej logo może być również Twoim tytułem.
Jednak na wszystkich kolejnych stronach wybrałbym:
logo - inny tag, tytuł - H1
Nawet logo w tle, jeśli to konieczne.
Tym, czego tak naprawdę potrzebujesz w tagu H1, jest tytuł strony lub to, co czyni tę stronę wyjątkową. Jeśli używasz w nim obrazu, musisz to zrobić przy użyciu metody awaryjnej w celu zmniejszenia:
<style>
h1{background: url('imagePathHere.gif');width:60px;height:10px;}
h1 span{display:none}
</style>
<h1><span>Unique Page Title</span></h1>
W ten sposób możesz ustawić obraz, który będzie wyświetlany dla H1 (które ludzie często niewłaściwie używają jako obszaru logo) i nadal ma w nim dobre treści dla osób korzystających z pogorszonego internetu. Sprawia również, że Twoja wartość SEO jest szczęśliwa.
To jest wspaniałe pytanie, ze względu na praktyki (i szablony), które istnieją.
Osobiście lubię odnosić się do logiki „Zarys 101”, biorąc pod uwagę następujące kwestie:
H1 jest jak tytuł (na pewno lubisz uzupełniać swój tytuł HTML) i powinien być tylko jeden na stronę, tak jak strona ma tylko jeden tytuł
H2 jest podobna do cyfr rzymskich w zarysie: I., II., III. Itp.
H3 byłby konturowym odpowiednikiem A., B., C.
Często praktyczne zastosowanie tej logiki jest trudne do narzucenia na stronie internetowej - jest tak wiele przypadkowych fragmentów informacji, które po prostu nie łączą się w tę hierarchię. Jeśli jednak usiądziesz i spróbujesz przełamać tę logikę, czuję, że ta dyscyplina przynosi korzyści.
Jestem h1głównym facetem tytułowym. Główny tytuł to zdobiona nazwa strony lub, jak to nazywasz, logo. O to chodzi - w nagłówku strony logo nie jest tak naprawdę logo, to ilustrowany nagłówek strony. Projektanci po prostu lubią projektować jako logo.
Co jest nie tak z LOGO -> H1?
<div>Google</div>
<h1>About Us</h1>
Teraz, ponieważ h1jest to najważniejsza sekcja, która mówi odwiedzającemu o co w tym wszystkim chodzi, odwiedzający nie może zrozumieć strony, ponieważ h1jest zbyt konkretny. O kim?
<h1>Google</h1>
<h2>About Us</h2>
Ta strona dotyczy Google. Oto sekcja o nas. Widzisz - nie ma pytania? Wszystko jasne.
Struktura strony. Jeśli umieścisz główny nagłówek witryny w div lub p, nie ma z czym go kojarzyć.
<p>Google</p>
<h1>About us</h1>
Jak mogę powiązać „O mnie” z Google, jeśli h1później? Ponieważ wszystko, co przychodzi PO, H1jest z tym związane, a nie to, co dzieje się wcześniej.
<h1>Google</h1>
<h2>About Us</h2>
„O nas” należy do Google. Brak pytań.
HTML jest językiem opisującym informacje. Dlatego nie wyświetlasz informacji, tylko je opisujesz. I każda strona jest niezależna. Dlatego opisujesz jedną stronę, ponieważ nie ma powiązań między stronami. Po prostu linki prowadzące do poszczególnych stron.
<p>Google</p>
<h1>About us</h1>
Ta strona jest o nas. Kto / co to jest? Niejasny. To po prostu opisuje coś o nazwie „O nas”.
<h1>Google</h1>
<h2>About Us</h2>
Ta strona opisuje google. I jest sekcja O nas. Us = najprawdopodobniej google, ponieważ struktura opisuje to w ten sposób.
Mam nadzieję, że zgodziłem się :)
PS! Nie możesz użyć h2- h1- h3ponieważ jest to nielogiczne, dlatego duża porażka. Tylko dlatego, że w3c nie powiedział, że jest niedozwolone, nie czyni go ważnym. To nielogiczne, pomyśl o tym.
Logo jako tag h2?
Właśnie przeglądałem SitePoint (www.sitepoint.com), który jest blogiem WordPress z mieszanką zwykłych stron i blogów. Ogólnie stwierdziłem, że mają tytuł strony jako znacznik h1, a logo ustawione jako h2. Możesz to zobaczyć na stronie blogu, takiej jak www.blogs.sitepoint.com/category/design/. Podróżując po stronie znajdziesz różne konfiguracje. Często nie mogłem znaleźć tagu h1, jako przykładu na głównej stronie produktu (http://products.sitepoint.com/). Chociaż na tej stronie kliknięcie dowolnego konkretnego produktu w celu uzyskania dodatkowych informacji www.sitepoint.com/books/design2/, ponownie okaże się, że h1 to tytuł strony, h2 to logo. Typowa strona internetowa jest podobna do bloga (patrz www.sitepoint.com/help/). W tym przypadku tematami najczęściej zadawanych pytań są tagi h2.
Tom Rogers
Twoje logo nie musi być zagnieżdżone w nagłówku - wystarczy prosty połączony obraz w nagłówku header. Ale powinien to być zarówno tytuł witryny, jak i tytuł strony / artykułu <h1>. Ten artykuł ma charakter informacyjny: Prawda o wielu znacznikach H1 w erze HTML5 .