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
Poprawna struktura pliku HTML.

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鈥檃,
  • <聽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=鈥漮g:...鈥 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聽>


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鈥檡,
  • <聽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
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
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
Przyk艂ad linku kieruj膮cego do Social Media.

Dobr膮 praktyk膮 wg Google, jest r贸wnie偶 unikanie linkowania po anchorze typu 鈥渃zytaj 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聽>
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
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
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鈥檃ch. Przedstawiaj膮 np. ocen臋 jak膮 posiada dana strona internetowa w formie graficznej za pomoc膮 gwiazdek czy wy艣wietlaj膮 Breadcrumbs鈥檡.

Przyk艂ad poprawnego kodu breadcrumbs wraz ze schema
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
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鈥檃.

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
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 鈥渨ezwaniach 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
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 鈥渘a si艂臋鈥 grafik - wygl膮da to 藕le i jest r贸wnie偶 niekorzystnie odbierane przez Google).

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鈥檜j膮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
Strona przed i po optymalizacji.

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鈥檃 jak i Twoich u偶ytkownik贸w.

Z mi艂膮 ch臋ci膮 odpowiem na Twoje pytania.