Dobrý deň, milí čitatelia blogu. Dnes sa chcem dotknúť témy vytvárania unikátov URL na internete a porozprávať sa o princípoch tvorby relatívne a absolútne väzby.

Samozrejme, téma vytvárania adries URL alebo ich rozšírenejšej verzie URI (uri) je dosť komplikovaná, ak sa zahrabete hlboko a pokúsite sa dostať k pravde.

To však nepotrebujeme, pretože stačí pochopiť štruktúru adresy URL v jej aplikácii.

Tiež si myslím, že bude užitočné pochopiť, prečo a ako môžete tvoriť relatívne odkazy pre váš zdroj a nepoužívajte na tieto účely absolútne hodnoty, ak to nie je výslovne potrebné.

URL adresy – čo sú to a ako ovplyvňujú indexovanie stránok

Pozrime sa teda, čo je URL adresa, prečo je potrebná a z akých častí pozostáva. Ako viete, vyhľadávače nevyrábajú ako celok, ale ako kolekciu jednotlivých stránok. Potom budú iné vyhľadávacie dopyty(prečítajte si viac o výbere Kľúčové slová vo Wordstate na základe .

URL a URI

Akýkoľvek dokument (webová stránka) na internete má svoju jedinečnú URL, čo je skratka pre Uniform Resource Locator (lokátor zdrojov). Ten, rovnako ako protokol HTTP, ale aj ako, vyvinul a vytvoril ten istý človek – Tim Berners-Lee (otec zakladateľa projektu).

Celkovo je adresa URL špeciálnym prípadom iného nazývaného identifikátora URI(Uniform Resource Identifier - jednotný identifikátor zdroja), ale vy a ja, všetky tieto jemnosti s najväčšou pravdepodobnosťou nebudú potrebné (zbytočné) pri práci s našou stránkou. Pokúsme sa vo všeobecnosti pochopiť, čo to je a z akých častí sa skladá, a potom prejdite na relatívne a absolútne odkazy.

URL adresa je spôsob, ako na niečo na internete jednoznačne poukázať. Slúži nielen na prácu so stránkami () cez protokol http (aj cez ftp), ale nás, samozrejme, bude zaujímať aplikácia tohto identifikátora na Web (protokoly http a https). Adresa URL v tomto prípade bude vyzerať asi takto (o niečo nižšie uvediem všeobecný vývojový diagram jej konštrukcie, ale zatiaľ by som rád začal jednoduchým, častým príkladom):

https://.html

V tomto príklade adresy časť „http“ označuje protokol prenosu údajov alebo, ak sa riadite terminológiou špecifikácie, schému (pretože to nie je protokol prenosu údajov na rozdiel od http alebo ftp, ale používa sa aj v Url adresa x)..stránka") - alebo .

WWW a iné zrkadlá stránok, ktoré je potrebné zlepiť

Web má špecifiká určenia názvu domény v adrese URL lokality, ktorá môže byť s WWW alebo bez nej. Aby ste boli úspešní, je veľmi dôležité prilepiť tieto dve zrkadlá vašej stránky. Často vám môže poskytovateľ hostingu vykonať lepenie zrkadiel, no určite to bude potrebné skontrolovať.

Tie. pre vyhľadávače sú stránky s WWW alebo bez neho úplne iné a bez ich lepenia sa medzi ne rozdelí masa odkazov v neznámom pomere. WWW v adrese je neodmysliteľne akýmsi atavizmom, ktorý robí váš Doménové meno doména druhej úrovne tretej úrovne.

To isté platí pri presune stránky na zabezpečenú https protokol s http- pre vyhľadávače to bude iná stránka.

Pri používaní nie je nič zlé www v adrese URL stránky nie, ale musíte jasne definovať hlavné zrkadlo (cez a cez, ako aj napísaním smernice vašej stránky), ktoré bude indexovať vyhľadávače a ktoré sa bude podieľať na hodnotení.

E. „bez atavizmu“ a ak pridáte túto nádhernú predponu na ktorúkoľvek z mojich adries URL, dôjde k automatickému presmerovaniu na adresu „bez WWW“.

https://www..html

Môžete prilepiť nielen zrkadlá opísané vyššie, ale aj akékoľvek iné názvy domén, ktoré vám patria. Ak je napríklad možný iný pravopis v latinke známej značky, kúpia sa všetky možné domény (varianty pravopisu s chybami, v rôznych doménové zóny atď.) a držať spolu. Potom sa pri prístupe na stránku na ktorejkoľvek z možných URL adries otvorí hlavné zrkadlo.

Napríklad na reg.ru môžete vidieť potenciálne zrkadlá alebo bezplatné domény na registráciu (navrhovaný názov domény môžete zadať priamo do formulára nižšie):

Odkiaľ pochádzajú ďalšie adresy URL (duplicitné stránky) vašej lokality v indexe vyhľadávacieho nástroja

Ale späť k našim ovečkám. Časť adresy URL, ktorá sa nachádza za treťou lomkou (/) – v našom príklade je to „papka/fail.html“ – sa nazýva cesta ku konkrétnemu objektu (dokumentu alebo súboru). V našom prípade ide o dokument „fail.html“, ktorý sa nachádza v adresári „papka“, ktorý zase leží v koreňovom priečinku ( koreň v adrese URL sa vždy zhoduje s treťou lomkou vľavo).

To však nie je všetko, čo sa dá do adresy napísať. Cez URL prechádzajú rôzne parametre takzvané GET parametre, ktoré sa pridávajú na jej úplný koniec po vložení otáznika, napríklad takto:

https://www..html?print=yes

Celý problém je v tom vyhľadávače dve takéto adresy URL (s parametrami Get a bez nich) sú úplne odlišné webové dokumenty a každá z nich bude indexovaná vyhľadávacími nástrojmi.

K tej istej adrese URL je možné pridať toľko rôznych parametrov Get, koľko chcete, a to všetko bude indexované spoločnosťami Yandex a Google, ak nevytvoríte príslušné zákazy v súbore robots.txt, ktorého odkaz je uvedený Práve vyššie. V opačnom prípade môžu vyhľadávače pre veľa duplicitného obsahu(rovnaký obsah dostupný na rôznych adresách).

Tiež napríklad do domovskej stránke môj zdroj je dostupný pomocou dvoch rôznych adries URL:

https://site https://site/index.php

(aj tri - tiež https: // site /) a v každom prípade sa otvorí hlavná stránka. To je dosť zlé, pretože vyhľadávače nájdu tri rôzne stránky(majú rôzne adresy URL z ich pohľadu), ale s rovnakým obsahom, ktorý sa im nepáči.

Preto som to urobil tak, že keď zadáte niektorú z vyššie uvedených adries URL, vykoná sa presmerovanie na adresu URL v tvare „https: // site /“. To sa spravidla vykonáva pomocou presmerovaní 301 v súbore .htaccess, a to buď priamo v nastaveniach servera vy alebo váš hostiteľ.

Pre viac informácií si prečítajte príspevok, na ktorý je odkaz.

Štruktúra adresy URL a prekódovanie na zakódovanú adresu URL

vo všeobecnosti úplný blokový diagram adresy URL môže byť reprezentovaný takto:

V skutočnosti spravidla nepoužívajú prihlasovacie meno, heslo a port, hoci na prístup na platené stránky môže byť potrebné ich špecifikovať:

http://login: [e-mail chránený] website/platniy-access.html

Je tiež celkom bežné inštalovať FTP prihlasovacie heslá, kde môže použiť aj neštandardný port, ale odlišný od predvoleného pre tento protokol. Potom pre prístup k zdrojom takýchto ftp server budete musieť zadať adresu URL, ako je táto:

ftp://login: [e-mail chránený] webová stránka:6789/samoe-nujnoe/cimus

O parametroch GET, ktoré je možné napísať na túto adresu za otáznikom, sme si už povedali a spomenuli, že je potrebné zakázať indexovanie stránok, v ktorých URL sú takéto parametre (vyššie je odkaz na článok o roboty, kde je toto všetko podrobne popísané).

Url adresy vo forme hash odkazov, ktoré otvoria stránku na správnom mieste

Ale okrem všetkých týchto vecí, ktoré je možné zahrnúť do URL, vo vyššie uvedenom vývojovom diagrame môžete vidieť tzv. Kotva, ktorý sa pridáva na úplný koniec za ohraničujúcim znakom libry „#“ (adresy URL obsahujúce kotvy sa zvyčajne nazývajú hash odkazy).

Vo vnútri sú vopred pripevnené kotvy html kód dokumentu (stránky) pridaním atribútu ID="label" do požadovaného Html tagu (odseku, nadpisu alebo iného vhodného) a následným pridaním názvu tejto kotvy do adresy URL stránky pomocou znaku libry "#". môže prejsť na začiatok tejto webovej stránky a hneď na miesto, kde bola umiestnená kotva (každý automaticky posunie stránku na správne miesto).

O tom, ako aj o organizovaní navigácie na stránke s pomocou, si prečítajte tieto články.

Aké znaky možno použiť v adresách URL?

Za zmienku stoja aj rôzne kódovania, ktoré sa v URL používajú. Bez prekódovania môžu používať iba obmedzené množstvo postavy. Zvyčajne sa odporúča obmedziť sa na množinu znakov: ,,,[_],[-].

Vo všeobecnosti, aby ste sa vyhli chybám, by som vám odporučil, aby ste názov súborov a adresy URL stránok na vašom webe nastavili na malé písmená, pretože v systémoch podobných Unixu (na ktorých funguje väčšina webových serverov) sa znaky v hornom a malé písmená sú odlišné (na rozdiel od Windows). V dôsledku rôznych registrov môže dôjsť k zbytočnému zmätku.

Používanie akýchkoľvek iných znakov (vrátane ruštiny) v adresách URL je povolené, ale bude prekódovanie rovnaké znaky (kódovanie URL).

Smutný je nestráviteľný vzhľad adries URL so symbolmi, napríklad azbukou, ktoré sa získajú po prekódovaní. Každý znak cyriliky je zakódovaný pomocou dvoch bajtov v , zapísaný v šestnástkovej sústave a oddelený znakom percenta „%“. Napríklad táto adresa URL:

https://webová stránka/kto je nový/

po konverzii to bude vyzerať takto:

Http//site/%BA%D1%82%D0%BE%20%D0%BD%D0% B0%20%D0%BD%D0%BE%D0%B2%D0%B5%D0%BD%D1% 8C%D0%BA%D0 %BE%D0%B3%D0%BE

Vo všeobecnosti to nie je príliš cool a plánujú sa vysporiadať s týmto nestráviteľným typom adresy URL v národných kódovaniach, ale táto vec nie je taká horúca.

V súvislosti so všetkým vyššie uvedeným by som poradil, kedy na mojom CMS nevytvárajte adresy stránok v ruštine, a najmä preto, že podľa mnohých promotérov to bude lepšie z hľadiska optimalizácie SEO pre Yandex a Google.ru.

Relatívne a absolútne odkazy na stránke

Začnime s absolútne odkazy, pretože v tomto prípade nebude potrebné povedať nič zvláštne, okrem toho, o čom sme už hovorili v tomto článku. To. absolútny odkaz musí spĺňať požiadavky, ktoré kladieme na URL adresu – protokol prenosu dát, názov domény stránky (hostiteľa) a cestu k požadovaný web dokument. Všetky.

V Html sa absolútny odkaz tvorí pomocou špeciálnych A tagov (hyperlinkov), t.j. aby sme to dali dole, jednoducho budeme musieť obklopiť požadované miesto v texte dokumentu (frázu alebo obrázok) úvodnou a záverečnou značkou hypertextového prepojenia a do úvodnej značky A napísať do atribútu „Href“ absolútnu cestu k dokument, ku ktorému sa návštevník bude musieť dostať po kliknutí naň:

PHPMyAdmin

Všetko je veľmi jednoduché.

Výhody relatívnych odkazov a ako ich môžete získať

Absolútne hypertextové odkazy sa však zvyčajne používajú iba vtedy, keď chcú odkazovať na externé stránky a na interné prechody sa väčšina správcov webu (inteligentných a prezieravých, nie ako ja 🙂) snaží použiť relatívne odkazy. A existuje na to niekoľko dôvodov:

1. Relatívne odkazy sú podľa definície kratšie a nezaťažujú kód stránky (napokon, každá maličkosť je v tejto veci dôležitá).
2. Navyše pri prechode na inú doménu alebo zmene protokolu na https nebudete musieť meniť všetky odkazy na stránke.
3. Navyše niektoré návrhy internetových projektov možno rýchlo a bezbolestne preniesť do iného zdroja bez zmeny vnútorných relatívnych odkazov.

Takže, súdiac podľa názvu, adresa webového dokumentu, na ktorý odkazujú, musí byť napísaná relatívne k dokumentu vašej stránky, z kódu ktorého bude tento relatívny odkaz umiestnený (tanec zo sporáka). Druhou možnosťou ich nastavenia je použiť ako východiskový bod koreňový priečinok. Toto sú presne dva spôsoby vytvorenia relatívne odkazy, ktoré teraz zvážime.

Vytvorte relatívne prepojenia vzhľadom na dokument, z ktorého sú pripojené

Najjednoduchší a najkratší spôsob, ako zapísať relatívnu cestu (čo znamená hodnotu atribútu Href značky hypertextového odkazu), získate, keď oba webové dokumenty: darca (od ktorého je pripojená) aj príjemca (súbor alebo webový dokument na ktoré vedie) sa nachádzajú v rovnakom priečinku na serveri.

Kotva

Teraz predpokladajme, že akceptujúci dokument je v priečinku, ktorý sa nachádza v rovnakom adresári ako darcovský dokument.

Ako by v tomto prípade vyzeral relatívny odkaz? Všetko je tiež celkom jednoduché:

Kotva

Zatiaľ si myslím, že je všetko jasné - predpíšeme cestu k súboru alebo dokumentu príjemcu (názov priečinka a cez priamu lomku "/" názov súboru alebo dokumentu). Tie. aby sme sa dostali od darcu k príjemcovi, budeme musieť otvoriť priečinok, ktorého názov uvádzame v relatívnom odkaze.

Teraz zvážme opačnú situáciu, keď samotný darcovský dokument leží v priečinku, z ktorého musíte umiestniť relatívny odkaz na dokument alebo súbor príjemcu, ktorý už leží o úroveň vyššie:

Aby sme mohli prejsť od darcovského dokumentu k akceptorskému spisu (alebo dokumentu), potrebujeme presunúť o úroveň vyššie z tohto priečinka. Na tento účel je k dispozícii špeciálny prvok - dve bodky za sebou a potom cez lomku sa zapíše ďalšia cesta k akceptoru. Takže vo vyššie uvedenom príklade by relatívna cesta bola:

Čo je URL

Ak potrebujete prejsť o dve úrovne vyššie, záznam bude vyzerať takto:

Čo je adresa URL

No, ak potom, aby ste nastavili relatívnu cestu k príjemcovi, budete musieť zadať aj nejaký priečinok na druhej hornej úrovni (vzhľadom na darcovský dokument):

Komplexný dizajn trate

Takýchto zostupov do priečinkov a výstupov na vyššiu úroveň môže byť toľko, hlavná vec je, že sa sami nenechajte zmiasť.

Vytvorte prepojenie vzhľadom na koreňový priečinok

Napísali sme všetky vyššie uvedené odkazy týkajúce sa darcovského dokumentu, z ktorého je hypertextový odkaz pripojený, ale môžete ako východiskový bod vezmite koreňový priečinok stránky. Koreň v relatívnych cestách vyzerá ako jedna lomka "/".

To. prechod na hlavnú stránku bude vyzerať celkom jednoducho, ale extravagantne:

Kotva

Napríklad, absolútne cesta môže vyzerať takto:

Kotva

ALE príbuzný do rovnakého súboru bude o niečo kratší:

Text

Ako odkazovať na priečinok v relatívnej a absolútnej forme

Chcem vás upozorniť na jednu nuanciu, ktorá by sa mala brať do úvahy pri vytváraní absolútnych aj relatívnych odkazov. Ak chceš pozri priečinok, potom nezabudnite na koniec takéhoto hypertextového odkazu (za jeho názvom) vložiť lomku "/". To znamená, že ak chcem otvoriť obsah priečinka, mal by som napísať:

Kotva

Nie takto:

text

V druhom prípade sa server pri spracovaní najskôr pokúsi nájsť súbor s názvom „uploads“ (presne tento bez prípony) a nenájde ho, potom bude hľadať takýto priečinok. Preto píšte ihneď lomka za názvom požadovaného priečinka, nebudete zo svojho servera brať ďalšie zdroje pri hľadaní toho, čo tam nie je.

Mali by ste si to uvedomiť aj vy pri kontaktovaní v relatívnej alebo absolútnej referencii priečinok, zobrazí sa webový server takzvaný indexový súbor, ktorý sa v ňom nachádza a ktorý sa spravidla nazýva index.html alebo index.php. Ak sa v priečinku nenachádza žiadny indexový súbor, potom ak je zabezpečenie na serveri nesprávne nakonfigurované, zobrazí sa zoznam jeho obsahu, čo môže viesť k zníženiu zabezpečenia vášho zdroja.

Určite, ak to nájdete.

Mimochodom, prístup na hlavnú stránku webu je v podstate aj prístup k priečinku (root) a zároveň sa spustí indexový súbor ležiaci v roote (v mojom prípade je to index.php ). Ak teda pristupujete k priečinku, potom na zníženie zaťaženia servera za názvom domény je lepšie napísať lomku:

Tu je, Mikhalych!

Veľa šťastia! Uvidíme sa čoskoro na stránkach blogu

Možno vás bude zaujímať

Kódovanie textu ASCII (Windows 1251, CP866, KOI8-R) a Unicode (UTF 8, 16, 32) - ako vyriešiť problém s krakozyabry
Ako som zvýšil návštevnosť webu na 300 ľudí denne?
Vyhľadávanie Yandex na webe a v internetovom obchode
Sitemap súboru Sitemap xml formáte pre Yandex a Google - ako vytvoriť mapu stránok v Joomla a WordPress alebo v online generátore

Všetky HTML odkazy rozdelené na vonkajšie a vnútorné. Externé odkazy sú odkazy, ktoré vedú z jednej lokality na inú lokalitu alebo súbor umiestnený na inej lokalite. Interné odkazy- sú to odkazy, ktoré odkazujú z jednej stránky lokality na inú stránku tej istej lokality alebo do sekcií tej istej stránky.

Všetky vonkajšie odkazy v atribúte href značky obsahovať absolútnu cestu k dokumentu, na ktorý odkazujú. Interné odkazy zase môžu obsahovať absolútnu cestu aj relatívnu (v tomto prípade záleží na vašich osobných preferenciách).

Ako gramatické pravidlá v rôzne jazyky, aj v programovaní platia pravidlá. Overenie vám umožňuje zistiť, či stránka spĺňa tieto pravidlá, a ak sa vyskytnú chyby a upozornenia, budú poskytnuté odporúčania na ich odstránenie. Ďalšie podrobnosti o potrebe takejto kontroly budú uvedené nižšie.

Čo ovplyvňuje platnosť stránky

Zamysleli ste sa niekedy nad tým, ako prehliadače „čítajú“ webovú stránku? Majú „motory“ na analýzu kódu a jeho konverziu do vizuálnej podoby pre ľudí. Bohužiaľ, každý prehliadač má svoj vlastný mechanizmus spracovania kódu, čo môže spôsobiť, že sa vaše stránky budú zobrazovať inak.

Neplatnú webovú stránku môžu prehliadače prečítať rôznymi spôsobmi. To bude mať za následok, že vaši návštevníci ani nebudú môcť správne vidieť obsah stránky vo svojich prehliadačoch. Overenie neskôr opraví takmer všetky hlavné rozdiely a vašu webovú stránku sprístupní takmer všetkým webovým prehliadačom (najčastejšou výnimkou je internet Explorer staršie verzie). Odtiaľ pochádza pojem „rozloženie naprieč prehliadačmi“. rozloženie, ktoré je rovnako dobré (kompatibilné) pre všetky populárne prehliadače.

Ako to ovplyvní SEO? Je dôležité pochopiť, že roboti vyhľadávacích nástrojov milujú sémantické webové stránky. Sémantické rozloženie je podľa Wikipédie prístupom k vytváraniu webových stránok na jazyk HTML, založené na pomocou HTML tagy podľa ich sémantiky (účelu). Štrukturálna sémantická webová stránka navyše umožňuje vyhľadávacím robotom presnejšie určiť význam jednotlivých prvkov webovej stránky a celého textu ako celku. Podľa spoločnosti Google platný kód žiadnym spôsobom neovplyvňuje hodnotenie stránok. Ale zároveň môže prítomnosť chýb v kóde negatívne ovplyvniť skenovanie mikrodát a prispôsobivosť mobilným zariadeniam.

Overovacie nástroje pre váš web

Pochopenie potreby absencie chýb overenia na stránkach lokality, poďme sa pozrieť na to, ako tieto chyby hľadať.

Je ich veľa bezplatné služby na overenie stránok, ako sú W3C Markup Validation Service , Web Page Analyzer , Browsershots a iné.

Ph.D. Lavlinsky N. E., technický riaditeľ Method Lab LLC

Nedávno zverejnené nový štandard na technológiu Preload (odkaz). Hlavným účelom tejto špecifikácie bolo umožniť jemnú kontrolu nad logikou načítania zdrojov stránky vývojárom.

Predchádzajúce štandardy

Myšlienka riadenia záťaže nie je nová. Predtým bolo vyvinutých niekoľko možností značiek odkaz s atribútmi podzdroj, predbežné vykreslenie a predvýber. Fungovali však trochu inak: s ich pomocou si môžete stiahnuť prvky stránky alebo celé stránky, ktoré môžu byť potrebné pri ďalšej navigácii na stránke. To znamená, že prehliadač odoslal takéto požiadavky s nízkou prioritou a naposledy. Ak potrebujete zvýšiť prioritu, neexistujú žiadne riešenia.

Načítavanie zdrojov s predbežným načítaním

Aká je nová špecifikácia? Po prvé, teraz nastáva načítanie so špecifikáciou toho, čo sa načítava. Na základe zadaného typu zdroja prehliadač nastaví prioritu sťahovania. Napríklad:

Po druhé, typ zdroja ( ako) umožňuje prehliadaču odosielať správne hlavičky, aby server mohol odosielať obsah s najlepšou možnosťou kompresie (napríklad odosielať obrázky WebP, ak ich prehliadač podporuje).

V druhom príklade načítavame súbor písma, ktorý špecifikuje špecifický formát (WOFF2), ktorý nie je podporovaný všetkými prehliadačmi. Pokiaľ je však podpora mechanizmu predbežného načítania rovnaká ako podpora tohto formátu, neexistujú žiadne problémy. Je možné zobraziť aktuálnu podporu mechanizmu.

Rýchlejšie načítanie písma

Príkladom zrýchlenia stránky pomocou predbežného načítania je načítanie hlboko uložených zdrojov, ako sú fonty. V bežnom procese sťahovania musí prehliadač najprv stiahnuť súbor CSS ukazujúci na písmo, súbor analyzovať a až potom zaradiť požiadavku na stiahnutie súboru písma.

Ak toto písmo vopred načítame v kóde stránky HTML, prehliadač odošle požiadavku ihneď po analýze HTML dokumentu, čo môže byť o niekoľko sekúnd skôr ako v bežnom prípade. A vieme, že pripojiteľné písma sú blokovacie prvky a spomaľujú vykreslenie písma na stránke, takže je potrebné ich načítať čo najrýchlejšie. Tento problém je obzvlášť akútny pri používaní HTTP / 2, keď prehliadač odosiela na server veľa požiadaviek naraz, v dôsledku čoho niektoré obrázky môžu vyplniť šírku pásma klienta a načítanie dôležitých zdrojov sa oneskorí.

Asynchrónne načítanie CSS

Súbory CSS vždy blokujú vykresľovanie stránky, takže akékoľvek zdroje CSS, ktoré môžu byť oneskorené, možno načítať ako normálne súbory a dynamicky prepojiť so stránkou.

Toto sa robí nasledovne:

Načítavanie kódu JS bez vykonania

Môže byť tiež užitočné vopred načítať kód skriptu v JS, aby ste ho mohli neskôr spustiť.

To možno vykonať pomocou nasledujúceho kódu:

Pokryli sme hlavné spôsoby použitia mechanizmu predpätia, ale možnosti nie sú obmedzené na toto, vykonajte svoje vlastné experimenty!

Mnoho webmasterov spravidla nahráva svoje stránky na hostiteľa ihneď po ich vytvorení. Väčšinou sa zároveň zameriavajú skôr na správnosť zmyslu obsahu textu, než na správnosť vnútorného kódu stránok.

Overenie stránky

Existujú však aj iné faktory, ktoré môžu ovplyvniť a ovplyvňujú pozíciu lokality. A zahŕňajú okrem iného aj technické faktory. No a k tým technickým patrí aj validácia stránky. čo to teda je?

Ak jednoducho povedané, potom validácia lokality je kontrola kódu lokality z hľadiska technickej zhody a chýb. Napríklad ste zabudli použiť koncovú značku - /html. V najnovšom HTML5 sa vizuálne nič nezmení. Ide však o chybu kódu.

Pri písaní kódu sú možné ďalšie chyby. A znova, moderný jazyk hypermarkup znesie veľa. Napríklad „zabudnutie“ uzatváracej značky /head. Opäť neuvidíte rozdiel. Ale ona je))

V skutočnosti sa pri písaní webu môže vyskytnúť pomerne veľa chýb. A čo je horšie, niektoré z týchto chýb sa môžu prejaviť aj vizuálne. No, možno budú bloky plávať, možno zarovnanie, alebo možno niečo iné. Potenciálne chyby, tisíce. A nie všetky sú nápadné.

Aké je nebezpečenstvo?

No, zdalo by sa, no, čo je na tom zlé? Áno, treba povedať, že často takéto chyby nevidno. Alebo skôr neviditeľné pre ľudí. Stránky našej stránky však môžu navštíviť nielen ľudia, ale aj vyhľadávacie pavúky, ktoré stránku úplne skenujú. A každú chybu, ktorú nájdu na stránke, prenesú na servery vyhľadávacích nástrojov, ako sú Yandex alebo Google.

A vyhľadávače, keď vidia, že stránka obsahuje veľa chýb v kóde, môžu dospieť k záveru, že stránka je zlá. A to znamená, že ho nezvýšia pri hľadaní. No, to už bude znamenať, že dovidenia návštevníci z hľadania.

Áno, treba priznať, že určitá pesimizácia stránky kvôli chybám pri validácii je pomerne zriedkavá. Ale to je celkom možné, čo znamená, že na validácii treba popracovať. A čo je pre to potrebné urobiť? Samozrejme, prvým krokom je nájsť chyby.

Ale keďže manuálne je to veľmi časovo náročné a nespoľahlivé podnikanie, potom na vyhľadávanie chýb používajú špeciálne služby, takzvané „Validátory“.

Validator Markup Validation Service.

Táto služba kontroluje správnosť HTML a XHTML kódov, ktoré sú základom väčšiny stránok pri tvorbe takmer akejkoľvek stránky a určuje jej vnútornú štruktúru. K tejto validačnej službe je možné pristupovať kliknutím na odkaz http://validator.w3.org

Je tu však predpoklad, ktorý platí aj pre iné validátory: kontrolovaná stránka alebo jej kontrolované stránky musia byť nahrané na hosting. V opačnom prípade validátor „nepozná“ adresu stránky a nebude môcť nič skontrolovať. Teraz už môžete zvážiť, ako na tomto validátore pracovať.

Po vstupe na stránku tejto služby sa zobrazí jej celý funkčný obrázok. Väčšina z toho, čo je zobrazené a napísané, sa však nevzťahuje na hlavnú kontrolu a všetku vašu pozornosť by ste mali venovať iba vstupnému oknu pre adresu kontrolovanej stránky:

Presne tam treba začať.

V skutočnosti je kontrola validácie stránky mimoriadne jednoduchá, ako celý náš smrteľný svet: do adresného okna služby je potrebné napísať adresu stránky, t.j. jeho URL a potom kliknite na „Skontrolovať“. Po takejto jednoduchej akcii validátor na niekoľko sekúnd „nafúkne“ a vydá nasledovné:

To znamená, že v kóde stránky nie sú žiadne chyby a môžete byť absolútne pokojní.

Môže však existovať aj takáto nežiaduca možnosť:

To je už horšie a znamená to, že v internom kóde kontrolovanej stránky sú nejaké chyby. To však vôbec nie je fatálne: stačí posunúť stránku nižšie a všetky chyby nájdené počas procesu overovania sa tam podrobne zapíšu.

Okrem toho validátor nielen vypíše nájdené chyby, ale aj presne ukáže, na ktorom riadku interného kódu sa tieto chyby nachádzajú. Nebudete ich teda musieť dlho hľadať. Tu, bez preháňania, môžeme s istotou povedať, že tento validor funguje perfektne.

Ale to nie je všetko: validátor nielenže označuje miesto zistenej chyby kódu, ale dáva aj pomerne úplné odporúčania, ako tieto chyby odstrániť. Samozrejme, na to nemusíte byť leniví a pozorne si prečítať všetko napísané.

Ako krátky a všeobecný záver môžeme povedať nasledovné:

1. táto služba validátora funguje skvele a dokáže stránku veľmi rýchlo skontrolovať.
2. No, malý, ale veľmi pekný dodatok: overenie stránky je bezplatné.
3. Teraz môžeme prejsť k ďalšiemu kroku: toto je kontrola kódu CSS.

Overovacia služba CSS

Vo všeobecnosti je to druhá funkcia vyššie uvedenej služby, ale nie je „vybrúsená“ nie na kontrolu HTML a XHTML kódu, ale konkrétne na kontrolu správnosti kódu. css štýl umiestnený na vonkajšom stole. A aby ste sa dostali na stránku služby, musíte prejsť na odkaz http://jigsaw.w3.org/css-validator .

Mimochodom, tu stojí za zmienku niečo príjemné: kontrola tejto služby je úplne zadarmo. Takže nevyťahujte peniaze z peňaženky - nechajte ich ležať až do správnej chvíle. Prejdime však k metodike práce na tejto druhej službe.

Vo všeobecnosti je všetka práca na validátore CSS úplne identická s kontrolou čistoty kódu. Preto nie je potrebné poskytovať samostatný obrázok panela s adresou validátora. Len o niečo nižšie stručne zvážime poradie samotnej kontroly a je to.

Na to musíte adresný riadok napísať URL CSS tabuľky, napríklad „http://my site/style.css“ a potom stlačte tlačidlo s ruským nápisom „Skontrolovať“. V súlade s tým tento validátor tiež „nafúkne“ na niekoľko sekúnd a poskytne požadovaný výsledok:

To znamená, že CSS tabuľka je napísaná správne a neboli v nej nájdené žiadne chyby.

A tu je tiež príjemné prekvapenie: ak rolujete na stránke o niečo nižšie, potom sa tam napíše optimalizovaný kód pre vašu tabuľku CSS, z ktorej sa odstránia všetky nepotrebné nápisy a všetky značky kódu budú usporiadané v poradí ktorý spĺňa optimálne pracovné požiadavky všetkých vyhľadávacích nástrojov. Zostáva len skopírovať túto dokonalú vzorku kódu a vložiť ju do tabuľky CSS.

Je dosť možné, že sa niečo také stane:

To znamená, že v kóde CSS sa našli nejaké chyby, ale toho by ste sa vôbec nemali báť. Hneď pod červenou čiarou vám validátor presne povie, ktorá značka je nesprávne napísaná. Zostáva len nájsť tieto značky v šablóne štýlov a vykonať potrebné opravy.

A samozrejme, potom nahrajte opravenú šablónu štýlov na hostiteľa a ak je tam zelená čiara, môžete veselo skopírovať optimalizovaný kód štýlu tabuľky CSS. Je úplne jasné, že vtedy je najlepšie zmeniť starý kód na nový a optimalizovaný.

Krátke zhrnutie.

Dve najzákladnejšie a povinné kontroly overenia webových stránok boli uvedené vyššie. Bez týchto kontrol by ste ani nemali otvárať indexovanie pre vyhľadávače v súbore robots.txt. V opačnom prípade môže byť stránka na indexovanie ignorovaná vyhľadávače a budú považované za chybné s príslušnými sankciami.

Aby ste tomu zabránili, musíte stráviť len pár minút, aby ste boli absolútne pokojní a úplne si istí technickým stavom vášho webu a všetkých jeho stránok. Samozrejme je potrebné vykonať aj dodatočné kontroly odkazov a kotiev, viditeľnosti stránky na mobilné zariadenia a parametre iných kódov. Len tak možno stránku považovať za pripravenú na svoje plné fungovanie a na úspešné a rýchla propagácia v TOP.

Vopred by som chcel povedať, že všetky ostatné kontroly sú také rýchle a jednoduché ako tie, o ktorých sme hovorili vyššie – stačí si pozorne prečítať postup práce s validátorom.

Pridané dňa 19.04.2018

Bežné chyby platnosti pri overovaní kódu HTML

Rozhodli sa aktualizovať článok. chyby HTML kódy, ktoré sa často nachádzajú na stránkach. V každom prípade som ich mal veľa)). Validátor zvýrazní chyby žltou farbou.

1) Chyba: Odkaz na znak nebol ukončený bodkočiarkou.

Chyba: znak nebol prerušený bodkočiarkou - podľa toho ho treba pridať.

2) Upozornenie: Sekcii chýba nadpis. Zvážte použitie prvkov h2-h6 na pridanie identifikujúcich nadpisov do všetkých sekcií.

Upozornenie: Táto sekcia nemá názov. Zvážte použitie prvkov h2-h6 na pridanie identifikujúcich nadpisov do všetkých sekcií. Všetko je tu jasné, treba pridať aspoň jeden podnadpis. To ani nie je chyba, ale odporúčanie.

3) Chyba: Prvok noindex nie je v tomto kontexte povolený ako potomok prvku p.

Chyba: prvok noindex nie je povolený ako detský prvok p prvok v tomto kontexte. (Potlačiť ďalšie chyby z tohto podstromu.)
Riešenie je jednoduché, musíte zakomentovať značku noindex, pohľad bude vyzerať takto:

4) Chyba: Stredný prvok je zastaraný.

Chyba: značka "center" je zastaraná - musí sa nahradiť, ak hovoríme o img, potom môžete použiť atribút align. Ak je niečo iné vycentrované, nahraďte to znakom div.

5) Prvok img musí mať atribút alt, s výnimkou určitých

Chyba: Prvok img musí mať atribút alt – tu je všetko jasné, musíte pridať atribút alt, aj keď je prázdny, chyba zmizne.

6) Atribút width na prvku td je zastaraný. Namiesto toho použite CSS.

Chyba: Atribút 'width' prvku 'td' je zastaraný

7) Atribút type nie je potrebný pre zdroje javascriptu

Chyba: Atribút type nie je potrebný pre zdroje javascriptu. Riešením je jednoducho odstrániť všetko nepotrebné a ponechať len značku „script“.

8) Atribút align na prvku img je zastaraný.

Chyba: Atribút align na prvku img je zastaraný. Vykonajte zarovnanie obrazu div.