Изработка на сайт за фирма за хидроизолации Hydrostop

Анализ на съществуващата структура на онлайн магазина

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

Редизайн на уеб сайт

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

• Обогятяване на менюто, за да се улеснят потребителите на уеб сайта;
• Добавяне на слайдер;
• Извеждане на най-преглежданите продукти;
• Пояснителен текст за Gedaco и Fatrafol;
• Кратко описание на най-търсените ни услуги;
• Добавяне на последно публикуваните статии;

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

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

Следващото, с което се захванахме, беше извеждане на най-често търсените или най-често продаваните продукти. Тук, програмистите написаха php скрипт, който да свърши тази работа. Резултатът се хареса на собственика на Hydrostop. За удобство беше поставен и линк към всичките продукти, ако потребителите искат да видят и другите възможности.

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

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

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

Анализ на семантично ядро

Преди да започнем с този етап, трябваше да обясним защо той е толкова важен. Защо отнема време изпълнението? Как решаваме този проблем?

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

Относно времето, изисква се подробно изследване на думи и и изрази, за да може да се направи оценка, на база която да се започне оптимизация. Ако не се направим добро семантично ядро, е напълно възможно да не се получи необходимото количество трафик, а оттам и слаби продажби – ако има такива.

Проблема го решаваме като използваме различни инструменти:

• Google Keyword Planner.
• Keyword Tool.
• Key Collector.
• Ahrefs;

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

Добавяне на нови продукти

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

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

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

Текуща проверка на вътрешните връзки и насищане с ключови думи

За да направим проверка на вътрешните линкове, използвахме Ahrefs и Google Search Console. Но, за да изпълним целта, трябваше да добавим в двата сайта две линка, чрез които да могат да се обходят всички вътрешни връзки – robots.txt и sitemap.xml.

Файлът robots.txt е текстов файл, който указва на роботите на търсещите машини кои папки и файлове могат да индексират и кои – не. Във файлът robots.txt се съдържа списък на файловете и директориите от сайта, които не трябва да бъдат индексирани от търсещите машини.

Sitemap.xml е много важен елемент за SEO оптимизацията на сайта. Това е файл, който представлява списък с всички страници в сайта, т.е. страници, които да се показват в резултатите на търсачките.

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

Чрез XML файла търсачките могат да намерят всяка една страница в сайта, при това много по-бързо.

За създаването на тези файлове, използвахме плъгина RankMath, а за съдържанието на robots.txt, записахме следните редове:

# Разрешаване на обхождането и индексирането на цялото съдържание на сайта

User-Agent: *

Disallow:

# Забраняване на обхождането и индексирането на определено съдържание на сайта

User-Agent: *

Disallow: /wp-admin

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

On-site SEO на съдържанието, продуктите, мета заглавия и описания

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

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

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

Техническа оптимизация и изчистване на скрити грешки

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

Освен времето на пълно зареждане, също така, гледаме и Speed Index от browserstack.com. Тази опция показва за какво време се зареждат визуалните елементи в браузъра. След като пуснахме теста, времето, което беше получено:

Тук трябва да отбележим, че теста за техническата оптимизация беше направен за машина с операционна система Windows 10 и мобилно устройство Samsung Galaxy.

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

От PageSpeed.web.dev получихме следните стойности, когато направихме тестовете:

• За Desktop:

• За мобилно устройство:

Едни от най-честите грешки, които се появяват са 404 грешки. Грешка 404 означава, че сървърът не може да намери заявена от клиента уеб страница. Вариациите на съобщението за грешка включват „Грешка 404“, „Страницата 404 не е намерена“ и „Исканият URL адрес не е намерен“. Добре е да се създаде, ако няма, страница, която да известява потребителите, когато се появи тази грешка.

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

След като и това го изпълнихме, инсталирахме и плъгини за изчистване на кеша. Плъгинът, които използвахме е WP Rocket. WP Rocket е високо ценен като един от най-добрите плъгини за кеширане. Неговият удобен интерфейс позволява на всеки, който го използва да не изпитва трудности при работата с него. WP Rocket ще подобри скоростта на зареждане на вашия уебсайт веднага щом бъде активиран.

Основни характеристики на WP Rocket са:

• Оптимизация на CSS и JavaScript
• Предварително зареждане на кеша
• LazyLoad за изображения, iframes и видеоклипове
• Оптимизация на бази данни
• Съвместимост на мрежата за доставка на съдържание (CDN).

Друг много използван от нас плъгин е Smush. Той намаля размера на изображенията и подобрява производителността.