Кейс: невидимі прийоми оптимізації сайту
Просування сайту в пошукових системах включає безліч різних робіт, що впливають на ті чи інші фактори ранжирування в пошукових системах. Серед цих робіт є як добре відомі навіть недосвідченому замовнику (наприклад, SEO-копірайтинг), так і неочевидні прийоми , непомітні на сайті незброєним оком, але важливі для алгоритмів пошукових систем. Про деякі такі прийоми ми хочемо розповісти сьогоднішньому кейсі на прикладі інтернет-магазину bilka.com.ua (див. опис проекту у нашому портфоліо).
Валідація коду сайту
Валідація – це приведення HTML-коду у відповідність до певних правил та стандартів. Справжньою революцією у цій сфері свого часу став , який прийшов на зміну XHTML та значно полегшив життя розробникам. У HTML5 синтаксис став менш суворим, але тим не менш він вимагає валідації.
Сважається, що валідність коду не враховується пошуковими системами, проте дотримуватися стандартів HTML5 необхідно, адже від цього може залежати кросбраузерність, коректне відображення елементів та інші важливі аспекти використання сайту. А значить, за рахунок впливу поведінкових факторів та позиції у пошукових системах!
На цьому сайті ми підключили спеціальний плагін Seocheck, за допомогою якого відстежили помилки у валідності коду. Активно використовувався і добре знайомий будь-якому веб-верстальнику інструмент валідації .
Візуально на сторінках сайту відображається все коректно і немає жодних проблем у верстці. Але при валідації ми бачимо багато типових помилок:
- неправильне маркування списку (наприклад, тег <a> має бути обернений у тег списку <li>);
- незакриті теги;
- неправильне використання тегів <section>;
- неправильне розташування тегів <h1>-<h6>;
- інші дрібні помилки, які ми не бачимо на працюючому сайті, але які важливі для перевірки валідації.
Ось так виглядають результати перевірки валідності коду після нашої роботи.
Мікророзмітка
Мікророзмітка — свого роду єдина мова розмітки смислів, який однаково розуміють та трактують пошукові роботи Google, Яндекс, Bing, Yahoo. Про це вони «домовилися» ще далекого 2011 року з метою підвищення якості та релевантності пошуку. Так, за допомогою мікророзмітки можна показати роботам, що певний текст або інші елементи на сторінці належать до конкретного типу даних (адже пошукові роботи ще недосконалі в трактуванні змісту контенту та розміщенні пріоритетів).
Словники мікророзмітки
Словники мікророзмітки – набори класів, властивостей, які дозволяють вказати на суть вмісту сторінки. Одним з найпопулярніших є .
З погляду SEO мікророзмітка потрібна в першу чергу для формування розширеного СНІП в пошукових системах і підвищення релевантності сторінки.
У цьому випадку ми бачимо помилки мікророзмітки на сайті, пов’язані з бібліотекою Opengraph. Зокрема, некоректно було розмічено сутності:
- Organization (дані про організацію, контакти);
- LocalBusiness (дані про регіональний бізнес);
- Product (дані про товар, ціну, доступність, відгуки).
Всі ці проблеми були успішно усунуті нашими спеціалістами з мікророзмітки.
Технічне SEO
Однією з основних аспектів ранжирування сторінки у пошукових системах є наявність технічне SEO, тобто. оптимізація коду. Правильне структурування коду, наявність всіх необхідних тегів, коректна ієрархія заголовків та деякі інші моменти дозволяють пошукачам правильно “рахувати” та “зрозуміти” сторінку. А значить – коректно уявити її в результатах пошуку на тих позиціях, на які вона дійсно заслуговує.
Також дуже поширена помилка, пов’язана з відсутністю атрибутів alt та/або title у картинок та зображень. Якщо ми говоримо про комерційні сайти, то людина, яка прийшла з пошуку за зображеннями, не обов’язково має інформаційний інтент.
Часто ці люди мають комерційний інтент, але не знають, як виглядає той чи інший товар/виріб (наприклад, запити“ніж для різання лінолеуму” або “samsung 4220 картридж”) або шукають модель по фотці, що сподобалася (приклад запитів з практики: “стульчик для годування”, “домашній телескоп”).
SEO-оптимізація картинок часто дозволяє отримати нехай невеликий, але потенційно цікавий та цільовий трафік із пошукових систем.
- порушення ієрархії заголовків;
- відсутність description;
- не прописано title та деякі інші.
Мораль
Продвижение сайта в поисковых системах включает в себя множество различных работ, влияющих на те или иные факторы ранжирования в поисковиках. В числе этих работ есть как хорошо известные даже неопытному заказчику (например, SEO-копирайтинг), так и неочевидные приёмы, которые незаметны на сайте невооруженным глазом, но важны для алгоритмов поисковых систем. О некоторых таких приёмах мы и хотим рассказать в сегодняшнем кейсе на примере интернет-магазина bilka.com.ua (см. описание проекта в нашем портфолио).
Валидация кода сайта
Валидация — это приведение HTML-кода в соответствие с определенными правилами и стандартами. Настоящей революцией в этой сфере в своем время стал , который пришел на смену XHTML и значительно облегчил жизнь разработчикам. В HTML5 синтаксис стал менее строгим, но, тем не менее, и он требует валидации.
Считается, что валидность кода не учитывается поисковыми системами, однако придерживаться стандартов HTML5 необходимо, ведь от этого может зависеть кроссбраузерность, корректное отображение элементов и другие важные аспекты использования сайта. А значит, за счет влияния поведенческих факторов, и позиции в поисковых системах!
На рассматриваемом сайте мы подключили специальный плагин Seocheck, с помощью которого отследили ошибки в валидности кода. Активно использовался и хорошо знакомый любому веб-верстальщику инструмент валидации .
Визуально на страницах сайта отображается все корректно и нет никаких проблем в верстке. Но при валидации мы видим много типичных ошибок:
- неправильная маркировка списка (например, тег <a> должен быть обернут в тег списка <li>);
- незакрытые теги;
- неправильное использование тегов <section>;
- неправильное расположение тегов <h1>-<h6>;
- другие мелкие ошибки, которые мы не видим на работающем сайте, но которые важные для прохождения проверки валидации.
Вот так выглядят результаты проверки валидности кода после нашей работы.
Микроразметка
Микроразметка — своего рода единый язык разметки смыслов, который одинаково понимают и трактуют поисковые роботы Google, Яндекс, Bing, Yahoo. Об этом они «договорились» еще в далеком 2011 году с целью повышения качества и релевантности поиска. Так, с помощью микроразметки можно показать роботам, что определенный текст или другие элементы на странице принадлежат к конкретному типу данных (ведь поисковые роботы еще несовершенны в трактовке смысла контента и расстановке приоритетов).
Словари микроразметки
Словари микроразметки — наборы классов, свойств, которые позволяют указать на суть содержимого страницы. Одним из самых популярных является .
С точки зрения SEO микроразметка нужна в первую очередь для формирования расширенного сниппета в поисковых системах и повышения релевантности страницы.
В рассматриваемом нами случае мы видим ошибки микроразметки на сайте, которые связаны с библиотекой Opengraph. В частности, некорректно были размечены сущности:
- Organization (данные об организации, контакты);
- LocalBusiness (данные о региональном бизнесе);
- Product (данные о товаре, цене, доступности, отзывах).
Все перечисленные проблемы были успешно устранены нашими специалистами по микроразметке.
Техническое SEO
Одним из главных аспектов ранжирования страницы в поисковых системах является наличие техническое SEO, т.е. оптимизация кода. Правильное структурирование кода, наличие всех необходимых тегов, корректная иерархия заголовков и некоторые другие моменты позволяют поисковикам правильно “считать” и “понять” страницу. А значит – корректно представить её в результатах поиска на тех позициях, которых она действительно заслуживает.
На страницах сайта bilka.com.ua критические ошибки технического SEO отсутствовали, однако было довольно много мелких недочётов. Например, отсутствовали title ссылок в тех местах, где они могли быть действительно полезны для продвижения тех или иных разделов.
Также очень распространена ошибка, связанная с отсутствием атрибутов alt и/или title у картинок и изображений. Если мы говорим о коммерческих сайтах, то человек пришедший из поиска по изображениям не обязательно имеет информационный интент. Часто эти люди имеют коммерческий интент, но не знают, как выглядит тот или иной товар/изделие (например, запросы “нож для резки линолеума” или “samsung 4220 картридж”) или ищут модель по понравившейся фотке (пример запросов из практики: “стульчик для кормления”, “домашний телескоп”). SEO-оптимизация картинок часто позволяет получить пусть небольшой, но потенциально интересный и целевой трафик из поисковых систем.
Также на отдельных страницах сайта были исправлены локальные недочёты:
- нарушение иерархии заголовков;
- отсутствие description;
- не прописан title и некоторые другие.
Мораль
В большинстве случаев применение микроразметки, мелкие правки кода и его валидация не изменят ситуацию с продвижением сайта радикально (если мы не говорим о критичных ошибках). Но в условиях жесткой конкуренции, где каждое преимущество сайта может быть решающим, важно использовать все доступные методы и приёмы оптимизации сайта.
Комментарии