8 najważniejszych tagów HTML dla SEO

Opublikowany: 2021-03-02

Czy korzystasz z tagów HTML w procesie SEO?

Tagi HTML to elementy kodu z zapleczem wszystkich stron internetowych, ale istnieją również określone typy kodu HTML, które dostarczają wyszukiwarkom kluczowe informacje do wyświetlania SERP. Zasadniczo elementy te wyróżniają części treści, które są istotne dla wyszukiwania, i opisują te elementy dla robotów wyszukiwarek.

To powiedziawszy, nie musisz używać wszystkich tych dodatkowych narzędzi kodu. Wyszukiwarki stają się coraz mądrzejsze, a znaczniki HTML są obecnie używane znacznie mniej niż w przeszłości. Ale kilka tagów nadal się trzyma - a niektóre nawet zyskały na wartości SEO.

W tym poście omówimy niektóre z kluczowych tagów HTML SEO, które nadal mają sens w 2020 roku.

1. Znacznik tytułu

Tagi tytułów służą do ustawiania tych klikalnych nagłówków, które widzisz w SERP:

Ogólnie rzecz biorąc, od Google zależy utworzenie nagłówka SERP dla Twojej strony i może on użyć dowolnego nagłówka sekcji z poziomu strony - lub może nawet utworzyć nowy nagłówek w ogóle.

Ale pierwszym miejscem, które Google ma sprawdzić pod kątem pomysłów na nagłówki, jest tag tytułu, a tam, gdzie obecny jest tag tytułu, Google najprawdopodobniej umieści go jako główny nagłówek w odpowiednim wykazie. W związku z tym optymalizacja tagu tytułu zapewnia pewną kontrolę nad sposobem reprezentacji strony w SERP.

Najlepsze praktyki

Z jednej strony Twój tytuł powinien zawierać słowa kluczowe, które pomogą mu pojawić się w wynikach wyszukiwania. Z drugiej strony, Twój tytuł powinien być wystarczająco atrakcyjny, aby użytkownicy mogli go kliknąć, dlatego wymagana jest równowaga między optymalizacją wyszukiwania a doświadczeniem użytkownika:

  • Uważaj na długość - Google wyświetli tylko pierwsze 50-60 znaków tytułu, a resztę skróci. Nie ma problemu z tytułem dłuższym niż 60 znaków, o ile umieścisz ważne informacje przed punktem odcięcia.
  • Uwzględnij rozsądną liczbę słów kluczowych - upychanie słów kluczowych może zostać ukarane, ale jedno lub dwa słowa kluczowe będą w porządku. Tylko upewnij się, że twój tytuł tworzy spójne zdanie.
  • Napisz dobrą kopię - nie bądź sprzedawczy i nie bądź ogólnikowy. Twórz opisowe tytuły, które podkreślą wartość twoich treści i ustal odpowiednie oczekiwania, aby użytkownicy nie zawiedli się podczas odwiedzania strony.
  • Dodaj nazwę marki - jeśli masz rozpoznawalną markę, która może zwiększyć współczynnik klikalności, możesz ją również dodać do tytułu.

Kod HTML

Poniżej znajduje się fragment kodu pobrany z artykułu BBC na temat statystyk koronawirusa. Możesz zobaczyć prawidłowo skonfigurowany tag tytułu znajdujący się bezpośrednio nad metatagiem opisu - o czym będziemy mówić dalej:

2. Metatag opisowy

Metatagi opisu służą do ustawiania opisów we fragmentach wyników wyszukiwania:

Google nie zawsze używa metatagów opisu do tworzenia tych fragmentów, ale jeśli metatag istnieje, istnieje duża szansa, że ​​Twój opis meta trafi do SERP.

Należy jednak pamiętać, że czasami Google zignoruje metatag opisu i zamiast tego zacytuje fragment tekstu ze strony. Zwykle dzieje się tak, gdy cytat lepiej pasuje do konkretnego zapytania niż opis w meta.

Zasadniczo Google wybierze najlepszą opcję zwiększania szans na kliknięcie.

Najlepsze praktyki

Zasady dotyczące meta opisów nie są przesadnie rygorystyczne - w końcu, jeśli nie napiszesz dobrego, nawet jeśli nie napiszesz go w ogóle, Google napisze go za Ciebie.

  • Uważaj na długość - podobnie jak w przypadku nagłówków, Google zachowa pierwsze 150–160 znaków opisu w metaopisie, a resztę skróci. Upewnij się, że ważne aspekty zostały uwzględnione na wczesnym etapie, aby zmaksymalizować zainteresowanie użytkowników.
  • Napisz dobrą kopię - chociaż opis meta nie jest używany do tworzenia rankingu, nadal ważne jest, aby zoptymalizować go pod kątem zamiaru wyszukiwania. Im bardziej trafny jest Twój opis w oparciu o odpowiednie zapytanie, tym większe prawdopodobieństwo, że użytkownik odwiedzi Twoją stronę.
  • Rozważ pominięcie metaopisu - utworzenie dobrego tekstu dla szczególnie rozbudowanych słów kluczowych lub stron kierowanych na różne słowa kluczowe może być trudne. W takich przypadkach rozważ pozostawienie meta opisu - Google pobierze z Twojej strony i wypełni fragment kodu kilkoma trafnymi cudzysłowami.

Kod HTML

Poniżej znajduje się fragment kodu pobrany z tego samego artykułu BBC na temat statystyk koronawirusa i widać, że po tagu tytułu znajduje się metatag opisu, który zawiera krótkie podsumowanie tego, o czym jest artykuł:

3. Znaczniki nagłówka (H1-H6)

Tagi nagłówków służą do strukturyzowania stron zarówno pod kątem czytnika, jak i wyszukiwarek:

Nie jest tajemnicą, że prawie nikt nie czyta już artykułu - zamiast tego zwykle skanujemy artykuł, aż znajdziemy sekcję, która nam się podoba, przeczytamy tę jedną sekcję, a potem odbijamy. A jeśli artykuł nie zostanie podzielony na sekcje, wiele z nich od razu się odbije, ponieważ jest po prostu za dużo. Z punktu widzenia użytkownika nagłówki są więc przydatnymi pomocami w czytaniu.

Jednak z punktu widzenia wyszukiwarki tagi nagłówków stanowią rdzeń treści i pomagają robotom wyszukiwarek w zrozumieniu, o czym jest strona.

Najlepsze praktyki

Zasady dotyczące nagłówków pochodzą z ogólnych praktyk copywritingu - podziel swoją kopię na małe kawałki i zachowaj spójne formatowanie:

  • Nie używaj więcej niż jednego nagłówka H1 - H1 odróżniającego się od innych nagłówków, ponieważ jest traktowany przez wyszukiwarki jako tytuł strony. Nie mylić z tagiem tytułu - tag tytułu jest wyświetlany w wynikach wyszukiwania, podczas gdy tag H1 jest wyświetlany w Twojej witrynie.
  • Utrzymuj płytką strukturę - rzadko trzeba zejść poniżej H3. Użyj H1 dla tytułu, H2 dla nagłówków sekcji i H3 dla podsekcji. Coś więcej może być mylące.
  • Formularz nagłówków podobnych do zapytań - traktuj każdy nagłówek jako dodatkową okazję do uzyskania pozycji w wynikach wyszukiwania. W tym celu każdy nagłówek powinien brzmieć jak zapytanie lub odpowiedź na zapytanie - łącznie ze słowami kluczowymi.
  • Bądź spójny ze wszystkimi nagłówkami - wszystkie nagłówki powinny być napisane w taki sposób, że gdybyś usunął cały tekst i pozostawił tylko nagłówki, brzmiałby jak lista.

Kod HTML

Poniżej znajduje się fragment kodu pobrany z tego samego artykułu BBC o statystykach koronawirusa i widać, że istnieje odpowiednio skonfigurowany nagłówek H2, po którym następują dwa akapity:

4. Tekst alternatywny obrazu

Podczas gdy głównym celem tekstu alternatywnego jest dostępność w Internecie, celem SEO atrybutu alt jest indeksowanie obrazu.

Głównym celem tekstu alternatywnego obrazu jest pomoc użytkownikom w zrozumieniu obrazu, gdy nie może go zobaczyć, powiedzmy, odwiedzający z upośledzeniem wzroku. W tym przypadku, wraz z czasami, gdy, powiedzmy, wystąpił problem i obraz się nie załaduje, zamiast wyświetlać go, można użyć tekstu alternatywnego do opisania tego, co jest na obrazie.

Z punktu widzenia SEO, tekst alternatywny ma duży udział w indeksowaniu obrazów w wyszukiwarce Google. Jeśli więc w tym, co robisz, istnieje element wizualny - czy to zdjęcia Twoich produktów, Twojej pracy, obrazów stockowych, czy sztuka - zdecydowanie powinieneś rozważyć użycie tekstów alternatywnych dla obrazów.

Najlepsze praktyki

Warunkiem wstępnym dodania tagów tekstu alternatywnego jest znalezienie wszystkich obrazów bez nich.

Możesz użyć narzędzia takiego jak WebSite Auditor, aby przeszukać swoją witrynę i skompilować listę obrazów z brakującym tekstem alternatywnym.

Po utworzeniu listy zastosuj się do następujących wskazówek:

  • Bądź zwięzły, ale opisowy - dobry tekst alternatywny dotyczy jednej lub dwóch linii tekstu, które pomogłyby osobie niedowidzącej zrozumieć, co jest przedstawione na ilustracji.
  • Nie bądź zbyt zwięzły - jedno słowo, a nawet kilka słów, prawdopodobnie nie wystarczy - nie byłoby sposobu, aby odróżnić obraz od innych obrazów. Pomyśl o wszystkich możliwych wyświetlanych właściwościach: typ obiektu, kolor, materiał, kształt, wykończenie, oświetlenie itp.
  • Nie rób upychania słów kluczowych - nie ma już miejsca, w którym upychanie słów kluczowych nadal działa, a tekst alternatywny nie jest wyjątkiem.

Kod HTML

Oto przykład fragmentu tekstu alternatywnego z obrazu komórek chorobowych:

5. Znaczniki schematu

Znaczniki schematu służą do ulepszania zwykłych fragmentów SERP za pomocą funkcji rozszerzonych fragmentów:

Schema.org zawiera zbiór tagów opracowanych wspólnie przez Google, Bing, Yahoo! I Yandex, a tagi są używane przez webmasterów do dostarczania wyszukiwarkom dodatkowych informacji o różnych typach stron. Z kolei wyszukiwarki wykorzystują te informacje do wzbogacenia swoich fragmentów SERP o różne bogate funkcje.

Nie ma pewności, czy użycie znaczników schematu zwiększa szanse na ranking - nie ma jednak wątpliwości, że powstałe fragmenty wyglądają znacznie atrakcyjniej niż zwykłe fragmenty, a tym samym poprawiają pozycję w wynikach wyszukiwania.

Najlepsze praktyki

Jedyną sprawdzoną metodą jest wejście na schema.org i sprawdzenie, czy są tam jakieś tagi, które można zastosować do Twoich typów stron. Istnieją setki, jeśli nie tysiące tagów, więc prawdopodobnie będzie dostępna opcja, która może pomóc w ulepszeniu wykazów witryn.

Kod HTML

Oto przykładowy fragment kodu określający wartości odżywcze przepisu. Pełną listę elementów dostępnych do znaczników można znaleźć na stronie schema.org:

6. Znaczniki semantyczne HTML5

Elementy HTML5 służą do lepszego opisu różnych elementów strony:

Przed wprowadzeniem elementów HTML5 najczęściej używaliśmy znaczników DIV do dzielenia kodu HTML na oddzielne komponenty, a następnie używaliśmy klas i identyfikatorów, aby dokładniej określić te komponenty. Każdy webmaster określał komponenty na swój własny, niestandardowy sposób, w wyniku czego powstał bałagan i wyzwanie dla wyszukiwarek, aby zrozumieć, co jest na każdej stronie.

Wraz z wprowadzeniem semantycznych elementów HTML5 otrzymaliśmy zestaw intuicyjnych tagów, z których każdy opisuje oddzielny komponent strony. Więc zamiast oznaczać naszą zawartość kilkoma mylącymi elementami div , mamy teraz sposób na opisanie komponentów w łatwy do zrozumienia, ustandaryzowany sposób.

Jak możesz sobie wyobrazić, wyszukiwarki są bardzo entuzjastycznie nastawione do semantycznego HTML5.

Kod HTML

Oto niektóre z najbardziej przydatnych semantycznych elementów HTML5, wykorzystaj je do usprawnienia komunikacji z wyszukiwarkami:

  • artykuł - izoluje post od reszty kodu, czyni go przenośnym
  • sekcja - izoluje grupę postów na blogu lub grupę nagłówków w poście
  • aside - wyodrębnia treści uzupełniające, które nie są częścią treści głównej
  • nagłówek - wyodrębnia górną część dokumentu, artykułu, sekcji, może zawierać nawigację
  • stopka - izoluje dół dokumentu, artykułu, sekcji, zawiera metainformacje
  • nav - wyodrębnia menu nawigacyjne, grupy elementów nawigacyjnych

7. Meta tag robotów

Metatag Robots dotyczy zasad interakcji między stronami internetowymi a wyszukiwarkami.

W tym miejscu właściciele witryn mogą nakreślić zestaw reguł dotyczących pobierania i indeksowania swoich stron. Niektóre z tych reguł są obowiązkowe, podczas gdy inne przypominają bardziej sugestie - nie wszystkie roboty indeksujące będą respektować metatagi robotów, ale popularne wyszukiwarki często to robią. A jeśli nie ma metatagu robotów, roboty zrobią, co im się podoba.

Najlepsze praktyki

Znacznik meta robots powinny być umieszczone w sekcji head kodu strony i powinien określić które roboty dotyczy on instrukcje i które powinny być stosowane:

  • Adresowanie robotów według nazwy - użyj robotów, jeśli instrukcje są przeznaczone dla wszystkich robotów, ale użyj konkretnych nazw, aby adresować poszczególne roboty. Na przykład standardowy robot sieciowy Google nazywa się Googlebot . Zajmowanie się poszczególnymi robotami zwykle ma na celu zablokowanie dostępu złośliwych robotów do strony, jednocześnie pozwalając robotom o dobrych intencjach na kontynuację.
  • Dopasuj instrukcje do swoich celów - zwykle chcesz używać metatagów robotów, aby uniemożliwić wyszukiwarkom indeksowanie dokumentów, wewnętrznych wyników wyszukiwania, zduplikowanych stron, obszarów przejściowych i wszystkiego, czego nie chcesz wyświetlać w wynikach wyszukiwania.

Kod HTML

Poniżej znajdują się niektóre parametry najczęściej używane w metatagach robotów. Możesz użyć dowolnej ich liczby w jednym metatagu robots, oddzielonych przecinkiem:

  • noindex - strona nie powinna być indeksowana
  • nofollow - nie należy podążać za linkami na stronie
  • follow - linki na stronie należy podążać, nawet jeśli strona nie ma być indeksowana
  • noimageindex - obrazy na stronie nie powinny być indeksowane
  • noarchive - wyniki wyszukiwania nie powinny pokazywać wersji strony z pamięci podręcznej
  • niedostępny_after - strona nie powinna być indeksowana po upływie określonego terminu.

8. Znacznik kanoniczny

Tag kanoniczny chroni Cię przed ryzykiem powielenia treści:

Chodzi o to, że każda strona, bez Twojej winy, może mieć kilka adresów. Czasami wynikają z różnych artefaktów - takich jak http / https i różne znaczniki śledzące - a innym razem wynikają z różnych opcji sortowania i dostosowywania dostępnych w katalogach produktów.

Szczerze mówiąc, nie jest to duży problem, z wyjątkiem tego, że wszystkie te adresy mogą obciążać budżet na indeksowanie i autorytet strony, a także mogą zepsuć śledzenie wydajności. Alternatywą jest użycie znacznika kanonicznego, aby poinformować wyszukiwarkę, który z adresów stron jest główny.

Najlepsze praktyki

Aby uniknąć potencjalnych komplikacji związanych z SEO, zastosuj tag canonical na następujących stronach:

  • Strony dostępne pod różnymi adresami URL
  • Strony o bardzo podobnej treści
  • Dynamiczne strony, które tworzą własne parametry adresu URL

Końcowe przemyślenia

To są moje najpopularniejsze tagi HTML, którymi nadal się martwię w 2020 roku, chociaż uważam, że niektóre z nich są już na dobrej drodze. Jak już wspomniano, wraz z coraz inteligentniejszymi wyszukiwarkami, istnieje coraz mniejsza potrzeba optymalizacji tagów HTML, ponieważ większość rzeczy można teraz wydedukować algorytmicznie. Ponadto większość nowoczesnych systemów CMS automatycznie dodaje te elementy, przynajmniej w pewnym zakresie.

Mimo to nie pozostawiłbym tego całkowicie Google w zakresie interpretacji moich treści - najlepiej spotkać się z tym w połowie drogi, na jaką możesz.