od zera do webmastera

Head z głową

Nim jeszcze cokolwiek zrobimy na stronie, pierwszą rzeczą jest <head>… </head> miejsce na rzeczy nie wyświetlane w treści strony, ale ani trochę nie mniej ważne, nazywają to metadane z których z chęcią skorzysta przeglądarka która zechce wyświetlić stronę.

rysunek programista webmaster przy pracy coder
webmaster przy pracy

Pewne rzeczy tam muszą być i kilka rzeczy możemy tam wstawić dodatkowo.

To co w HEAD musi być.

  1. <meta charset="utf-8"> - deklaracja strony kodowej, bez tego nasze "ą, ć, ż, ź, itd” zmienią się na dziwaczne krzaczki
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> - to niezbędne gdy strona ma dobrze się wyświetlać na dużych, małych i malutkich ekranach.
  3. <title>Tytuł strony</title> - to się wyświetla w przeglądarce na pasku zakładek. I to jeden z najważniejszych elementów pozycjonowania stron w wyszukiwarkach, warto się zastanowić co tu napiszemy.
  4. <meta name="description" content="Opis zawartości strony"> - Tu jak powyżej ważny element pozycjonowania strony, ten opis pojawi się w wyniku wyszukiwań, nim możesz przyciągnąć / zniechęcić internautów.
  5. <link rel="stylesheet" href="style.css"> - podłączamy nasz arkusz styli CSS

To tyle tych konieczności, ale nim przejdziemy do tych dodatkowych to potrzeba coś jeszcze wstawić przed HEAD

  1. <!DOCTYPE html> - tu informujemy przeglądarkę, że to strona WWW i że napisana w języku HTML
  2. <html lang="pl"> - to informacja dla urządzeń czytających na głos (np. dla niewidomych) w jakim języku czytać.

I tu powstał nam taki podstawowy szablon strony internetowej

<!DOCTYPE html>
<html lang="pl">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Tytuł strony</title>
<meta name="description" content="Opis zawartości strony">
<link rel="stylesheet" href="style.css">
</head>

<body>
Tu zawartość strony
</body>
</html>

To co może być jeszcze w HEAD

  1. <meta name="author" content="Autor Strony"> - możemy się podpisać chwaląc dobrze zrobioną stroną
  2. <script src="skrypy_java.js"></script> - jeśli dodajemy do strony jakieś skrypty, jako link, lub między znaczniki <script> wpisujemy kod skryptu
  3. <link rel="icon" href="/favicon.ico" type="image/x-icon"> - wstaw jeśli masz przygotowaną ikonkę, która będzie się wyświetlać w zakładakach przegglądarki i w wynikach wyszukiwania
  4. <meta http-equiv="refresh" content="60"> - jeśli chcemy by strona odświerzała się co 60 sekund
  5. <meta property="og: (title, url, type, image, description i więcej) - to są opisy "open graph” dla wyszukiwarek z mediów społecznościowych. Trudno tu opisac wszystko odsylam raczej do https://ogp.me/#types
  6. <link rel="canonical" href="https://www.strona.pl/wlasciwa/" /> - jeśli masz tą samą treść pod różnymi adresami, to tu wskazujesz który adres roboty mają uznać za główny