Валіднасць HTML кода: праверка і выпраўленне памылак

Валідацыю з'яўляецца адным з самых важных аспектаў добрага вэб-дызайну. Давайце разгледзім, што гэта такое і як праверыць HTML код на валіднасць. У якасці прыкладу возьмем самую распаўсюджаную сістэму кіравання кантэнтам (CMS) - WordPress. Пасля чаго мы падзелімся пералікам памылак, з якімі сутыкнуліся на практыцы і, самае галоўнае, прапануем свае, правераныя, метады па іх ліквідацыі.

Прасцей кажучы, праверка вэб-старонкі дасць магчымасць вызначыць, ці адпавядае яна стандартам, распрацаваным Кансорцыумам Сусветнай павуціны (W3C). Звычайна гэта робіцца шляхам праверкі асобных старонак на валіднасць з дапамогай онлайн-сэрвісу праверкі ад W3C .

Падобна правілах граматыкі на розных мовах, ёсць таксама правілы ў праграмаванні. Праверка дазваляе ўбачыць, ці адпавядае старонка гэтых правілах, а ў выпадку наяўнасці памылак і папярэджанняў будуць прадастаўлены рэкамендацыі па іх ліквідацыі. Больш падрабязна пра неабходнасць такой праверкі разгледзім ніжэй.

Вы калі-небудзь задумваліся аб тым, як браўзэры "чытаюць" вэб-старонку? У іх ёсць "рухавікі" для аналізу кода і пераўтварэнні яго ў візуальны выгляд для людзей. На жаль, у кожнага браўзэра ёсць уласны механізм апрацоўкі кода, і гэта можа прывесці да адлюстравання вашых старонак па-рознаму.

Некарэктная вэб-старонка можа быць прачытана браўзэрамі па-рознаму. Гэта прывядзе да таго, што вашыя наведвальнікі, магчыма, нават не змогуць правільна убачыць кантэнт старонкі ў сваіх браўзэрах. Валідацыю ў далейшым дазволіць выправіць амаль усе асноўныя адрозненні і робіць вашу вэб-старонку даступнай для чытання амаль усімі вэб-браўзэрамі (часцей за ўсё выключэннем становіцца Internet Explorer старых версій). Адсюль і з'явіўся тэрмін "кроссбраузерная вёрстка" - г.зн. вёрстка, якая аднолькава добрая (сумяшчальная) для ўсіх папулярных браўзэраў.

А як жа гэта паўплывае на SEO? Важна разумець, што робаты пошукавых сістэм любяць семантычныя вэб-старонкі. Семантычная вёрстка, паводле дадзеных Вікіпедыі, - гэта падыход да стварэння вэб-старонак на мове HTML, заснаваны на выкарыстанні HTML тэгаў у адпаведнасці з іх семантыкай (прызначэннем). Акрамя таго, структурная семантычная вэб-старонка дазваляе пошукавым робатам больш дакладна вызначаць значнасць, як асобных элементаў вэб-старонкі, так і ўсяго тэксту ў цэлым. Па запэўненні Google, валідны код ніяк не ўплывае на ранжыраванне старонак. Але пры гэтым наяўнасць памылак у кодзе здольна негатыўна паўплываць на сканіраванне микроразметки і адаптавання пад мабільныя прылады.

Матэрыял па тэме: https://www.seonews.ru/events/google-validnost-html-ne-vliyaet-na-ranzhirovanie/

Так што, калі ў SEO-аўдыце вы сустрэнеце рэкамендацыі па ліквідацыі памылак, выяўленых у працэсе валідацыю, то лепш іх выправіць, а як гэта зрабіць мы вам раскажам.

Разумеючы неабходнасць адсутнасці памылак валідацыю на старонках сайта, давайце разгледзім, як ажыццявіць пошук дадзеных памылак.

Існуе мноства бясплатных сэрвісаў для праверкі сайта, такія як Markup Validation Service W3C , Web Page Analyzer , Browsershots і іншыя.

служба праверкі HTML разметкі W3C , Верагодна, з'яўляецца самым простым і папулярным інструментам для праверкі валіднасці вэб-старонкі. Выкарыстоўваючы гэты інструмент, вы можаце выявіць памылкі валідацыю, пачынаючы ад адсутных атрыбутаў ALT для вашых IMG-тэгаў і заканчваючы размяшчэннем элементаў блок-ўзроўню ўнутры ўбудаваных элементаў (напрыклад, <p> ўнутры <span>).

Вы можаце ацаніць HTML код, паказаўшы адрас сваёй вэб-старонкі, загрузіўшы файл HTML або уставіўшы HTML код напрамую.

Служба праверкі HTML разметкі W3C

Сэрвіс праверыць названыя вамі дадзеныя на памылкі і сфармуе справаздачу з іх пералікам і рэкамендацыямі па выпраўленні.

Умоўна памылкі і папярэджання можна падзяліць на два асноўных тыпу: шаблонныя (звязаныя з абранай тэмай і усталяванымі ўбудовамі) і памылкі, дапушчаныя пры афармленні унікальнага кантэнту.

Правяраючы вэб-старонку ў першы раз, не палохайцеся магчымаму вялікай колькасці памылак! Як правіла, большасць з іх шматкроць паўтараюцца на аналізаванай старонцы. А гэта значыць, што калі прыбраць памылку ў адным месцы пра шаблон або старонкі, то яна знікне і ва ўсіх аднатыпных.

Велізарная колькасць памылак звязана з выкарыстоўванай тэмай сайта, а таксама ўсталяванымі ўбудовамі. Большасць з нас ўсталёўвае бясплатную тэму і ўбудовы, не задумваючыся, што ў іх ўтоена. У многіх тэмах пры больш глыбокім вывучэнні прыходзіцца сутыкацца з тыповымі памылкамі.

Выправіць выяўленыя памылкі можна двума спосабамі: звярнуцца да спецыялістаў, заплаціўшы N-ную суму грошай, альбо выправіць іх самастойна. Разгледзім апошні варыянт на рэальных прыкладах і ліквідуем ўсё недакладнасці, вынікаючы падрабязным інструкцыям.

Важна, рэзервовае капіяванне !!!
Перад ажыццяўленнем якіх-небудзь змяненняў у зыходным кодзе сайта неабходна вырабіць рэзервовае капіраванне файлаў сайта і базы дадзеных. А трэба гэта для таго, каб у выпадку, калі пасля праведзеных маніпуляцый нармальная праца сайта будзе парушаная, аднавіць яго.
Рэдагаванне файлаў шаблону тэмы.
Рэдагаванне зыходнікаў можна ажыццяўляць некалькімі спосабамі: рэдагаванне файлаў па FTP, праз кіраўнік файлаў хостынгу альбо праз адміністрацыйную панэль WordPress. Мы рэкамендуем выкарыстоўваць апошні варыянт, бо ён з'яўляецца самым хуткім і простым.

1. The attribute is unnecessary for JavaScript resources.

Папярэджанне. Атрыбут "type" элемента <script> не з'яўляецца абавязковым для JavaScript рэсурсаў.

The attribute for the element is not needed and should be omitted .

Папярэджанне. Атрыбут "type" для элемента <style> не патрэбен і яго варта апусціць.

Для ліквідацыі дадзеных двух папярэджанняў неабходна выдаліць атрыбут type = "text / javascript" ва ўсіх тэгах <script>, а таксама type = "text / css" ва ўсіх тэгах <style>. У дапамогу нам прыходзіць простая функцыя PHP preg_replace ў пары з цудоўнай магчымасцю фільтрацыі дадзеных у WordPress. Код выглядае так:

# Выдаляем атрыбут type = "text / javascript" ва ўсіх тэгах <script>, а таксама type = "text / css" ва ўсіх тэгах <style>

add_filter ( 'style_loader_tag', 'remove_type_attr');

add_filter ( 'script_loader_tag', 'remove_type_attr');

function remove_type_attr ($ src) {

return preg_replace ( "/ type = [ '\"] text \ / (javascript | css) [' \ "] /", '', $ src);

}

Ўставіць дадзены код неабходна ў файл functions.php выкарыстоўванай тэмы. Для гэтага аўтарызуемся ў адміністрацыйнай панэлі WordPress, выбіраем пункт меню "Знешні выгляд" -> "Рэдактар" і справа ў спісе файлаў выбіраем цікавіць нас файл. Код устаўляемы ў самым канцы файла. Націскаем кнопку "Абнавіць файл".

Убудаваны рэдактар ​​у адмін панеле WordPress

Дадаткова выдалім дадзены атрыбут ў некаторых файлах вашай WordPress-тэмы.

У меню "Знешні выгляд" -> "Рэдактар" выбіраем цікавыя нам файлы - index.php, header.php, footer.php. Пошук атрыбуту будзем ажыццяўляць з дапамогай гарачых кнопак пошуку Ctrl + F, увёўшы ў пошукавай панэлі text / javascript. Выявіўшы такую ​​запіс замяняем <script type = "text / javascript"> на <script>, г.зн. выдаляем непонравившийся атрыбут type = "text / javascript" і не забываем націснуць кнопку "Абнавіць файл".

Правяраем вынік.

1. The element is obsolete. Use CSS instead.

Памылка. Тэг <center> састарэў. Выкарыстоўвайце адпаведныя CSS стылі.

HTML 5 актыўна ўзаемадзейнічае з CSS (мова апісання знешняга выгляду дакумента, напісанага з выкарыстаннем HTML), таму забарона на многія тэгі і атрыбуты, пачаты ў HTML 4 на карысць стыляў, толькі ўзмацніўся. Такога роду тэгі і атрыбуты ўжо не падтрымліваюцца некаторымі браўзэрамі і павінны выключацца з кода. Адным з такіх тэгаў з'яўляецца тэг <center>, а таксама атрыбут "frameborder" тэга <iframe>. Пры вырашэнні гэтых памылак нам неабходна будзе трохі "павядзьмарыць" над нашай Базай дадзеных сайта.

Для гэтага неабходна зайсці ў панэль кіравання вашага хостынгу, перайсці па спасылцы ў phpMyAdmin і аўтарызавацца.

Панэль кіравання хостынгам

Панэль кіравання phpMyAdmin

Перш за ўсё экспартуем ўсю базу дадзеных у якасці рэзервовай копіі! Для гэтага націскаем кнопку "Экспарт" ў панэлі вэб-інтэрфейсу для адміністравання. Далей выбіраем закладку "SQL" для ажыццяўлення SQL запытаў да базы дадзеных, у нашым выпадку пошук і замена састарэлых тэгаў і атрыбутаў. Прапісваем наступныя запыты:

# Пошук і замена адкрыванага тэга <center> на кантэйнер <div>

UPDATE wp_posts SET post_content = REPLACE (post_content, '<center>', '<div class = "ag_center">');

# Пошук і замена зачыняе тэга <center> на кантэйнер <div>

UPDATE wp_posts SET post_content = REPLACE (post_content, '</ center>', '</ div>');

# Пошук і замена атрыбуту "frameborder" на стылёвай клас "ag_border_zero"

UPDATE wp_posts SET post_content = REPLACE (post_content, 'frameborder = "0"', 'class = "ag_border_zero"');

SQL запыты ў панэлі кіравання phpMyAdmin

Разгледзім больш падрабязна вышэй прадстаўленыя SQL запыты.

Першым радком замяняем састарэлы тэг на кантэйнер <div> і адразу ж задаем клас "ag_center". Дадзены стылёвай клас дазволіць нам выраўнаваць змесціва кантэйнера па цэнтры. Для гэтага заходзім у адмін панэль WordPress, выбіраем пункт меню "Знешні выгляд" -> "Рэдактар" -> файл style.css нашай тэмы. У канец файла дадаем наступныя радкі кода:

.ag_center {text-align: center; }

.ag_border_zero {border = 0; }

Рэдагаванне табліцы стыляў

Другі радком SQL запыту замяняем зачыняецца тэг </ center> на зачыняецца </ div>. А трэцяй - вырабляем замену атрыбут frameborder = "0" на клас "ag_border_zero" элемента <iframe>.

SQL запыты можна аптымізаваць, звядучы ў адзін, аднак прасцей для разумення і нагляднасці разбіць задачу на некалькі запытаў, як мы гэта і зрабілі. Вам, вядома, могуць трапіцца іншыя састарэлыя тэгі, якія неабходна будзе замяніць на універсальны тэг <div> і перанесці прамое яго прызначэнне ў стылявы файл.

Пералік тэгаў, якія больш не падтрымліваюцца і павінны выключацца з кода:

<Applet>, <acronym>, <bgsound>, <dir>, <frame>, <frameset>, <noframe>, <isindex>, <listing>, <xmp>, <nextid>, <noembed>, <plaintext >, <rb>, <strike>, <basefont>, <big>, <blink>, <center>, <font>, <marquee>, <multicol>, <nobr>, <spacer>, <tt>, <u>.

Правяраем вынік.

1. The attribute on the element is obsolete. Use CSS instead.

Памылка. Атрыбут "width" элемента <th> састарэў. Выкарыстоўвайце адпаведныя CSS стылі.

Аналагічна папярэдняй памылцы, атрыбут "width" элемента <th> таксама з'яўляецца састарэлым. Выправіць дадзеную памылку можна двума спосабамі - замяніць width = "10%" на style = "width: 10%;". Альбо, каб не апісваць кожны раз стыль ўнутры тэга, можна вылучыць стыль ва знешнюю табліцу стыляў. Г.зн. ў элемент <th> дадаем class = "width_ten_percent", а ў файл style.css нашай тэмы .width_ten_percent {width: 10%;}. Які спосаб прасцей, выбіраць вам!

У выпадку калі дадзеная памылка нясе масавы характар ​​у артыкулах вашага праекта, скарыстаемся пошукам і заменай атрыбуту "width" у панэлі phpMyAdmin наступным SQL запытам:

# Пошук і замена атрыбуту "width" на "style =" width: 10%; ""

UPDATE wp_posts SET post_content = REPLACE (post_content, 'width = "10%"', 'style = "width: 10%;"');

альбо:

# Пошук і замена атрыбуту "width" на стылёвай клас "width_ten_percent"

UPDATE wp_posts SET post_content = REPLACE (post_content, 'width = "10%"', 'class = "width_ten_percent"');

Пасля чаго неабходна дадаць стылёвай клас width_ten_percent ў файле style.css:
.width_ten_percent {width: 10%;}

Варта адзначыць, што пры масавай замене састарэлых атрыбутаў на стылявыя класы ў панеле phpMyAdmin, пры наяўнасці ўжо прапісанага класа ў элемента (напрыклад, <img class = "width_twenty_percent" class = "width_ten_percent" />), можа паўстаць іншая памылка - дубляванне атрыбуту " class ". Падобная сітуацыя ідзе і з атрыбутам "style" (напрыклад, <img style = "width: 300px" style = "height: 200px">). Таму, трэба быць упэўненым у адсутнасці раней названага іншага атрыбуту "class" / "style", альбо адмовіцца ад рэдагавання БД SQL запытамі на карысць ручной праверкі і рэдагавання кожнай асобнай артыкулы ў рэдактары адмін панэлі WordPress.
Для прыкладу, разгледзім даданне дадатковага класа / ўласцівасці атрыбуту "style", прытрымліваючыся стылявых правілаў. Дадамо дадатковы клас width_ten_percent да ўжо наяўнаму color_red (class = "color_red"), і атрымліваем: class = "color_red width_ten_percent" (пералічваем імёны класаў праз прабел). Дадамо шырыню ў 10% да ўжо наяўнаму style = "color: red;", у выніку ў нас павінна атрымацца так: style = "color: red; width: 10%; "(стылявыя ўласцівасці падзяляюцца паміж сабой кропкай з коскай і прабелам).

Таксама хацелася б адзначыць частае памылковае выкарыстанне атрыбуту "width" для элемента <tr>, атрыбуту "height" для элемента <td>.

Перыядычна правярайце новы кантэнт на наяўнасць дадзеных памылак, і ў выпадку неабходнасці паўторыце працэдуру выпраўлення.

Пералік атрыбутаў, якія больш не падтрымліваюцца і павінны выключацца з кода: Састарэлыя атрыбуты Элемент charset, coords, shape, methods, name, rev, urn <a> nohref <area> alink, bgcolor, link, marginbottom, marginheight, marginleft, marginright, margintop, marginwidth, text, vlink <body> clear <br> name <embed> profile <head> version <html> longdesc <iframe> longdesc, lowsrc, name <img> usemap <input> charset, methods, rev, target, urn <link> scheme <meta> name <option> archive, classid, code, codebase, codetype, declare, standby <object> type, valuetype <param> event, for, language <script> datapagesize <table> abbr, axis < td> і <th>

Правяраем вынік.

1. Bad value for attribute on element img: Expected a digit but saw instead.

Памылка. Непрымальнае значэнне "300px" для шырыні атрыбуту ў элеменце <img>: Чакалася лічба, але замест гэтага прачытаў "px".

Атрыбуты элементаў з'яўляюцца важнай часткай HTML разметкі. Некаторыя атрыбуты элементаў могуць прымаць практычна любое значэнне, іншыя могуць прымаць толькі значэння пэўнага тыпу, а трэція - прымаць значэнне толькі з загадзя вызначанага набору.

У кантэксце <img width = "300px" /> атрыбутам "width" дапускаецца прымаць любое цэлае станоўчае лік. Неабходна ўсталяваць дапушчальнае значэнне для правільнай разметкі, а менавіта 285, без ўказанні адзінкі вымярэння (px).

Выяўленыя памылкі могуць знаходзіцца не толькі ў запісах, наладах WordPress тэмы, але і ў змесціве HTML кода віджэтаў сайдбар. У такіх выпадках для ліквідацыі памылкі заходзім у меню "Знешні выгляд" -> "Фішкі" -> сайдбар злева (справа / склеп) і ў наладах фішкі знаходзім памылкова ўказаны атрыбут "width" выдаліўшы адзінку вымярэння (px).

Рэдагаванне змесціва віджэтаў ў адміністрацыйнай панэлі WordPress

Дадаткова сустракаецца памылковае ўказанне параметра атрыбуту "height" элемента <img>.

Правяраем вынік!

1. Dublicate ID.

Выкарыстанне імя стылявога ідэнтыфікатара (id = "імя") больш за адзін раз на адной старонцы.

Стылёвай ідэнтыфікатар - унікальнае імя элемента, якое выкарыстоўваецца для змены яго стылю і звароты да яго праз скрыпты. Ідэнтыфікатар ў кодзе дакумента павінен быць у адзіным экзэмпляры, г.зн. сустракацца толькі адзін раз.

1. Імя класа і ідэнтыфікатара павінны абавязкова пачынацца з лацінскай сімвала (A-Z, a-z).

Імя класа і ідэнтыфікатар павінен абавязкова пачынацца з лацінскай сімвала (A-Z, a-z). Можа ўтрымліваць лічбы (0-9), сімвал злучка (-) і падкрэслення (_), але не ў пачатку слова. Выкарыстанне рускіх літар у імёнах ідэнтыфікатара недапушчальна.

1. Памылковае выкарыстанне тэга noindex па сінтаксісе.

Тэг noindex выкарыстоўваецца для выключэння кантэнту, які неабходна схаваць ад пошукавай сістэмы Яндэкс. Напрыклад, дублі элементаў навігацыі. Аднак многія выкарыстоўваюць яго няправільна:

<Noindex> Тэкст ці код, які трэба выключыць з індэксацыі </ noindex>

Для таго, каб зрабіць код з noindex валідным, рэкамендуецца выкарыстоўваць наступную канструкцыю:

<! - noindex -> Тэкст ці код, які трэба выключыць з індэксацыі <! - / noindex ->

1. No element in scope but a end tag seen .

Адсутнічае які адкрывае або закрывае яго тэг.

У сінтаксісе тэгаў звычайна выкарыстоўваюцца парныя тэгі для абазначэння пачатку і канца элемента. Які зачыняе тэг падобны на які адкрывае, але змяшчае слэш (/) усярэдзіне кутніх дужак і паказваецца адразу за адкрываецца дужкай. Калі вы адкрылі тэг у HTML дакуменце, яго неабходна закрыць у адпаведным месцы. У адваротным выпадку, гэта можа выклікаць праблемы з карэктным адлюстраваннем элемента ў браўзэры.

1. Element not allowed as child of element in this context . (Suppressing further errors from this subtree.)

Блокавыя элементы ўнутры маленькіх.

Паводле спецыфікацыі блокавы элемент забаронена ўстаўляць ўнутр маленькага. Напрыклад, <span> <p> Lorem ipsum ... </ p> </ span> не пройдзе валідацыю, правільна ўкласці тэгі наадварот - <p> <span> Lorem ipsum ... </ span> </ p>.

Найбольш часта выкарыстоўваюцца блокавымі элементамі з'яўляюцца:

<Address>, <article>, <aside>, <blockquote>, <dd>, <div>, <dl>, <dt>, <details>, <fieldset>, <figcaption>, <figure>, <footer >, <form>, <h1> - <h6>, <header>, <hr>, <iframe>, <li>, <legend>, <nav>, <noscript>, <ol>, <output>, <optgroup>, <option>, <p>, <pre>, <section>, <summary>, <table>, <ul>

Убудаваныя (малыя) элементы:

<a>, <area>, <b>, <bdo>, <bdi>, <cite>, <code>, <dfn>, <del>, <em>, <i>, <img>, <ins >, <kbd>, <label>, <map>, <mark>, <s>, <samp>, <small>, <span>, <strong>, <sub>, <sup>, <time>, <q>, <ruby>, <u>, <var>

1. An element must have an attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

Адсутнічае атрыбут "alt" у малюнка.

Кожны малюнак (нават калі яно служыць для дызайнерскіх мэтаў) у дакуменце HTML павінна мець атрыбут "alt" з апісаннем зместу карцінкі. Дадзены атрыбут індэксуецца пошукавымі робатамі і выкарыстоўваецца імі для вызначэння змесціва выяўленых малюнкаў. А гэта, у сваю чаргу, важна як для паляпшэння рэлевантнасці вэб-старонак, так і для прыцягнення на сайт дадатковага трафіку з «пошуку па малюначках».

Для нашых кантэнт-мэнэджараў мы падрыхтавалі памятку аб тым, як правільна аформіць вэб-старонку, выкарыстоўваючы валідны код. Дзелімся ёю і з вамі, карыстайцеся на здароўе:

Вынікам карпатлівай працы над памылкамі мы павінны ўбачыць наступнае: Праверка дакумента завершана. Якіх-небудзь памылак і папярэджанняў не выяўлена ( "Document checking completed. No errors or warnings to show.").

Што вы думаеце пра важнасць валідацыю? З якімі памылкамі сутыкаліся Вы і як іх вырашалі? Дадайце да гэтага артыкула свае каментары!

Аўтар артыкула:

Аляксандр Рыбак

Web-распрацоўшчык у кампаніі ApollonGuru. Прымаю актыўны ўдзел у распрацоўцы кода для ўкаранення SEO рэкамендацый. Любімы мова праграмавання: PHP.