Незважаючи на те, що сайти сприймаються нами зовні, їх зовнішня складова будується, як і в Людину, виходячи з внутрішнього світу під дією спеціальних законів і правил. Ці закони і правила для сайтів визначаються стандартами W3C. Зовнішню складову сайту є його дизайн і структура, внутрішньої складової - HTML-код і CSS-стиль (не враховуючи окремий функціонал).
Розробляючи сайт або додаючи на нього контент, ми часто піклуємося лише про зовнішній його поданні. Це здорово! Однак, слід приділяти увагу і внутрішнього уявлення сторінок у вигляді HTML коду, особливо якщо мова йде про майбутнє залучення пошукового трафіку. Ця стаття присвячена питанням оптимізації коду сайту для поліпшення його видимості в пошукових системах і побудована на основі доповіді автора з конференції All in Top Conf 2012 "Поняття SEO оптимізованої верстки".
Яким сайтам потрібна оптимізація коду
Під час обговорення питань про вплив валідності HTML сторінок на їх ранжування ряд оптимізаторів наводить як приклад сторінки популярних брендів, наприклад, самих пошукових систем. І, дійсно, головна сторінка Яндекса має близько 30 помилок і трохи більше головна сторінка Google. Здавалося б, самі пошукові системи не дбають про якість HTML коду, подаючи приклад іншим веб-майстрам, і в ньому можна знайти багато стилів і скриптів, які не винесених у зовнішній файл, а також місцями сміттєвий код.
Тут слід розуміти, що у подібних сервісів інші завдання, джерела їх вхідного трафіку це далеко не пошукові системи, а частіше постійна аудиторія. На них не слід рівнятися. Такі сервіси, як пошукові системи, соціальні мережі і ряд великих порталів не потребують SEO оптимізованої верстці, вони оптимізують код для інших цілей.
SEO оптимізована верстка потрібно, перш за все, сайтам, основне джерело трафіку яких - пошукові системи.
Чому код має значення?
Оптимізація верстки є одним з елементів внутрішньої оптимізації сайту, якому, на жаль, приділяють менше уваги ніж, наприклад, редагування заголовків сторінок або їх текстів. Часто це відбувається через те, що клієнт не надає повний доступ до проекту або не має бажання / можливостей переверстати свій сайт.
Нижче перераховані ряд пунктів (свого роду факторів), які, так чи інакше, впливають на видимість сайту в пошуку і відносяться до якості HTML-коду.
Легкість розпізнавання (аналізу) коду роботами
Чим простіше код, тим легше його проаналізувати і правильно визначити структуру сторінки. Часто пошукові системи справляються з аналізом складного і невалидность коду, проте, для спрощення рішення їх завдання і впевненості, що пошуковик зрозуміє вас правильно, краще позбутися помилок, знайдених валідатором і намагатися робити код легким.
Швидкий пошук важливих елементів
Які важливі елементи можна виділити на сторінці? Перш за все, це заголовки, навігаційні блоки, основний і допоміжний контент. Якщо пошуковик швидко знайде важливі елементи сторінки, він краще впорається із завданням її індексації та подальшого ранжирування.
Читайте також:
- Про seo-верстці на blogto4ka.ru
- SEO оптимізований логотип
Швидкість завантаження сторінки
Останнім часом пошукові системи люблять швидкі сторінки, також як і користувачі. Покращуючи цей показник, можна мати пріоритет у своїх конкурентів. Більшою мірою, швидкість віддачі сторінки буде залежати від хостингу і використовуваної CMS, однак, також велику роль тут відіграє і обсяг коду. Виносячи все зайве з коду в зовнішні файли і оптимізуючи графіку, можна істотно поліпшити цей важливий показник.
Для прискорення завантаження сторінок:
- CSS і JS виносьте в зовнішні файли;
- Елементи дизайну оформляйте в спрайт і виносьте в аркуші стилів;
- Використовуйте простий код.
Доступність важливих елементів для пошукових роботів
Всі важливі елементи сайту повинні бути легкодоступні. Ускладнюють доступність робота до контенту використання флеша (в навігації або важливому контенті) або яваскрипт, фреймів, некоректної кодування і текстів у вигляді зображень.
Для поліпшення доступності коду:
- Перевірте код на валідацію за допомогою validator.w3c.org
- Намагайтеся не використовувати флеш і фрейми;
- Спливаючу навігацію робіть відкритою для індексації;
- Для нестандартних шрифтів краще використовувати стилі, а не зображення.
Показник текстової релевантності
Текстова релевантність залежить не тільки від наявності ключових слів, але і від їх позиції в контенті і різноманітності тегів, в яких вони використовуються.
Для підвищення текстової релевантності сторінки:
- Розміщуйте важливий контент вище в коді;
- Заголовки укладайте в теги <h1> - <h6>;
- Прописуйте ALT до зображень;
- Використовуйте семантичну розмітку тексту (кожен тег форматування за своїм призначенням);
- Не використовуйте текстові онучі, форматуйте та зробіть текст.
Читайте також:
- Про семантичної верстки на Пепелсбей.net
- Створюємо акуратну семантичну верстку
висновок
Слід підходити відповідально не тільки до зовнішньої складової сайту, але також і до її внутрішньої складової у вигляді HTML-коду. Для аналізу коду використовуйте Web Developer Toolbar , Плагін Firebug і seo-чекліст .
Вимкніть CSS, JavaScript і зображення на сторінці, подивіться, чи можна знайти основні елементи тексту - заголовки, абзаци, посилання і фрази? Приблизно так бачить сторінку робот, переконайтеся, що він правильно зрозуміє ваші цілі і пріоритети.
Корисні посилання:
- приклад 1 і приклад 2 сайтів з гарною версткою.
- Допоможемо перевести старий сайт на новий движок
Вимкніть CSS, JavaScript і зображення на сторінці, подивіться, чи можна знайти основні елементи тексту - заголовки, абзаци, посилання і фрази?