opisy produktów kqs

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>&nbsp;
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:

  1. 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.edytor wyswig kqs
  2. 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.

opisy produktów kqs błędneJak 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&nbsp; 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.&nbsp; 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&nbsp;4x0,75mm; <br>powyżej 50 metrów - przewód o przekroju&nbsp; 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ść)&nbsp;</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>&nbsp;</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:

prawidłowe formatowanie opisu produktuStandaryzacja 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.

Dodaj komentarz