Kod źródłowy witryny – jak go odczytać?
Jeśli kiedykolwiek zastanawiałeś się, jaki kod obsługuje strony internetowe w przeglądarce – dobrze trafiłeś. Dziś przyjrzymy się bowiem kilku ważnym elementom zawartym w kodzie źródłowym, który każdy twórca internetowy powinien dobrze znać.
W tym artykule znajdziesz przydatne wskazówki dotyczące różnych zasad używanych w HTML, CSS i JavaScript. Dzięki temu, tak jak mechanik zagląda pod maskę samochodu, tak i Ty będziesz mógł zajrzeć do wnętrza swojej witryny.
Dlaczego warto wyświetlić kod witryny?
Wyświetlanie kodu źródłowego HTML to dobry sposób na szybkie wykrycie i rozwiązywanie problemów z witryną.
Element ten ważny jest również dlatego, że wyszukiwarki odczytują kod źródłowy, aby przydzielić witrynie odpowiednie miejsce na liście wyników wyszukiwania.
Ponadto jeśli zatrudniasz kogoś, kto prowadzi działania optymalizacyjne w Twojej witrynie, analiza kodu źródłowego pozwoli Ci kontrolować jego poczynania.
W tym krótkim przewodniku dowiesz się, jak wyświetlać i czytać kod źródłowy, a także poznasz sposoby wprowadzania zmian korzystnie wpływających na pozycjonowanie witryny za pomocą właściwych technik programistycznych.
Jak wyświetlić kod źródłowy?
Kod źródłowy jest wynikiem pracy programisty. Przed utworzeniem musi zostać poddany translacji na kod wynikowy. Jego wykonanie jest możliwe m.in. za pomocą kompilatora. Kod ma sprawić, aby działanie programu komputerowego było zrozumiałe i mogło być rozbudowywane o nowe funkcje. Aby wyświetlić kod źródłowy, musisz otworzyć wybraną przeglądarkę internetową i przejść do wybranej strony. Oto skróty klawiszowe, które możesz wykorzystać:
Komputery PC (Microsoft/Windows)
- Firefox – naciśnij CTRL+U, lub w menu kliknij „Programista internetowy”, a następnie „Źródło strony”;
- Chrome – CTRL+U. Możesz też wybrać menu w prawym rogu, a następnie kliknąć „Narzędzia” i wybrać „Wyświetl źródło”;
- Opera – CTRL+U. Możesz też kliknąć prawym przyciskiem myszy stronę internetową i wybrać „Wyświetl źródło strony”.
Komputery Mac
- Safari – Option+Command+U. Możesz też kliknąć prawym przyciskiem myszy daną stronę internetową i wybrać „Pokaż źródło strony”. Upewnij się tylko, że masz włączone narzędzia programistyczne w Preferencjach.
- Firefox – Command+U. Możesz też kliknąć stronę prawym przyciskiem myszy i wybrać „Źródło strony”. To pozwoli na łatwe sprawdzenie kodu źródłowego.
- Chrome – Option+Command+U. Możesz też kliknąć stronę prawym przyciskiem myszy i wybrać „Wyświetl źródło strony” lub przejść do zakładki „Widok” na pasku menu, a następnie kliknąć „Programista” i „Wyświetl źródło”.
Aby znaleźć elementy w kodzie źródłowym, naciśnij CTRL+F. Pozwoli Ci to szybko przejrzeć kod źródłowy pod kątem SEO, projektowania stron internetowych i rozwiązywania ewentualnych problemów.
Na co zwrócić uwagę w kodzie źródłowym?
Tagi tytułów
Podczas badania kodu źródłowego, z uwzględnieniem struktury konkretnego języka, należy spojrzeć na tag tytułu. Jest pierwszym elementem, który użytkownicy widzą w wyszukiwarce Google. Przedstawia on odbiorcom temat danej strony i obrazuje jej zawartość. Tag tytułu ma duży wpływ na współczynnik kliknięć, dlatego warto zadbać o jego optymalizację.
Znacznik otwierający wyznacza początek znacznika tytułu: <title>. Kończy się natomiast tagiem zamykającym: </title>. Tag tytułu znaleźć można w górnej części kodu źródłowego w sekcji <head>.
Treść tagu tytułu zazwyczaj odpowiada nagłówkowi w wynikach wyszukiwania Google.
Jeśli chcesz, aby strona dobrze pozycjonowała się dla określonego słowa kluczowego, musisz mieć ten termin w swoim tytule. Pamiętaj też, że ważne jest posiadanie oryginalnych tytułów. Zduplikowane treści mogą bowiem przynieść efekt przeciwny do zamierzonego.
Aby nieco ułatwić sobie ten proces, możesz skorzystać z bezpłatnej aplikacji Screaming Frog. Program ten skanuje Twoją witrynę i pozwala szybko zidentyfikować ewentualne duplikaty lub wyszukiwać brakujące tagi w ciągu kilku minut.
Meta opisy
Meta opisy to swego rodzaju teksty reklamowe. Ich zadaniem jest bowiem zachęcenie użytkowników do kliknięcia w link witryny. Pojawia się jednak problem w postaci ograniczonej liczby znaków w opisie. Trudno bowiem szczegółowo przedstawić temat serwisu, mieszcząc się jednocześnie w przedziale 130–160 znaków.
Istotnym błędem jest również zupełny brak opisu witryny. Google dodaje wówczas ten fragment automatycznie, w wyniku czego zwykle nie jest on zrozumiały i nie ułatwia użytkownikom zrozumienia tematu strony.
Meta opisy są nieco trudniejsze do znalezienia w kodzie źródłowym. Aby poznać swój opis, wyszukaj <meta name=”description”>.
Podobnie jak w przypadku tagów tytułowych, warto zidentyfikować brakujące, zduplikowane lub zbyt długie opisy w automatycznym audycie Screaming Frog.
Nagłówki H1
Tagi H1 to tytuły stron internetowych. Jest to pierwszy element, jaki użytkownik zauważa po otworzeniu witryny. Warto więc upewnić się, że będzie on na tyle zachęcający, że odbiorca zdecyduje się zagłębić w daną treść.
Mimo że HTML5 akceptuje już więcej niż jeden tag H1, pamiętaj, że powinieneś mieć tylko jeden tag H1 na stronę.
Ważne jest również, aby nie przepełniać tagów H1 zbyt wieloma słowami kluczowymi. Będzie to wyglądać bardzo nienaturalnie z punktu widzenia użytkowników i może spotkać się z karą od Google.
Tagi H1 wchodzą w skład kodu źródłowego, możesz je znaleźć, wyszukując <h1.
Linki
Istnieje kilka typów linków wyświetlanych w kodzie źródłowym.
NoFollow
NoFollow to atrybut, który dodany do linków wewnętrznych, informuje wyszukiwarki, że łącze nie powinno być indeksowane. Podczas gdy jeszcze kilka lat temu był on używany głównie do generowania PageRank, dziś stanowi ważne narzędzie w zakresie SEO. Linki NoFollow znajdziesz u kodu źródłowego przy rel=nofollow.
USG
Linki generowane przez użytkowników (USG) zostały utworzone przez odbiorców mających dostęp do Twojej witryny. Tego typu łącza są zwykle dodawane do forów mediów społecznościowych, a znaleźć je możesz, wyszukując rel=usg.
Sponsorowane
Jeśli ktoś zapłacił Ci za dodanie określonego linku do strony, musisz uwzględnić to w kodzie witryny poprzez dodanie rel=sponsored.
Podsumowanie
Wyżej wymienione aspekty to tylko ułamek wszystkich elementów programu zapisanego kodem źródłowym. Analiza tego obszaru (za pomocą stosowania właściwych technik programistycznych) pozwoli zidentyfikować ewentualne błędy i szybko je rozwiązać, dlatego warto na stałe wpisać ten zabieg w zakres swojej strategii optymalizacyjnej. Należy sprawdzać wydajność generowanego kodu wynikowego, aby cieszyć się sprawną witryną.
