Изработка на онлайн магазин Dias Playgrounds

Редизайн на онлайн магазина

Първото нещо, с което се започва винаги, е промяна на визията. При редизайн на сайт, блог или онлайн магазин, нашето решение е да проверим какво се харесва на потребителите, след което да го обсъдим с нашия клиент, и чак след това да стигнем до решение, което да удовлетвори собственика на сайта.

Следвайки нашето know-how, избрахме тема за сайта, предложихме няколко промени по изработката и редизайн на сайта. Собственикът на онлайн магазина се съгласи с нашите предложения, с което започнахме изработката на новия сайт на dev сървър.

Едно от предложенията ни беше, че в старият сайт липсваше по-разчупения модел, който да накара хората да разглеждат продуктите, да искат да прочетат повече за площадките, стрийт фитнеса и др. Затова ние решихме да поставим слайдер, в който да представим с няколко картинки идеята на онлайн магазина.

Когато започвахме с редизайна на сайта, тръгнахме от началната страница. Тъй като всеки посетител на сайта попада тук, решихме, че е добре информацията, която е там, да е обобщена. Там включихме логота, името на фирмата, какво читателите трябва да очакват от онлайн магазин и меню за навигация, което прави сърфирането в сайта ви лесно.

Следващата страница, която направихме беше страницата за блог – важен елемент, когато става дума за дигитален маркетинг. В нея публикуваме всичко ново и интересно, което е свързано с продуктите, които предлагаме. Потребителите виждат имената на статиите и при желание могат да кликнат върху тази публикация, която ги интересува.

В страница за контакти уведомяваме посетителите на уебсайта как могат да стигнат до нашият клиент. Може да бъде чрез телефонни обаждания, имейли или социални платформи.

Освен слайдера, направихме и промяна на категориите. Добавихме нови главни категории и така техният брой се увеличи на повече от 4-ри. По този начин отделихме продукти, които биха били различни от общото „Детски площадки“ и да се намират в собствена категория. Но това не беше всичко. Създадохме и категории, които да отговарят на разделението на отделните продукти по:

• Вид;
• Дизайн;
• Серия;
• Възраст.

Това го постигнахме с помощта на Woocommerce, в който могат да се добавят атрибути. Създадохме необходимият брой атрибути, след което започнахме, на всеки продукт, да ги слагаме.

Както написахме малко по-горе, в онлайн магазина имаше 300 продукта. Беше ни казано, че трябва да добавим още продукти (1500) от два нови доставчика. Но за добавянето на продуктите трябваше да се създаде скрипт от програмистите ни, който да извлече информацията от сайтовете на доставчиците. Това се наложи, защото не ни беше предоставено API или xml файл. Скрипта вземаше снимки, мета данни, заглавия и цялата налична информация. Новите продукти заедно с обновените стари качихме чрез модул Product Import Export for WooCommerce. Към всеки от тези продукти трябваше да се добави инвентарен номер, за да може по-лесно собственикът да знае дадения продукт на кой доставчик отговаря.

При поставянето на този номер имаше два начина – или ръчно да го запишем на всеки продукт, или да се направи php скрипт, който да свърши тази работа. И тук отново, нашите програмисти свършиха тази работа и написаха програмен код, който да добави на всеки продукт номера взет от името на съответния продукт.

След тази част, дизайнерите ни създадоха няколко нови банера, с които сайта на клиента ни да се отличава от другите – както по дизайн, така и бранд. Освен банерите, бяха създадени и различни снимки и видеа, които добавихме в онлайн магазина.

Следващата голяма задача, с която се заехме, бе да създадем различни менюта. Когато се захванахме с тях, ги проектирахме така, че да бъдат по-различно от стандартните. Има две менюта, които се показват при влизането в началната страница. Първото се намира отляво, а второто – отгоре. Има и трето, което се показва, след като се изберат трите чертички от лявата страна на екрана.

Всяко едно от менютата бе обмислено добре, за да може всеки потребител да стигне до мястото, което иска. За направата на менютата използвахме стандартните възможности, които се предлагат от Wordpress. Просто за всяко едно от менютата направихме подредба, в зависимост от това къде ще се намира в сайта.

При проектирането на Header-а и Footer-а се съобразявахме с това, че тези елементи подобряват ангажираността на потребителите. Трябваше да ги направим удобни и лесни за използване, с менюта и малко информация.

Тъй като това е онлайн магазин, решихме, че търсачката трябва да е горе в средата на страницата, за да може всеки да я използва лесно и бързо.

Относно търсачката – най-често се използват фигура на лупа или кутия (правоъгълник). Ние решихме да ги обединим, за да може да се получи нещо интересно и различно.

Техническо SEO

Първото, което трябва да кажем, е кратко какво е това техническо SEO? Това представлява процеса, който следи дали даденият уебсайт, блог или онлайн магазин отговаря на техническите изисквания на съвременните търсачки с цел подобряване на органичното класиране. Важни елементи на техническото SEO са:

• Обхождане;
• Индексиране;
• Изобразяване;
• Архитектура на уебсайта.

Преди да започнем с редизайна и изработката на новия сайт, ние направихме няколко теста на скоростта, за да видим в какво състояние е онлайн магазина. Оказа се, че времето на зареждане за първи път е голямо. Затова една от подзадачите, които в последствие се получи, бе да намалим времето. След намаляне на размера на картинки, използване на lazy load, изчистване на ненужни големи файлове – задачата беше изпълнена.

Когато потребител зареди за първи път сайта, времето за което се зарежда съдържанието е:

On-site SEO оптимизация

След като изпълнихме всички гореописани задачи, се заехме със създаването на:

• Съдържанието;
• Link Building;
• SEO оптимизация;

При написването на съдържанието се постарахме то да бъде максимално изчерпателно, за да може потребителя, когато го прочете, всичко да му се изясни.

На всяка категория добавихме текст, който да описва възможно най-подробно какво предлагаме. За улеснение на потребителите поставихме текста под всички продукти. Така няма да се налага на потребителя първо да чете и чак след това да търси из продуктите. В описанието на категориите сме дали от какъв материал е направен съотвеният уред, на какви серии се делят продуктите в категорията, както и дизайните – отново всичко за улеснение на клиента.

След категориите се заехме и с описанието на продуктите. Те разполагат с описание, което да помогне на потребителя. Както няколко пъти споделихме, продуктите ги разделихме и по дизайни, видове, серии и възраст. Всичко това беше съгласувано така, че да се получи максимално удобен начин за търсене на продукта.

SEO оптимизацията включва следните неща:

• Добавяне на мета описания;
• Добавяне на заглавия;
• Добавяне на alt текст на картинките;
• Добавяне на h2, h3 и др;
• Удебеляване на важни елементи от текста.

За оптимизацията на категориите и продуктите включихме плъгина RankMath. Мощен и с много удобен интерфейс, той предлага всичко, от което имахме нужда – въвеждане на ключова дума, промяна на мета описания и заглавия. Всяко наше действие по избора на ключови думи беше обсъдено с клиента, за да може описанията и заглавията да се получат както трябва. Също така добавяхме и различни видове заглавия, както и удебелявахме важните части от текста, за да помогнем и на търсачките, и на потребителите.

Тук трябва да уточним, че има разлика между името на продукта и мета заглавието. Мета заглавието показва на търсачките при заявка на потребител. Името на продукта помага на нас, хората/потребителите, когато видим нещото да разберем дали е това, което търсим.

При добавянето на alt текстовете се стремихме картинките да отговарят на продуктите, т.е. името на продукта да се показва, ако картинката не може да се зареди.

Както се вижда от изображението продукта има стойност 62/100, след като е бил оптимизиран. Стойността би могла да се увеличи, но за да се направи това, трябва да се удовлетворят някои от опциите, които са дадени по-долу.

Off-page (Линк билдинг)

След приключване на SEO оптимизацията, започнахме с линк билдинга. Това е важна част от целият процес, защото колкото по-добре се направи вътрешния и външния линк билдинг, толкова по-голям шанс има да бъдете намерени и съответно потребителите да прекарат повече време в сайта.

Link Building-ът позволява на потребителите и инструментите на различните търсачки да виждат сайта. Ние се съобразихме с това важно условие и започнахме да правим външен и вътрешен линк билдинг.

За направата на външния линк билдинг търсим сайтове, които имат висок DR (домейн ранк). Регистрираме сайта на нашият клиент като попълваме информацията, която се изисква.

Когато правихме вътрешен линк билдинг, гледахме така да го структурираме, че да има връзки между всички главни категории и подкатегории.

Едно от последните нещата, които направихме беше оптимизация на файловете – преди да качим снимка, pdf файл и друг файл, ние го оптимизирахме, за да може да заема по-малко място. Освен мястото, което заема, се подобрява и скоростта на сайта. Всички файлове, които сме качили, са минали през такава оптимизация.