<h1> - Wpływ semantyczny vs. wpływ na SEO

W HTML5 jest wiele dyskusji na temat architektury struktury nagłówków. Po przeczytaniu różnych artykułów doszedłem do trzech możliwych architektur, które mają dla mnie logiczny sens, ale nie jestem pewien, która jest właściwa metoda podejścia. Wymienię je poniżej z przykładami kodu i mam nadzieję, że ktoś może rzucić nieco światła na właściwą równowagę, albo jeszcze gorzej / lepiej, powiedzieć przerażające „Robisz to źle” i pomóc.

Podejście 1: wersja A

Pojedynczy <h1>: Używanie nagłówków tylko dla treści specyficznych dla strony.

Pozostawia to <h1>nawigację najwyższego poziomu dla nagłówka specyficznego dla strony, jednocześnie przepływając w <h2-6>miarę potrzeby w obszarze zawartości. Pozostawiając <header>, <nav>i <footer>jako „Untitled” elementy.

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <section>
    <h2>
      <section>
        <h3>

<footer>
  <!-- no headings -->

Podejście 1: wersja 2

Wielokrotne <h1>: Używanie tylko nagłówków tylko dla treści specyficznych dla strony.

To samo co 1A z dodatkiem wielu, równie ważnych tematów treści strony. (np. możliwe w przypadku blogów lub podzielonych stron tematycznych)

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <article>
    <h2>
  <article>
    <h1>

<footer>
  <!-- no headings -->

Podejście 1: najbardziej logiczne dla SEO (moja opinia z moich badań)

• CIAŁO bez tytułu
  • Untitled NAV
• główny kierunek
  • Podtytuł
    • Nagłówek podsekcji
  • SEKCJA Bez tytułu

Podejście 2:

Różne <h1>: Podkreśl strukturę konspektu ORAZ hierarchię treści

Dotyczy to nagłówki do elementów w całej witrynie <header>, <nav>oraz <footer>za pomocą wielu <h1>„s dla non-treści zorientowanych elementów.

<header>
  <h1>
  <nav>
    <h2>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h1>
  <section>
    <h2>

Podejście 2 Zarys: Najbardziej logiczne dla konturu semantycznego (ponownie, moim zdaniem)

• Nagłówek nagłówka
  • Nagłówek nawigacji
• główny kierunek
  • Podtytuł
    • Nagłówek podsekcji
• Nagłówek stopki
  • Podtytuł

Podejście 3

Pojedynczy <h1>: Koncentracja na hierarchii treści; niższy poziom <h1-6>dla elementów obejmujących całą witrynę

Dotyczy to nagłówki do elementów w całej witrynie <header>, <nav>i <footer>bez użycia wielokrotność <h1>„s dla non-treści zorientowanych elementów.

<header>
  <h2>
  <nav>
    <h3>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h2>
  <section>
    <h3>

Podejście 3 Zarys: rodzaj hybrydy obu podejść

• Nagłówek nagłówka
  • Nagłówek nawigacji
• główny kierunek
  • Podtytuł
    • Nagłówek podsekcji
  • Nagłówek stopki
  • Podtytuł

Więc po tym wszystkim, jak mam to wszystko zrozumieć? Czy jedno podejście ma większą wartość semantyczną niż drugie? Czy ma się więcej sensu pod względem SEO? Czy można osiągnąć szczęśliwą równowagę?

Źródła: Było o wiele więcej, to te, które pamiętam w tej chwili

• https://youtu.be/GIn5qJKU8VM
• http://accessiblehtmlheadings.com/
• http://html5doctor.com/outlines/
• http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824

Na początek żaden z twoich przykładów nie ma nic wspólnego z semantyką. Twoje pytanie jest całkowicie oparte na modelu analizatora składni, w którym strona jest odczytywana od góry do dołu w tradycyjny sposób.

Z tego powodu twój pierwszy przykład jest poprawny. Poniższe przykłady nie dadzą przewidywalnych rezultatów i mogą spowodować poważne oparzenia serca.

Proszę zrozumieć, że na twoją stronę internetową można spojrzeć koncepcyjnie na kilka sposobów: po pierwsze, zgodnie z tradycyjnym modelem DOM, w którym HTML i takie są oceniane z perspektywy użytkownika; po drugie, tekst tylko z prostym znacznikiem, aby wskazać tytuły, podtytuły, treść i tak dalej; i trzy, przy użyciu widoku semantycznego, w którym tak naprawdę niewielka waga jest przykładana do znaczników nagłówka w indeksie w oparciu o jego miejsce w hierarchii h1-6. Z modelu DOM otrzymasz takie rzeczy, jak tag tytułu, metatag opisu i tak dalej, których brakowałoby w dwóch pozostałych widokach. Jednak widok DOM niewiele pomaga w ważeniu treści. Jego podstawową funkcją jest zrozumienie strony, nawigacji, nagłówka i stopek, początku i końca treści itp.

To, na co naprawdę musisz zwrócić uwagę, to tylko tekst i widoki semantyczne. Widok semantyczny pochodzi głównie z widoku tylko tekstowego, jednak niesie ze sobą różne językoznawstwo, psychosemantykę, semanityki i inne analizy treści.

Nie będę więcej opisywać semantyki, ale wskażę wam odpowiedź, którą napisałem jakiś czas temu, która jest mini-poradnikiem na ten temat: Dlaczego strona internetowa z wypychaniem słów kluczowych ma wyższą pozycję niż ta bez wyników wyszukiwania Google?

Ponieważ sieć oparta jest na drukowanej stronie, a parsery z pierwszych dni podążały za tymi tradycjami i są w dużej mierze niezmienione, nie można z nich uciec. Oto odpowiedź, która wyjaśnia kolejność czytania w nagłówku, która pozostaje najlepszą strategią opartą na modelu parsera: Popraw ranking Google pod kątem ogólnych i szczegółowych słów kluczowych

Przyznaję, że może istnieć pewien efekt przenoszenia znaczników nagłówka, ale pytam: Czy to rozsądne? Piekło nie! To, jak rzeczy są dziś ważone, może nie być takie, jak jutro. Postępowanie zgodnie z tradycyjnym formatem zapewnia przewidywalne wyniki, w których prosta zmiana wagi może wprawić witrynę w ruch.

Oto perspektywa tego, jak to działa: Korzyści z nazw domen w SEO Zignoruj ​​tytuł i pomiń samą górę odpowiedzi i przejdź do perspektywy programistów.

Jeśli przeczytasz te trzy odpowiedzi, możesz łatwo zrozumieć efekty tagu nagłówka. Bardzo możliwe jest zepsucie wydajności strony / witryny dzięki urozmaiceniu ich. Nawet zgodnie z tradycją możesz bardzo szybko cofnąć znacznik tytułowy i znacznik h1, optymalizując kilka dolnych znaczników nagłówka. Kluczem jest staranne wyważenie.

Na koniec będę Cię ostrzegać o wszystkich poradach SEO online od osób, które nie są inżynierami. Zarabianie pieniędzy i rywalizacja o twoją uwagę to rakieta. Jak działają wyszukiwarki, nie jest tajemnicą. Jest tam, jeśli wiesz, gdzie szukać. Większość wszystkich ekspertów SEO wcale nie jest ekspertami, ponieważ nie są w stanie powiedzieć Ci, w jaki sposób połączona jest technologia wyszukiwania. Poza tym, że jesteśmy inżynierem Google lub Bing, nigdy tak naprawdę nie wiemy dokładnie, jak działają te wyszukiwarki. Na szczęście Google powiedział nam wystarczająco dużo (i tak naprawdę powiedzieli nam prawie wszystko, co musimy wiedzieć - i nie, to nie pochodzi od faceta o imieniu Matt), że jeśli znasz naukę i technologie, całkiem rozsądny zestaw założeń może być zrobionym. Z mojego punktu widzenia większość SEO jest bardziej błędna niż prawidłowa, a niektóre mają znacznie wyższy współczynnik trafień niż średnia.

Poniżej przedstawiono perspektywę specyfikacji HTML5 opartą na założeniu, że konsumenci (np. Wyszukiwarki) będą oczekiwać i będą pracować z tym, co jest określone w standardach HTML. W obecnej praktyce takie szczegóły znaczników prawdopodobnie nie mają większego znaczenia dla SEO, ale mogą być ważne dla innych konsumentów i dostępności.

Użyję nagłówków odpowiedniej rangi, ponieważ to właśnie zachęca HTML5 , ale można również używać h1wszędzie (jeśli zawsze stosujesz elementy treści podziału na sekcje tam, gdzie jest to właściwe).

Nie można „stosować” nagłówków headerani footerelementów, ponieważ nie są one sekcjami treści (mogą zawierać tylko nagłówki, ale ten nagłówek nie byłby ograniczony do zakresu header/ footer).

Każdy cięcia elementem treści ( section, article, nav, aside), a każdy element główny cięcia ( body, blockquote, itd.) Może mieć nagłówek stosowane.

Te elementy sekcyjne content / korzeniowe oraz elementy nagłówek h1- h6są jedynymi elementami, które sprawą zarysu dokumentu .

Chociaż każda sekcja „tęskni” za nagłówkiem, nie jest wymagana, aby ją podać (w takim przypadku otrzymuje się „domniemany”, bez tytułu tytuł). Chociaż często jest to przydatne, istnieją przypadki, w których nie jest to naprawdę konieczne. Na przykład, jeśli masz tylko jedną nawigację, wystarczy navbez nagłówka. Jeśli jednak witryna zawiera wiele nawigacji, warto zastosować nagłówki wyjaśniające różne cele.

W twoim podejściu 1 bodyjest to sekcja bez tytułu (ale dzieje się tak tylko dlatego, że navpojawia się przed pierwszym elementem nagłówka; w przeciwnym razie h1byłby to nagłówek dla całego dokumentu).
Nie sądzę, aby posiadanie bodysekcji bez tytułu było dobrym wyborem. Jest to pierwszy wpis w konspekcie i idealnie (ale niekoniecznie) wszystko, co następuje, znajduje się w zakresie tego wpisu.

W przypadku typowej witryny internetowej z nawigacją globalną sensowne jest ( dłuższe wyjaśnienie ) użycie nazwy witryny dla bodynagłówka sekcji, ponieważ globalna nawigacja należy do całej witryny , a nie tylko do bieżącego dokumentu:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
-->

Główna treść tego dokumentu powinna również wchodzić w zakres nagłówka witryny, ponieważ witryna stanowi kontekst głównej zawartości tego dokumentu, tj. Jest częścią witryny:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <article> <!-- document content -->
    <h2>My blog post</h2>
  </article>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "My blog post"
-->

Jeśli masz wiele sekcji głównej zawartości, na przykład listę postów na blogu, często warto zastosować taką, sectionktóra zawiera je wszystkie article, zamiast mieć articlejako bezpośrednie potomki body:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- document content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
-->

Jeśli masz stopkę dla całej witryny, która jest tak złożona, że ​​wymaga elementów do dzielenia, powinna ponownie znajdować się na tym samym poziomie, navco główna treść (ponieważ należy do witryny, a nie głównej zawartości):

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- main content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

  <section> <!-- site footer -->
    <!-- this section should be the child of a 'footer' element -->
  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
    1.3. Untitled section
-->

(We wszystkich tych przykładach nawigacja znajduje się przed główną treścią, ale często sensowne jest, aby najpierw główna treść. Zamiana ich była możliwa. Należy tylko upewnić się, że h1nazwa witryny znajduje się przed innymi sekcjami / nagłówkami.)