SEO the Hell out of Your Heading Tags

1. Tagi nagłówków nie są przeznaczone do ich projektowania. Są używane do tworzenia struktury .
2. Tagi nagłówków są jak etykiety dla różnych sekcji Twojego postu na blogu.
3. Kolejność nagłówków (i ich liczby) ma znaczenie.
4. Przykład prawdziwego wpisu na blogu.
5. Posiadanie solidnej struktury bloga pomaga wyszukiwarkom lepiej to zrozumieć.
6. Nie podoba ci się, jak wyglądają Twoje nagłówki? Dowiedz się CSS!

Tagi nagłówków dezorientują ludzi.

Różne znaczniki nagłówków (1-6) są często stylizowane na różne sposoby. Kiedy ktoś zaczyna eksperymentować ze swoim motywem, widzi różne style, a następnie kojarzy te tagi z projektem .

• Gdy chcą użyć zielonej czcionki wielkiej, przełączają się na <h4>.
• Kiedy chcą użyć fioletowej czcionki pisanej kursywą, przełączają się na <h6>.

Łatwo jest skojarzyć nagłówki z różnymi wyborami projektowymi, więc nie obwiniam cię. Możesz nie wiedzieć lepiej.

Ale używanie tagów nagłówków w ich projektach zamiast tego, do czego są przeznaczone, zmyli piekło z Google.

Tagi nagłówków nie są przeznaczone do ich projektowania. Są używane do tworzenia struktury .

Tagi nagłówków służą do porządkowania treści na stronie w logiczny sposób. Lubię porównywać go do szkicowania eseju, bo tak właśnie jest (ale dla strony lub postu na blogu).

Wróćmy do lekcji angielskiego w szkole średniej (ugghhh, wiem, nosz ze mną). Moi nauczyciele często podkreślali znaczenie nakreślenia papieru przed jego napisaniem. Nigdy tego nie robiłem, ponieważ jestem typem „nurkującego”, ale wciąż pamiętam, co próbowali mnie nauczyć o zarysowaniu.

Zarysowanie to określenie struktury eseju i wyraźnego kierunku. Pomaga ci utrzymać się na swoim miejscu i upewnić się, że dyskutujesz o właściwych rzeczach we właściwych miejscach iw porządku, który ma sens.

Kiedy nakreślasz, możesz zrobić coś takiego:

• Tytuł eseju
  • Wprowadzenie
    • Oświadczenie o tezie
    • Przedstaw pomysły
    • Segway do pierwszego punktu
  • Przykład 1
    • Bla bla bla
    • Bla bla bla
    • Mnóstwo ważnych, całkowicie niedorzecznych rzeczy.
  • Przykład # 2
    • Bla bla bla
    • Bla bla bla
    • Mnóstwo ważnych, całkowicie niedorzecznych rzeczy.
  • Przykład # 3
    • Bla bla bla
    • Bla bla bla
    • Mnóstwo ważnych, całkowicie niedorzecznych rzeczy.
  • Wniosek
    • Podsumowanie trzech przykładów.
    • Omów, w jaki sposób odnoszą się do tezy.
    • Naprawdę poprowadź tę pracę do domu.

Te punkty? To są twoje tagi z nagłówkami.

Tagi nagłówków są jak etykiety dla różnych sekcji Twojego postu na blogu.

Każdy nagłówek powinien być przeglądem kolejnych akapitów.

Na przykład ten duży nagłówek w górę ^, to tag <h2>. Mówię, że nagłówki są etykietami dla sekcji, a następnie w kolejnych akapitach (takich jak ten) omawiam tę kwestię.

Dokładnie tak wygląda powyższy zarys. Mam „nagłówek” o nazwie „Przykład 1”, a następnie w kolejnych punktach opisuję kilka rzeczy na temat tego przykładu # 1. Nagłówek jest związany z treścią, która następuje bezpośrednio.

Kolejność nagłówków (i ich liczby) ma znaczenie.

Strona internetowa powinna zawsze zaczynać się od <h1>, a następnie pracować w górę (2-6). W przypadku pojedynczego wpisu na blogu powinieneś mieć tylko jeden tag <h1> na stronie: tytuł postu. Następnie wszelkie nagłówki w tym poście powinny zaczynać się od <h2>.

Możesz również myśleć o tym jak o książce. Tytuł książki jest tagiem <h1>, a ty masz oczywiście tylko jeden tytuł do książki. Następnie każdy rozdział jest tagiem <h2>, ponieważ są to nowe sekcje.

Spójrz na powyższy zarys. Za każdym razem, gdy wciskamy listę, zwiększamy liczbę nagłówków. Jeśli właśnie przenieśliśmy się do nowej linii, ale nie wcięliśmy, numer pozostaje taki sam.

Zmieszany? Oto ten sam zarys, ale tym razem z tagami nagłówków.

• <h1> Tytuł eseju </h1>
  • <h2> Wprowadzenie </h2>
    • Oświadczenie o tezie
    • Przedstaw pomysły
    • Segway do pierwszego punktu
  • <h2> Przykład # 1 </h2>
    • Bla bla bla
    • Bla bla bla
    • Mnóstwo ważnych, całkowicie niedorzecznych rzeczy.
  • <h2> Przykład # 2 </h2>
    • Bla bla bla
    • Bla bla bla
    • Mnóstwo ważnych, całkowicie niedorzecznych rzeczy.
  • <h2> Przykład # 3 </h2>
    • Bla bla bla
    • Bla bla bla
    • Mnóstwo ważnych, całkowicie niedorzecznych rzeczy.
  • <h2> Wniosek </h2>
    • Podsumowanie trzech przykładów.
    • Omów, w jaki sposób odnoszą się do tezy.
    • Naprawdę poprowadź tę pracę do domu.

Tak więc teoretycznie, jeśli chcemy mieć nową sekcję pod Przykładem 3, „wcięliśmy”, dodamy nowy nagłówek używając <h3> (jeden wyższy niż h2), a następnie dodamy kilka akapitów poniżej. Lubię to:

• <h1> Tytuł eseju </h1>
  • <h2> Przykład # 3 </h2>
    • Bla bla bla
    • Bla bla bla
    • Mnóstwo ważnych, całkowicie niedorzecznych rzeczy.
    • <h3> Studium przypadku </h3>
      • Bla bla bla
      • Bla bla bla

Przykład prawdziwego wpisu na blogu.

Oto bardziej praktyczny przykład prawdziwego wpisu na blogu w akcji. Używam mojego posta 6 rzeczy, które możesz zrobić, aby przyspieszyć swój blog jako przykład. Najedź kursorem na każdy nagłówek, aby uzyskać więcej informacji.

• <h1> 6 rzeczy, które możesz zrobić, aby przyspieszyć swój blog </h1>
  • <h2> 1) Optymalizuj i kompresuj obrazy. </h2>
    • Porozmawiaj o tym, jak kompresować obrazy.
  • <h2> 2) Nie ładuj nadmiernej ilości treści na swojej stronie. Użyj fragmentów! </h2>
    • Porozmawiaj o tym, dlaczego ładowanie dużej ilości treści nie jest dobrym pomysłem.
  • <h2> 3) Rozpocznij buforowanie! </h2>
    • <h3> Oto, jak działa buforowanie… </h3>
      • Przykład: „życie bez buforowania”.
      • Przykład: „życie z buforowaniem”.
    • <h3> Jak włączyć buforowanie w swojej witrynie. </h3>
      • Buforowanie wbudowane w serwer jest najlepsze.
      • Wymień przykłady wtyczek, których można użyć.
  • <h2> 4) Użyj CDN. </h2>
    • Wyjaśnij, czym jest CDN.
    • Przykłady dostawców CDN.
  • <h2> 5) Uważaj na używane wtyczki. </h2>
    • Wyjaśnij, dlaczego chodzi o jakość, a nie ilość.
    • Kodowane słabo kontra wtyczka z dużą ilością funkcji.
    • <h3> Dowiedz się, jak wtyczka wpływa na wydajność witryny. </h3>
      • Pytania, które możesz sobie zadać, aby odróżnić małą wtyczkę od dużej.
      • Użyj wtyczki P3 do analizy strony.
    • <h3> Ogranicz korzystanie z „dużych” wtyczek. </h3>
      • Przypomnienie i podsumowanie dotyczące ograniczania dużych wtyczek.
  • <h2> 6) Znajdź lepszego hosta internetowego. </h2>
    • Wprowadzenie na temat tego, jak optymalizująca witryna jest ograniczona przez Twojego gospodarza.
    • <h3> Poziomuj swój hosting za pomocą „Zarządzanego hosta WordPress”. </h3>
      • Dlaczego hosting ogólny nie jest najlepszy, ponieważ jest zbudowany dla różnych platform.
    • <h3> Jak zarządzany host WordPress może przyspieszyć Twoją witrynę: </h3>
      • Bullet wskazuje, dlaczego zarządzany host jest lepszy.
    • <h3> Kilka przykładów hostów WordPress </h3>
      • Wyświetl przykłady zarządzanych hostów WordPress.
  • &lt;h2> Gotowy do przetestowania czasu ładowania witryny? </h2>
    • Link do narzędzi, które można wykorzystać do testowania czasu ładowania.
    • Rzuć wyzwanie ludziom, aby uzyskali czas ładowania poniżej 3 sekund.

Jedyny nagłówek 1 na stronie to mój tytuł postu. Wszystko po tym jest Nagłówek 2 lub większy.

Za każdym razem, gdy chcę rozwinąć Nagłówek 2 z większą liczbą podsekcji, zwiększam nagłówek (do Nagłówka 3). Gdybym chciał rozwinąć Nagłówek 3 i mieć pod-sekcje, zwiększyłbym się do Nagłówka 4 i tak dalej.

Posiadanie solidnej struktury bloga pomaga wyszukiwarkom lepiej to zrozumieć.

Wyszukiwarki muszą dołożyć wszelkich starań, aby zgadnąć, że witryna jest o. Dobra struktura i układ ułatwia to wyszukiwarce. Właściwe wykorzystanie kursu pozwala im wyraźnie zobaczyć, jak post jest ułożony, jakie sekcje są najważniejsze i jak się do siebie odnoszą.

Jeśli przeskakujesz przy użyciu wszystkich tagów <h1>, wyszukiwarki będą miały o wiele trudniejszy czas, aby dowiedzieć się, jaki jest główny punkt Twojego postu (tytuł postu).

Nie podoba ci się, jak wyglądają Twoje nagłówki? Dowiedz się CSS!

Jeśli chcesz: „Ale Ashley! Nienawidzę tego, jak wyglądają moje tagi Heading 2! Nagłówek 1 jest najlepszy i chcę go używać zawsze! ” ucz się CSS (lub, Oto szybki i darmowy przewodnik po zmianie stylów kursu ).

Nie podoba mi się wygląd nagłówka 2? Nie ma problemu. Zmień to. Spraw, aby wyglądał bardziej jak Nagłówek 1, jeśli tego chcesz.

Masz moc dokonywania takich zmian w projekcie. Nie trzymaj się struktury, która nie ma sensu tylko dlatego, że lubisz jej wygląd! Napraw swoją strukturę, a następnie poświęć trochę czasu na ulepszanie CSS, aby uzyskać pożądany projekt.