Z tego artykułu dowiesz się czym jest:
Poprawny kod HTML i style CSS
Podstawą dobrze stworzonego szablonu strony www, zwanego też layoutem bądź template (opartego o np. CMS WordPress lub Joomla) lub sklepu internetowego, jest poprawnie napisany kod HTML oraz arkusz stylów CSS.
Poprawna struktura pliku HTML rozpoczyna się od deklaracji !doctype, która poinformuje przeglądarkę o tym, z jakim plikiem ma do czynienia. Wśród podstawowych znaczników kodu HTML nie może zabraknąć tagów < html< head > oraz < body >. Bez nich kod będzie jedynie nieudolnym zlepkiem nic nieznaczących znaków.
Warto również rozważyć użycie wprowadzonych w HTML5 tagów < header >, < nav >, < section >, < article >, < aside > czy < footer > - więcej informacji o tych elementach w dalszej części artykułu.
Powinieneś również pamiętać o rozbudowaniu tagu < html > o znacznik hreflang określający język, w jakim napisana jest dana podstrona.
Poprawna struktura pliku HTML.
Sekcja < head > strony www zawiera wiele przydatnych informacji, zarówno dla przeglądarki jak i Google. To właśnie w tym miejscu wstawiamy m.in. metadane, tagi dla Google Tag Managera czy linkujemy do skryptów JS i arkuszy CSS. Również tutaj umieszczamy krytyczny kod CSS i JS, a także informujemy przeglądarkę o rodzaju kodowania znaków naszej strony www.
Pamiętaj również, że lepiej jest stosować w znacznikach małe litery np. < section > zamiast < SECTION >.
Pracując przy sekcji < head > pamiętaj o:
- < meta charset="utf-8" / > - określającym, że nasza strona została napisana za pomocą UTF-8,
- < title > - tworzącym tytuł dla danej podstrony widoczny zarówno w przeglądarce jak i wynikach wyszukiwania Google,
- < meta name="description" content="..."/ > - określającym tematykę danej podstrony. Opis ten będzie widoczny w SERPach Google’a,
- < meta name="robots" content="..." / > - pozwalającym Ci wykreślić z indeksu Google niechciane podstrony,
- < link rel="canonical" href="..." / > - niezbędnym w walce z duplikatami treści na stronie,
- < meta property=”og:...” content=”...” / > - definiującym m.in. specyficzne dane wyświetlane podczas udostępniania linku do podstrony w Social Mediach,
- < script > - gdzie umieścisz krytyczny kod JavaScript wymagany do poprawnego wyrenderowania sekcji Above The Fold,
- < style > - w którym zawrzesz krytyczny kod styli CSS,
- < link rel="icon" href="favicon.ico" type="image/x-icon"/ > oraz < link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/ > - nadającym ikonę Twojej stronie internetowej.
Przykład poprawnej sekcji < head >.
Niestety temat ten jest tak obszerny, że nie da się go w pełni rozważyć w jednym artykule. Opisane przeze mnie punkty to podstawy, dzięki którym możliwe jest profesjonalne tworzenie stron internetowych.
Sekcja < body >
Sekcja ta odpowiada za wszystko to, co użytkownik widzi w oknie przeglądarki. To tutaj wyświetla się m.in. menu główne, slider, treść podstrony czy inne elementy które zaplanowaliśmy podczas tworzenia szablonu.
HTML5 wprowadziło nowe znaczniki, które w zamiarze miały pozwolić przeglądarce na lepsze zrozumienie struktury naszej strony www.
Do owych znaczników należą m.in.:
- < article > - jest sekcją grupującą treść strony wraz z nagłówkiem,
- < aside > - w tej sekcji umieszczamy sekcje niepowiązane z główną treścią jaką zawierają strony internetowe np. wszelkie sidebar’y,
- < footer > - jak wskazuje nazwa tej sekcji, odpowiada ona za kod stopki naszej strony,
- < header > - sekcja odpowiadająca za nagłówek strony internetowej,
- < main > - określa część główną zawierającą content,
- < nav > - odpowiada za sekcję zawierającą menu strony,
- < section > - sekcja pozwalająca oddzielić od siebie grupy elementów, np. sekcję Call To Action.
Istotnym elementem są również nagłówki. Pomimo tego, że HTML5 zezwoliło na używanie kilku nagłówków H1 w obrębie jednej podstrony zalecamy, aby używać tylko i wyłącznie jednego nagłówka H1. Pamiętaj również o używaniu innych nagłówków takich jak H2, H3 itp. w celu lepszej segregacji treści na podstronie.
Kolejnym z elementów, który najczęściej zawierają strony internetowe, są zdjęcia. Niestety, mało kto pamięta o tym, aby podczas ich wstawiania używać atrybutu alt czy title, który każde zamieszczane zdjęcie czy grafika, powinny obowiązkowo posiadać.
Pamiętaj! Dla Google i jego oceny użyteczności pusty alt oraz title jest lepszy niż jego brak.
Przykład poprawnie wstawionego zdjęcia.
Żadna strona www nie może obyć się bez elementów klikalnych. Stosujemy je m.in. w nawigacji (np. menu), linkowaniu wewnętrznym czy odnośnikach do social media. Google preferuje, żeby linki te posiadały atrybuty title oraz aria-label - sytuacja podobna jak w przypadku zdjęć - puste lepsze niż żadne. Należy również ustawić nazwy dla wszystkich elementów klikalnych, które zawiera strona internetowa (o ile oczywiście mamy taką możliwość) - dotyczy to także przycisków stworzonych za pomocą znacznika < button >.
Przykład poprawnego kodu linku oraz przycisku.
Stosując na stronie linki wychodzące poza domenę naszej strony www, należy użyć atrybutów rel="noopener" lub rel="noreferrer".
Przykład linku kierującego do Social Media.
Dobrą praktyką wg Google, jest również unikanie linkowania po anchorze typu “czytaj więcej”. Pożądane jest umieszanie linków w treści w ten sposób, aby anchor odpowiadał tematycznie temu, co znajduje się na stronie, do której kieruje.
Dobra strona firmowa nie może zostać pozbawiona również mapy dojazdu, dzięki której klient będzie mógł spokojnie trafić na miejsce. Najczęściej umieszczaną mapą na naszych stronach jest mapa wygenerowana z wizytówki Google Moja Firma. Dla każdej takiej mapy (także każdego elementu < iframe >) należy podać nazwę. Poniżej prezentuję poprawnie napisany kod znacznika < iframe >.
Poprawny znacznik < iframe >.
Większość witryn posiada również wszelkiego rodzaju formularze, począwszy od zapisywania się do newslettera poprzez kontakt z firmą po rozbudowane formularze rezerwacyjne. W każdym takim przypadku, o ile to możliwe, zalecam nadanie etykiet poszczególnym polom w formularzu.
Poprawnie oznaczone pola formularza.
Google uważa, że użyteczne jest również stosowanie atrybutu tabindex. Określa on kolejność zaznaczania elementów na stronie podczas wciskania klawisza TAB. Google preferuje, aby na stronie znalazł się co najmniej jeden element z liczbą większą niż 0.
Przykład użycia atrybutu tabindex.
Elementem bardzo lubianym przez Google są Dane Strukturalne Schema. Odpowiadają one za lepsze zrozumienie przez Google tematyki strony, a także wpływają na wyniki w SERP’ach. Przedstawiają np. ocenę jaką posiada dana strona internetowa w formie graficznej za pomocą gwiazdek czy wyświetlają Breadcrumbs’y.
Przykład poprawnego kodu breadcrumbs wraz ze schema.
Poprawny design
Każdy grafik projektujący stronę www chce, aby jego template był unikalny, zawierał masę elementów wywołujących "efekt wow" u klienta. Niestety, nie zawsze takie podejście jest dobre. Tworzenie stron internetowych wymaga od specjalisty odpowiedniego wyczucia i wiedzy. Wygląd, jest ważny jednak stosowanie zbędnych skryptów dla uzyskania jedynie wizualnych efektów może spowodować znaczne obniżenie oceny strony przez Google.
AMP, Mobile Design First i Responsywność
Accelerated Mobile Pages jest projektem, który w założeniach miał przyspieszyć i ustandaryzować strony internetowe. Niesie za sobą wiele przydatnych rozwiązań, a także niestety sporo ograniczeń. Strony AMP przede wszystkim miały być szybkie. Niestety programistę ogranicza m.in. maksymalna ilość znaków (50000) w stylach CSS, a także mocno ograniczone używanie skryptów. W mojej opinii, bez używania AMP możemy napisać równie szybką, dużo lepiej wyglądającą stronę internetową. Jeśli natomiast zależy Ci, aby Google mogło zapisać Twoją stronę w swoim cache i serwować ją ze swoich serwerów w mobilnych wynikach wyszukiwania, możesz rozważyć jego wprowadzenie.
Dobrą praktyką jest również Mobile Design First czyli postawienie w pierwszej kolejności na odbiór strony na urządzeniach mobilnych. Po poprawnym przygotowaniu wersji mobilnej możemy dostosować całość pod większe urządzenia.
Standardem, a nawet wymogiem w dzisiejszych czasach, jest RWD czyli Responsive Web Design. Poprawnie zaprojektowana strona internetowa nie będzie sprawiała problemów na żadnym z urządzeń. Bez znaczenia będzie czy będziemy przeglądać ją z poziomu ekranu komputera, laptopa, telefonu czy … lodówki.
Przykład - dobrze zaprojektowana strona internetowa.
Aby poprawnie stworzyć szablon strony weź pod uwagę poprawne zaprojektowanie sekcji Above The Fold czyli tego, co użytkownik (oraz Google w renderze) widzi na pierwszym ekranie po załadowaniu strony bez potrzeby przewijania. Jest to istotny element w ocenie strony www przez algorytmy Google’a.
Tworząc layout strony nie bój się dużych czcionek. Google zaleca, aby co najmniej 60% tekstu znajdującego się na danej podstronie było większe niż 12px. Sugeruję, aby najmniejszą czcionką użytą na danej podstronie było 16px.
Podczas dobierania kolorystyki do Twojego projektu pamiętaj o tym, aby stosować duże kontrasty dla elementów. Google uważa, że wysoki kontrast między elementami, np. między tłem przycisku a treścią anchora, przyczynia się do zwiększenia użyteczności takiego elementu. Będzie on też lepiej wyglądał na ekranach z nie do końca poprawnie ustawioną jasnością czy kontrastem.
Sprawa nie inaczej ma się z wszelkimi elementami klikalnymi takimi jak pozycje w menu, przyciski itp. Każdy taki element powinien mieć wysokość oraz szerokość nie mniejszą niż 48px. Dodatkowo elementy powinny być oddalone od siebie o min. 8 pikseli.
Obszar klikalności przycisku.
Pamiętaj także o dobrze widocznych danych kontaktowych (najlepiej widocznych cały czas np. w górnej sekcji strony), a także “wezwaniach do działania” czyli Call To Action. Sekcje te powinny występować na tyle często, aby odwiedzający mógł bez zbędnego szukania z nich skorzystać.
Optymalizacja
Jeśli już masz gotowy swój szablon strony internetowej, nadszedł czas aby go zoptymalizować. Szereg technik pozwala wyciągnąć z Twojego kodu jeszcze więcej, a co za tym idzie zwiększyć ocenę swojego projektu w oczach Google.
Co możesz zrobić, aby odpowiednio zoptymalizować stronę internetową?
- minifikuj i kompresuj - usuń zbędne spacje, entery oraz komentarze z plików,
- redukuj kod - używaj tylko niezbędnych skryptów oraz styli,
- podziel css na kilka plików - kod dotyczący sekcji above the fold umieść jednym pliku css, całą resztę w kolejnym (a najlepiej stwórz osobne style dla każdego rodzaju podstrony i wczytuj je tylko gdy są potrzebne),
- używaj opóźnionego ładowania elementów spoza ATF (tzw. lazy-load), a także stosuj atrybuty preload oraz async dla skryptów JS i styli CSS.
Przykład zminifikowanego kodu CSS.
W optymalizacji działania naszej witryny mogą wspomóc nas funkcje dostępne w ramach serwera. Jeśli tylko możesz korzystaj (lecz bardzo rozsądnie) z kompresji gzip, deflate czy brotli. Ustaw również odpowiednio pamięć podręczną za pomocą np. expires w pliku .htaccess. Google uważa, że optymalnym czasem wygasania dla expires będzie 1 rok.
Pamiętaj również, że Google za wyznacznik maksymalnej ilości danych przesyłanych podczas ładowania strony wzięło sobie ilość danych jaką klient może załadować w ciągu 10s. w przypadku korzystania z łącza 3G i słabego wydajnościowo urządzenia. Nie powinieneś zatem przekraczać sumarycznie 1,6MB (1600KB).
Podczas umieszczania zdjęć na stronie internetowej powinieneś zadbać o to, by:
- użytkownikom korzystającym z przeglądarki Chrome (i innych kompatybilnych) wyświetlać zdjęcia w formacie .webp,
- pozostałym użytkownikom serwuj pliki .jpg z kompresją 85%,
- jeśli stosujesz na swojej stronie grafiki wektorowe używaj do tego celu plików .svg,
- dobrze jest pozbyć się plików .png. którym możemy nadać jednolite tło i zastąpić plikami jpg,
- twórz kilka rozmiarów plików graficznych - dla każdego typu urządzeń powinieneś wczytywać pliki dostosowane do jego rozmiaru (ładowanie pliku o rozdzielczości 2000px na urządzeniu pokroju telefonu gdzie odpowiednia byłaby rozdzielczość np. 400px),
- Wyświetlając zdjęcie pamiętaj, aby jego rozmiar odpowiadał dokładnie takiemu rozmiarowi jaki wyświetlany jest użytkownikowi (staraj się unikać sytuacji w której sztucznie zmniejszasz rozdzielczość grafiki z np. 500px x 500px na 200px x 200px),
- równie ważne jest także, aby zdjęcia wyświetlane były w dokładnie takich proporcjach w jakich zostały stworzone (nie rozciągaj “na siłę” grafik - wygląda to źle i jest również niekorzystnie odbierane przez Google).
O optymalizacji szybkości strony możesz więcej przeczytać w artykule: Jak poprawić szybkość ładowania strony.
Sprawdź więcej informacji na temat pozycjonowania grafiki w wyszukiwarce Google.
Czym charakteryzuje się dobry serwer?
Chcąc opublikować stronę w Internecie zetkniesz się z problemem wyboru serwera. Na co powinieneś zwrócić uwagę?
- Możliwość użycia kompresji gzip, deflate czy brotli - niektóre serwery niestety nie pozwalają na ich użycie lub mocno je utrudniają,
- standard http2 - jeśli serwer będzie obsługiwał protokół http2 to wspaniale,
- serwer redis - w przypadku dużych stron i sklepów internetowych warto sprawdzić czy w Twoim planie hostingowym znajduje się możliwość uruchomienia serwera redis,
- wersja i szybkość PHP - zadbaj by serwer obsługiwał jak najnowsze wersje interpretera PHP, a także by ów interpreter działał jak najszybciej,
- szybka baza danych - niebagatelną rolę odgrywa również szybkość wykonywania działań na bazie danych, zadbaj o to by była ona jak najszybsza,
- LiteSpeed - jeśli Twój serwer został oparty o technologię LiteSpeed wiele z optymalizacji będziesz miał z głowy (taki serwer pozwala na kompresję, minifikację, konwersję plików do webp oraz wielu innych funkcjonalności które opisywałem wyżej).
Najczęściej stosowane elementy spowalniające renderowanie strony
Zastanawiałeś się co tak naprawdę najczęściej spowalnia stronę internetową? Ja również, dlatego poniżej przedstawiam wnioski do jakich doszedłem przez ostatnie kilka miesięcy podczas testów wielu witryn internetowych.
- zdjęcia - bardzo częstym problemem jest ilość, jakość oraz rozmiar zdjęć,
- brak cache - równie często spotykam się z sytuacją iż nie zastosowano żadnego modułu cache’ującego,
- duża ilość niepotrzebnych skryptów i wtyczek - przypadłość ta pojawia się najczęściej na stronach opartych o WordPress,
- skrypty od Google - mało kto pomyślałby, że skrypty samego Google są przyczyną spadków w Google PageSpeed Insight (czasem nawet o 40 punktów!),
- linki prowadzące do stron które zostały przekierowane za pomocą przekierowań 301 - zdarza się że wiele stron zostało przekierowanych na inne lecz w kodzie strony nadal istnieją linki do nich prowadzące.
Strona przed i po optymalizacji.
Podczas analizy i optymalizacji kodu strony pomocnym narzędziem może okazać się DevTools wbudowany w przeglądarkę Chrome. O tym jak posługiwać się tym narzędziem przeczytasz w artykule: Analiza strony internetowej - DevTools.
Podsumowanie
Mam nadzieję, że informacje które przedstawiłem w niniejszym artykule o tym jak stworzyć i zoptymalizować szablon strony okażą się dla Ciebie pomocne. Jeśli zastosujesz chociaż część z zawartych tutaj wytycznych gwarantuję Ci, że Twoja strona zostanie dużo lepiej oceniona przez samego Google’a jak i Twoich użytkowników.
Z miłą chęcią odpowiem na Twoje pytania.
