Podstawowy szkielet strony internetowej oparty o HTML 5 – meta oraz link tagi

Mając już podstawowy szkielet strony internetowej przyjrzymy się w tym artykule najczęściej używanym tak zwanym meta oraz link tagom. Służą one między innymi do zapisania informacji przydatnych dla wyszukiwarek, kodowaniu znaków oraz podpięcia zewnętrznych plików, np. arkuszy stylów CSS.

Fot: J. Albert Bowden II, CC BY 2.0.

Fot: J. Albert Bowden II, CC BY 2.0.

W poprzedniej części tego artykułu napisaliśmy podstawowy szkielet strony internetowej w oparciu o HTML 5. Graficznie prezentuje się on tak (przeglądarka Google Chrome):

strona2

Kod HTML:

Teraz przyszła pora na jego rozbudowę. W tej części zabierzemy się za tak zwaną „głowę dokumentu” czyli sekcję HEAD. Jak już pewnie wiecie, wszystko co zostanie tam umieszczone nie jest widoczne w oknie przeglądarki (oczywiście poza tytułem strony zamieszonym w tagu <title> </title>). Pomimo tego, że nie ma tam żadnych elementów, które potem wyświetlane są na stronie internetowej należy pamiętać, że to właśnie w „głowie” dołączamy do budowanej witryny WWW style CSS, skrypty JavaScript, czcionki oraz zamieszczamy różnego rodzaju informacje dla wyszukiwarek internetowych co z punktu widzenia SEO (ang. Search Engine Optimization) jest bardzo ważne.

Jak widać do tej pory zdefiniowaliśmy tytuł strony oraz kodowanie znaków:

Na początku budowy naszego portalu internetowego dodamy takie elementy jak:

  • Opis strony WWW,
  • Słowa kluczowe,
  • Informacje o arkuszu stylów CSS,
  • Informacje o skrypcie JavaScript,
  • Informacje o autorze,
  • Informacje o kanale RSS.

Opis strony WWW

W HTML 5 za dodanie opisu strony odpowiedzialny jest znacznik <meta /> wyposażony w atrybut name zawierający wartość „description„:

Słowa kluczowe

Słowa kluczowe podobnie jak opis strony również umieszczamy za pośrednictwem znaczniku <meta /> ale tym razem wyposażonego w atrybut name o wartości „keywords„:

Dołączanie arkusza stylów CSS

W HTML 5 za dołączanie zewnętrznych plików odpowiedzialny jest znacznik <link />. Arkusze stylów podpinamy do dokumentu HTML w następujący sposób:

Atrybut href przyjmuje ścieżkę do pliku .css względem pliku .html w którym został umieszczony.

Dołączanie skryptów JavaScript

Skrypty JS w HTML 5 dołączamy za pomocą znacznika <script> </script>:

Atrybut src przyjmuje tutaj ścieżkę do pliku .js względem pliku .html w którym został umieszczony.

Informacje o autorze

Informacje o autorze umieszczamy oczywiście za pośrednictwem tagu <meta />, którego atrybut name przyjmuje wartość author:

Informacje o kanale RSS

Dobrą praktyką jest również podlinkowanie do kanału RSS. Wykonuje się to za pomocą znacznika <link />:

Blokowanie indeksowania strony przez wyszukiwarki

Warto jeszcze wspomnieć na koniec, że za pomocą znacznika <meta /> możemy poinformować wyszukiwarkę iż nie chcemy aby dana strona była indeksowana (oczywiście to nie daje nam 100% pewności, że właśnie tak się stanie):

Słowo kluczowe noindex podane jako wartość atrybutu content informuje wyszukiwarkę o nie indeksowaniu.

Cały kod

Poniżej prezentuję cały kod HTML jaki do tej pory został napisany:

, , , , ,

  • xyz

    „Atrybut href przyjmuje bezwzględną ścieżkę do pliku .css względem pliku .html…”
    bezwzględną, względem pliku html?
    btw. dawno nie widziałem tak słabego merytorycznie artykułu

    • No chodzi o ścieżkę dostępu względem pliku html w którym ten znacznik się znajduje, to są proste rzeczy i wydaje mi się, że takie sformułowanie jest zrozumiałe no ale widzę, że nie więc poprawiam ;)

  • Googlebot

    Brawo Łukasz. 38 linii kodu, a tylko 4 błędy i 4 ostrzeżenia w walidatorze. Dobra robota!

    • Wkradała mi się literówka w słowie „content” napisałem „conent” – to był jedyny błąd jaki zgłaszał walidator. Już poprawiam ;)

      PS: Teraz przechodzi bezbłędnie ;)

  • pysio

    Charset i keywords w meta po co ?

    • keywords jest dla Google i innych wyszukiwarek, chodziarz nie wiem czy to coś daje ale jest taki meta-tag więc napisałem, a charset to kodowanie znaków, czasami jest problem z polskimi literami więc warto to mieć ;)

  • Keyword obecnie nie jest brany pod uwagę przez roboty Google. Radzimy poczytać nowe wytyczne Google

    • Nic takiego nie napisałem, również radzę czytać dokładnie ;)