Budowanie profilu linkowego nie należy do najprostszych zadań wykonywanych przez pozycjonerów. Niektóre z technik wymagają wiedzy i doświadczenia.
Karolina Goćkowska
Przeglądając ulubione serwisy informacyjne, korzystając z social mediów czy odbierając e-maila na poczcie elektronicznej, prawdopodobnie nie zastanawiasz się nad tym, jak to wszystko działa. Dla osób, które na co dzień nie zajmują się programowaniem może być to czarna magia, dlatego nie warto zawracać sobie tym głowy, prawda? Za działanie serwisów internetowych odpowiada ogrom mechanizmów, jednak podstawą w większości przypadków jest znacznik HTML.
Początki tego zagadnienia sięgają lat 80. ubiegłego wieku, kiedy to fizyk Tim Berners-Lee stworzył prototyp hipertekstowego systemu informacyjnego. Po wielu ulepszeniach i modyfikacjach w 1991 roku pojawiła się pierwsza, publicznie dostępna wersja języka HTML. Dziś bez niego serwisy internetowe nie mogłyby istnieć. Czym jest HTML i na czym polega jego działanie?
Zacznijmy od tego, co właściwie oznacza termin HTML. Skrót pochodzi od wyrażenia z j. ang. – „HyperText Markup Language”, które po polsku brzmi „hipertekstowy język znaczników”. Na pierwszy rzut oka wygląda skomplikowanie, dlatego warto rozłożyć to wyrażenie na dwie części:
HTML to podstawa tworzenia stron internetowych, odpowiada on za to, jak wygląda treść na stronie, która wyświetla się użytkownikom. Dzięki niemu zwykły tekst w Internecie może nabrać zupełnie innej struktury. Język znaczników HTML pozwala dodawać w tekście takie elementy, jak:
HyperText Markup Language (HTML) często kojarzony jest z programowaniem. Mimo że język znaczników i język programowania dotyczą tego samego, czyli tworzenia serwisów internetowych, nie są to pojęcia tożsame. HTML odpowiada za strukturę informacji zawartych na stronie WWW – może nadać poszczególnym fragmentom tekstu jakieś cechy (pogrubienie, nagłówek itp.). Nie odpowiada jednak za funkcje serwisu. Oznacza to, że HTML nie służy do projektowania i obsługiwania interakcji użytkownika z serwisem internetowym. Inaczej mówiąc, jeśli strona WWW pozwala Ci wykonać jakieś zadanie czy obsługiwać zewnętrzne urządzenia, to nie jest za to odpowiedzialny język HTML. Do przetwarzania danych i wykonywania obliczeń służy właśnie język programowania.
Jednym z najpopularniejszych języków programowania jest JavaScript, który umożliwia wdrażanie na stronach internetowych skomplikowanych, interaktywnych elementów. Dzięki niemu serwis nie tylko wyświetla informacje w formie statycznej, ale również przetwarza dane i pozwala na dodawanie elementów dynamicznych. Dlatego tworząc profesjonalną i rozbudowaną stronę internetową, która spełnia wiele funkcji, Web Deweloperzy zawsze pracują zarówno ze standardowym językiem znaczników HTML, jak i językiem programowania. Do tego dochodzi jeszcze jeden, stały element, ale o nim za chwilę.
Jak już wiesz, do stworzenia rozbudowanej strony, która będzie profesjonalne prezentowała się użytkownikom, potrzeba czegoś więcej niż języka HTML. Jednak jest to podstawa, od której wszystko się zaczyna i na której buduje się resztę strony. A jak się to robi? Wbrew pozorom, aby zacząć, nie potrzeba specjalistycznych programów i narzędzi. Szkielet HTML strony możesz stworzyć nawet w zwykłym notatniku, który na pewno masz na swoim komputerze. Oczywiście istnieją specjalne programy do tworzenia struktury w języku znaczników HTML, jednak równie dobrze można to zrobić bez nich. Wystarczy zapisać plik z notatnika w rozszerzeniu „html”.
Oczywiście zapisanie pliku z notatnika to jedno, ale rozpisanie całej struktury strony HTML to drugie. Do tego potrzebna jest odpowiednia wiedza, przede wszystkim z zakresu znaczników HTML, które odpowiadają za poszczególne cechy tekstu. Warto wiedzieć, że nawet najmniejszy błąd popełniony w trakcie kodowania może wpłynąć na wygląd i działanie stron internetowych, a także zaszkodzić poszczególnym fragmentom tekstu.
Można powiedzieć, że HyperText Markup Language (HTML) jest organizerem strony. Porządkuje on jej zawartość, ale robi to za pomocą odpowiednich komponentów, które trzeba uwzględnić podczas tworzenia struktury serwisu. Oto podstawowe komponenty języka znaczników HTML.
Znaczniki nazywane też tagami to podstawa języka HTML. To właśnie na nich opiera się cały proces projektowania struktury serwisu i to one decydują o tym, co wyświetli się użytkownikom. Są to zazwyczaj wyrazy lub pojedyncze litery zamknięte w ostrych nawiasach, czyli „<” oraz „>”. Tagi mogą być pojedyncze lub podwójne. Te drugie występują znacznie częściej. Składają się na nie znaczniki otwierające oraz zamykające i wyglądają tak: <znacznik> treść </znacznik>. Najpopularniejsze znaczniki HTML w HyperText Markup Language to:
Oczywiście jest to tylko niewielka część wszystkich tagów, których używa się do określenia struktury strony HTML. Jeśli nie masz zamiaru zajmować się tworzeniem serwisów internetowych, nie musisz ich wszystkich znać. Warto jedynie wiedzieć, że znaczniki HTML opisują zawartość strony i przekazują przeglądarkom informacje na temat tego, jak mają one wyświetlać tę zawartość użytkownikom. Dzięki ogólnie przyjętym standardom każdą przeglądarkę dokładnie w ten sam sposób interpretują tagi HTML umieszczone w dokumencie strony.
Atrybuty znaczników HTML to inaczej dodatkowe cechy czy informacje, które opisują cały element. Umieszcza się je w tagu otwierającym, a każdy z nich ma dodatkowo jakąś wartość. Cały atrybut wygląda zatem tak: nazwa=wartość, natomiast cały element może wyglądać tak: <tag nazwa atrybutu=’wartość atrybutu’> treść </tag>.
Przykładowo atrybutem tagu <img> może być szerokość (width) pliku graficznego, natomiast wartością tego atrybutu będzie 200. Innym przykładem może być tag <a> dotyczący odnośnika zewnętrznego lub wewnętrznego. Jego atrybutem będzie href, a wartością tego atrybutu adres URL.
Atrybuty są niezbędne do tego, aby składowe języka znaczników działały poprawnie i mogły w odpowiedni sposób opisywać poszczególne elementy tekstu na stronie.
Dane wykorzystywane w tworzeniu szkieletu strony za pomocą HyperText Markup Language (HTML) można podzielić na kilka typów. Dotyczą one przede wszystkim wartości elementów i atrybutów. Podstawowe typy danych to:
HyperText Markup Language (HTML) w nowszych wersjach, czyli od 4.0, określa listę 1114050 symboli znakowych oraz 252 encji. Pozwalają one na alternatywny zapis określonych znaków za pomocą specjalnych stałych. Przykładowo znak „<” można zapisać jako „<”. Po co się to robi? Jak już wiesz, ostry nawias jest elementem składowym języka znaczników – jest to początek tagu otwierającego i zamykającego. Używanie takich znaków w tekście może skutkować tym, że roboty przeglądarki źle zinterpretują ich funkcję i nazwą je właśnie kodem HTML. Taka sytuacja mogłaby przyczynić się do powstania błędów na stronie.
W dokumencie strony deklaracja jego typu określana jest w ten sposób: <!doctype html>. Umieszczenie takiego znacznika oznacza, że kod strony będzie pisany w najnowszej wersji standardu HTML, czyli HTML5. Tak naprawdę nie jest to typowy znacznik, jak np. <body> czy <a>. Jest to raczej instrukcja dla przeglądarki, którą umieszcza się w dokumencie HTML na samym początku, jeszcze przed tagiem <html>.
Szkielet strony napisany w hipertekstowym języku znaczników (HTML) składa się dwóch głównych elementów: sekcji head (głowa) i sekcji body (ciało). Taką strukturę można porównać do organizmu człowieka – głowa odpowiedzialna jest za sterowanie całym ciałem, ale z zewnątrz nie widać, co jest w środku; informacje znajdujące się w głowie przekładają się na to, co robi ciało i to jest już widoczne z zewnątrz.
Podstawowy szkielet HTML strony wygląda tak:
Wszystkie elementy HTML widoczne na grafice zostały pokrótce opisane nieco wyżej. Znacznik <!doctype html> to wskazówka dla przeglądarki, która mówi o tym, z jakiej wersji standardu języka będziemy korzystać – nie zawiera się ona pomiędzy znacznikami <html> a </html>. Tam znajdują się oczywiście dwie główne sekcje, czyli head i body, w których umieszcza się wiele dodatkowych elementów. To, co widzisz, jest tylko podstawą – taki szkielet strony nie będzie wyświetlał w przeglądarce żadnej zawartości. Tworzenie serwisu HTML można porównać do stawiania budynku. Szkielet dokumentu jest podstawą, czyli gruntem, a znaczniki to kolejne cegiełki, z których tworzy się jedną spójną całość. Aby nadać stronie wartość poprzez stworzenie struktury, Web Developer dodaje kolejne tagi, zaczynając od sekcji head, przechodząc przez sekcję body i kończąc na znaczniku zamykającym cały dokument, czyli </html>.
Można powiedzieć, że sekcja head strony to poniekąd centrum dowodzenia. To właśnie w tym miejscu znajdują się wszystkie istotne informacje o serwisie, a także podpięte dodatki, które usprawniają działanie serwisu lub pozwalają śledzić jego statystyki. Nie wyświetlają się one jednak użytkownikowi na stronie.
Wszystkie wymienione elementy to raczej instrukcje dla przeglądarki internetowej, których nie widzi człowiek, odwiedzając stronę. Jednak w sekcji head umieszcza się również takie elementy jak meta description i title. Można je uznać za wyjątek, ponieważ mimo że nie wyświetlają się bezpośrednio na stronie, użytkownik widzi je w wyszukiwarce, czyli na stronie SERP (Search Engine Results Page), po wpisaniu odpowiedniej frazy.
Meta title to tytuł strony lub podstrony należącej do domeny. Wyświetla się on w wynikach wyszukiwania największą czcionką i zbudowany jest – a właściwie powinien być – z ok. 65 znaków. Meta tytuł to znacznik, który liczy się zarówno dla robotów przeglądarki, jak i dla użytkowników – w obu przypadkach jego zadaniem jest opisanie zawartości poszczególnych podstron. Na jego podstawie użytkownik może zdecydować, że chce odwiedzić daną stronę, czy raczej nie. Meta description to natomiast opis strony lub podstrony. Jest on nieco dłuższy od tytułu, a wynikach wyszukiwania wyświetla się pod nim mniejszą czcionką.
Po umieszczeniu wszystkich informacji, które powinny znaleźć się w head strony, konieczne jest umieszczenie tagu zamykającego tę sekcję, czyli </head>.
Po zamknięciu sekcji head przechodzi się do obszaru, w którym powinny znaleźć się treści dla użytkownika, czyli do body strony. To właśnie tam znajdują się wszystkie informacje, elementy czy funkcje, jakich szuka użytkownik, wpisując konkretną frazę w wyszukiwarce – jest to tzw. treść właściwa dokumentu. Oprócz samej treści w sekcji body należy umieścić również znaczniki dotyczące formatowania, odnośników zewnętrznych i wewnętrznych, plików graficznych, nagłówków, list, tabel i wszystkich innych elementów, które definiują zawartość serwisu internetowego.
Sekcja body – tak samo, jak head – powinna zakończyć się tagiem zamykającym, w tym przypadku będzie to oczywiście </body>.
Wiesz już, co robi HTML, ale wiesz również, że język znaczników nie wystarczy do tego, aby stworzyć atrakcyjną, interaktywną i rozbudowaną witrynę internetową. Hipertekstowy język znaczników HTML pozwala zarządzać treścią, jaka wyświetli się użytkownikowi na stronie i określać, jak ma wyglądać jej podstawowy układ (paragrafy, nagłówki, wyróżnienia, listy itp.). Jednak nie odpowiada on za wygląd wszystkich znajdujących się na stronie elementów. Do tego potrzeba czegoś więcej, a mianowicie języka CSS (Cascading Style Sheets). Jest to język, który służy do opisu formy prezentacji dokumentu, czyli tego, jak ma wyświetlać się serwis internetowy pod względem wizualnym. Dzięki niemu można dowolnie modyfikować każdy element języka znaczników i tym samym zadbać o to, żeby strona była atrakcyjna dla oka użytkownika. Pozwala on zmienić kolor tła i dostosować m.in. takie parametry:
Wyrażenie Cascading Style Sheets (CSS) po polsku oznacza kaskadowe arkusze stylów. Jak zostało wspomniane wcześniej, umieszcza się je w sekcji head strony.
Reguły CSS to inaczej zbiory zasad, które służą do formatowania treści. Każda reguła w kaskadowych arkuszach stylów składa się z kilku elementów. Możemy tu wyróżnić takie elementy jak:
Można powiedzieć, że język znaczników HTML służy do tworzenia tego, co pojawi się na stronie, a dane arkuszy stylów do określania tego, jak wyświetlane będą poszczególne elementy. Zarówno język znaczników, jak i CSS to instrukcje dla przeglądarek internetowych. Dlaczego nie można zrobić wszystkiego za pomocą jednego języka? Separacja struktury dokumentu HTML od formy jego prezentacji pozwala uprościć kod, a także ułatwia wprowadzanie zmian.
HTML nie jest językiem programowania, ponieważ nie przetwarza danych i nie pozwala na wykonywanie obliczeń. Z tego samego powodu CSS również nie jest językiem programowania, ale nie jest też językiem znaczników. Wykorzystując wyłącznie CSS, stworzenie strony czy aplikacji byłoby niemożliwe. Obecnie podstawowy zestaw do tworzenia witryn internetowych, z jakiego powinien korzystać każdy Web Developer składa się z:
Kodowanie w języku HTML nie jest trudne, jednak opanowanie teorii, aby wykorzystać ją w praktyce, może być sporym wyzwaniem. Ale czy nauka języka znaczników jest konieczna do tego, aby stworzyć własną stronę internetową? Obecnie język znaczników HTML jest podstawą w tworzeniu większości produktów cyfrowych. Jednak nie oznacza to, że każdy, kto chciałby np. promować swój biznes w sieci, musi się go uczyć. Dzięki wysoko rozwiniętej technologii dziś możesz stworzyć swoją stronę czy sklep internetowy bez znajomości zarówno HTML, CSS, jak i języków programowania.
Stworzenie witryny internetowej bez konieczności samodzielnego kodowania znaków umożliwiają kreatory stron WWW, których na rynku jest obecnie mnóstwo. Jak działa kreator stron? Jest to platforma lub narzędzie, które pozwala stworzyć witrynę na podstawie gotowych (wcześniej stworzonych) szablonów HTML, a także umożliwia łatwe zarządzanie nią – wszystko to bez konieczności edytowania kodu.
Oczywiście do stworzenia takiego narzędzia wcześniej twórcy musieli wykorzystać język znaczników HTML i wszystkie inne elementy składowe programowania. Oznacza to, że jeśli zdecydujesz się skorzystać z kreatora, struktura Twojego serwisu i tak będzie opierała się na hipertekstowym języku znaczników.
Jeśli serwis internetowy można w tak łatwy sposób zaprojektować i umieścić na serwerze, to dlaczego nie każdy korzysta z takiego rozwiązania? Należy zauważyć, że kreatory stron WWW – mimo że obecnie oferują wiele możliwości i pozwalają tworzyć profesjonalne, rozbudowane strony – mają pewne ograniczenia. Wynika to oczywiście z braku dostępu do kodu źródłowego. Najczęściej możliwe jest korzystanie wyłącznie z gotowych szablonów HTML, dlatego trudno dopasować wygląd i ogólną funkcjonalność serwisu do swoich potrzeb. Oprócz tego brak dostępu do kodu może być przeszkodą w zwiększeniu widoczności strony w wynikach wyszukiwania (np. poprzez Google Chrome) – optymalizacja kodu jest elementem pozycjonowania. Właśnie z tego względu wielu przedsiębiorców, którzy chcą (skutecznie) promować swój biznes w sieci, nawiązuje współpracę ze specjalistami. Web Deweloperzy budują serwis od podstaw, czyli od stworzenia szkieletu HTML, a następnie korzystają z kaskadowych arkuszy stylów i języków programowania.
Za pomocą znaczników HTML lub inaczej tagów można przede wszystkim przekazać przeglądarce internetowej informacje na temat tego, jak ma ona wyświetlać strukturę strony stworzoną w języku HTML. Komendy wydawane bezpośrednio w dokumencie dotyczą m.in. akapitów, nagłówków, wyróżnień czy hiperłączy. Warto jednak wiedzieć, że niektóre z nich spełniają też inne zadanie – ich optymalizacja ma wpływ na pozycję strony w wynikach naturalnych i jest (a właściwie powinna być) nieodłącznym elementem każdego procesu pozycjonowania.
Zarówno w Polsce, jak i na całym świecie, najpopularniejszą wyszukiwarką internetową jest Google. To z niej korzysta najwięcej użytkowników, dlatego specjaliści od SEO optymalizują serwisy właśnie pod jej kątem. Firma Google przy ustalaniu rankingu stron bierze pod uwagę kilkaset czynników. Nie wszystkie są nam znane, jednak wśród tych, których znaczenie dla pozycji strony jest udowodnione, znajdują się właśnie niektóre elementy kodu, czyli tagi hipertekstowego języka znaczników HTML.
Meta tagi, czyli meta tytuły i meta opis – znaczniki HTML występują w sekcji head i mają największy wpływ na pozycję strony w rankingu Google. Właściwie bezpośredni wpływ mają jedynie tytuły podstron, jednak opisy również znajdują się na liście czynników, o które należy zadbać w trakcie pozycjonowania.
Jak już wiesz, meta title wyświetla się w wyszukiwarce największą czcionką i składa się z ok. 65 znaków. Jeśli będzie zawierał więcej, na stronie wyników wyszukiwania wyświetli się tylko jego część. Wprawdzie nie będzie miało to dużego znaczenia dla SEO, jednak lepiej zmieścić się w wyznaczonej liczbie znaków i przekazać wszystko botom indeksującym i użytkownikom w zwięzły sposób.
Znaczenie meta tytułu dla pozycjonowania jest ogromne. Przede wszystkim boty indeksujące w łatwy sposób mogą odczytać, co znajduje się na poszczególnych podstronach – wyszukiwarka Google lubi, gdy struktura strony jest jasno określona. Oprócz tego w tytułach umieszcza się słowa kluczowe, na które widoczny ma być serwis.
Meta opis to krótki tekst, który wyświetla się pod meta tytułem strony lub podstrony. Jest to nic innego jak opis jej zawartości. Wprawdzie nie ma on bezpośredniego wpływu na miejsce w rankingu, jednak firma Google rekomenduje, aby uwzględnić jego optymalizację w całym procesie pozycjonowania. Jego zadaniem jest przede wszystkim poinformowanie użytkownika o tym, co znajdzie na danej stronie. Aby poprawić statystyki dotyczące ruchu, warto tworzyć perswazyjne meta opisy, które będą zachęcały użytkowników do odwiedzenia witryny poprzez przedstawienie głównych korzyści.
W przypadku description również znaczenie ma jego długość – powinien mieć on ok. 155 znaków ze spacjami.
Znacznik Meta Robots również nie wpływa bezpośrednio na pozycję strony, jednak mimo to, ma on znaczenie w procesie pozycjonowania. Wynika to z mechanizmu działania wyszukiwarki Google. Zanim zacznie ona wyświetlać użytkownikom konkretne wyniki, w pierwszej kolejności musi znaleźć serwis w sieci, a następnie dodać go do swojego indeksu. Znacznik Meta Robots to narzędzie do komunikacji z botami indeksującymi przeglądarki. Dzięki niemu określa się, które podstrony mają zostać zaindeksowane, a które nie. Warto wiedzieć, że nie wszystkie elementy na stronie mają znaczenie dla pozycjonowania (regulamin, koszyk, strona rejestracji). Za pomocą znacznika Meta Robots można wskazać botom drogę, po której mają się poruszać. Zablokowanie dostępu do poszczególnej strony za pomocą elementu HTML może wyglądać tak: <meta name=”robots” content=”noindex”/>. Jest to instrukcja skierowana do wszystkich robotów, jednak taką komendę można skierować do konkretnego ich typu, poprzez użycie innej wartości przy atrybucie.
W sekcji body strony znajdują się znaczniki, które dotyczą przede wszystkim formatowania tekstów np. <p> (paragraf) czy <h1> (nagłówek pierwszego rzędu). W tym przypadku największe znaczenie dla pozycjonowania mają właśnie znaczniki dotyczące nagłówków, zwłaszcza H1.
Jest to najważniejszy element na każdej podstronie, który powinien zawierać główne słowo kluczowe, a także przedstawiać to, co użytkownik znajdzie na poszczególnej podstronie. Tagiem <h1> oznacza się m.in.:
Nagłówki, podtytuły i śródtytuły pozwalają uporządkować stronę i poprawić jej czytelność – dzięki nim użytkownik w łatwy sposób może znaleźć najważniejsze dla niego informacje i nie musi czytać całego tekstu od początku do końca. Stosowanie nagłówków niższego rzędu (H2, H3, H4) jest obowiązkowe zwłaszcza w przypadku długich tekstów. Nie można zapominać również o umieszczeniu w nich słów kluczowych.
Nagłówki to jednak niejedyne tagi, które mają znaczenie dla SEO. Tak naprawdę wszystkie znaczniki związane z formatowaniem tekstu będą miały wpływ na widoczność strony i na to, jak zostanie odebrana przez użytkowników. Zarówno wyszukiwarka Google, jak i użytkownicy nie lubią ścian tekstu, które nie zawierają podziału na sekcje, oraz wyróżnień. Takie treści są nieczytelne i nieatrakcyjne, a warto wiedzieć, że firma Google zwraca szczególną uwagę na doświadczenia użytkowników.
Innym ważnym znacznikiem, a właściwie atrybutem znacznika, który należy do sekcji body strony, jest atrybut alt, czyli alternatywny opis obrazka. Użytkownik widzi go tylko wtedy, gdy występuje problem z wczytaniem pliku graficznego. Jego obecność jest zatem istotna również dla wrażeń użytkownika, a nie tylko dla SEO. Ale jak właściwie atrybut alt wspiera pozycjonowanie? Otóż zoptymalizowany alternatywny opis, który zawiera odpowiednie słowa kluczowe, będzie wyświetlał się w Grafice Google, co pozwoli pozyskiwać więcej ruchu na stronie.
W przypadku pytań nasza agencja SEO zaprasza do kontaktu.
Chcesz zobaczyć o czym jeszcze pisaliśmy?
Karolina GoćkowskaiCEA GroupiCEA GroupRozpocznij
od bezpłatnej
konsultacji SEO
Zainwestuj w szczegółową konsultację SEO i dowiedz się więcej na temat wydajności Twojego sklepu internetowego. Przeprowadzimy dla Ciebie kompleksową analizę, dzięki której uzyskasz jasny obraz tego, co należy poprawić.
