Berlin +49 30 120 856 32 mail@dlx-media.com
Kontakt
HTML Head

HTML Head

HTML Head zawiera niewidoczne metadane, które sterują wyszukiwarkami, przeglądarkami i mediami społecznościowymi – kluczowe dla SEO i doświadczenia użytkownika.

Czym jest sekcja Head w HTML?

Sekcja Head (zapisywana jako <head>) to część dokumentu HTML, która zawiera ważne informacje o stronie internetowej, nie będąc sama w sobie widoczną. Podczas gdy <body> wyświetla widoczne treści, Head dostarcza instrukcje i metadane przeglądarce, wyszukiwarkom i portalom społecznościowym.

Można sobie wyobrazić Head jak etykietę na opakowaniu: sam produkt (Body) to zawartość, ale etykieta przekazuje ważne informacje o tym, jak produkt się nazywa, jak go klasyfikować i jak powinien być prezentowany.

Gdzie znajduje się Head w strukturze HTML?

Sekcja Head znajduje się bezpośrednio po otwierającym tagu <html> i przed Body. Typowy szkielet wygląda następująco:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Przykładowa strona</title>
  <meta name="description" content="Krótki opis strony.">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Tutaj zaczyna się widoczna część -->
</body>
</html>

Najważniejsze elementy w sekcji Head

  • <title> (Tytuł strony): Prawdopodobnie najważniejszy wpis dla SEO. Tytuł pojawia się na karcie przeglądarki i jako klikalny nagłówek w wynikach wyszukiwania Google. Powinien zawierać główne słowo kluczowe i zachęcać do kliknięcia.
  • Meta Description: Krótki opis zawartości strony, który często wyświetla się jako tekst podglądu w wynikach wyszukiwania. Nie jest bezpośrednim czynnikiem rankingowym, ale znacząco wpływa na współczynnik klikalności (CTR).
  • Deklaracja zestawu znaków: <meta charset="UTF-8"> określa zestaw znaków. UTF-8 zapewnia, że umlauty, znaki specjalne i emoji są wyświetlane poprawnie.
  • Tag Viewport: <meta name="viewport"> jest niezbędny dla wyświetlania na urządzeniach mobilnych. Zapewnia, że strona dostosowuje się do różnych rozmiarów ekranu.
  • Arkusze stylów i Favicon: Za pomocą tagów <link> są dołączane pliki CSS dla designu oraz Favicon (mała ikonka na karcie przeglądarki).

Instrukcje sterujące dla wyszukiwarek

W sekcji Head można również określić, jak wyszukiwarki powinny traktować stronę:

  • Meta Tag Robots: Za pomocą <meta name="robots" content="noindex, nofollow"> można nakazać Google, aby nie indeksował strony i nie śledził linków na niej. Jest to przydatne dla stron takich jak wewnętrzne wyniki wyszukiwania czy strony podziękowania, które nie powinny pojawiać się w wynikach wyszukiwania.
  • Tag Canonical: Za pomocą <link rel="canonical"> wskazuje się preferowaną wersję strony. Zapobiega to problemom z duplikacją treści, gdy podobne lub identyczne treści są dostępne pod różnymi adresami URL.

Sterowanie podglądem w mediach społecznościowych

Gdy strona jest udostępniana w sieciach społecznościowych, specjalne meta tagi w sekcji Head decydują o tym, jak będzie wyglądał podgląd:

  • Open Graph Tags: Określają tytuł, opis i obraz podglądu dla platform takich jak Facebook, LinkedIn czy WhatsApp.
  • Twitter Cards: Spełniają tę samą funkcję specjalnie dla wyświetlania na X (dawniej Twitter).

Dobrze utrzymane tagi dla mediów społecznościowych sprawiają, że udostępniane linki wyglądają atrakcyjnie, co znacznie zwiększa gotowość do kliknięcia.

Wpływ na szybkość ładowania

Sekcja Head odgrywa również rolę w wydajności strony internetowej:

  • async i defer: Te atrybuty przy dołączaniu JavaScriptu zapewniają, że skrypty nie blokują ładowania strony, co poprawia czas ładowania.
  • preload i prefetch: Za pomocą <link rel="preload"> można wcześniej załadować ważne zasoby, takie jak czcionki, co pozytywnie wpływa na Core Web Vitals.

Informacja dla użytkowników WordPressa

W WordPressie i podobnych systemach sekcja Head jest generowana automatycznie. Aby zadbać o tytuł, Meta Description i tagi dla mediów społecznościowych, nie trzeba pracować bezpośrednio w kodzie. Wtyczki SEO takie jak Yoast SEO, SEOPress, Rank Math czy The SEO Framework oferują wygodne pola do wprowadzania danych i przejmują techniczne wdrożenie w tle.

Informacja o Meta Keywords

Dawniej popularny tag <meta name="keywords"> jest ignorowany przez Google od wielu lat i nie ma już wpływu na ranking. Nie ma potrzeby jego utrzymywania.

Podsumowanie

Sekcja Head to niewidoczne centrum sterowania każdej strony internetowej. To tutaj ustawia się kluczowe elementy SEO, takie jak tytuł strony i Meta Description, kontroluje wyświetlanie na urządzeniach mobilnych i w mediach społecznościowych oraz ustala ważne parametry wpływające na szybkość ładowania. Dbając o te elementy, kładzie się solidne fundamenty pod dobrą widoczność i profesjonalny wizerunek w wynikach wyszukiwania oraz w mediach społecznościowych.

Wróć do słownika