Грамотна SEO-верстка сайту: опис, приклади, поради фахівців

  1. Верстка з SEO оптимізацією
  2. Приклади SEО-верстки
  3. SEО-верстальник і робота з елементами сайту
  4. SEO-верстка і валідність
  5. Поради по SEO-ВЕСТКОМ

Верстка html-коду інтернет-сторінки сайту з урахуванням переважного розміщення блоків з текстовим наповненням якомога ближче до початку коду - це і є SEO-верстка. При цьому, така побудова коду по суті не з'явиться на вигляді самої сторінки: сайт може виглядати зовсім однаково при різній верстці сторінок. Саме за рахунок розміщення спеціального контенту ближче до початку html-коду пошукові машини сприймають його як більш релевантний.

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

За якісне наповнення сайту відповідає SEO-копірайтер. Але за правильне розміщення на сторінках сайту блоків з контентом відповідальність несе SEO-верстальник.

Верстка з SEO оптимізацією

Якщо порівняти два сайти, де на одному важлива інформація починається на 25-му рядку html-коду, а на іншому - на 325-й, який з них, за логікою, буде краще подавати інформацію? Так, наворочений ресурс цілком може бути цікавий користувачеві, але перші пару секунд. Але потім людина починає переглядати текст в пошуках саме тієї інформації, яка йому потрібна. Найкраще це видно на Лендінзі. Ось і пошукові машини не люблять сотні сторінок коду, які потрібно пройти, щоб дістатися до текстового наповнення. Тобто чим далі важливий і корисний контент знаходиться від початку сторінки, тим менше він цікавий пошуковому роботу. Тобто найбільш актуальна інформація повинна знаходитися якомога ближче до початку, інакше виходить, що вона просто захована для пошукових систем.

Крім того, якщо відвідувачеві сайту буде просто знайти потрібну інформацію, і чим швидше він її виявить, тим краще він буде ставитися до ресурсу, і тут вже можна говорити про позитивний вплив на поведінкові фактори. Тому рекомендується розміщувати корисну інформацію якомога ближче до початку html-коду веб-сторінки. Причому так, щоб важливий блок було видно відразу ж на першому екрані прокрутки. При цьому бажано позбавити користувачів від великої кількості банерів та інших візуальних ефектів.

Приклади SEО-верстки

Розглянемо все сказане на практиці. Так, для прикладу використовуємо трохи простого html-коду:

Отже, щоб наша верстка виглядала більш доброзичливо з точки зору SEO, перемістимо блок content по ближче до тегу body. Вийшов такий ось простий приклад SEO-верстки:

Отже, що ж ми отримали в результаті? Тепер відразу після хедера НЕ буде довгого меню з кнопками репоста і інших елементів, а відразу буде йти контент, і пошуковик його швидше знайде.

SEО-верстальник і робота з елементами сайту

Від роботи SEO-верстальника залежить дуже багато чого. Якщо він не розмістив в коді сторінки потрібні SEO-елементи, то оптимізація всього ресурсу може виявитися неефективною. Головний і найперший елемент будь-якої сторінки - title сторінки сайту. Він має важливе значення для SEO. Про нього забути, звичайно ж, практично неможливо. Крім того, не варто упускати мета-теги meta keywords, а також meta description. Значення таких тегів часто недооцінюється, багато і зовсім про них забувають. Обов'язкова частина html-сторінки - це ще й теги H1, H2, H3. Якщо оформити заголовок матеріалу або назва чогось тегом H1, то це вкаже пошуковому роботу на першочергову важливість саме цього елементами. При цьому теги H1, H2, H3 потрібно вміти правильно використовувати, адже, як показує практика, найчастіше їх застосовують некоректно.

Оптимізація сайту включає і SEO оптимізацію зображень по конкретних запитів. Якщо правильно використовувати атрибут ALT, це допоможе зображень потрапити на перші позиції в Яндекс.Зображення або Google Картинках. Не менш важливий і атрибут title для посилань. Також бажано, щоб при верстці сайту посилання мали нижнє підкреслювання.

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

SEO-верстка і валідність

Головне, що треба пам'ятати - SEO-верстка сайту повинна бути кросбраузерності для однакового відображення елементів у всіх користувачів, навіть у тих, хто до сих пір використовує Internet Explorer 6.

Крім того, SEO-верстка обов'язково повинна відповідати стандартам W3C, щоб пройти перевірку (валідацію). Для перевірки валідності верстки сайту можна скористатися офіційним валідатором W3C.

Не всі вважають валідність важливою для SEO-оптимізації інтернет-ресурсу, але верстка з помилками сприймається так само, як і текст з помарками. Краще спочатку робити грамотну SEO-верстку.

Поради по SEO-ВЕСТКОМ

  1. Верстку бажано оптимізувати, видаляючи зайві блоки.
  2. Важливо оптимізувати html-код сторінок.
  3. Таблиці стилів css теж важливо оптимізувати і бажано виділити їх в файл або навіть в окрему папку.
  4. На сайті корисно розмістити навігацію «хлібні крихти».
  5. Не варто занадто часто застосовувати теги B і STRONG. Краще застосовувати тільки тег STRONG, і то в самому тексті, для інших завдань краще використовувати виділення за допомогою стилів.
  6. Тег H1 краще використовувати для заголовків і назв. Теги H2, H3 краще не використовувати при верстці, а застосовувати в контенті.
  7. Посилання на сайті краще робити з підкресленням (underline) і виділяти їх кольором.
  8. Бажано робити весь контент відразу відкритим, щоб користувачеві не довелося вручну активувати елементи для відображення частин контенту.
  9. Небажано робити сторінки сайту дуже довгими. Вони не тільки погано відображаються і довго вантажаться, а й неохоче індексуються пошуковими машинами. А що говорити про користувачів, які перегорнувши 5 разів, так і не побачать кінець сторінки. Вони, швидше за все, покинуть сайт і більше ніколи не зайдуть.
  10. І не забувайте робити елементи сайту якомога простіше. Адже чим складніше вони, тим більше помилок можна допустити. І пам'ятайте, що контент на сайті - це найважливіше. Адже саме для контенту і створена вся сторінка з точки зору SEO-оптимізації.