Наведу практичний приклад, як валідація може погано вплинути на Ваш сайт з погляду і SEO, і користувачів. Якось давним-давно я проводив доопрацювання на сайті та випадково забув закрити один тег
. Перевіривши в популярних браузерах коректність доопрацювання, я вніс зміни на сайт.
Через деякий час, коли я проводив аналіз трафіку через Яндекс Метрику, я помітив, що середній час відвідування у браузері Internet Explorerзначно менше. Відкривши сайт через цей браузер, я зрозумів, у чому справа. Весь сайт був перекошений, читати контент просто неможливо. І це створює одразу дві проблеми. Перша проблема – я втрачав весь трафік з IE, а друга – я псував поведінкові фактори.
Як перевірити сайт на валідність html коду
1. Онлайн валідатор html
В інтернеті є безкоштовний сервіс http://validator.w3.org/. Через нього перевіряють валідність HTML коду. Розглянемо роботу цього сервісу докладніше
Існує таке поняття, як валідаціяабо валідністькоду. Валідація – це процес тестування коду на відсутність помилок. Код, який не містить помилок, називається валідним. Навіть неправильно говорити "не має помилок", швидше за все буде сказати "код, який не суперечить поточним стандартам W3C". Перевірити HTML на помилки можна за допомогою сервісу:
Перевірити CSS на помилки можна за допомогою сервісу:
При здійсненні верстки кожному вебмайстру спадає на думку перевірити свій сайт на правильність коду, валідність. Але більшість сайтів (навіть найпопулярніших), якщо перевірити їхній код на валідність, містять помилки. Давайте розберемося, із чим це пов'язано.
Дуже часто поняття "валідний сайт" та "правильний сайт" різні. У більшості випадків можна використовувати код, який сприятиме правильному відображенню сайту у всіх браузерах, але він не буде валідним.
Валідність та SEO
Великий вплив на пошукове просування сайту має валідність коду. Існує інформація, що пошукові системи ранжують невалідні сайти нижче, ніж абсолютно валідні. Крім того, невалідність має на увазі неправильне відображення сайту в різних браузерах, що відлякуватиме відвідувачів, а значить позначиться на показнику відмов та поведінкових факторах і, як наслідок, може призвести до втрати позицій сайту в пошуку. Валідність сайту - один із показників його якості.
Правильно-невалідний код
Але, як уже зазначалося вище, буває правильний неваліднийкод. Яскравим прикладом цього є CSS-хакі(Тобто такі властивості, які змінюють відображення потрібного елемента в різних браузерах). Вони часто є невалідними. Звичайно, можна відмовитися від використання таких хаків, але, як правило, валідний код буде значно довшим і складнішим, тому в таких випадках оптимальніше вибрати використання хаків замість погоні за валідністю. Як правило, такий код не завдає шкоди і виявляється лише під час перевірки за допомогою валідатора.
Валідація є одним з найважливіших аспектів хорошого веб-дизайну. Давайте розглянемо, що це таке і як перевірити HTML-код на валідність. Як приклад візьмемо найпоширенішу систему керування контентом (CMS) – WordPress. Після чого ми поділимося переліком помилок, з якими зіткнулися на практиці і, найголовніше, запропонуємо свої, перевірені, методи їх усунення.
Навіщо потрібна перевірка на валідність сайту
Простіше кажучи, перевірка веб-сторінки дозволить визначити, чи вона відповідає стандартам, розробленим Консорціумом Всесвітньої павутини (W3C). Зазвичай це робиться шляхом перевірки окремих сторінок на валідність за допомогою онлайн-сервісу перевірки від W3C.
Подібно до правил граматики різними мовами, є також правила в програмуванні. Перевірка дозволяє побачити, чи відповідає сторінка цим правилам, а у разі наявності помилок та попереджень будуть надані рекомендації щодо їх усунення. Докладніше про необхідність такої перевірки розглянемо нижче.
На що впливає валідність сайту
Ви коли-небудь замислювалися про те, як браузери читають веб-сторінку? У них є “двигуни” для аналізу коду та перетворення його на візуальний вигляд для людей. На жаль, кожен браузер має власний механізм обробки коду, і це може призвести до відображення ваших сторінок по-різному.
Неправильна веб-сторінка може бути прочитана браузерами по-різному. Це призведе до того, що ваші відвідувачі, можливо, навіть не зможуть правильно побачити контент сторінки у своїх браузерах. Валідація надалі дозволить виправити майже всі основні відмінності та робить вашу веб-сторінку доступною для читання майже всіма веб-браузерами (найчастіше винятком стає Internet Explorer старих версій). Звідси й виник термін “кроссбраузерная верстка” – тобто. верстка, яка однаково гарна (сумісна) для всіх популярних браузерів.
А як це вплине на SEO? Важливо розуміти, що пошукові роботи люблять семантичні веб-сторінки. Семантична верстка, згідно з даними Вікіпедії, – це підхід до створення веб-сторінок на мові HTML, заснований на використанні HTML тегів відповідно до їхньої семантики (призначення). Крім того, структурна семантична веб-сторінка дозволяє пошуковим роботамбільш точно визначати значимість як окремих елементів веб-сторінки, так і всього тексту в цілому. Як запевняє Google, валідний код ніяк не впливає на ранжування сторінок. Але при цьому наявність помилок у коді здатна негативно вплинути на сканування мікророзмітки та адаптованістю під мобільні пристрої.
Інструменти перевірки для вашого сайту
Розуміючи необхідність відсутності помилок валідації на сторінках сайту, розглянемо, як здійснити пошук даних помилок.
Існує безліч безкоштовних сервісівдля перевірки сайту, такі як Markup Validation Service W3C, Web Page Analyzer, Browsershots та інші.
Перевірка веб-коду на валідність – це перевірка його на відповідність стандартам та сертифікатам W3C.
W3C (Консорціум Всесвітньої павутини) – це технічні законодавці Мережі, які розробляють стандарти та правила для написання коду. Сертифікати та стандарти W3C обов'язкові для всіх, хто працює в Мережі. Єдині стандарти у правописі коду потрібні для того, щоб усі мережні програми спілкувалися в єдиному мовному просторі, стандартними мовами, і розуміли один одного під час роботи з веб-документами.
W3C не тільки створює мережеві стандарти, але й активно сприяє їх дотриманню.
W3C має онлайн-сервіси для перевірки коду HTML/XHTML та CSS на валідність.
Перевірити код на відповідність стандартам W3C за допомогою валідаторів W3C – найкращий вихід.
Безкоштовні онлайн-сервіси W3C для перевірки коду на валідність.
Валідатори від W3C мають інтуїтивно зрозумілий інтерфейс. Працювати з ними легко та просто.
Сервіси дають можливість проводити перевірку у трьох режимах і мають, відповідно, лише три кнопки:
Перевірити URL
(Для перевірки потрібно вказати адресу будь-якої сторінки сайту, доступного в Мережі)
Перевірити завантажений файл
(для перевірки потрібно вказати шлях до файлу, що перевіряється)
Перевірити набраний текст
(для перевірки потрібно скопіювати і вставити у вікно валідатора код, що перевіряється)
Останні два способи особливо корисні під час перевірки веб-документів або текстів, що знаходяться на локальних комп'ютерах. Це можуть бути веб-сторінки, або вже завантажені з Мережі на локальний комп'ютер, або генеровані двигунами, розташованими на локальних серверів, типу "Денвер". У випадку з Денвером потрібно зберігати сторінку через браузер у вигляді файлу з розширенням.html і перевіряти потім, як окремий файл, або копіювати вихідний кодвеб-сторінки прямо з браузера і перевіряти, як набраний текст.
Як користуватись онлайн-валідаторами від W3C.
звертаємось до валідатора, за адресою:
(http://validator.w3.org/ - для перевірки HTML чи XHTML
http://jigsaw.w3.org/css-validator/ - для перевірки CSS)
у вікні валідатора вибираємо один з трьох способів перевірки
(url-адреса сторінки сайту, локальний файлабо набраний текст)
переходимо на відповідну вкладку
вказуємо об'єкт перевірки
(вводимо url-адресу веб-сторінки, що перевіряється,
або шлях до файлу на локальному комп'ютері,
або вставляємо код, що перевіряється, відповідно)
тиснемо кнопку «Перевірити» і дивимося на результат перевірки
Сервіси від W3C перевіряють код на валідність і відразу вказують на помилки, чи будуть такі є. Кожну помилку буде прокоментовано. Коментарі, на жаль, на інгліш. Так що Google-перекладач - на допомогу. Залишається тільки, при необхідності, виправити код і знову перевірити його на відповідність.
Валідатори від W3C повністю безкоштовні та автоматизовані. Тому, довбати їх своєю роботою над помилками можна довго і безкарно. Для цього ці сервіси і створені.
Нормальна альтернатива валідатор W3C.
Крім онлайнових серваків W3C з перевірки веб-коду, дуже хороший результат дає розширення HTML Validator для браузера Mozilla Firefox. Наявність такого доповнення в браузері полегшує роботу веб-майстра і вкотре доводить, що Mozilla Firefox- "кермовий" браузер.
Завантажити розширення для мазилки можна тут: http://users.skynet.be/mgueury/mozilla/
Встановити розширення можна так:
- Запускаємо Firefox.
Далі: Меню – Інструменти – Доповнення – Розширення.
І, просто перетягуємо мишею завантажений файл (розширення xpi) у вікно, що відкрилося.
Після цього розширення встановиться автоматично.
або (другий спосіб):
- Запускаємо Firefox.
Далі: Меню – Файл – Відкрити файл – вказати шлях до завантаженого файлу.
Після цього, розширення, знову ж таки, встановиться автоматично.
Після завершення встановлення потрібно буде перезапустити браузер.
При перезапуску з'явиться вікно з вибором способу перевірки веб-сторінок:
"HTML Tidy", або "SGML Parser", або "Serial"
Вибираємо спосіб "SGML Parser", як найбільш зручний та прийнятний варіант. Тиснемо відповідну кнопочку. Тепер, у вікні браузера, буде відображатися ярлик-значок доповнення, а поряд з ним - кнопка меню налаштування доповнення.
У мене – вгорі та праворуч:
HTML Validator для браузера Mozilla Firefox працює повністю у автоматичному режимі. Йому не треба показувати, що перевіряти. Він перевіряє всі документи, які будуть відкриті у Mozilla Firefox. Це дуже зручно. Достатньо поглянути на колір ярлика програми, щоб зрозуміти, чи є проблеми у відкритому документі.
Залежно від результатів перевірки, колір значка може бути зеленим, жовтим або червоним, що означає:
зелений - "немає помилок", все "ОК"
жовтий – «немає помилок, але є попередження»
червоний - «є помилки»
При кліку по ярличку буде відкриватися вікно, що містить вихідний код сторінки, що переглядається з поясненнями і коментарями до помилок і попереджень, якщо такі будуть мати місце.
Приблизно таке.
Всім привіт сьогодні заключний урок курсу верстки в HTML/CSS.
Як я обіцяв, у цьому уроці ми дізнаємося, як проходити валідацію сторінки. Розберемося з тим, що це взагалі таке, для чого потрібно і які інструменти і сервіси для цього є.
Що таке валідація сторінки
Почнемо з того, що взагалі таке валідація сторінки. Валідація сторінки- це перевірка її HTML і CSS коду на відповідність веб стандартам, а також обраному doctype. Стандарти, про які йдеться, прописані W3C і всі сучасні браузеринамагаються їм слідувати.
Якщо перевірку на валідність пройдено успішно, тобто документ є валідним, то з великою ймовірністю він однаково відображатиметься у всіх браузерах ).
Валідна верстка - це зазвичай «чистий», красивий код, який до всього іншого «подобається» пошуковим системам. Тому перевірка коду на валідність є обов'язковим етапом при верстці сайтів.
Перевірка сайту на валідність
Як перевірити сайт на валідність? Найпростіший спосібперевірити сайт на дотримання веб-стандартів - це скористатися онлайн валідатором. Перевірка валідності html можлива за адресою: http://validator.w3.org/. Обов'язково використовуйте цей сервіс, щоб знайти помилки у своєму HTML коді.
Валідація CSS здійснюється за допомогою CSS-валідатора, розташованого за адресою: http://jigsaw.w3.org/css-validator/.
Докладніше роботу з цими сервісами показав на відео, наведеному нижче.
Також перевірка коду на валідність може бути проведена за допомогою плагінів для перевірки валідності коду. Мені, наприклад, зручніше користуватися саме ними, оскільки вони дозволяють перевіряти валідність прямо на ходу.
Ось сам відео урок:
Завантаження...