Probabil ați auzit fraza de multe ori "validitatea codului". Știi ce e asta? Daca da, atunci uita-te prin acest articol in diagonala, poate vei gasi totusi ceva interesant. Și pentru cei care nu știu, citiți integral. Voi vorbi despre cum am verificat validitatea codului blogului meu, cum am corectat etichetele incorecte și multe altele.
Dacă aveți propriul site sau blog, atunci probabil că scrieți articole unice pe el, îl promovați în motoarele de căutare etc. Dar te-ai gândit vreodată la codul sursă al site-ului tău? Acest lucru este, de asemenea, foarte important, deoarece motoarele de căutare văd exact codul sursă al paginilor și extrag din acesta textele articolelor și alte elemente de resurse. Dacă codul sursă este incorect și nu respectă standardele, atunci va fi dificil pentru roboți să evalueze corect calitatea textului și, de exemplu, navigarea pe site.
Asa de, validitatea codului- aceasta este conformitatea codului sursă al site-ului cu normele și regulile descrise de World Wide Web Consociatium, sau pe scurt W3C. Pentru a verifica blogul dvs. pentru conformitatea cu aceste standarde, trebuie să urmați linkul: validator.w3.org. Introdu adresa dorită și vezi rezultatele.
Am întâmpinat erori în aspectul temei mele, precum și erori pe care le-am făcut eu când am instalat un contor de pe liveinternet. De fapt, știam de ei de mult timp, pur și simplu nu le-am acordat nicio importanță. Și recent nu am avut nimic de făcut și, în sfârșit, m-am hotărât să realizez valabilitate codul meu de blog. Cred ca nu va strica =)
Pentru început, voi spune că au fost 12 erori, dar 10 dintre ele s-au referit la aceeași etichetă și anume
Rel="etichetă categorie"
După ce am introdus această etichetă pe Google, mi-am dat seama că nu există nicio speranță pentru site-urile în limba rusă, deoarece nu a fost o singură mențiune despre această etichetă în RuNet. Ei bine, nicio problemă, vom căuta în engleză, deoarece nu este nimic complicat. Așa că, după ce am citit subiectele de pe wordpress.org, mi-am dat seama că nu sunt singurul suferă de această etichetă. Pe unul dintre site-urile burgheze am găsit cum să o repar, dacă cineva are nevoie de el, atunci lipim acest cod în fișierul functions.php:
Add_filter("the_category", "add_nofollow_cat"); funcția add_nofollow_cat($text) ( $text = str_replace("rel="etichetă categorie"", "", $text); return $text; )
După aceasta, 10 erori au dispărut imediat, dar au mai rămas două. Prima a fost la fel de ușor de reparat. Vedeți abonamentul RSS și butoanele Twitter în antetul blogului meu? Sunt făcute cu poze, dar am uitat să setez parametrul alt. Am scris despre cât de important este parametrul alt pentru imagini în subiectul de optimizare internă, dar se dovedește că în general este necesar. Așa că l-am reparat. A mai rămas o greșeală.
Când am instalat contorul pe site, l-am plasat în bara laterală (coloana din dreapta cu navigare), ca să zic așa în grabă. Mai întâi, l-am înfășurat într-o etichetă centrală pentru a-l alinia. Dar, după cum s-a dovedit, acesta nu a fost Feng Shui și validatorul a blestemat, spunând, eliminați această etichetă și faceți totul frumos - cu div-uri. OK, divele sunt dive. Îmi doream de mult să pun tejgheaua la subsol pentru frumusețe, să-l las pe acolo. Și atunci a fost doar un motiv să o faci. L-am pus în subsol și l-am aliniat cu float: dreapta la dreapta, chiar și mie mi-a plăcut și acesta este principalul lucru :)
Asta e, acum site-ul meu este pe deplin compatibil! Următorul obiectiv este CSS, îl puteți verifica pe același serviciu, link-ul la care am dat la începutul articolului.
Bună ziua tuturor!
Verificarea validității codului HTML este necesară pentru, deoarece roboții de căutare văd doar codul HTML. Din acest motiv, este indicat să puneți codul site-ului în ordine completă. Serviciile online speciale care verifică codul și indică în mod specific erorile ne vor ajuta în acest sens.
Unul dintre aceste servicii este validator.w3.org, care este probabil cel mai bun. Este în întregime în engleză, așa că unii pot avea probleme în lucrul cu el, dar nu vă alarmați: validatorul vă va arăta atât numărul liniei, cât și eroarea în sine.
Codul valid este un cod care îndeplinește toate standardele.
Pentru lecție veți avea nevoie de următorul material:
Serviciul online menționat mai sus verifică codul HTML online pe întregul site. Trebuie doar să specificați domeniul site-ului dvs. și să faceți clic pe butonul „Verifică”, astfel încât să începeți să verificați codul HTML al site-ului.
Validatorul oferă, de asemenea, o caracteristică foarte interesantă - verificarea fișierelor site-ului de pe un computer local. În opinia mea, acest instrument va fi util celor care realizează site-uri web personalizate. Înainte de a trimite comanda, trebuie să verificați totul, deoarece doriți ca oamenii să fie întotdeauna mulțumiți de munca dvs. Puteți verifica fișierele accesând fila „Validare prin încărcare fișier”:
Cum să remediați erorile în codul HTML?
Serviciul W3c Validator mi-a arătat două erori și mi-a dat 8 avertismente. Voi încerca să le repar și să vă arăt cum se face.
Remedierea erorii „Stilul elementului nu este permis ca copil al elementului div în acest context. (Suprimarea erorilor ulterioare din acest subarbore.)”. Această eroare îmi spune că în codul HTML, și anume în etichetă
Validatorul indică, de asemenea, unde este exact eroarea:
În acest fel, puteți găsi și remedia erorile de cod HTML. Dar site-urile constau nu numai din cod de marcare, ci și CSS, așa că verificăm și foile de stil în cascadă ale resursei web.
Se verifică valabilitatea codului CSS
De asemenea, puteți verifica validitatea codului CSS în validatorul W3c. Puteți face acest lucru folosind acest link. Principiul de funcționare este același: specificați adresa URL a site-ului sau selectați un fișier pe computer și faceți clic pe butonul „Verifică”.
Spre deosebire de același validator HTML, validatorul CSS este în rusă.
Erori și avertismente CSS
La verificarea validității codului CSS, serviciul produce un număr mare de erori și avertismente. Am primit 23 de erori și până la 281 de avertismente. La prima vedere, acest lucru poate părea mult și poate fi chiar înfricoșător, dar majoritatea acestor erori și avertismente sunt afișate doar pentru că serviciul nu cunoaște anumite proprietăți care se aplică diferitelor browsere.
În cazul meu, majoritatea celor 281 de avertismente sunt proprietăți CSS pentru afișarea normală în diferite browsere:
Serviciul poziționează astfel de etichete ca „extensie de furnizor necunoscută”. Prin urmare, dacă, atunci când vă verificați fișierele CSS, vedeți un număr mare de astfel de erori, atunci nu vă alarmați. Totul e bine.
Nu voi enumera cele mai frecvente erori și modalități de a le elimina, deoarece soluțiile fiecăruia pot fi diferite și trebuie să vă uitați la codul HTML în sine pentru a înțelege ce se întâmplă.
Dacă nu puteți rezolva o eroare, atunci împărtășiți problema în comentariile la lecție, poate vom găsi o soluție împreună.
Sper că lecțiile care au fost publicate în această săptămână v-au fost utile și au ajutat la rezolvarea anumitor probleme.
Ei bine acum, la revedere!
Articolul anteriorArticolul următor
Până acum ne-am uitat la bucăți individuale de cod HTML. Dar document HTML(sau pagina web, ceea ce înseamnă același lucru) necesită o anumită structură pentru a deveni valabil.
De ce ne pasă de validarea documentelor HTML?
- Dreapta: Un document valid este afișat corect în browser.
- Depanare: Codul HTML incorect poate cauza erori greu de detectat.
- A sustine: Un document valid este mai ușor de actualizat ulterior, chiar și pentru altcineva.
Doctype
Prima informație pe care o scriem este tip document HTML - doctype.
Gândiți-vă la un doctype ca la o versiune a unei mașini de-a lungul anilor: Ford Fiesta pe care l-ați cumpărat în 1986 a fost un Fiesta 2. Dacă cumpărați unul astăzi, este un Fiesta 7.
Anterior, mai multe versiuni de HTML coexistau (XHTML și HTML 4.01 erau standarde concurente). În prezent norma este HTML5.
Pentru a spune browserului că un document HTML este HTML5, pur și simplu începeți documentul cu următoarea linie:
Asta e tot. Doar instalați și uitați de el.
S-ar putea să vă întrebați de ce acest tip de document HTML5 nu menționează numărul 5. W3C a considerat că definițiile anterioare ale tipului de document sunt prea confuze și a profitat de ocazie pentru a-l simplifica prin eliminarea mențiunii versiunii HTML.
Element
Pe lângă linia doctype, toate documentul dvs. HTML trebuie să fie localizat în interiorul unui element :
tehnic este strămoş toate elementele HTML.
Așa cum atributele conțin informații suplimentare pentru un element HTML, la fel și un element
oferă informații suplimentare pentru întreaga pagină web.De exemplu, titlu pagina (afișată în filă) se află în
:
Următoarele elemente HTML pot apărea în
si numai in :В то время как
содержит только метаданные, не предназначенные для отображения вообще (за исключениемПолностью валидный HTML-документ
Объединив все эти требования, мы можем написать простой и валидный HTML-документ:
Привет, мир!
Если вы просмотрите этот пример в браузере, то увидите, что:
- «MarkSheet» написано на вкладке браузера;
- «Привет, мир!» - это единственный текст, отображаемый в окне, потому что это единственное содержимое .
W3C предлагает Markup Validation Service для проверки любого HTML-документа на наличие ошибок и предупреждений.
Здравствуйте, дорогие друзья! Рад видеть вас на моём блоге! Сегодня речь пойдет про валидность HTML на сайте в целом и его отдельных страницах. Валидность — это соответствие кода определённым стандартам. Над разработкой веб-стандартов работает Консорциум World Wide Web (W3C) — это международное сообщество, в котором состоят организации, штатные сотрудники и общественность.
Миссия консорциума заключается в том, чтобы раскрыть весь потенциал всемирной паутины, разрабатывая и внедряя протоколы и руководящие принципы, обеспечивающие долгосрочный рост сети Интернет.
На официальном сайте W3C предоставлены очень полезные онлайн-инструменты для вебмастеров, одним из них является валидатор — это бесплатный сервис, позволяющий проверить приверженность сайта современным веб-стандартам.
К сожалению, сервис полностью на английском языке, но если вы чуточку разбираетесь в разработке и вёрстке, то непременно поймёте его суть и посыл 😉
Итак, на главной странице расположены три вкладки:
- Validate by URI — проверка указанного URL-адреса;
- Validate by File Upload — проверка загруженного файла;
- Validate by Direct Input — проверка путем прямого ввода исходного кода.
Для запуска анализатора нужно переключиться на требуемую вкладку, в качестве примера я буду рассматривать проверку по URL-адресу. Под ссылкой More Options скрываются дополнительные опции, нажмите на нее, чтобы получит доступ к настройкам:
- Character Encoding — кодировка символов. WordPress использует UTF-8, но можно оставить стандартное значение «Detect automatically» для автоматического определения кодировки.
- Document Type — тип документа (HTML, XHTML, SVG и др.). Поставьте флажок Only if missing, если тип документа не задан на странице и его нужно задать вручную для проверки.
- List Messages Sequentially — выводить ошибки и предупреждения последовательным списком;
- Group Error Messages by Type — группировать ошибки и предупреждения по типу;
- Show Source — показать исходный код;
- Show Outline — показать структуру документа;
- Clean up Markup with HTML Tidy — очистка разметки с помощью HTML-Tidy;
- Validate error pages — проверять страницы с ошибками, например, с 404 ошибкой;
- Verbose Output — подробный вывод. Если честно, я не заметил разницы при включении этой опции, если знаете за что она отвечает — поделитесь в комментариях, буду очень признателен.
Когда все настройки выставлены, нажимайте кнопку Check для старта HTML валидатора. Если документ не имеет ошибок, появится надпись:
Document checking completed. No errors or warnings to show.
В переводе на русский язык это означает: «Проверка документа завершена. Ошибки или предупреждения не найдены». Отлично!
В том случае, если документ не пройдёт проверку, увидим простую надпись об её завершении:
И конечно же список сообщений, которые содержат сведения об ошибках и предупреждениях с пояснениями, а также ссылки на конкретные строки документов, но только в том случае, если была включена опция Show Source.
На скриншоте ниже представлен фрагмент проверки главной страницы Яндекса. Странно это видеть, даже не ожидал, ведь Яндекс сам принимает участие в разработке стандартов W3C… Ну да ладно, соблюдать абсолютно все стандарты действительно сложно, тем более для такого крупного портала.
В начале своего пути Блог Свободного Вебмастера содержал очень много ошибок и предупреждений. По мере изучения мне удалось снизить их количество, а со временем и вовсе избавиться. Впредь буду придерживаться стандартов W3C, хотя некоторые плагины добавляют ложку дёгтя в бочку мёда… Время покажет!
Так зачем же нам валидный код ? Валидация веб-документов — важный шаг, который может значительно помочь улучшить и обеспечить их качество, а также сэкономить много времени и денег. Некоторые специалисты уверяют, что правильный код может благоприятно повлиять на в поисковой выдаче! Проверьте свой сайт и расскажите о результатах!
Большинство начинающих вебмастеров рано или поздно сталкиваются с таким понятием как «Валидность кода », лично у меня этот процесс затянулся почти на 2 года. За этот срок я создал три собственных сайта и лишь, потом совершенно случайно узнал о такой необходимости как проверка кода на валидность .
Уже спустя несколько минут я был частично подкован в информационном плане, и успел проглотить несколько коротеньких статей на тему валидности кода. Не могу сказать, что я был доволен изученной информацией, лишь по той причине, что все мои сайты оказались, не достаточно хорошо оптимизированы, и как оказалось, были допущены ошибки на страницах.
Несколько грубых и серьёзных нарушений я устранил сразу, однако в процессе понял, на то что бы поправить все страницы, написанные за два года, понадобится очень много времени, которым в данный момент я не располагаю.
Мораль такова, что бы ни было проблем в дальнейшем, лучше немного подсуетиться и всё продумать заранее.
И так, давайте разберёмся, что же такое валидность кода и на что она влияет.
Валидность кода.
– это исходный код страницы, который должен быть написан по правилам веб-стандартов и правилам языка разметки. Именно этот код в первую очередь видят поисковые системы, во время посещения вашего ресурса и именно этот код отображается в браузере, формируя страницу в том виде, к которому мы привыкли.
Поисковики во время таких посещений и индексации извлекают из этого кода все элементы страницы, включая тексты, заголовки, изображения с прописанными атрибутами, html теги, имена файлов и так далее.
Не трудно представить, что ошибки, допущенные в коде, могут повлиять на оценку ресурса со стороны роботов, которые в свою очередь могут повлечь за собой некие санкции и оказать влияние на ранжирование в поисковых системах. Более того, я уверен, что и самому веб-мастеру будет куда комфортнее и уютнее среди валидных документов «зелёного цвета».
Таким образом, валидность можно отнести к внутренней оптимизации, которая зачастую является основной частью в продвижении ресурса. Грамотно составленный и полностью валидный код - это залог успеха и улучшение позиций в поисковой выдаче.
Пожалуй, начнём со статистики. Так уж сложилось, что большинство Web-дизайнеров пренебрегают валидностью публикуемых документов и не доводят их исходный код до определённых стандартов. По статистике, количество ресурсов, которые проходят проверку кода на валидность составляет чуть больше 6% - вы представляете как это мало?
Учитывая эти данные, получается, что писать валидный код в принципе необязательно, так как большинство этим не занимаются и при этом неплохо себя чувствуют. Многие считают, что проверка валидности это ни что иное как способ обнаружения каких-то мелких недочётов, которые в целом не могут нанести особого вреда.
Увы, в действительности это именно так. Я провёл немало времени, пока анализировал страницы с высокочастотными запросами, которые, несмотря на наличие огромного количества ошибок, находились на топовых позициях. Чего уж там говорить, если даже сам Я ндекс при проверке валидности в коде содержит 113 ошибок и 20 предупреждений.
Если раньше вы никогда не проверяли валидность, спешу вас огорчить – банально, если Вы установили на свой сайт счётчик посещений от liveinternet и ничего в нём не меняли, несколько ошибок вы уже получаете автоматом.
На самом деле, существует несколько способов, с помощью которых можно проверить валидность интересующей страницы. Подробнее остановлюсь лишь на некоторых.
- Способ первый и, наверное, самый примитивный. Пользуясь браузером «Opera», необходимо кликнуть правой кнопкой мыши в любом месте страницы и выбрав соответствующий пункт проверить, соблюдены ли стандарты .
Сразу после этого появится ещё одно диалоговое окно, в котором необходимо подтвердить проверку исходного кода страницы. Нажимаем «OK» и получаем результаты в новой вкладке.
- Второй способ – самый популярный. Для того что бы проверить валидность нужной страницы достаточно перейти на сайт W3.org и вписав её адрес в поле «Address» нажать кнопку «Check».
По-хорошему, именно таким образом должны выглядеть результаты проверки. Слово «Passed » означает, что загруженная страница прошла проверку валидности без ошибок . Так же, об этом не трудно догадаться по зелёному цвету, который преобладает в качестве подсветки результатов.
Создать валидный код отнюдь не так сложно как может показаться на первый взгляд, тем не менее, я считаю что, приведя исходный код сайта в надлежащее состояние, Вы обеспечите для него кроссбраузерность что в свою очередь увеличит скорость загрузки страницы (пусть и незначительно) и соответственно скорость индексации поисковыми системами, что немаловажно для огромных проектов.
Учтите, поисковые системы отдают своё предпочтение в первую очередь страницам с правильным кодом.
PS: Если статья понравилась, можете обратить своё внимание ещё на то - как я создавал свой сайт и на чём делал акцент.