O czym pamiętać przy wdrażaniu strony www?

Prace nad stroną www są złożone i wieloetapowe. W skrócie wygląda to tak: zaczynamy od briefu i przygotowania makiety strony. Później przygotowujemy treści, projektujemy ją graficznie, a na końcu wdrażamy. Ostatnim, kończącym cały etap elementem, powinno być przejrzenie checklisty (takiej jak nasza) i „odhaczenie” wszystkich punktów. Robimy to, aby upewnić się, że wszystkie czynności zostały dobrze wykonane, a strona działa poprawnie pod każdym względem.

Zanim zaczniesz odhaczać, przeczytaj nasze wskazówki : ) Naprawdę warto!

OPTYMALIZACJA OBRAZÓW
Obrazy powinny być zoptymalizowane, tzn. nie wrzucane bezpośrednio z aparatu, gdyż rozmiary (wagi) plików (np. 10 mb) nie pozwalałyby na odpowiednie szybkie wczytanie strony w przeglądarce. Dzięki programom graficznym lub wtyczkom możemy uzyskać mniejszy wymiar, zmienić ich jakość itp.
Przykładami programów do zmiany rozmiarów są m. in. IrfanView, Photoshop, TinyPNG (online) i wiele wtyczek do WordPressa. Należy również zwrócić uwagę na format obrazu – dla zdjęć JPG, dla ikon PNG, wektorów np. logo (najlepiej stworzyć SVG), optymalne wagi zdjęcia nie powinny przekraczać 200kb ale im mniej, tym lepiej.
CACHE, MINIFIKACJA CSS, JS
W systemach CMS można skonfigurować cache za pomocą wtyczek np. LiteSpeed dla WordPress lub przy pomocy opcji wbudowanych (w innych systemach CMS).
Wykorzystanie pamięci podręcznej przeglądarki cache powoduje, że raz zapamiętane pliki strony nie muszą być ponownie wczytywane przy kolejnych odwiedzinach strony, aż do wyczyszczenia pamięci przez odwiedzającego.
REDUKCJA WAGI STRONY
Odnośnie rozmiarów plików zalecana jest minifikacja, tj. maksymalne zmniejszenie pliku z kodem poprzez usuwanie spacji czy przejść do nowej linii – zmniejsza się wówczas jego ostateczna waga. Należy zwrócić uwagę również na pozostałe pliki strony, np. skrypty, czy ich ilość oraz rozmiary nie powodują wolnego działania strony.
SPRAWDZENIE OGÓLNEJ SZYBKOŚCI STRONY
Za pomocą narzędzi PageSpeed czy GTmetrix można sprawdzić, czy ogólna waga strony nie jest zbyt duża, jakie pliki mogą o tym decydować, a także jakie mogą być inne przyczyny nieoptymalnego ładowania się strony.
SPRAWDZENIE POPRAWNOŚCI DZIAŁANIA KAŻDEJ PODSTRONY
Należy sprawdzić czy każda podstrona działa poprawnie (zarówno wizualnie, jak i technicznie), np. czy linkowanie do innych podstron jest poprawne.
Poprawnie, czyli według przyjętych wcześniej założeń. Na co zwrócić szczególną uwagę jeśli chodzi o linkowanie: przy migrowaniu strony na inną domenę, zalecane jest stosowanie odsyłania wewnętrznego do podstron.
NAGŁÓWKI DLA SEO
Każda podstrona powinna posiadać nagłówki HTML: h1, …, h6, przy czym najbardziej bierzemy pod uwagę h1, h2, h3. Pierwszy jest najważniejszy, obowiązkowy, dodany raz na jednej podstronie. Powinien tytułować treść danej podstrony z uwzględnieniem słów kluczowych. Pozostałe nagłówki stanowią uzupełnienie i nie powinny się powtarzać (w sensie zawartości). Mogą występować w większej ilości np. h2 dwukrotnie, h3 trzykrotnie itd.
Kolejność również jest istotna – od góry strony h1, h2 itd. Nie powinny być w żaden sposób ukryte w kodzie (np. za pomocą CSS) tylko widoczne jako tekst.
TYTUŁ, OPIS STRONY
Podstrony muszą posiadać tytuł oraz opis (tagi meta title i description), gdyż jest to pierwsza rzecz, widoczna po znalezieniu naszej strony w wyszukiwarce. To kluczowe dla SEO. Zawartość ma przedstawiać to, co zobaczymy na stronie i na jakie teksty chcemy ją pozycjonować. Nagłówki dodajemy ręcznie w sekcji <head>, w ustawieniach danego CMS, lub przy pomocy dodatkowych wtyczek dla SEO np. All in One SEO Pack dla WordPress.
ATRYBUT „ALT” DLA OBRAZÓW
Przy obrazach nie mniej ważne jest odpowiednie nazewnictwo plików (nie DCIM… itp.). Nazwa pliku nie może zawierać spacji czy polskich znaków. Zamiast domyślnych nazw, najlepiej napisać to, co jest na zdjęciu. To kluczowe zarówno dla SEO, jak i pomocne przy wyszukiwaniu. Jeszcze ważniejszym atrybutem jest tu jednak „alternatywny opis” (znacznik ALT). Powinny to być proste opisy przedstawiające to, co jest na obrazie (tutaj spacje czy polskie znaki są ok). Ten atrybut jest konieczny dla robotów indeksujących, bo tylko na podstawie alternatywnego opisu mogą zweryfikować zawartość obrazu. Atrybut powinien odpowiednio określać zawartość obrazu jak i posiadać frazy kluczowe.
SITEMAP XML
Mapa witryny XML ułatwia robotom indeksującym przejście po wszystkich linkach które tam umieszczamy. Można stworzyć ją ręcznie (np. za pomocą generatora https://www.xml-sitemaps.com i wgranie później do głównego folderu strony na ftp) lub z pomocą gotowych narzędzi np. SEO np. All in One SEO Pack dla WordPress.
ROBOTS.TXT
Plik robots.txt informuje roboty czego nie powinny indeksować na naszej stronie (np. stron testowych). Np. w WordPress wtyczki do optymalizacji SEO (np. SEO np. All in One SEO Pack) pozwalają automatycznie tworzyć taki plik, który z poziomu panelu możemy przerabiać.
GOOGLE SEARCH CONSOLE I GOOGLE ANALYTICS
Google Search Console to podstawowe narzędzie pozwalające sprawdzać stan indeksowania witryny, poprawność w zakresie SEO, czy jej popularność, implementowane poprzez np. umieszczenie kodu. Google Analytics to narzędzie analityczne, zbierające statystyki odwiedzin strony, implementacja podobnie jak GSC.

Na GSC jak i GA powinniśmy utworzyć konta i skonfigurować konkretne domeny. Będą tam informacje w jaki sposób można połączyć taką usługę ze stroną. Sposobów jest kilka – od np. kopiowania kodu do sekcji „head” na stronie aż do np. wpisania ID w jednej z wtyczek WordPress do SEO (np. SEO np. All in One SEO Pack). Montujemy te narzędzia po odblokowaniu indeksowania i sprawdzeniu poprawności wszystkich czynników mających wpływ na SEO (wymienianych w innych punktach). GSC i GA to rozbudowane narzędzia analityczne.
SPRAWDZENIE BŁĘDNYCH PRZEKIEROWAŃ
Należy dbać o to, aby link z naszej strony nie prowadził donikąd („błąd 404”). Ma to negatywny wpływ na pozycjonowanie (chociażby współczynnik odrzuceń – użytkownik szybciej opuści naszą stronę). Przyczyną może być błąd we wprowadzaniu adresu, zły odnośnik wewnętrzny przy zmianie domeny czy usunięcie strony. Mogą występować również linki, które zostały wcześniej zaindeksowane, ale już nie występują na naszej stronie – potrzebne są wówczas przekierowania 301 na podobną stronę, ewentualnie na stronę główną.
SPRAWDZENIE POPRAWNOŚCI HTTPS
Czy strona zaczyna się od https? Obecnie standardem jest szyfrowanie SSL, a więc trzeba się upewnić, czy konfiguracja jest poprawnie wykonana. Należy uruchomić usługę w ramach swojego hostingu i skonfigurować wszelkie linki na stronie, tj. podstrony, obrazy (nie dotyczy linkowania do zewnętrznych serwisów) jako zaczynające się od https:// (nie dotyczy linkowania pośredniego – np. /adres-podstrony). Gdy chociaż jeden link zawiera http, pojawi się problem tzw. „mixed content” – w konsoli przeglądarki można podejrzeć jaki link jest do poprawienia.
LINKI DO SOCIAL MEDIA
Jeśli działalność jest prowadzona również w mediach społecznościowych, powinniśmy dodać odnośniki do profili w widocznym miejscu, np. przyklejone do krawędzi strony, najczęściej w formie ikonek dla danych serwisów. Takie strony powinny otwierać się w nowej karcie (dodać atrybut target = „_blank”)
FAVICON NA RÓŻNE PRZEGLĄDARKI I URZĄDZENIA
Istotnym elementem identyfikującym stronę jest favicon – ikonka widoczna np. w karcie przeglądarki przed tytułem. Należy zwrócić uwagę na inne urządzenia dla których trzeba przygotować inny format. Jest to możliwe za pomocą generatorów dostępnych online, np. https://www.favicon-generator.org.
RESPONSYWNOŚĆ (RWD)
Strony które nie dopasowują się rozmiarem do różnych urządzeń mobilnych nie są dobrze odbierane w internecie. Należy sprawdzić czy np. treść mieści się w danym ekranie (brak paska przewijania w poziomie), czy wygląda estetycznie, czy wszystkie przyciski są wygodne w użyciu (odpowiednie rozmiary) itp. Błędy związane z responsywnością wykrywa Google Search Console, ale najpewniej stwierdzić to samemu przy pomocy narzędzi do podglądu na różnych urządzeniach np. https://responsivedesignchecker.com.
DZIAŁANIE NA RÓŻNYCH PRZEGLĄDARKACH
Trzeba uwzględnić również działanie strony w zależności od wybranej przeglądarki i wyłapywać ewentualne różnice w działaniu. Różnice mogą wynikać z braku wsparcia danego elementu/definicji dla konkretnej wersji przeglądarki (sprawdzamy na https://caniuse.com), często wystarczy tutaj stosowanie prefiksów dla języka CSS – pomocne https://autoprefixer.github.io. Jeśli jakiejś przeglądarki nie możemy przetestować, można ja zasymulować używając narzędzi np. https://www.browserstack.com/screenshots.
POPRAWNOŚĆ DZIAŁANIA FORMULARZY
Jeśli strona posiada formularz kontaktowy, należy upewnić się, czy adres odbiorcy jest poprawny, czy treść jest dobrze wyświetlana i czy w ogóle wiadomości dochodzą, czy też nie są konieczne dodatkowe ustawienia konfiguracyjne. W przypadku niewłaściwego adresu mailowego ratuje nas wdrożenie narzędzia do tworzenia kopii wiadomości wysyłanych z naszego formularza, np. w systemie WordPress – wtyczka CF7 Database (o ile używamy Contact Form do wysyłki). Właściwy adres może nie wystarczyć – najczęstszą przyczyną jest blokowanie funkcji PHP mail() przez nasz hosting. Rozwiązaniem jest tutaj konfiguracja SMTP.
EFEKTY TYPU HOVER I FOCUS ITP.
Standardem jest, aby linki tekstowe (nie tylko tekstowe: kolor tekstu, tło przycisku, zoom na zdjęciu, animacja itp.) zmieniały wygląd po najechaniu na nie kursorem (efekt „hover”). Dla użytkowników ważna jest też możliwość sterowania klawiaturą – właściwość “focus” zmienia wygląd aktywnego elementu.
EFEKTY ANIMACJI, NP. FADE
Animacje na stronie dodają uroku i estetyki, choć nie należy z nimi przesadzać. Często stosowany jest efekt „fade” w momencie pojawiania się danej sekcji na ekranie (polecana biblioteka: https://michalsnik.github.io/aos/). Częste występowanie animacji powoduje wolniejsze renderowanie strony. Popularna gotowa biblioteka z animacjami: https://daneden.github.io/animate.css/ .
STRONA 404
Odpowiednie przygotowanie strony 404 (“Strona nie istnieje”) może decydować o tym, czy użytkownik dalej zostanie na stronie pomimo trafienia pod błędny adres. Możemy na tej stronie dodać elementy (oprócz informacji o braku strony) które zachęcą do dalszego korzystania z serwisu: wyszukiwarka, ostatnie posty, menu itp.
KOPIE BEZPIECZEŃSTWA
Aby zachować ciągłość w działaniu należy posiadać regularnie wykonywane kopie bezpieczeństwa. Obecnie standardem są paczki automatycznie tworzone przez dostawców hostingów. Nie zaleca się tworzenia backupów za pomocą wtyczek np. dla WordPress – obciążają serwer i zwiększają niebezpieczeństwo uzyskania dostępu do takich plików przez niepowołane osoby.
DZIAŁANIA DLA ZWIĘKSZENIA BEZPIECZEŃSTWA
Jednym z przykładów utrudnienia przeprowadzania ataków może być zmiana adresu logowania panelu z domyślnego wp-admin na niestandardowy w systemie WordPress.
POPRAWNE DZIAŁANIE EDYTORÓW (BUILDERÓW), PÓL WŁASNYCH…
Dla systemów CMS należy upewnić się, że wprowadzane zmiany przez użytkownika prowadzą do zamierzonych efektów. W przypadku pól własnych w systemie WordPress nie trudno o błąd w przekazywaniu danych, dlatego należy tutaj pamiętać o porządkach w kodzie, właściwym nazywaniu elementów itp.
USUWANIE ZBĘDNYCH ELEMENTÓW
Przy końcowych pracach należy oczyścić stronę ze zbędnego kodu, wtyczek, podstron, zdjęć itp. dla bezpieczeństwa i niepożądanego indeksowania.
ODBLOKOWANIE INDEKSOWANIA
Strona w przygotowaniu nie jest indeksowana (musimy sami ją zablokować). Przy finalnej wersji należy pamiętać, aby umożliwić indeksowanie!
ZARZĄDZANIE AKTUALIZACJAMI
Systemy CMS wymagają dbania o aktualizację, dlatego warto użyć narzędzia ułatwiającego zarządzanie aktualizacjami, np. wtyczka ManageWP dla systemu WordPress.
PRZEKIEROWANIA STRON JUŻ ISTNIEJĄCYCH Z POPRZEDNIEJ STRONY
Jeśli dany serwis już istniał i był indeksowany, należy pamiętać o przekierowaniach starych, zaindeksowanych już adresów na nowe, odpowiadające. Należy pamiętać o dopasowaniu ich odpowiednio do nowej struktury (linki o zbliżonej zawartości), nie dopuszczając, aby jakikolwiek link został z błędem 404 (opisane w pkt. 12).
PRZEPISANIE TYTUŁU, OPISU Z POPRZEDNIEJ STRONY
Również należy pamiętać o przepisaniu tytułów i opisów podstron z poprzedniej wersji witryny w celu zachowania pozycji w wyszukiwarce.
SPRAWDZENIE BŁĘDÓW W KONSOLI
Sprawdzenie informacji wyświetlanych w konsoli przeglądarki i wyeliminowanie wykrytych błędów.
PRZEKIEROWANIE ZE STRONY TESTOWEJ NA KOŃCOWĄ
Strony w fazie tworzenia powinny być przypisane do domen tzw. “testowych”, czy subdomen tych już właściwych. W końcowej fazie należy utworzyć przekierowanie 301 z domeny testowej na końcową, aby zapobiec pomyłkom przy wchodzeniu na nową stronę, np. z powodu zapamiętania w historii przeglądarki starego adresu.

https://bit.ly/start-www-check

Lista, którą przygotowaliśmy, jest w postaci aktywnego formularza .pdf, w którym możesz zaznaczać punkty, a później całość wydrukować : )

Do sprawnego wypełnienia powyższych punktów mogą Ci się przydać:

do sprawdzenia szybkości strony: https://developers.google.com/speed/pagespeed/insights/?hl=pl, https://gtmetrix.com
do sprawdzania widoku RWD:
https://responsinator.com, https://responsivedesignchecker.com
optymalizacja SEO:
https://www.seoptimer.com
generator favicon:
https://www.favicon-generator.org

Przydatne linki: