Wygodne jest kopiowanie treści ze stron producenta ( za jego zgodą ) czy ze swojej aukcji allegro, ale nie każdy ma świadomość, że podczas kopiowania pobieramy także ukryty kod html który nie jest widoczny w opisie a ma ogromne znaczenie przy ewentualnym ostylowaniu rodzaju fontu, koloru czy jego położenia.
Do napisania tego wpisu zbierałem się już od dawna, ale dopiero dziś mam okazję by napisać o tym kilka słów przy czym będzie to dobra instrukcja dla wszystkich chcących zmienić coś na lepsze w swoim sklepie.
Czasami od klienta dostanę audyt sklepu ( którego wykonanie zlecił zewnętrznej firmie ) a w nim znajduje się informacja na temat ilości treści względem kodu – co jest jednym z wielu czynników wpływających na pozycję w google. Oczywiście są też zalecenia by podnieść współczynnik treści do kodu html ( podawany w % ) który jest widziany przez google. Chodzi o to, by robot googla wędrując po naszym sklepie, nie musiał przebijać się przez gęsto osadzony kod html połączony z atrybutami trafiając w końcu na treść która jest dla niego istotna.
Przykład sporej ilości kodu fragmentu opisu produktu ( z przykładowego sklepu działającego na skrypcie KQS )
<div class="kom" style="margin-top: 10px; padding: 10px; font-size: 13px; background-color: #F4F4F2" align="justify"><span style="color: #000000;"><span style="font-weight: bold;">Komplet obejmuje Lakier Bezbarwny HS (1L) + Utwardzacz</span></span><span style="color: #000000;"><span style="font-weight: bold;"> HS</span></span><span style="color: #000000;"><span style="font-weight: bold;"> 2K NORMAL (0,5L).</span></span><br><span style="font-weight: bold;"><br><br>Lakier Bezbarwny HS linii INTERLACKE</span> to lakier, w którego skład wchodzą wysokojakościowe surowce, charakteryzuje się dużą twardością, odpornością na warunki atmosferyczne, promienie UV i silne uderzenia. Doskonale się rozlewa, a natryśnięta warstwa jest elastyczna i posiada znakomity połysk.<br> Zalecana aplikacja pistoletem natryskowym w systemie 1,5 warstwy, dzięki czemu jest ekonomiczny i bardzo wydajny.<br> Lakier ten współpracuje ze wszystkimi lakierami bazowymi dostępnymi na rynku, a także z bazami wodnymi.<br> <span style="font-weight: bold;"></span>Zgodny z VOC KAT. B/5.<br><br><br><div style="font-size: 13px;" align="justify"><span style="font-weight: bold;">Utwardzacz</span><span style="font-weight: bold;"> HS</span><span style="font-weight: bold;"> 2K 2:1 NORMAL</span> linia <span style="font-weight: bold;">INTERLACKE</span> to kompozycja rozpuszczalników i żywic służąca do utwardzania <span style="font-weight: bold;">Lakieru Bezbarwnego HS</span> linii <span style="font-weight: bold;">INTERLACKE</span> w okresie letnim lub w pomieszczeniach dostatecznie dogrzanych. <br><br></div></div>
A poniżej przykład jak to prawidłowo powinno wyglądać:
<div class="content"> <p><strong>Komplet obejmuje Lakier Bezbarwny HS (1L) + Utwardzacz HS 2K NORMAL (0,5L).</strong></p> <p><strong>Lakier Bezbarwny HS linii INTERLACKE</strong> to lakier, w którego skład wchodzą wysokojakościowe surowce, charakteryzuje się dużą twardością, odpornością na warunki atmosferyczne, promienie UV i silne uderzenia. Doskonale się rozlewa, a natryśnięta warstwa jest elastyczna i posiada znakomity połysk. <br /> Zalecana aplikacja pistoletem natryskowym w systemie 1,5 warstwy, dzięki czemu jest ekonomiczny i bardzo wydajny.<br /> Lakier ten współpracuje ze wszystkimi lakierami bazowymi dostępnymi na rynku, a także z bazami wodnymi.<br /> Zgodny z VOC KAT. B/5.</p> <p><strong>Utwardzacz HS 2K 2:1 NORMAL</strong> linia <strong>INTERLACKE</strong> to kompozycja rozpuszczalników i żywic służąca do utwardzania <strong>Lakieru Bezbarwnego HS</strong> linii <strong>INTERLACKE</strong> w okresie letnim lub w pomieszczeniach dostatecznie dogrzanych.</p> </div>
gdzie do klasy .content w pliku styli css można określić wszystkie parametry co do rodzaju, wielkości i koloru fontu a także ostylowania znaczników <strong> jako pogrubione i ważne.
Takim zabiegiem zmniejszamy ilość kodu html potrzebnego do wyświetlenia danego opisu.
Skąd taki kod się bierze?
Teraz trzeba sobie odpowiedzieć na pytanie – na jakim etapie taki bałagan się tworzy? Jest kilka wersji które są odzwierciedleniem dokładnie tego co administratorzy sklepów robią podczas dodawania opisów:
- Kopiowanie opisów ze strony producenta lub allegro – podczas kopiowania pobieramy niewidoczny kod html który też zostaje dodany do opisu produktu. Kod ten jest widoczny w momencie przełączenia się w tryb html ( w edycji opisu ). Aby pozbyć się tego kodu, należy skopiować opis do zwykłego notatnika ( systemowego z windowsa ) dzięki czemu niewidoczny kod się nie skopiuje. Następnie z notatnika należy treść opisu skopiować już do samego produktu a następnie w produkcie dzięki edytorowi WYSWIG można formatować sobie pogrubienie tekstu czy tworzyć listy wypunktowane.
- Wielokrotne ostylowanie tekstu w edytorze WYSWIG – jest to przypadek dość bardzo znany ze starszych wersji sklepu KQS ( a konkretniej z edytora WYSWIG ) gdzie w przypadku chęci nadania pogrubienia treści czy zmiany koloru i jego ponownego skasowania, kod html pozostawał dalej jako puste znaczniki. Ponowne nadanie koloru czy pogrubienia dodawało znowu kod html ( a ilość zmian była adekwatna do ilości kodu html który zawierał te puste znaczniki ). Dochodziło do sytuacji, że 1 słowo posiadało kilka osobnych deklaracji jako: <span style=”font-weight:bold”> czy też <span style=”color:#000000″>
Jak to wygląda
Poniżej przykłady dla jednego sklepu który posiada różne formatowanie tekstu w wielu produktach.
Jak widać na zdjęciu użyte jest formatowanie fontu w kompletnym chaosie, jest zastosowana inna kolorystyka oraz różne interlinie. Warto by było zadbać o to, by opisy produktów były jednolite z zachowaniem jednego schematu formatowania. Oczywiście wszystkie style przypisane do akapitów czy punktatorów można umieścić w zewnętrznym arkuszu stylów css dzięki czemu można uzyskać odpowiednio ładne i jednolite opisy.
Poniżej przykład opisu produktu który został prawidłowo sformatowany, a wszystkie pozostałe opisy w sklepie są ustandaryzowane wg. określonego schematu
Kod html:
<div class="productDescription clearfix"> <h3 class="titleSection">Opis produktu :</h3> <p><strong>Zestaw wideodomofonowy kolorowy </strong>przeznaczony jest do domu jednorodzinnego. Nowa seria F posiada zabezpieczenia przeciw wyładowaniom atmosferycznym oraz antystatycznym. Do zestawu można podłączyć równorzędnie drugi panel zewnętrzny za pomocą modułu<strong> F-4300</strong>. Zestaw możemy rozbudować o maksymalnie <strong>3</strong> monitory z<strong> serii F</strong>. Po podłączeniu dodatkowych monitorów uaktywnia się funkcja interkomu tj. rozmowa wewnętrzna pomiędzy monitorami.</p> <p><strong>W zestawie znajduje się:</strong></p> <ul> <li>Panel zewnętrzny natynkowy<strong> F-S7</strong></li> <li>Monitor kolorowy<strong> 7" F-V11</strong></li> <li>Zasilacz <strong>F-4013</strong></li> <li>Instrukcja w języku polskim</li> <li><strong>Gwarancja 2 lata</strong></li> </ul> <p><strong>Panel F - S7</strong></p> <p>Panel wideodomofonowy przeznaczony do systemu jednorodzinnego. Wykonany jest ze stali nierdzewnej i aluminium, montowany natynkowo. Panel posiada moduł kamery CCD Sony z białymi diodami umożliwiającymi widzenie w nocy . W systemie mogą pracować równorzędnie dwa panele zewnętrzne podłączone do modułu<strong> F-4300</strong>. Pod jednym przyciskiem wywoławczym mogą pracować maksymalnie 4 monitory. Panel przystosowany do montażu na zewnątrz budynków i odporny jest na zmienne warunki atmosferyczne oraz mróz. Otwieranie zamka czy też prowadzenie rozmowy odbywa się bez wywołania ze strony kasety zewnętrznej. Urządzenia nowej serii F zostały wyposażone w zabezpieczenia antystatyczne i przeciwprzepięciowe. <br><br><strong>Dane techniczne:</strong></p> <ul> <li>kaseta wykonana z stali nierdzewnej i aluminium, wandaloodporna</li> <li>okablowanie: do 50 metrów - przewód 4x0,75mm; <br>powyżej 50 metrów - przewód o przekroju 1,0mm + koncentryk</li> <li><strong>sterowanie elektrozaczepem poprzez opcjonalny, dodatkowy zasilacz 12V </strong></li> <li>dzwonek elektroniczny <strong>"ding-dong"</strong></li> <li>poufność rozmowy</li> <li>zasilanie <strong>14V/DC</strong></li> <li>pobór prądu w czasie czuwania -<strong> 0,5W</strong></li> <li>pobór prądu w czasie pracy - <strong>1,32W</strong></li> <li>zakres temperatur:<strong> -40</strong> do <strong>+70</strong> stopni Celsjusza</li> <li>maksymalna wilgotność: do<strong> 90%</strong></li> <li>kamera kolorowa CCD: <strong>1/3"</strong></li> <li>kąt widzenia: <strong>72,8</strong> stopni</li> <li>czułość: <strong>0,1 lux</strong></li> <li>rozdzielczość: <strong>420 TVL</strong></li> <li>wymiary: <strong>135 x 58 x 48mm</strong> (wysokość x szerokość x głębokość) </li> </ul> <p><strong>Monitor F - V11</strong> Kolorowy monitor głośnomówiący z ekranem<strong> LCD</strong> o przekątnej <strong>7"</strong> do wideodomofonu z<strong> serii F</strong>. Współpracuje z dowolnym panelem zewnętrznym z tej serii. Monitor posiada regulację głośności rozmowy, dzwonka, kontrastu oraz jasności obrazu co umożliwia przystosowanie pracy według indywidualnych wymagań.</p> <p><strong>Dane techniczne:</strong></p> <ul> <li>monitor głośnomówiący<strong> LCD 7"</strong></li> <li>możliwość podglądu obrazu z panela zewnętrznego</li> <li>dzwonek elektroniczny <strong>"ding-dong"</strong></li> <li>regulacja głośności dzwonka, rozmowy, jasności oraz kontrastu</li> <li>przycisk do otwierania zamka</li> <li>zasilanie <strong>14V/DC</strong></li> <li>pobór prądu w czasie czuwania:<strong> 0,72 W</strong></li> <li>pobór prądu w czasie pracy:<strong> 8,40 W</strong> </li> <li>zakres temperatur: <strong>0</strong> do <strong>+55</strong> stopni</li> <li>maksymalna wilgotność: do <strong>90%</strong></li> <li>wymiary: <strong>142 x 216 x 23mm</strong> (wysokość x szerokość x grubość)</li> </ul> <p><strong>Zasilacz F-4013</strong><span style="text-decoration: underline;"><strong><em><br></em></strong></span>Zasilacz 14V/DC współpracujący z urządzeniami firmy GENWAY. Montaż na szynę DIN</p> <p><strong>Dane techniczne:</strong></p> <ul> <li>montaż na szynę DIN do rozdzielni prądowej (zajmuje 3 pola bezpieczników)</li> <li>pasmo przenoszenia -<strong> 50Hz</strong></li> <li>napięcie zasilające wejściowe: <strong>100~230V/AC</strong> (wejście na prąd zmienny)</li> <li>napięcie zasilające wyjściowe: <strong>14V/DC - 800mA</strong> (wyjście na prąd stały)</li> <li>wymiary: <strong>90x70x65mm</strong> (wysokość x szerokość x głębokość)</li> </ul> </div>
Oraz zdjęcie jak to wygląda na sklepie:
Standaryzacja opisów produktu ma więcej zalet niż wad. W sklepach które mają po kilka tysięcy produktów zmiana opisów będzie czasochłonna, natomiast już po samej zmianie nie tylko wyszukiwarka google doceni nasze starania, ale i klient będzie miał o wiele bardziej czytelny opis produktu.
Jak zmienić opisy
Podczas kopiowania opisu ze strony producenta czy innej strony, należy ten tekst skopiować do zwykłego notatnika w którym pozbędziemy się niewidocznego kodu ( formatowania ). Następnie z tego notatnika kopiujemy opis i wklejamy go do opisu produktu gdzie możemy zacząć go formatować a mianowicie nadawać pogrubienia, odstępy czy wyrównanie tekstu do krawędzi lub środka. Warto też stosować wypunktowanie o ile opis tego wymaga.
Gdy mamy już wszystko gotowe, należy dopisać odpowiednie ostylowanie do pliku css ( o ile go posiadamy ). W szablonach graficznych sklepu ( a konkretnie w Szablon graficzny / Strona produktu / Strona produktu ) znaleźć znacznik {OPIS_PRODUKTU} i umieścić go w jakimś bloku np.:
<div class="description">{OPIS_PRODUKTU}</div>dzięki czemu będziemy mogli ładnie ostylować wszystko co zawarte jest w opisie.
Następnie w pliku styli css możemy zacząć dodawanie odpowiednich atrybutów.
Dla list wypunktowanych dopisać :
.description ul {
list-style: outside none disc;
margin-bottom: 8px;
padding-left: 40px;
}co nam doda punkty przy liście oraz odpowiednie marginesy. Lub dla zastosowania list numerowanych możemy dodać
.description ol {
list-style: outside none disc;
margin-bottom: 8px;
padding-left: 40px;
}Dla pogrubienia tekstu dopisujemy
.description strong {
font-weight:bold; color:#000;
}dzięki czemu pogrubiony tekst będzie bardziej rzucał się w oczy. Kolor oczywiście możemy nadać odpowiednio kontrastowy dla posiadanego koloru opisu. Pozostałe formatowania można w prosty sposób dopisywać do pliku styli zgodnie ze specyfikacją html.
Dodanie odstępów między wierszami tekstu też nie jest zbyt trudne, wystarczy do naszego bloku obejmującego opis zadeklarować odpowiedni parametr:
.description {
line-height:20px
}Odstęp 20px jest optymalny dla wielkości fontu o rozmiarze ok 12-13px, w przypadku stosowania większego rozmiaru fontu należy odpowiednio zwiększyć ten odstęp by cały opis produktu był czytelny.
