Dobrý den, milí čtenáři tohoto blogu. Dnes se chci dotknout tématu vytváření jedinečných URL na internetu a mluvit o principech tvorby relativní a absolutní vazby.

Samozřejmě, že téma vytváření adres URL nebo jejich rozšířenější verze URI (uri) je poměrně komplikované, pokud pátráte hluboko a snažíte se dostat k pravdě.

To ale nepotřebujeme, protože stačí porozumět struktuře URL v jeho aplikaci.

No, také si myslím, že bude užitečné pochopit, proč a jak můžete tvořit relativní odkazy pro váš zdroj a nepoužívejte pro tyto účely absolutní, pokud to není výslovně nutné.

URL adresy – co to jsou a jak ovlivňují indexování stránek

Pojďme se tedy podívat, co je URL, proč je potřeba a z jakých částí se skládá. Jak víte, vyhledávače nevytvářejí jako celek, ale jako soubor jednotlivých stránek. Budou pak jiné vyhledávací dotazy(přečtěte si více o výběru klíčová slova ve Wordstatu založeném na .

URL a URI

Tedy jakýkoli dokument (webová stránka) na internetu má svou vlastní jedinečnou adresu URL, což je zkratka pro Uniform Resource Locator (lokátor zdrojů). Ten, stejně jako protokol HTTP, ale i jak, vyvinul a vytvořil stejný člověk – Tim Berners-Lee (otec zakladatele projektu).

Celkově je URL speciálním případem jiného nazývaného identifikátoru URI(Uniform Resource Identifier - jednotný identifikátor zdroje), ale vy a já, všechny tyto jemnosti s největší pravděpodobností nebudou při práci s našimi stránkami potřeba (zbytečné). Zkusme obecně porozumět tomu, co to je a z jakých částí se skládá, a pak přejdeme k relativním a absolutním vazbám.

URL adresa je způsob, jak na něco na internetu jednoznačně ukázat. Slouží nejen pro práci se stránkami () přes protokol http (i přes ftp), ale nás bude samozřejmě zajímat aplikace tohoto identifikátoru na Web (protokoly http a https). URL v tomto případě bude vypadat nějak takto (níže uvedu obecný vývojový diagram její konstrukce, ale prozatím bych rád začal jednoduchým častým příkladem):

https://.html

V tomto příkladu adresy část s „http“ označuje protokol přenosu dat nebo, pokud se budete řídit terminologií specifikace, schéma (protože totéž není protokol přenosu dat na rozdíl od http nebo ftp, ale je také použito v URL adresa x)..stránka") - nebo .

WWW a další zrcadla stránek, která je potřeba slepit

Web má specifika označení názvu domény v adrese URL webu, což může být s WWW nebo bez. Abyste byli úspěšní, je velmi důležité tato dvě zrcadla vašeho webu slepit. Často vám může poskytovatel hostingu provést lepení zrcadel, ale to bude určitě potřeba zkontrolovat.

Tito. pro vyhledávače jsou stránky s WWW nebo bez něj úplně jiné a bez jejich slepení se mezi ně rozdělí hmota odkazu v neznámém poměru. WWW v adrese je ze své podstaty jakýmsi atavismem, který dělá váš Doménové jméno doména druhé úrovně třetího.

Totéž platí při přesunu webu na bezpečný https protokol s http- pro vyhledávače to bude jiný web.

Na používání není nic špatného www v adrese URL webu ne, ale musíte jasně definovat hlavní zrcadlo (přes a skrz, stejně jako prostřednictvím psaní direktivy vašeho webu), které bude indexovat vyhledávače a které se bude podílet na hodnocení.

E. „bez atavismu“ a pokud přidáte tuto nádhernou předponu na kteroukoli z mých adres URL, dojde k automatickému přesměrování na adresu „bez WWW“.

https://www..html

Můžete slepit nejen zrcadla popsaná výše, ale i jakákoli další doménová jména, která vám patří. Pokud jsou například možné různé pravopisy v latinských písmenech známé značky, pak se nakupují všechny možné domény (varianty pravopisu s chybami, v různých doménové zóny atd.) a držet pohromadě. Poté při přístupu na stránku na kterékoli z možných URL adres se otevře hlavní zrcadlo.

Například na reg.ru můžete vidět potenciální zrcadla nebo volné domény k registraci (navrhovaný název domény můžete zadat přímo do formuláře níže):

Odkud pocházejí další adresy URL (duplicitní stránky) vašeho webu v indexu vyhledávače

Ale zpět k našim ovečkám. Část adresy URL, která se nachází za třetím lomítkem (/) – v našem příkladu je to „papka/fail.html“ – se nazývá cesta ke konkrétnímu objektu (dokumentu nebo souboru). V našem případě se jedná o dokument „fail.html“, který leží v adresáři „papka“, který zase leží v kořenové složce ( kořen v URL vždy odpovídá třetímu lomítku vlevo, odjet).

To ale není vše, co lze do adresy napsat. Přes URL si různé předávají tzv. GET parametry, které se po vložení otazníku přidávají na její úplný konec, například takto:

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

Celý problém je v tom vyhledávače dvě takové adresy URL (s parametry Get a bez nich) jsou zcela odlišné webové dokumenty a každá z nich bude indexována vyhledávači.

Ke stejné adrese URL lze přidat tolik různých parametrů Get, kolik chcete, a to vše bude indexováno společnostmi Yandex a Google, pokud nevytvoříte příslušné zákazy v souboru robots.txt, jehož odkaz je uveden těsně nad. V opačném případě mohou vyhledávače pro mnoho duplicitního obsahu(stejný obsah dostupný na různých adresách).

Také například do domovská stránka můj zdroj je přístupný pomocí dvou různých adres URL:

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

(dokonce tři - také https: // site /) a v každém případě se otevře hlavní stránka. To je dost špatné, protože vyhledávače najdou tři různé stránky(z jejich pohledu mají různé adresy URL), ale se stejným obsahem, který se jim, oh, nelíbí.

Proto jsem to udělal tak, že když zadáte kteroukoli z výše uvedených adres URL, provede se přesměrování na adresu URL ve tvaru „https: // site /“. To se provádí zpravidla pomocí přesměrování 301 v souboru .htaccess, a to buď přímo v nastavení serveru vámi nebo vaším hostitelem.

Pro více informací si přečtěte příspěvek, na který je odkazováno.

Struktura URL a překódování na zakódované URL

Obvykle, kompletní blokové schéma URL lze reprezentovat takto:

Ve skutečnosti zpravidla nepoužívají přihlašovací jméno, heslo a port, i když mohou být pro přístup na placené stránky nutné zadat:

http://login: [e-mail chráněný] site/platniy-access.html

Zcela běžně se také instaluje FTP přihlašovací hesla, kde může použít i nestandardní port, ale odlišný od výchozího pro tento protokol. Poté pro přístup k takovým zdrojům ftp server budete muset zadat adresu URL takto:

ftp:// přihlášení: [e-mail chráněný] webové stránky: 6789/samoe-nujnoe/cimus

O parametrech GET, které lze napsat na tuto adresu za otazníkem, jsme si již řekli a zmínili, že je nutné zakázat indexování stránek, v jejichž URL jsou takové parametry (výše je odkaz na článek o robotů, kde je toto vše podrobně popsáno).

Url adresy ve formě hash odkazů, které otevřou stránku na správném místě

Ale kromě všech těchto věcí, které lze do URL zahrnout, ve výše uvedeném vývojovém diagramu můžete vidět tzv. Kotva, který se přidává na úplný konec za oddělovací znak libry „#“ (Adresy URL obsahující kotvy se obvykle nazývají hash odkazy).

Uvnitř jsou předem připevněny kotvy html kód dokumentu (stránky) přidáním atributu ID="label" do požadovaného Html tagu (odstavce, nadpisu nebo jiného vhodného) a následným přidáním názvu této kotvy do URL stránky pomocí symbolu hash "#", budete mít možnost přeskočit nikoli na začátek této webové stránky, a hned na místo, kde byla umístěna kotva (každý automaticky posune stránku na správné místo).

O organizaci navigace na stránce a včetně této informace si přečtěte tyto články.

Jaké znaky lze použít v adresách URL?

Za zmínku také stojí různá kódování, která se v URL používají. Bez překódování mohou používat pouze omezené množství znaky. Obvykle se doporučuje omezit se na sadu znaků: ,,,[_],[-].

Obecně, abyste se vyhnuli chybám, doporučoval bych vám nastavit názvy souborů a URL stránek vašeho webu malými písmeny, protože u unixových systémů (na kterých funguje většina webových serverů) jsou znaky v horní a malá písmena se liší (na rozdíl od Windows). Kvůli různým registrům může dojít ke zbytečnému zmatku.

Použití jakýchkoli jiných znaků (včetně ruštiny) v adresách URL je povoleno, ale bude překódování tyto stejné znaky (kódování URL).

Smutný je nestravitelný vzhled URL se symboly, například azbukou, které se získají po překódování. Každý znak azbuky je zakódován pomocí dvou bajtů v , zapsán v šestnáctkové soustavě a oddělen znakem procenta „%“. Například tato adresa URL:

https://web/kdo je nový/

po konverzi to bude vypadat 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

Obecně se ukazuje, že to není příliš cool a plánují se vypořádat s tímto nestravitelným druhem URL v národních kódováních, ale tato věc není tak horká.

V souvislosti se vším výše uvedeným bych poradil, kdy na mém CMS nevytvářejte adresy stránek v ruštině, a zejména proto, že podle mnoha promotérů to bude lepší z hlediska optimalizace SEO pro Yandex a Google.ru.

Relativní a absolutní odkazy na webu

Začněme s absolutní odkazy, protože v tomto případě nebude třeba říkat nic zvláštního, kromě toho, co jsme již probrali v tomto článku. Že. absolutní odkaz musí splňovat požadavky, které klademe na URL adresu – protokol přenosu dat, název domény webu (hostitele) a cestu k požadovaný web dokument. Všechno.

V Html se pomocí speciálních A tagů (hyperlinků) tvoří absolutní odkaz, tzn. abychom to odložili, budeme muset jednoduše obklopit požadované místo v textu dokumentu (frázi nebo obrázek) úvodní a závěrečnou značkou hypertextového odkazu a napsat do úvodní značky A v atributu „Href“ absolutní cestu k dokument, ke kterému se návštěvník bude muset dostat po kliknutí na něj:

PHPMyAdmin

Vše je velmi jednoduché.

Výhody relativních odkazů a jak je můžete získat

Absolutní hypertextové odkazy se však obvykle používají pouze tehdy, když chtějí odkazovat na externí stránky, a pro interní přechody se většina webmasterů (chytří a bystrí, ne jako já 🙂) snaží použít relativní odkazy. A existuje pro to několik důvodů:

  1. Relativní odkazy jsou ze své podstaty kratší a nezatěžují kód webu (ostatně každá maličkost je v této věci důležitá).
  2. Navíc při přechodu na jinou doménu nebo změně protokolu na https nebudete muset měnit všechny odkazy na webu.
  3. Některé návrhy internetových projektů lze navíc rychle a bezbolestně přenést do jiného zdroje, aniž by se měnily vnitřní relativní odkazy.

Takže, soudě podle názvu, adresa webového dokumentu, na který odkazují, musí být zapsána relativně k dokumentu vašeho webu, z jehož kódu bude tento relativní odkaz umístěn (tanec od kamen). Druhou možností jejich nastavení je použít jako výchozí bod kořenovou složku. Tohle jsou přesně dva způsoby, jak vytvořit relativní odkazy, které nyní zvážíme.

Vytvořte relativní odkazy vzhledem k dokumentu, ze kterého jsou připojeny

Nejjednodušší a nejkratší způsob, jak zapsat relativní cestu (což znamená hodnotu atributu Href značky hypertextového odkazu), získáme, když oba webové dokumenty: dárce (od kterého je připojen) i příjemce (soubor nebo webový dokument ke které vede) jsou umístěny ve stejné složce na serveru.

Kotva

Nyní předpokládejme, že dokument příjemce je ve složce, která se nachází ve stejném adresáři jako dokument dárce.

Jak by v tomto případě vypadal relativní odkaz? Vše je také docela jednoduché:

Kotva

Zatím si myslím, že je vše jasné - předepíšeme cestu k souboru nebo dokumentu příjemce (název složky a přes přímé lomítko "/" název souboru nebo dokumentu). Tito. abychom se dostali od dárce k příjemci, budeme muset otevřít složku, jejíž název uvádíme v příslušném odkazu.

Nyní uvažujme opačnou situaci, kdy samotný dárcovský dokument leží uvnitř složky, ze které je třeba umístit relativní odkaz na dokument nebo soubor příjemce, který již leží o úroveň výše:

Abychom mohli přejít z dokumentu dárce do souboru příjemce (nebo dokumentu), potřebujeme přesunout o úroveň výše z této složky. K tomu je k dispozici speciální prvek - dvě tečky za sebou a pak přes lomítko se zapíše další cesta k akceptoru. Takže pro výše uvedený příklad by relativní cesta byla:

Co je URL

Pokud potřebujete přejít o dvě úrovně nahoru, bude záznam vypadat takto:

Co je URL

Pokud poté, abyste mohli nastavit relativní cestu k příjemci, budete také muset zadat nějakou složku na druhé horní úrovni (vzhledem k dokumentu dárce):

Komplexní design dráhy

Takových sestupů do složek a výstupů o úroveň výš může být tolik, hlavní je, abyste se sami nepletli.

Vytvořte odkaz vzhledem ke kořenové složce

Napsali jsme všechny výše uvedené odkazy týkající se dárcovského dokumentu, ze kterého je hypertextový odkaz připojen, ale můžete jako výchozí bod vezměte kořenovou složku místo. Kořen v relativních cestách vypadá jako jedno lomítko "/".

Že. přechod na hlavní stránku bude vypadat docela jednoduše, ale extravagantně:

Kotva

Například, absolutní cesta může vypadat takto:

Kotva

ALE relativní do stejného souboru bude poněkud kratší:

Text

Jak odkazovat na složku v relativní a absolutní podobě

Chci vás upozornit na jednu nuanci, kterou je třeba vzít v úvahu při vytváření absolutních i relativních odkazů. Pokud chceš viz složku, pak nezapomeňte na konec takového hypertextového odkazu (za jeho názvem) umístit lomítko "/". To znamená, že pokud chci otevřít obsah složky, měl bych napsat:

Kotva

Tak to ne:

text

Ve druhém případě se server při zpracování nejprve pokusí najít soubor s názvem "uploads" (přesně tento bez přípon) a nenajde jej, pak bude hledat takovou složku. Proto pište ihned lomítko za názvem požadované složky, nebudete brát další zdroje ze svého serveru při hledání toho, co tam není.

Měli byste si to také uvědomit při kontaktu v relativním nebo absolutním odkazu složku, zobrazí webový server tzv. indexový soubor, který v něm leží a který se zpravidla nazývá index.html nebo index.php. Pokud ve složce není žádný indexový soubor, pak pokud je zabezpečení na serveru nesprávně nakonfigurováno, zobrazí se výpis jeho obsahu, což může vést ke snížení zabezpečení vašeho zdroje.

Určitě pokud to najdeš.

Mimochodem, přístup na hlavní stránku webu je v podstatě také přístupem do složky (root) a zároveň se spustí indexový soubor ležící v rootu (v mém případě je to index.php ). Pokud tedy přistupujete ke složce, pak ke snížení zatížení serveru za názvem domény je lepší napsat lomítko:

Tady to je, Mikhalyči!

Hodně štěstí! Brzy se uvidíme na stránkách blogu

Mohlo by vás zajímat

Kódování textu ASCII (Windows 1251, CP866, KOI8-R) a Unicode (UTF 8, 16, 32) - jak opravit problém s krakozyabry
Jak jsem zvýšil návštěvnost webu na 300 lidí za den?
Vyhledávání Yandex na webu a v internetovém obchodě
Soubor Sitemap souboru Sitemap xml formátu pro Yandex a Google - jak vytvořit mapu webu v Joomla a WordPress nebo v online generátoru

Všechno HTML odkazy dělí na vnější a vnitřní. Externí odkazy jsou odkazy, které vedou z jednoho webu na jiný web nebo soubor umístěný na jiném webu. Interní odkazy- jedná se o odkazy, které odkazují z jedné stránky webu na jinou stránku stejného webu nebo na části stejné stránky.

Všechno externí odkazy v atributu href značky obsahovat absolutní cestu k dokumentu, na který odkazují. Interní odkazy zase mohou obsahovat jak absolutní cestu, tak i relativní (v tomto případě záleží na vašich osobních preferencích).

Všechny vazby lze také podmíněně rozdělit na relativní a absolutní. Relativní odkazy jsou HTML odkazy obsahující relativní cesty, relativní odkazy mohou být pouze interní. Absolutní odkazy jsou odkazy obsahující absolutní cesty, absolutní odkazy mohou být externí i interní.

Relativní cesta

Relativní cesta znamená, že zadání cesty k požadovanému souboru nebo stránce vašeho webu začíná relativně k adresáři, ve kterém se nachází stránka s odkazem, nebo relativně ke kořenovému adresáři webu. Zvažte části, ze kterých se může skládat relativní cesta:

Části cesty Popis Hodnotové příklady
Název souboru Pokud jako hodnotu atributu zadáte pouze název souboru, znamená to, že požadovaný soubor je umístěn ve stejné složce jako stránka s odkazem. "stranka.html"
katalog/ Pokud se soubor, ke kterému potřebujete zadat cestu, nachází v podřízeném adresáři vzhledem k souboru s odkazem, znamená to, že musíme jít o úroveň níže (do podřízené složky aktuálního adresáře), v tomto případě cesta začíná názvem podřízeného adresáře, za ním je název označen lomítkem "/", slouží k oddělení částí cesty, za ním je uvedeno jméno souboru, který potřebujeme.

Poznámka: Můžete přejít dolů pouze do tolika složek, kolik jste je vytvořili. Pokud jste například vytvořili složku 10 úrovní pod kořenem, můžete zadat cestu, která vás povede o 10 níže. Pokud však máte tolik úrovní, s největší pravděpodobností to znamená, že organizace vašeho webu je zbytečně nepohodlná.

"adresar/stranka.html"

"adresar1/adresar2/stranka.html"

../ Pokud potřebujete uvést, že soubor, na který odkazujete, je v nadřazené složce, použijte symboly .. (dvě tečky), znamenají přechod o úroveň výš (do nadřazené složky aktuálního adresáře). Dále určíme lomítko "/" pro oddělení částí cesty a zapíšeme název souboru.

Poznámka: symboly .. lze použít tolikrát, kolikrát chcete za sebou, jejich použitím se pokaždé posunete o jednu složku nahoru. Můžete však šplhat nahoru, dokud se nedostanete do kořenové složky vašeho webu. Nemůžete jít výše než do této složky.

"../stranka.html"

"../../stranka.html"

" ../../../cat1/cat2/page.html " - přejdeme z aktuální složky o tři adresáře výše a již z ní sejdeme o dvě úrovně dolů na požadovaný soubor

/ Relativní cesta nemusí vždy začínat vzhledem k aktuálnímu umístění odkazující stránky, může také začínat relativně ke kořenovému adresáři webu. Pokud je například požadovaný soubor umístěn v kořenovém adresáři, cesta může začínat znakem " / ", po kterém stačí zadat název požadovaného souboru, který se nachází v kořenovém adresáři.

Poznámka: když je znak " / " uveden jako první, znamená to, že cesta začíná v kořenovém adresáři.

"/stranka.html"

"/cat1/cat2/car.png"

Absolutní cesta

Absolutní cesta se obvykle používá k určení cesty k souboru, který je umístěn na jiném síťovém prostředku. Je to úplná adresa URL souboru nebo stránky. Nejprve je v adrese uveden použitý protokol a poté název domény (název webu). Například: http://www.example.ru – takto vypadá absolutní cesta ke konkrétní webové stránce. http:// je protokol přenosu dat a www.example.ru je název webu (domény).

Absolutní cestu lze také použít na vašem vlastním webu. V rámci webu se však doporučuje použít jako hodnotu odkazu relativní cestu.

Nyní se podívejme na to, co je URL-adresa. Každá webová stránka na internetu má svou jedinečnou adresu, které se říká URL. Zkratka URL znamená U jednotný R zdroj L ocator (Uniform Resource Address), jednoduše řečeno, URL je lokátor zdrojů. Tento způsob zápisu adresy je na internetu standardizován.

Validace je jedním z nejdůležitějších aspektů dobrého webdesignu. Podívejme se, co to je a jak zkontrolovat platnost HTML kódu. Jako příklad si uveďme nejrozšířenější redakční systém (CMS) – WordPress. Poté se podělíme o seznam chyb, se kterými jsme se v praxi setkali, a hlavně nabídneme vlastní, osvědčené, metody, jak je odstranit.

Proč je nutné kontrolovat platnost webu

Jednoduše řečeno, kontrola webové stránky určí, zda je v souladu se standardy vyvinutými konsorciem World Wide Web Consortium (W3C). To se obvykle provádí kontrolou platnosti jednotlivých stránek pomocí online ověřovací služby W3C.

Stejně jako gramatická pravidla v různé jazyky, existují i ​​pravidla v programování. Ověření vám umožní zjistit, zda stránka těmto pravidlům vyhovuje, a pokud se vyskytnou chyby a varování, budou poskytnuta doporučení k jejich odstranění. Více podrobností o potřebě takové kontroly bude diskutováno níže.

Co ovlivňuje validitu webu

Přemýšleli jste někdy o tom, jak prohlížeče „čtou“ webovou stránku? Mají „motory“ pro analýzu kódu a jeho převedení do vizuální podoby pro lidi. Každý prohlížeč má bohužel svůj vlastní mechanismus zpracování kódu, což může způsobit, že se vaše stránky budou zobrazovat jinak.

Neplatnou webovou stránku mohou prohlížeče číst různými způsoby. To bude mít za následek, že vaši návštěvníci ani nebudou moci správně zobrazit obsah stránky ve svých prohlížečích. Validace později opraví téměř všechny hlavní rozdíly a zpřístupní vaši webovou stránku téměř všem webovým prohlížečům (nejčastěji výjimkou je internet Explorer starší verze). Odtud pochází termín „rozvržení napříč prohlížeči“. rozložení, které je stejně dobré (kompatibilní) pro všechny oblíbené prohlížeče.

Jak to ovlivní SEO? Je důležité pochopit, že roboti vyhledávačů milují sémantické webové stránky. Sémantické rozvržení je podle Wikipedie přístup k vytváření webových stránek na jazyk HTML, na základě pomocí HTML tagy podle jejich sémantiky (účelu). Strukturální sémantická webová stránka navíc umožňuje vyhledávacím robotům přesněji určit význam jak jednotlivých prvků webové stránky, tak celého textu jako celku. Platný kód podle Googlu nijak neovlivňuje hodnocení stránek. Zároveň ale může přítomnost chyb v kódu negativně ovlivnit skenování mikrodat a přizpůsobivost mobilním zařízením.

Ověřovací nástroje pro váš web

Pochopení potřeby absence chyb ověření na stránkách webu, podívejme se, jak tyto chyby hledat.

Je jich mnoho bezplatné služby pro ověření webu, jako je W3C Markup Validation Service , Web Page Analyzer , Browsershots a další.

Ph.D. Lavlinsky N. E., technický ředitel Method Lab LLC

Nedávno zveřejněné nový standard na technologii Preload (odkaz). Hlavním účelem této specifikace bylo umožnit jemnou kontrolu nad logikou načítání zdrojů stránky vývojářem.

Předchozí normy

Myšlenka řízení zátěže není nová. Dříve bylo vyvinuto několik možností tagů odkaz s atributy podzdroj, předvykreslení a přednačítání. Fungovaly však trochu jinak: s jejich pomocí si můžete stáhnout prvky stránky nebo celé stránky, které mohou být vyžadovány při další navigaci na webu. To znamená, že prohlížeč odeslal takové požadavky s nízkou prioritou a jako poslední. Pokud potřebujete zvýšit prioritu, neexistovala žádná řešení.

Načítání zdrojů s přednačtením

Jaká je nová specifikace? Za prvé, nyní dochází k načítání se specifikací toho, co se načítá. Na základě zadaného typu prostředku prohlížeč nastaví prioritu stahování. Například:

odkaz rel="preload" href="/js/script.js" as="script">
odkaz rel="preload" href="/fonts/1.woff2" as="font" type="font/woff2" crossorigin>

Za druhé, typ zdroje ( tak jako) umožňuje prohlížeči odesílat správná záhlaví, aby server mohl odeslat obsah s nejlepší možností komprese (například odeslat obrázky WebP, pokud je prohlížeč podporuje).

Ve druhém příkladu načítáme soubor písma, který určuje konkrétní formát (WOFF2), který není podporován všemi prohlížeči. Dokud je však podpora mechanismu předběžného načítání stejná jako podpora tohoto formátu, nedochází k žádným problémům. Aktuální podporu mechanismu lze zobrazit.

Rychlejší načítání písem

Příkladem zrychlení webu pomocí předběžného načítání je načítání hluboce skrytých zdrojů, jako jsou fonty. Při běžném procesu stahování musí prohlížeč nejprve stáhnout soubor CSS ukazující na písmo, soubor analyzovat a teprve poté zařadit do fronty požadavek na stažení souboru písma.

Pokud toto písmo předem načteme v kódu HTML stránky, prohlížeč odešle požadavek ihned po analýze HTML dokumentu, což může být o několik sekund dříve než v běžném případě. A víme, že zásuvná písma jsou blokovací prvky a zdržují vykreslení písma na stránce, takže je třeba je načíst co nejrychleji. Tento problém je obzvláště akutní při použití HTTP / 2, kdy prohlížeč odesílá na server mnoho požadavků najednou, v důsledku čehož některé obrázky mohou zaplnit šířku pásma klienta a načítání důležitých zdrojů bude zpožděno.

Asynchronní načítání CSS

Soubory CSS vždy blokují vykreslování stránky, takže jakékoli zdroje CSS, které mohou být zpožděny, lze načíst jako normální soubory a dynamicky je propojit se stránkou.

To se provádí následovně:

odkaz rel = "preload" as= "style" href = "async_style.css" onload = "this.rel="stylesheet"" >

Načítání kódu JS bez provedení

Může být také užitečné předem načíst kód skriptu v JS, aby bylo možné jej spustit později.

To lze provést pomocí následujícího kódu:

odkaz rel="preload" as="script" href="async_script.js"načtení= "varscript = document.createElement("script"); script.src = this.href; document.body.appendChild(script);">

Probrali jsme hlavní způsoby použití mechanismu předpětí, ale možnosti nejsou omezeny na toto, proveďte své vlastní experimenty!

Mnoho webmasterů zpravidla nahrává své stránky na hostitele ihned po jejich vytvoření. Většinou se přitom soustředí spíše na správnost smyslu obsahu textu než na správnost vnitřního kódu stránek.

Ověření webu

Existují ale další faktory, které mohou ovlivnit a ovlivňují pozici webu. A zahrnují mimo jiné i technické faktory. No a k těm technickým patří i validace webu. Tak co to je?

Pokud jednoduše řečeno, pak ověření webu je kontrola kódu webu z hlediska technické shody a chyb. No, například jste zapomněli použít uzavírací značku - /html. V nejnovějším HTML5 se vizuálně nic nezmění. Jedná se však o chybu kódu.

Při psaní kódu jsou možné další chyby. A znovu, moderní jazyk hypermarkup vydrží hodně. Například "zapomenutí" uzavírací značky /head. Opět neuvidíte rozdíl. Ale ona je))

Ve skutečnosti se při psaní webu může vyskytnout poměrně hodně chyb. A co je horší, některé z těchto chyb se mohou projevit i vizuálně. No, možná budou bloky plavat, možná zarovnání, nebo možná něco jiného. Potenciální chyby, tisíce. A ne všechny jsou nápadné.

jaké je nebezpečí?

No, zdálo by se, no, co je na tom špatného? Ano, nutno říci, že často takové chyby nejsou vidět. Nebo spíše pro lidi neviditelné. Stránky našeho webu však mohou navštívit nejen lidé, ale také vyhledávací pavouci, kteří web kompletně prohledají. A každou chybu, kterou na webu najdou, přenášejí na servery vyhledávačů, jako je Yandex nebo Google.

A vyhledávače, když vidí, že stránka obsahuje mnoho chyb v kódu, mohou snadno dojít k závěru, že stránka je špatná. A to znamená, že to při hledání nezvednou. No, to už bude znamenat, že sbohem návštěvníkům z hledání.

Ano, nutno přiznat, že určitá pesimizace webu kvůli chybám ve validaci je poměrně vzácná. Ale to je docela možné, což znamená, že se musí pracovat na validaci. A co je pro to potřeba udělat? Samozřejmě prvním krokem je najít chyby.

Ale protože ručně je to velmi časově náročné a nespolehlivé podnikání, pak k hledání chyb používají speciální služby, tzv. „Validátory“.

Validator Markup Validation Service.

Tato služba kontroluje správnost HTML a XHTML kódů, které jsou základem většiny stránek při tvorbě téměř jakéhokoli webu, a určuje jeho vnitřní strukturu. Tato služba validátoru je přístupná kliknutím na odkaz http://validator.w3.org

Je zde ale předpoklad, který platí i pro ostatní validátory: kontrolovaný web nebo jeho kontrolované stránky musí být nahrány na hosting. V opačném případě validátor „nezná“ adresu webu a nebude moci nic zkontrolovat. Nyní již můžete zvážit, jak na tomto validátoru pracovat.

Po vstupu na stránku této služby se zobrazí její celý funkční obrázek. Ale většina toho, co je zobrazeno a napsáno, se nevztahuje na hlavní kontrolu a veškerou svou pozornost byste měli věnovat pouze vstupnímu oknu pro adresu kontrolované stránky:

To je přesně místo, kde musíte začít.

Kontrola validace webu je ve skutečnosti velmi jednoduchá, stejně jako celý náš smrtelný svět: do adresního okna služby musíte napsat adresu webu, tzn. jeho URL a poté klikněte na „Zkontrolovat“. Po takové jednoduché akci validátor na několik sekund „bafne“ a vydá následující:

To znamená, že v kódu stránky nejsou žádné chyby a můžete být naprosto v klidu.

Ale může existovat i taková nežádoucí možnost:

To už je horší a znamená to, že v interním kódu kontrolované stránky jsou nějaké chyby. To však není vůbec fatální: stačí posouvat stránku níže a všechny chyby nalezené během procesu ověřování se tam podrobně zapíší.

Validátor navíc nejen vypíše nalezené chyby, ale také přesně ukáže, na kterém řádku interního kódu se tyto chyby nacházejí. Nebudete je tedy muset dlouho hledat. Zde můžeme bez přehánění s jistotou říci, že tento validor funguje perfektně.

Ale to není vše: validátor nejen indikuje umístění detekované chyby kódu, ale také dává poměrně kompletní doporučení, jak tyto chyby odstranit. K tomu samozřejmě nemusíte být líní a pečlivě si přečíst vše napsané.

Jako krátký a obecný závěr můžeme říci následující:

  1. tato služba validátoru funguje skvěle a dokáže stránky zkontrolovat velmi rychle.
  2. No, malý, ale velmi pěkný dodatek: ověření stránek je zdarma.
  3. Nyní můžeme přejít k dalšímu kroku: tím je kontrola kódu CSS.

Ověřovací služba CSS

Obecně se jedná o druhou funkci výše uvedené služby, která je však „vybroušena“ nikoli pro kontrolu HTML a XHTML kódu, ale konkrétně pro kontrolu správnosti kódu styl css umístěné na vnějším stole. A abyste se dostali na stránku služby, musíte kliknout na odkaz http://jigsaw.w3.org/css-validator .

Mimochodem, zde stojí za zmínku něco příjemného: kontrola této služby je zcela zdarma. Nevytahujte tedy peníze z peněženky – nechte je ležet do správné chvíle. Přejděme však k metodice práce na této druhé službě.

Obecně je veškerá práce na CSS validátoru naprosto totožná s kontrolou čistoty kódu. Proto není nutné poskytovat samostatný obrázek adresního řádku validátoru. Jen o něco níže krátce zvážíme pořadí samotné kontroly a je to.

K tomu potřebujete adresní řádek napsat URL CSS tabulky, například „http://my site/style.css“ a poté stiskněte tlačítko s ruským nápisem „Check“. V souladu s tím tento validátor také na několik sekund „nafoukne“ a poskytne požadovaný výsledek:

To znamená, že CSS tabulka je zapsána správně a nebyly v ní nalezeny žádné chyby.

A je zde také příjemné překvapení: pokud stránku posunete o něco níže, zapíše se tam optimalizovaný kód pro vaši CSS tabulku, ze které budou odstraněny všechny nepotřebné nápisy a všechny kódové značky budou uspořádány v pořadí který splňuje optimální pracovní požadavky všech vyhledávačů. Zbývá pouze zkopírovat tento dokonalý vzorek kódu a vložit jej do tabulky CSS.

Je docela možné, že se něco takového může stát:

To znamená, že v kódu CSS byly nalezeny nějaké chyby, ale toho se vůbec nemusíte bát. Těsně pod touto červenou čarou vám validátor přesně řekne, která značka je špatně napsaná. Zbývá pouze najít tyto značky v šabloně stylů a provést potřebné opravy.

A samozřejmě poté nahrajte opravenou šablonu stylů na hostitele a pokud je tam zelená čára, můžete vesele zkopírovat optimalizovaný kód stylu tabulky CSS. Je celkem jasné, že pak je nejlepší se změnit starý kód na nový a optimalizovaný.

Stručné shrnutí.

Dvě nejzákladnější a povinné kontroly ověření webových stránek byly diskutovány výše. Bez těchto kontrol byste ani neměli otevírat indexování pro vyhledávače v souboru robots.txt, jinak může být web pro indexování ignorován vyhledávače a budou považovány za vadné s příslušnými sankcemi.

Abyste tomu zabránili, musíte věnovat jen pár minut tomu, abyste byli absolutně klidní a zcela si jistí technickým stavem vašeho webu a všech jeho stránek. Samozřejmě je také nutné provést dodatečné kontroly odkazů a kotev, viditelnosti webu na mobilní zařízení a parametry dalších kódů. Jedině tak lze web považovat za připravený pro své plné fungování a pro úspěšné a rychlá propagace v TOP.

Předem bych chtěl říci, že všechny ostatní kontroly jsou stejně rychlé a jednoduché jako ty, které byly diskutovány výše – stačí si pozorně přečíst postup práce s validátorem.

Přidáno 19.04.2018

Běžné chyby platnosti při ověřování HTML kódu

Rozhodl se článek aktualizovat. chyby HTML kódy, které se často nacházejí na stránkách. V každém případě jsem jich měl hodně)). Validátor zvýrazní chyby žlutě.

1) Chyba: Odkaz na znak nebyl ukončen středníkem.


Chyba: znak nebyl přerušen středníkem - podle toho se musí přidat.

2) Upozornění: Sekce nemá nadpis. Zvažte použití prvků h2-h6 k přidání identifikačních nadpisů do všech sekcí.


Upozornění: Tato sekce nemá žádný název. Zvažte použití prvků h2-h6 k přidání identifikačních nadpisů do všech sekcí. Zde je vše jasné, je potřeba přidat alespoň jeden podtitul. To ani není chyba, ale doporučení.

3) Chyba: Prvek noindex není v tomto kontextu povolen jako potomek prvku p.


Chyba: prvek noindex není povolen jako podřízený prvek p prvek v tomto kontextu. (Potlačit další chyby z tohoto podstromu.)
Řešení je jednoduché, musíte zakomentovat značku noindex, pohled bude vypadat takto:

4) Chyba: Středový prvek je zastaralý.

Chyba: značka "center" je zastaralá - musí být nahrazena, pokud mluvíme o img, můžete použít atribut align. Pokud je vycentrováno něco jiného, ​​nahraďte to div.

5) Prvek img musí mít atribut alt, kromě určitých


Chyba: Element img musí mít atribut alt – zde je vše jasné, je třeba přidat atribut alt, i když je prázdný, chyba zmizí.

6) Atribut width na prvku td je zastaralý. Místo toho použijte CSS.

Chyba: Atribut 'width' prvku 'td' je zastaralý

7) Atribut type je pro zdroje javascriptu zbytečný


Chyba: Atribut type není potřeba pro zdroje javascriptu. Řešením je jednoduše odstranit vše nepotřebné a ponechat pouze značku „script“.

8) Atribut align na prvku img je zastaralý.


Chyba: Atribut align na prvku img je zastaralý. Proveďte zarovnání obrazu div.