Як оптимізувати код сторінок сайту — блог Drudesk
050 640 98 44
support@drudesk.com

Як оптимізувати HTML-код сторінок сайту

Кожен власник сайту хоче, щоб його ресурс був найкращим — і в юзабіліті, і в дизайні, і в сео-оптимізації. Але багато хто не приділяє уваги HTML-коду, а це дуже велика помилка. Хоча оптимізація коду сторінок не видна простому користувачеві, вплив її на просування виявляється досить відчутним. Приміром — одна тільки унікалізація метатегів Title і Description може призвести до підвищення позицій ресурсу у видачі на 20-30 пунктів. Тоді і трафік зросте.

На що потрібно звернути увагу при оптимізації коду сторінки

Дійсно, код сторінки знаходиться на цифровому рівні, але його стан дуже сильно проявляється і на зовнішньому рівні.

Перерахуємо кілька моментів, чому потрібно оптимізувати код сторінки сайту:

  • брудний код порушує нормальне функціонування веб-ресурсу;
  • застаріла версія HTML призведе до того, що сайт буде спотворено і неадекватно відображатися в браузерах;
  • невідповідність коду стандартам Консорціуму Всесвітньої Мережі (W3C) оцінюється пошуковими системами як негативний фактор ранжування;
  • велика кількість непотрібних HTML-тегів обтяжують сторінку і уповільнюють завантаження сайту, що призводить до підвищення показника відмов від перегляду;
  • аналогічне обваження сторінок відбувається у випадках, якщо текст форматується тегами, а не каскадними таблицями стилів;
  • зробити сторінки важкими і повільними можуть також скрипти, які містяться в коді — програмні елементи.

Починати оптимізацію коду найкраще з переводу сайту на найновішу версію Drupal і сучасну версію мови розмітки гіпертексту HTML5. Тим самим можна одночасно вирішити безліч проблем.

  1. Сайти на HTML5 мають більше інтерактивних і мультимедійних функцій, що відразу ж зробить перебування відвідувачів на інтернет-проекті більш комфортабельним і приємним. Звідси покращаться і поведінкові чинники — знизиться кількість відмов, збільшиться тривалість сесії і глибина перегляду. Більше про те, як збільшити час перебування можете дізнатися в блозі.
  2. Для забезпечення мультимедійних та інтерактивних функцій HTML5 не використовує сторонні додатки і це робить сайт більш швидким. Чим швидше інтернет-ресурс працює — тим менше кількість відмов від перегляду.
  3. Сайти на HTML5 однаково добре працюють на всіх типах сучасних браузерів — підвищується рівень багатоплатформеності.
  4. Drupal-cайти на HTML5 максимально адаптовані для роботи на мобільних девайсах — смартфонах і планшетах. Цей фактор не тільки призведе до збільшення мобільного трафіку, але і поліпшить ставлення пошукових систем, які останнім часом стали розглядати мобільну адаптацію сайтів як обов'язкову умову якісного веб-проекту для людей.

Основні рекомендації щодо оптимізації HTML коду сторінок сайту:

Оптимізація метатегів

Дуже часто у веб-майстрів та адміністраторів сайтів просто руки не доходять до того, щоб зайнятися метатегами. У підсумку створюються ситуації, які не можуть бути прийнятні з точки зору пошукових алгоритмів, а саме:

  • часто зустрічаються однакові метатеги на різних сторінках сайту;
  • велика кількість метатегів залишається порожніми, зовсім ніяк незаповненими.

Власник web-ресурсу може до наступного технічного аудиту так і не дізнатися причину того, чому проект не просувається в пошуку. Правильно складені мета-теги вкажуть пошуковим системам інформацію про ваш сайт і конкретно про кожній сторінці. Якщо ви незнаєте, чи є на вашому ресурсі порожні або дублюючі мета-теги, зверніться до нас за допомогою, і наші фахівці вкажуть всі помилки, пов'язані з метатегами, а також напишуть рекомендації, як їх усунути. Особливо важливо ретельно попрацювати над метатегами Title і Description.

Оптимізація Title

Title — це заголовок сторінок. Рекомендації з написання тайтлів:

  1. Дуже важливо в тайтли прописати найголовніше ключове слово.
  2. Слідкуйте за розміром даного тега: він не повинен перевищувати 60 символів, інакше пошукові системи просто обріжуть його у видачі та користувач не зможе повністю прочитати його.
  3. Не дублюйте тег Title — для пошукової машини все це одна і та ж сторінка. У результаті в пошуку братиме участь набагато менше ключових слів, ніж було задумано згідно семантичного ядра.
  4. Оптимізація Description

Пошукова система Google і багато інших безпосередньо беруть текст опису для сніппета у видачі з метатега Description. Фактично, дескріпшн грає роль рекламного оголошення або продаючого тексту для веб-сторінки. Тому до Description пред'являються особливі вимоги:

  • як і для тайтлів, опис кожної сторінки має бути обов'язково унікальним. Якщо зустрічаються дублювання описів у різних сторінок — пошуковий робот буде розглядати їх як одну і склеювати. У підсумку в індексі пошукової системи скорочується кількість сторінок веб-сайту.
  • опис сторінок повинен бути строго релевантним контенту, який на ній міститься. Якщо Description не буде відповідати змісту сторінки, люди, приходячи на сайт, не знайдуть обіцяної відповіді на своє питання і будуть розчаровані. Це призведе до різкого збільшення показника відмов. А показник відмов вище 20% вже чреватий пессимізації сторінки в пошуковій системі.

Використання тегів H1-H6

Для виділення заголовків використовуйте теги H1-H6. Заголовок H1 грає найважливішу роль. У ньому повинен бути основний ключ і його потрібно розміщувати тільки один раз у верхній частині сторінки. H2-H6 — підзаголовки і можуть використовуватися кілька разів. При застосуванні даних тегів також важливо дотримуватися ієрархії. Але це питання ми розглянемо не сьогодні, а в наступних статтях.

Приховані елементи

Позбавтеся від прихованих елементів в коді. До найпоширеніших елементів даної категорії відносять «visibility: hidden» і «display: none».

Це тільки частина рекомендацій щодо оптимізації коду сторінок. Більше інформації дізнаєтеся в подальших блог-постах. Ну а в якості основного штриха оптимізації коду сайту можна зробити перевірку валідності на сервісі C3W. Хоча, що цікаво, навіть офіційний сайт Google не проходить цю перевірку на 100%.