IZAR od 2000 roku produkuje elastyczne i sztywne połączenia prądowe z miedzi i aluminium, dziś w zakładzie w Radwanicach pod Wrocławiem. Te połączenia pracują w turbinach wiatrowych, generatorach, transformatorach, rozdzielnicach, magazynach energii, w kolei i w zgrzewarkach. Zrobiliśmy dla IZAR nową stronę izar.pl. Cały katalog produktów, 253 wiersze tabel zapisane dotąd w PDF-ie, stał się na niej treścią, którą można przeszukać i którą odczyta wyszukiwarka.
llms.txt i llms-full.txt. Lighthouse: 100 w czterech kategoriach, na telefonie i na komputerze.
Wiedza zamknięta w katalogu PDF
Mieliśmy dwa źródła wiedzy: dotychczasową stronę na WordPressie w trzech językach i katalog produktów IZAR z 2024 roku w PDF. Katalog był bardzo dobry merytorycznie: dwanaście rodzajów połączeń, tabele obciążalności prądowej, typy wykonania, warunki pracy.
Ta wiedza była jednak zapisana w PDF-ie i na grafikach. Z PDF-a wyszukiwarka wyciągnie tekst, ale gubi układ tabel, a liczb z tabeli zapisanej jako obrazek w ogóle nie odczyta. Nie pokaże ich więc w wynikach, a asystent AI ich nie zacytuje.
Cele zapisaliśmy na początku, a tam, gdzie się dało, w liczbach:
- Strona ma działać po polsku, angielsku i niemiecku.
- Na telefonie główna treść ma się pojawić w mniej niż 2 sekundy.
- Cały katalog ma być tekstem, który przeczytają wyszukiwarki i asystenci AI.
- Strona główna ma być krótka, żeby inżynier od razu przeszedł do właściwego połączenia.
Dwie rundy, cztery kierunki
Zamiast jednego projektu do akceptacji pokazaliśmy dwie rundy po cztery kierunki strony głównej. Każdy kierunek był działającą stroną, którą dało się przewinąć i przeklikać. Udostępniliśmy je pod zabezpieczonym adresem, żeby IZAR mógł je spokojnie obejrzeć na komputerze i na telefonie.
Pierwsza runda nie przeszła: za dużo tekstu na jednym ekranie, za mało efektu. W drugiej odwróciliśmy proporcje: strona główna jako krótka opowieść obrazem i ruchem, a szczegóły na podstronach. Powstały cztery nowe kierunki:
IZAR wybrał „Przepływ”, a z „Ampera” przenieśliśmy dobór połączenia suwakiem.
Przewód, przez który płynie prąd
W „Przepływie” całą stronę prowadzi jeden motyw: miedziany przewód. Na górze strony głównej trzy fazy L1, L2 i L3 splatają się i wpadają w prawdziwe połączenie z plecionki miedzianej. Dalej przewód biegnie w dół i przy przewijaniu kolejno „zasila” miejsca, w których pracują produkty IZAR: turbinę wiatrową, generator, sieć energetyczną, transformator, rozdzielnicę, magazyn energii, kolej i zgrzewarkę. Każde z tych miejsc to osobny rysunek techniczny, a przewód wchodzi w nim w zacisk i wychodzi spod podstawy, tak jak w prawdziwej instalacji.
Ruch jest dyskretny i pokazuje tylko drogę prądu. Przewijasz we własnym tempie: strona nie przejmuje kółka myszy i nie zatrzymuje Cię na efektach. Kto ma w systemie wyłączone animacje, widzi stronę bez ruchu, z tą samą treścią. Miedź jest jedynym kolorem akcentu, reszta to jasne tła i grafitowy tekst. Na stronie głównej każdy ekran ma jedną myśl, a tabele i dłuższe opisy są na podstronach.
Z katalogu PDF do tabel, które da się znaleźć
Największa praca była niewidoczna: przeniesienie katalogu na stronę. Wszystkie tabele z katalogu 2024 przenieśliśmy na stronę, w sumie 253 wiersze, w tym 80 rozmiarów połączeń z plecionki miedzianej (PG) i 36 rozmiarów połączeń z blaszek zgrzewanych (PE). Teraz to zwykłe tabele tekstowe: wyszukiwarka odczyta z nich każdą liczbę, a inżynier znajdzie swój rozmiar przez Ctrl+F, skopiuje wiersz do arkusza albo wydrukuje tabelę.
Przy przepisywaniu znaleźliśmy w katalogu pięć błędów druku: prąd o dwa rzędy wielkości za mały w jednej z pozycji aluminiowych, grubość z przecinkiem przesuniętym o jedno miejsce czy kolumnę prądu przemiennego przesuniętą o wiersz. Zasada była jedna: na stronie nie pokazujemy liczby, o której wiadomo, że jest błędna. Jeśli wcześniejsze dane IZAR miały wiarygodną wartość, wpisujemy ją z przypisem, a jeśli nie, zostaje kreska.
Każdy z dwunastu rodzajów połączeń ma własną stronę: zdjęcie, kluczowe parametry i listę tego, co podać w zapytaniu, a tam, gdzie katalog je podaje, także typy wykonania i tabele. Do tego osiem stron branż z rysunkami: gdzie dokładnie pracuje połączenie, co musi wytrzymać i który rodzaj pasuje.
Kalkulator zamiast przeglądania tabel
Z kierunku „Amper” wzięliśmy dobór połączenia do prądu. Wpisujesz prąd stały, jaki ma płynąć, albo ustawiasz go suwakiem (od 181 do 5562 A), a strona od razu podaje najmniejszy rozmiar połączenia PG z tabeli katalogu, który go przeniesie, i rysuje je w skali. Przycisk „Zapytaj o PG …” otwiera formularz z wpisanym już kodem i prądem.
Osobny kalkulator liczy, jaki prąd stały zniesie szyna miedziana lub aluminiowa, i podpowiada pasujące połączenie. Sprawdza, ile ciepła szyna wytworzy i ile zdąży oddać do otoczenia. Korzysta z tych samych wzorów co dotychczasowy kalkulator IZAR, a wyniki zgadzają się z tabelami katalogu: dla szyny SM 1010 wychodzi 2150 A.
Trzy języki, każdy na swoich adresach
Strona działa po polsku, angielsku i niemiecku, w sumie 115 podstron. Każda wersja ma własne, przetłumaczone adresy, na przykład izar.pl/uslugi/, izar.pl/en/services/ i izar.pl/de/dienstleistungen/, a wyszukiwarki dostają jasną informację, która podstrona jest odpowiednikiem której w innym języku.
SEO: stare adresy prowadzą dalej
SEO to dbanie o to, żeby strona dobrze wypadała w wynikach Google i innych wyszukiwarek. Przy zmianie strony najłatwiej tu stracić, bo stare adresy przestają działać, a razem z nimi pozycje i linki z innych stron. Dlatego przejrzeliśmy dotychczasową stronę adres po adresie.
49 adresów zostało bez zmian. 64 przekierowaliśmy na nowe odpowiedniki przekierowaniem 301, czyli trwałą informacją dla wyszukiwarki, że strona przeniosła się pod nowy adres. Dotyczy to podstron, wpisów bloga i plików PDF. Wyszukiwarki dostały też nową mapę strony, czyli plik z listą wszystkich adresów we wszystkich językach. Po starcie zgłosiliśmy 180 adresów przez IndexNow. Przez tę usługę strona sama zawiadamia wyszukiwarki, m.in. Bing, o nowych i zmienionych adresach i nie musi czekać, aż trafi na nie robot.
Każda podstrona ma własny tytuł, opis i grafikę do udostępniania w mediach społecznościowych. Takich grafik jest 115, w trzech językach, i wszystkie powstały automatycznie z treści strony. Po zmianie tytułu wystarczy je przegenerować, bez ręcznego składania w programie graficznym.
GEO: strona czytelna także dla AI
GEO (od ang. Generative Engine Optimization) to SEO dla asystentów AI: dbanie o to, żeby ChatGPT, Perplexity czy podsumowania AI w Google rozumiały stronę i mogły ją przytoczyć w odpowiedzi. Takim narzędziom łatwiej przytoczyć stronę, która mówi konkretnie. Dlatego każda ważna podstrona zaczyna się od zdania, które samo odpowiada na pytanie „co to jest”, a liczby są podane wprost.
W każdym języku jest 66 pytań i odpowiedzi przy produktach, branżach i na stronie głównej, a każda zaczyna się od konkretu. Na pytanie „Jak dobrać połączenie do prądu?” strona odpowiada od razu: „Wybierz najmniejszy typ, którego obciążalność w tabeli katalogu jest nie mniejsza niż Twój prąd”.
Strona ma też dane strukturalne, czyli opisy w kodzie, których odwiedzający nie widzi. Mówią one wyszukiwarce wprost: to jest firma, tu ma siedzibę, to jest jej oferta, a to pytania i odpowiedzi. Do tego dochodzą dwa pliki dla asystentów AI, llms.txt i llms-full.txt: cała oferta i wszystkie tabele katalogu w prostym tekście, bez grafiki i menu.
izar.pl/llms.txt (fragment)# IZAR Sp. z o.o.
> IZAR Sp. z o.o. to polski producent elastycznych i sztywnych
> połączeń prądowych z miedzi i aluminium: połączeń z plecionki
> miedzianej (PG), zgrzewanych z blaszek (PE), linek, szyn
> elastycznych i szyn miedzianych. Firma ma siedzibę
> w Radwanicach pod Wrocławiem i działa od 2000 roku.
## Produkty / Products
- [PG · Połączenia z plecionki miedzianej](https://izar.pl/polaczenia-z-plecionki-miedzianej/): […]
- [PE · Połączenia zgrzewane z blaszek](https://izar.pl/polaczenia-zgrzewane/): […]
Szybkość: sto na sto
Strona jest statyczna, zbudowana w Astro: gotowe podstrony leżą na serwerze i nie są składane przy każdym wejściu (dlaczego tak buduję strony firmowe, opisałem w case study kliniki medycznej). Zdjęcia są w nowych, lżejszych formatach (AVIF i WebP) i w rozmiarach dopasowanych do ekranu. Fonty przycięliśmy do 163 znaków, których naprawdę używamy w trzech językach, a cały JavaScript strony głównej waży ok. 15 KB.
Mierzyliśmy to w pięciu rundach. Strona główna na telefonie:
| Strona główna, telefon | Pierwszy pomiar | Po pięciu rundach |
|---|---|---|
| Szybkość w Lighthouse | 94 | 100 |
| Główna treść na ekranie | 2,70 s | 1,81 s |
| Waga strony | 267 KB | 165 KB |
| Zapytania do serwera | 22 | 12 |
Efekt mierzyliśmy w Lighthouse, bezpłatnym narzędziu Google do badania stron, które daje oceny od 0 do 100. Wynik: 100 w każdej z czterech kategorii (szybkość, dostępność, dobre praktyki i SEO), na telefonie i na komputerze. Przed uruchomieniem zbadaliśmy 10 podstron, w sumie 40 pomiarów, i każdy dał ten sam wynik. Po starcie, 1 października, sprawdziliśmy też żywą izar.pl: wynik się utrzymał.
Statystyki tylko za zgodą, formularz bez captchy
Google Analytics włącza się dopiero po zgodzie użytkownika. Przyciski „Akceptuję” i „Odrzucam” wyglądają tak samo, a zgodę można wycofać w stopce każdej podstrony. Bez zgody strona działa tak samo, tylko bez statystyk. Serwer wysyła też przeglądarce zestaw zakazów. Wolno uruchomić tylko skrypty samej strony i Google Analytics, a ten i tak ładuje się dopiero po zgodzie. Nie wolno osadzić strony w cudzej witrynie ani sięgnąć po kamerę, mikrofon czy lokalizację.
Formularz zapytania wysyła wiadomości przez firmową skrzynkę i ma ochronę przed spamem bez captchy, więc klient nie musi przepisywać literek z obrazka. Zwykłe roboty odpadają, zanim wiadomość w ogóle powstanie, a typowe oferty „pozycjonowania” i „leadów” są rozpoznawane po treści. Przypadki wątpliwe trafiają do skrzynki z dopiskiem w temacie, bo zgubione zapytanie handlowe kosztuje więcej niż jeden spam. Reguły sprawdziliśmy na 74 przykładowych zapytaniach klientów po polsku, angielsku, niemiecku, czesku i ukraińsku. Żadne nie zostało zablokowane, a jedno dostało dopisek.
Telefon na równi z komputerem
Projektowaliśmy od razu dla telefonu: menu, tabele, kalkulator i formularz działają wygodnie na małym ekranie. Długie tabele przewijają się w bok i nie rozjeżdżają strony, a menu mobilne prowadzi prosto do rodzajów połączeń i branż.
80 sekund o tym, jak powstawała strona
Jeszcze przed startem zrobiliśmy krótki film o tym, jak powstawała nowa strona IZAR, ten z początku artykułu. Trwa 80 sekund, ma głos lektora i napisy po polsku. Powstał w trzech formatach: poziomym na YouTube i na stronę, pionowym do krótkich filmów na telefon i kwadratowym do wpisów na LinkedIn. Podobnie jak grafiki do udostępniania, film złożyliśmy z prawdziwych elementów strony i zdjęć IZAR, bez gotowych zdjęć i nagrań z banków zdjęć.
Film powstał przed ostatnią rundą pomiarów, dlatego pada w nim wynik 99-100 na telefonie. Końcowy to 100.
Co mówi lektor (zapis filmu)
Miedź, prąd i precyzja. Tworzyliśmy nową stronę IZAR, producenta połączeń prądowych spod Wrocławia. Punkt wyjścia: dotychczasowa strona i katalog. W nich 26 lat doświadczenia i mnóstwo danych technicznych. Tabele z katalogu stały się danymi: 80 typów PG, 36 PE, 12 rodzin produktów. Wszystko w 3 językach.
Zaczęliśmy od 4 kierunków graficznych. Rozwinęliśmy „Przepływ”: miedzianą linię, która prowadzi przez stronę jak prąd. Linia rysuje się podczas przewijania: od turbiny wiatrowej, przez sieć i transformator, po kolej i spawalnictwo. 8 branż, w których pracują połączenia IZAR. Z kierunku „Amper” dołączył kalkulator. Suwak prądu dobiera połączenie, rysunek PG rośnie w proporcjach z tabeli.
3 języki: polski, angielski i niemiecki, każdy z własnymi adresami. Do tego ponad 100 grafik do udostępniania. Gotowa strona jest szybka. Lighthouse: 100/100 na komputerze, 99-100 na telefonie. Treść pojawia się w niecałe 2 s. Nowa strona IZAR: izar.pl. Koncept i realizacja: c3s.pl.
Pierwsze poprawki po starcie
Strona ruszyła na izar.pl 30 września. Zaraz po starcie wgraliśmy kolejne poprawki, na podstawie uwag IZAR, naszych testów i sygnałów z Google:
- nazwy kategorii w menu stały się klikalne;
- przy krawędzi ekranu pojawiła się miedziana metka „Pobierz katalog”;
- adres z „www” przekierowuje na wersję bez „www”;
- rodzaje połączeń opisaliśmy dla Google jako usługę, a nie produkt, bo od produktu Google wymaga ceny albo opinii, a IZAR wycenia na zapytanie;
- formularz dostał mocniejszą ochronę przed spamem, która rozpoznaje typowe oferty po treści.
Każdą zmianę sprawdzaliśmy na żywej stronie, zanim uznaliśmy ją za gotową.
Co osiągnęliśmy
- Nowa strona izar.pl w trzech językach: 115 podstron, dwanaście rodzajów połączeń, osiem branż, dwa kalkulatory i wszystkie tabele katalogu jako treść, którą da się znaleźć.
- 100 w Google Lighthouse w czterech kategoriach, na telefonie i na komputerze.
- Przejście ze starej strony z zachowaniem adresów: 49 bez zmian, 64 przekierowane, nowa mapa strony i 180 adresów zgłoszonych do wyszukiwarek.
- Treść przygotowana pod wyszukiwarki i pod AI: dane strukturalne, llms.txt i 66 konkretnych odpowiedzi w każdym języku.
- Formularz bez captchy, który odsiewa spam, a w testach przepuścił wszystkie 74 zapytania klientów, oraz baner cookies, w którym odmowa jest tak samo łatwa jak zgoda.
- Film w trzech formatach i 115 grafik do mediów społecznościowych, gotowych do publikacji.
Twój katalog też leży w PDF-ie?
Jeśli wiedza o Twoich produktach leży w katalogu PDF, a strona nie nadąża za tym, jak dziś szukają klienci, porozmawiajmy. Zaczniemy od tego samego co tutaj: od Twoich produktów, Twoich klientów i kilku kierunków do wyboru.
Koncept i realizacja: C3S i czujowski.pl. Zdjęcia produktów: IZAR Sp. z o.o.