Dodano 2017-07-04 09:31:55 przez Daniel
Wszystkie metatagi umieszczamy w głowie dokumentu czyli sekcji head. Są to informacje o różnych aspektach strony niewidoczne na pierwszy rzut z punktu widzenia użytkownika (no może z wyjątkiem kodowania), jednak bardzo istotne z punktu widzenia wyszukiwarki czy przeglądarki internetowej. Jeśli chcesz żeby twoja strona jako tak się pozycjonowała i była dobrze widoczna w wynikach wyszukiwania np Google powinieneś dobrze opanować tę część.
Sekcja head to i najczęściej style css określające wygląd poszczególnych elementów strony, dlatego też przytoczę tutaj ten i dwa inne sposoby umieszczania stylów css.
Bez zbędnego przedłużania wstępu przejdźmy od razu do rzeczy.
W poprzedniej części ustaliliśmy że dokument html składa się z dwóch głównych elemntów, którymi są sekcja HEAD czyli głowa dokumentu oraz sekcja BODY czyli ciało dokumentu, w którym umieszczamy poszczególne treści. Co powinna zawierać sekcja head.
Najważniejszym elementem strony jaki umieszczamy w sekcji head jest jej tytuł. Nie powinien on być długi, ponieważ znajduje się w wynikach wyszukiwania oraz na belce przeglądarki w kracie otwartej strony. Z tego samego powodu musi on być jak najbardziej zgodny z tym co się akurat znajduje na danej podstronie. Z tego wynika że nie najlepszym pomysłem jest umieszczenie tytułu takiego samego dla wszystkich podstron. Umieszczenie tytułu jest chyba najprostsze ze wszystkich elementów sekcji head:
<title>Moja pierwsza strona</title>
Drugim zawsze wykorzystywanym elementem jest opis strony. Wyświetla się on pod tytułem w wyszukiwarkach internetowych co oznacza że to jest pierwsza i najlepsza okazja by zachęcić użytkownika do odwiedzenia tej a nie innej strony.
<meta name="Description" content="Moja pierwsza strona czyli strona stworzona na podstawie kursu html 5 i css 3" />
Kolejnym ważnym elementem sekcji head są słowa kluczowe, są one dość istotne dla wyszukiwarek by te mogły odpowiednio zakwalifikować stronę w wynikach. Dobrze dobrane słowa to pierwszy krok ku dobrej pozycji strony www. Dodawanie tego elementu jest dość analogiczne jak w przypadku opisu strony.
<meta name="keywords" content="strona,www,html,kodowanie" />
Jak łatwo zauważyć poszczególne frazy są oddzielone od siebie przecinkami.
Kolejnym elementem sekcji head jest kodowanie strony. Element ten jest może mniej istotny dla wyszukiwarek ale pozwala prawidłowo wyświetlać treści znajdujące się na stronie. Zadbanie o odpowiednie kodowanie zapobiega wyświetlaniu „krzaczków” w miejscach gdzie powinny być polskie litery z ogonkami. Kiedyś dość popularne było kodowanie is-8859-2 jednakże teraz wszędzie spotykanym standardem jest UTF-8 dlatego korzystajmy właśnie z niego zawsze i wszędzie by nie mieć później problemów z konfliktami.
<meta charset=”UTF-8″ />
Te elementu są najważniejsze co nie oznacza że kolejne nie są ważne.
W sekcji head umieszczamy znacznie więcej informacji. Poniżej lista tych, które powinien zawierać twój każdy projekt.
Może nieco mniej znacząca informacja ale pod każdym projektem warto się podpisać, dzięki temu znacznikowi ktoś bardziej wtajemniczony będzie mógł w prosty sposób sprawdzić kto jest autorem strony. Jeśli zajmujesz się tym bardziej zawodowo i tworzysz portfolio to z jednej strony klient, któremu strona się spodoba będzie mógł łatwiej do ciebie dotrzeć z drugiej jeśli umieszczasz portfolio na swojej stronie to jak się podpiszesz w każdym projekcie nie będzie wątpliwości kto je wykonał.
<meta name="Author" content="Daniel Kuczewski" />
Ogólnie style można dodawać co najmniej na trzy sposoby. Piszę co najmniej bo kombinować można na różne sposoby ale w html ogólnie są trzy. Pierwszy polega na umieszczeniu odpowiednich poleceń bezpośrednio w elemencie i to się nazywa osadzanie stylów inline. Drugim sposobem jest umieszczanie stylów w odpowiednich znacznikach. Trzecia metoda to umieszczanie stylów w oddzielnym pliku. Z tych trzech, pierwszych dwóch staramy się zawsze unikać i stosować zawsze trzecią.