Ważność kodu HTML: sprawdzanie i poprawianie błędów

Walidacja jest jednym z najważniejszych aspektów dobrego projektowania stron internetowych. Przyjrzyjmy się, co to jest i jak sprawdzić poprawność kodu HTML. Jako przykład weź najpopularniejszy system zarządzania treścią (CMS) - WordPress. Następnie udostępnimy listę błędów napotkanych w praktyce, a co najważniejsze, zaoferujemy nasze własne, sprawdzone metody ich eliminacji.

Mówiąc najprościej, sprawdzenie strony internetowej określi, czy spełnia ona standardy opracowane przez World Wide Web Consortium (W3C). Zwykle odbywa się to poprzez sprawdzanie ważności poszczególnych stron Usługa weryfikacji online W3C .

Podobnie jak zasady gramatyki w różnych językach, istnieją również zasady programowania. Sprawdzenie pozwala sprawdzić, czy strona jest zgodna z tymi regułami, aw przypadku błędów i ostrzeżeń zostaną wydane zalecenia w celu ich wyeliminowania. Więcej informacji na temat potrzeby takiej weryfikacji zostanie omówionych poniżej.

Czy kiedykolwiek myślałeś o tym, jak przeglądarki „czytają” stronę internetową? Mają „silniki” do analizy kodu i przekształcania go w wizualną formę dla ludzi. Niestety każda przeglądarka ma własny mechanizm przetwarzania kodu, co może prowadzić do wyświetlania stron na różne sposoby.

Nieprawidłowa strona internetowa może być czytana przez przeglądarki na różne sposoby. Doprowadzi to do tego, że odwiedzający mogą nawet nie być w stanie poprawnie zobaczyć zawartości strony w swoich przeglądarkach. Walidacja w końcu naprawi prawie wszystkie główne różnice i sprawi, że twoja strona będzie czytelna dla prawie wszystkich przeglądarek internetowych (najczęściej wyjątkiem jest Internet Explorer starszych wersji). Stąd termin „układ między przeglądarkami” - tj. układ, który jest równie dobry (kompatybilny) dla wszystkich popularnych przeglądarek.

Jak to wpływa na SEO? Ważne jest, aby zrozumieć, że roboty wyszukiwarki lubią semantyczne strony internetowe. Układ semantyczny, według Wikipedii, jest podejściem do tworzenia stron internetowych w HTML, opartym na wykorzystaniu tagów HTML zgodnie z ich semantyką (cel). Ponadto strukturalna strona semantyczna pozwala robotom wyszukującym dokładniej określić znaczenie zarówno poszczególnych elementów strony internetowej, jak i całego tekstu. Według Google prawidłowy kod nie wpływa na ranking stron. Ale jednocześnie obecność błędów w kodzie może negatywnie wpłynąć na skanowanie mikromarkowania i adaptacji do urządzeń mobilnych.

Materiał na ten temat: https://www.seonews.ru/events/google-validnost-html-ne-vliyaet-na-ranzhirovanie/

Jeśli więc podczas audytu SEO spełniasz zalecenia dotyczące eliminacji błędów wykrytych podczas procesu walidacji, lepiej je naprawić, a my powiemy ci, jak to zrobić.

Rozumiejąc potrzebę braku błędów sprawdzania poprawności na stronach witryny, przyjrzyjmy się, jak szukać tych błędów.

Istnieje wiele bezpłatnych usług do sprawdzenia witryny, takich jak Usługa walidacji znaczników W3C , Analizator stron internetowych , Browsershots i inni.

Serwis Walidacja HTML W3C Jest to prawdopodobnie najłatwiejsze i najbardziej popularne narzędzie do sprawdzania ważności strony internetowej. Za pomocą tego narzędzia można wykryć błędy walidacji, zaczynając od brakujących atrybutów ALT dla znaczników IMG, a kończąc na umieszczeniu elementów na poziomie bloku w osadzonych elementach (na przykład <p> wewnątrz <span>).

Możesz ocenić kod HTML, podając adres swojej strony internetowej, pobierając plik HTML lub bezpośrednio wstawiając kod HTML.

W3C HTML Markup Service

Usługa sprawdzi podane przez Ciebie dane pod kątem błędów i wygeneruje raport z ich listą i zaleceniami do korekty.

Tradycyjnie błędy i ostrzeżenia można podzielić na dwa główne typy: szablon (powiązany z wybranym motywem i zainstalowanymi wtyczkami) oraz błędy popełnione podczas projektowania unikalnej zawartości.

Podczas sprawdzania strony internetowej po raz pierwszy nie daj się zastraszyć możliwą dużą liczbą błędów! Z reguły większość z nich jest powtarzana wielokrotnie na analizowanej stronie. Oznacza to, że jeśli usuniesz błąd w jednym miejscu szablonu lub strony, zniknie on w tym samym typie.

Ogromna liczba błędów związanych z tematem witryny, a także zainstalowane wtyczki. Większość z nas instaluje darmowy motyw i wtyczki bez zastanawiania się, co jest w nich ukryte. W wielu tematach, przy głębszym badaniu, napotykamy typowe błędy.

Istnieją dwa sposoby naprawienia zidentyfikowanych błędów: skontaktuj się ze specjalistami, płacąc N-tą sumę pieniędzy lub napraw je sam. Rozważ ostatnią opcję na prawdziwych przykładach i wyeliminuj wszystkie nieścisłości, postępując zgodnie ze szczegółowymi instrukcjami.

Ważna kopia zapasowa !!!
Przed wprowadzeniem jakichkolwiek zmian w kodzie źródłowym witryny konieczne jest wykonanie kopii zapasowej plików witryny i bazy danych. Jest to konieczne, aby go przywrócić, jeśli po przeprowadzeniu manipulacji normalna praca witryny zostanie zerwana.
Edycja plików szablonu motywu.
Edycję źródła można wykonać na kilka sposobów: edytując pliki za pomocą FTP, za pomocą menedżera hostingu plików lub za pomocą panelu administracyjnego WordPress. Zalecamy używanie tej ostatniej opcji, ponieważ Jest to najszybszy i najłatwiejszy.

1. Atrybut jest niepotrzebny dla zasobów javascript.

Ostrzeżenie Atrybut „type” elementu <script> jest opcjonalny dla zasobów JavaScript.

Atrybut elementu nie został pominięty.

Ostrzeżenie Atrybut „type” dla elementu <style> nie jest potrzebny i powinien zostać pominięty.

Aby wyeliminować te dwa ostrzeżenia, musisz usunąć atrybut type = ”text / javascript” we wszystkich znacznikach <script> i wpisz = ”text / css” we wszystkich znacznikach <style>. Pomaga nam prosta funkcja PHP preg_replace połączona ze wspaniałą możliwością filtrowania danych w WordPressie. Kod wygląda tak:

# usuń atrybut type = "text / javascript" we wszystkich tagach <script>, a także type = "text / css" we wszystkich tagach <style>

add_filter ('style_loader_tag', 'remove_type_attr');

add_filter ('script_loader_tag', 'remove_type_attr');

funkcja remove_type_attr ($ src) {

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

}

Wklej ten kod jest niezbędny w pliku functions.php używanym w motywach. Aby to zrobić, zaloguj się do panelu administracyjnego WordPress, wybierz element menu „Wygląd” -> „Edytor” i wybierz interesujący cię plik z listy plików po prawej stronie. Wstaw kod na samym końcu pliku. Kliknij przycisk „Aktualizuj plik”.

Wbudowany edytor w panelu administracyjnym WordPress

Dodatkowo usuń ten atrybut w niektórych plikach motywu WordPress.

W menu „Wygląd” -> „Edytor” wybieramy interesujące nas pliki - index.php, header.php, footer.php. Wyszukiwanie atrybutów zostanie przeprowadzone przy użyciu przycisków wyszukiwania Ctrl + F, wpisując tekst / javascript w panelu wyszukiwania. Po zidentyfikowaniu takiego wpisu zastąp <script type = ”text / javascript”> <script>, tj. usuwamy nieprzypisany typ atrybutu = ”text / javascript” i nie wolno zapomnieć o kliknięciu przycisku „Aktualizuj plik”.

Sprawdź wynik.

1. Element jest przestarzały. Zamiast tego użyj CSS.

Błąd Tag <center> jest przestarzały. Użyj odpowiednich stylów CSS.

HTML 5 aktywnie współdziała z CSS (językiem opisującym wygląd dokumentu napisanego przy użyciu HTML), dlatego zakaz wielu tagów i atrybutów rozpoczęty w HTML 4 na rzecz stylów tylko się zwiększył. Takie tagi i atrybuty nie są już obsługiwane przez niektóre przeglądarki i powinny być wyłączone z kodu. Jednym z tych tagów jest znacznik <center>, a także atrybut ramki <iframe>. Rozwiązując te błędy, musimy „wyczarować” trochę w naszej bazie danych witryny.

Aby to zrobić, przejdź do panelu kontrolnego hostingu, kliknij link w phpMyAdmin i zaloguj się.

Hosting panel sterowania

Panel sterowania PhpMyAdmin

Przede wszystkim wyeksportuj całą bazę danych jako kopię zapasową! Aby to zrobić, kliknij przycisk „Eksportuj” w panelu administracyjnego interfejsu internetowego. Następnie wybierz zakładkę „SQL”, aby wykonać zapytania SQL do bazy danych, w naszym przypadku wyszukaj i zastąp przestarzałe znaczniki i atrybuty. Rejestrujemy następujące wnioski:

# znajdź i zamień otwierający znacznik <center> na kontener <div>

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

# znajdź i zamień zamykający znacznik <center> za pomocą kontenera <div>

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

# znajdź i zastąp atrybut „frameborder” klasą „ag_border_zero”

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

Zapytania SQL w panelu sterowania phpMyAdmin

Rozważmy bardziej szczegółowo powyższe zapytania SQL.

Zastąp nieaktualny znacznik pojemnikiem <div> jako pierwszą linią i natychmiast ustaw klasę „ag_center”. Ta klasa stylu pozwoli nam wyrównać zawartość kontenera w środku. Aby to zrobić, przejdź do panelu administracyjnego WordPress, wybierz element menu „Wygląd” -> „Edytor” -> plik style.css naszego motywu. Na końcu pliku dodajemy następujące wiersze kodu:

.ag_center {text-align: center; }

.ag_border_zero {border = 0; }

Edycja arkusza stylów

Zamień zamykający tag </ center> na zamykający </ div> w drugim wierszu zapytania SQL. Trzeci zastępuje atrybut frameborder = ”0” klasą „ag_border_zero” elementu <iframe>.

Zapytania SQL można zoptymalizować, łącząc je w jedno, ale łatwiej jest zrozumieć i wizualnie podzielić zadanie na kilka zapytań, tak jak to zrobiliśmy. Możesz oczywiście uzyskać inne przestarzałe znaczniki, które należy zastąpić uniwersalnym znacznikiem <div> i przenieść ich bezpośrednie przypisanie do pliku stylu.

Lista tagów, które nie są już obsługiwane i powinny zostać wykluczone z kodu:

<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>

Sprawdź wynik.

1. Atrybut elementu jest przestarzały. Zamiast tego użyj CSS.

Błąd Atrybut „szerokość” elementu <th> jest przestarzały. Użyj odpowiednich stylów CSS.

Podobnie jak w poprzednim błędzie, atrybut „szerokość” elementu <th> jest również przestarzały. Są dwa sposoby na naprawienie tego błędu - zastąp szerokość = "10%” stylem = ”szerokość: 10%;”. Lub, aby nie opisywać stylu wewnątrz tagu za każdym razem, możesz wybrać styl w zewnętrznym arkuszu stylów. To znaczy dodajemy element class = ”width_ten_percent” do elementu <th> i plik .width_ten_percent {width: 10%;} w pliku style.css naszego motywu. Który sposób jest łatwiejszy, wybierz!

Jeśli ten błąd jest ogromny w artykułach twojego projektu, użyjemy wyszukiwania i zastąpimy atrybut „szerokość” w panelu phpMyAdmin następującym zapytaniem SQL:

# znajdź i zamień atrybut „width” na „style =” width: 10%; ”„

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

Lub:

# znajdź i zamień atrybut „szerokość” z klasą stylu „width_ten_percent”

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

Następnie musisz dodać klasę style width_ten_percent w pliku style.css:
.width_ten_percent {szerokość: 10%;}

Należy zauważyć, że w przypadku masowej wymiany przestarzałych atrybutów z klasami stylów w panelu phpMyAdmin, jeśli istnieje już zarejestrowana klasa elementu (na przykład <img class = "width_twenty_percent" class = "width_ten_percent" />), może wystąpić inny błąd - duplikacja atrybutu " klasa ”. Sytuacja jest podobna do atrybutu „style” (na przykład <img style = ”width: 300px” style = ”height: 200px”>). Dlatego musisz być pewien braku wspomnianego wcześniej innego atrybutu „klasa” / „styl” lub odmówić edycji bazy danych SQL za pomocą zapytań na rzecz ręcznego sprawdzania i edytowania każdego pojedynczego artykułu w edytorze panelu administracyjnego WordPress.
Rozważmy na przykład dodanie dodatkowej klasy / właściwości atrybutu „style”, zgodnie z regułami stylu. Dodaj dodatkową klasę width_ten_percent do już istniejącego color_red (class = "color_red”), a otrzymamy: class = ”color_red width_ten_percent” (podajemy nazwy klas oddzielone spacjami). Dodaj szerokość 10% do istniejącego stylu = ”kolor: czerwony;”, w końcu powinniśmy mieć to: style = ”kolor: czerwony; szerokość: 10%; ”(właściwości stylu są oddzielone średnikiem i spacją).

Chciałbym również zwrócić uwagę na częste błędne użycie atrybutu „width” dla elementu <tr>, atrybutu „height” dla elementu <td>.

Okresowo sprawdzaj nowe treści pod kątem tych błędów i, jeśli to konieczne, powtórz procedurę naprawy.

Lista atrybutów, które nie są już obsługiwane i powinny być wykluczone z kodu: Nieaktualne atrybuty Element zestawu znaków, coords, kształt, metody, nazwa, rev, urn <a> nohref <area> alink, bgcolor, link, marginbottom, marginheight, marginleft, marginright, margintop, marginwidth, text, vlink <body> wyczyść <br> nazwa <embed> profil <head> wersja <html> longdesc <iframe> longdesc, lowsrc, nazwa <img> usemap <input> zestaw znaków, metody, rev, target, urn <link> schemat <meta> nazwa <option> archiwum, classid, kod, codebase, typ kodowy, deklaracja, standby <object> typ, wartość_typu <param> zdarzenie, dla, język <script> datapagesize <table> abbr, axis < td> i <th>

Sprawdź wynik.

1. Zła wartość atrybutu elementu img: oczekiwana cyfra, ale zamiast tego.

Błąd Niedopuszczalna wartość „300px” dla szerokości atrybutu w elemencie <img>: Zamiast tego oczekiwana liczba, ale przeczytaj „px”.

Atrybuty elementów są ważną częścią znaczników HTML. Niektóre atrybuty elementów mogą przyjmować niemal dowolną wartość, inne mogą przyjmować tylko wartości określonego typu, a jeszcze inne mogą przyjmować wartości tylko z predefiniowanego zestawu.

W kontekście <img width = "300px" /> atrybut „width” może akceptować dowolną dodatnią liczbę całkowitą. Musisz ustawić poprawną wartość poprawnego znacznika, a mianowicie 285, bez określania jednostki miary (px).

Zidentyfikowane błędy można znaleźć nie tylko w postach, ustawieniach motywów WordPress, ale także w treści HTML widżetów paska bocznego. W takich przypadkach, aby wyeliminować błąd, przejdź do menu „Wygląd” -> „Widgety” -> Pasek boczny po lewej (prawy / piwnica), aw ustawieniach widżetu znajdujemy atrybut „szerokość” omyłkowo określony przez usunięcie jednostki (px).

Edycja treści widżetu w panelu administracyjnym WordPress

Dodatkowo napotkano błędne wskazanie parametru atrybutu „wysokość” elementu <img>.

Sprawdź wynik!

1. Identyfikator Dublicate.

Użycie nazwy identyfikatora stylu (id = „nazwa”) więcej niż raz na jednej stronie.

Identyfikator stylu to unikalna nazwa elementu, która służy do zmiany jego stylu i dostępu do niego za pomocą skryptów. Identyfikator w kodzie dokumentu powinien być w jednej kopii, tj. spotkać się tylko raz.

1. Nazwa klasy i identyfikator muszą zaczynać się od znaku łacińskiego (A - Z, a - z).

Nazwa klasy i identyfikator muszą zaczynać się od znaku łacińskiego (A - Z, a - z). Może zawierać cyfry (0–9), łącznik (-) i podkreślenie (_), ale nie na początku słowa. Używanie rosyjskich liter w nazwach identyfikatorów jest niedozwolone.

1. Błędne użycie znacznika składni noindex.

Tag noindex jest używany do wykluczenia treści, które muszą być ukryte przed wyszukiwarką Yandex. Na przykład podwójne elementy nawigacyjne. Jednak wiele osób używa go nieprawidłowo:

<nindex> Tekst lub kod wykluczający z indeksowania </ noindex>

Aby kod był prawidłowy, zaleca się użycie następującej konstrukcji:

<! –– noindex ––> Tekst lub kod wykluczający z indeksowania <! –– / noindex ––>

1. Brak elementu w zasięgu, ale widoczny znacznik końcowy.

Brakujący znacznik otwarcia lub zamknięcia.

Składnia znaczników zazwyczaj używa sparowanych znaczników, aby zaznaczyć początek i koniec elementu. Znacznik zamykający jest podobny do znacznika otwierającego, ale zawiera ukośnik (/) wewnątrz nawiasów kątowych i jest wskazywany bezpośrednio po nawiasie otwierającym. Jeśli otworzyłeś tag w dokumencie HTML, musisz zamknąć go w odpowiednim miejscu. W przeciwnym razie może to spowodować problemy z poprawnym wyświetlaniem elementu w przeglądarce.

1. Element w tym kontekście. (Pomijanie dalszych błędów z tego poddrzewa.)

Blokuj elementy wewnątrz małych liter.

Zgodnie ze specyfikacją zabronione jest wstawianie elementu blokowego do małej litery. Na przykład <span> <p> Lorem ipsum ... </ p> </ span> nie przejdzie walidacji, poprawnie załączy znaczniki w odwrotnej kolejności - <p> <span> Lorem ipsum ... </ span> </ p>.

Najczęściej używane elementy bloku to:

<adres>, <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>

Wbudowane (małe litery) elementy:

<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. Element musi mieć atrybut, z wyjątkiem pewnych warunków. Szczegółowe informacje można znaleźć w poradniku na temat dostarczania alternatyw tekstowych dla obrazów.

Brakujący atrybut „alt” na obrazku.

Każdy obraz (nawet jeśli służy do celów projektowych) w dokumencie HTML musi mieć atrybut „alt” opisujący zawartość obrazu. Ten atrybut jest indeksowany przez roboty wyszukujące i jest używany przez nich do określania zawartości wykrytych obrazów. To z kolei jest ważne zarówno dla poprawy trafności stron internetowych, jak i dla przyciągnięcia dodatkowego ruchu do witryny z „wyszukiwania obrazów”.

Dla naszych menedżerów treści przygotowaliśmy notatkę o tym, jak prawidłowo zorganizować stronę internetową przy użyciu prawidłowego kodu. Podziel się nim i ze sobą, użyj na zdrowie:

W wyniku drobiazgowej pracy nad błędami powinniśmy zobaczyć: Zakończono weryfikację dokumentu. Nie wykryto błędów ani ostrzeżeń („Sprawdzanie dokumentów zakończone. Brak błędów lub ostrzeżeń do pokazania.”).

Co sądzisz o znaczeniu walidacji? Jakie błędy napotkałeś i jak je rozwiązałeś? Dodaj swoje komentarze do tego artykułu!

Autor artykułu:

Alexander Rybak

Programista WWW w ApollonGuru. Aktywnie uczestniczę w opracowywaniu kodu do wdrażania rekomendacji SEO. Ulubiony język programowania: PHP.