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

This site uses Akismet to reduce spam. Learn how your comment data is processed.