Merhaba, blog sitesinin sevgili okuyucuları. Bugün benzersiz yaratma konusuna değinmek istiyorum. URL'lerİnternette ve yaratma ilkeleri hakkında konuşun göreceli ve mutlak bağlantılar.

Elbette, derine iner ve gerçeğe ulaşmaya çalışırsanız, URL'leri veya URI'lerin (uri) daha genişletilmiş versiyonlarını oluşturma konusu oldukça karmaşıktır.

Ancak buna ihtiyacımız yok çünkü uygulamasındaki URL yapısını anlamak yeterli.

Ayrıca, neden ve nasıl oluşturabileceğinizi anlamanın da faydalı olacağını düşünüyorum. göreceli bağlantılar kaynağınız için ve buna açık bir ihtiyaç olmadığında bu amaçlar için mutlak olanları kullanmayın.

URL adresleri - bunlar nedir ve site indekslemeyi nasıl etkiler?

Öyleyse, bir URL'nin ne olduğunu, neden gerekli olduğunu ve hangi bölümlerden oluştuğunu görelim. Bildiğiniz gibi arama motorları bir bütün olarak değil, tek tek sayfalardan oluşan bir koleksiyon olarak üretmektedir. O zaman farklı olacaklar arama sorguları(seçim hakkında daha fazla bilgi edinin anahtar kelimeler Wordstat'ta .

URL ve URI

Peki, İnternetteki herhangi bir belge (web sayfası) kendi benzersiz URL'sine sahip, Tekdüzen Kaynak Bulucu (kaynak bulucu) anlamına gelir. O, HTTP protokolünün yanı sıra aynı kişi tarafından nasıl geliştirildi ve oluşturuldu - Tim Berners-Lee (projenin kurucusunun babası).

Genel olarak, bir URL, olarak adlandırılan başka bir tanımlayıcının özel bir durumudur. URI(Tekdüzen Kaynak Tanımlayıcı - tek tip bir kaynak tanımlayıcı), ancak siz ve ben, büyük olasılıkla, sitemizle çalışırken tüm bu inceliklere ihtiyaç duyulmayacağız (gereksiz). Genel terimlerle ne olduğunu ve hangi parçalardan oluştuğunu anlamaya çalışalım ve ardından göreceli ve mutlak bağlantılara geçelim.

URL adresi net bir şekilde internette bir şeye işaret etmenin bir yolu. Yalnızca sitelerle () http protokolü (ayrıca ftp aracılığıyla) ile çalışmak için kullanılmaz, ancak elbette bu tanımlayıcının Web'e (http ve https protokolleri) uygulanmasıyla ilgileneceğiz. Bu durumda URL aşağıdaki gibi görünecektir (yapısının genel bir akış şemasını aşağıda vereceğim, ancak şimdilik basit bir sık ​​örnekle başlamak istiyorum):

https://.html

Bu adres örneğinde, “http” kısmı bir veri aktarım protokolünü veya spesifikasyonun terminolojisini izlerseniz bir şemayı belirtir (çünkü aynısı http veya ftp'nin aksine bir veri aktarım protokolü değildir, ancak aynı zamanda kullanılır. içinde URL adresi x)..site") - veya .

WWW ve birbirine yapıştırılması gereken diğer site aynaları

Web, bir sitenin URL'sinde WWW'li veya WWW'siz olabilen bir alan adı belirleme özelliklerine sahiptir. Başarılı olmak için sitenizin bu iki aynasını yapıştırmanız çok önemlidir. Çoğu zaman, barındırma sağlayıcısı sizin için ayna yapıştırma işlemini gerçekleştirebilir, ancak bunun kesinlikle kontrol edilmesi gerekecektir.

Şunlar. arama motorları için, WWW'li veya WWW'siz siteler tamamen farklıdır ve bunları yapıştırmadan, bağlantı kütlesi aralarında bilinmeyen bir oranda bölünecektir. Adresteki WWW, doğası gereği bir tür atavizmdir. Alan adıüçüncünün ikinci seviye alanı.

Aynısı siteyi güvenli bir yere taşırken de geçerlidir. http ile https protokolü- arama motorları için farklı bir site olacak.

kullanmanın bir sakıncası yok site url'sinde www hayır, ancak arama motorları tarafından indekslenecek ve sıralamaya katılacak olan ana aynayı (site yönergenizi yazmanın yanı sıra baştan sona) açıkça tanımlamanız gerekir.

E. “atavism olmadan” ve bu harika öneki URL'lerimden herhangi birine eklerseniz, “WWW'siz” adrese otomatik bir yönlendirme gerçekleşir.

https://www..html

Sadece yukarıda anlatılan aynaları değil, size ait olan diğer alan adlarını da yapıştırabilirsiniz. Örneğin, tanınmış bir markanın Latin harflerinde farklı yazımlar mümkünse, tüm olası alanlar satın alınır (hatalı yazım çeşitleri, farklı etki alanı bölgeleri vb.) ve birbirine yapışır. Ardından, siteye olası URL adreslerinden herhangi birinde erişildiğinde, ana ayna açılacaktır.

Örneğin, reg.ru'da kayıt için potansiyel yansımalara veya ücretsiz alan adlarına bakabilirsiniz (önerilen alan adını doğrudan aşağıdaki forma girebilirsiniz):

Sitenizin ekstra URL'leri (yinelenen sayfalar) arama motoru dizininde nereden geliyor?

Ama koyunlarımıza geri dönelim. URL'nin üçüncü eğik çizgiden (/) sonra gelen kısmı - örneğimizde "papka/fail.html" - belirli bir nesnenin (belge veya dosya) yolu olarak adlandırılır. Bizim durumumuzda, bu, "papka" dizininde bulunan ve sırayla kök klasörde bulunan "fail.html" belgesidir ( url'deki kök her zaman üçüncü eğik çizgiyle eşleşir ayrıldı).

Ancak adrese yazılabileceklerin hepsi bu kadar değil. URL aracılığıyla, çeşitli parametreler, örneğin aşağıdaki gibi bir soru işareti koyduktan sonra sonuna eklenen GET parametrelerini iletir:

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

Bütün sıkıntı şu ki arama motorları bu tür iki URL (Get parametreleri olan ve olmayan) tamamen farklı web belgeleridir ve her biri arama motorları tarafından dizine eklenecektir.

Aynı URL'ye istediğiniz kadar farklı Get parametresi eklenebilir ve tüm bunlar, ilgili makalenin bağlantısı verilen robots.txt dosyasında uygun yasakları oluşturmazsanız Yandex ve Google tarafından indekslenir. hemen üstünde. Aksi takdirde, arama motorları çok sayıda yinelenen içerik için(aynı içerik farklı adreslerde mevcuttur).

Ayrıca, örneğin ana sayfa kaynağıma iki farklı URL kullanılarak erişilebilir:

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

(hatta üç - ayrıca https: // site /) ve her durumda ana sayfa açılacaktır. Bu oldukça kötü, çünkü arama motorları üç tane bulacak farklı sayfalar(kendi bakış açılarından farklı URL'lere sahip olmak), ancak aynı içeriğe sahipler, ki bu, ah, sevmedikleri.

Bu nedenle, yukarıdaki URL'lerden herhangi birini girdiğinizde, "https: // site /" biçiminde bir URL'ye yönlendirme gerçekleştirilecek şekilde yaptım. Bu, kural olarak, .htaccess dosyasındaki 301 yönlendirmeleri kullanılarak, doğrudan sunucu ayarlarında veya sunucunuz tarafından yapılır.

Daha fazla bilgi için, bağlantılı gönderiyi okuyun.

URL yapısı ve URL kodlu olarak yeniden kodlama

Genel olarak, tam URL blok şemasışu şekilde temsil edilebilir:

Gerçekte, kural olarak, giriş, şifre ve bağlantı noktası kullanmazlar, ancak ücretli sitelere erişmek için belirtilmeleri gerekebilir:

http://giriş: [e-posta korumalı] web sitesi/platniy-access.html

Ayrıca yüklemek oldukça yaygındır FTP oturum açma şifreleri, burada standart olmayan bir bağlantı noktası da kullanabilir, ancak bu protokol için varsayılandan farklıdır. Daha sonra, bu tür kaynaklara erişmek için Ftp sunucusuşöyle bir URL girmeniz gerekecek:

ftp://giriş: [e-posta korumalı] web sitesi:6789/samoe-nujnoe/cimus

Bu adreste soru işaretinden sonra yazılabilecek GET parametreleri hakkında, URL'lerinde bu tür parametrelerin bulunduğu sayfaların indekslenmesinin yasaklanması gerektiğini daha önce söylemiş ve belirtmiştik (yukarıda bununla ilgili bir makalenin linki verilmiştir). tüm bunların ayrıntılı olarak açıklandığı robotlar).

Sayfayı doğru yerde açan hash linkleri şeklinde url adresleri

Ancak URL'ye dahil edilebilecek tüm bu şeylere ek olarak, yukarıdaki akış şemasında sözde görebilirsiniz. Çapa"#" sınırlayıcı kare işaretinden sonra en sona eklenen , (Çapa içeren URL'ler genellikle karma bağlantılar).

Çapalar içeride önceden takılmıştır HTML Kodu ID="label" niteliğini istenen Html etiketine (paragraf, başlık veya başka bir uygun etiket) ekleyerek ve ardından bu bağlantının adını "#" karma sembolü aracılığıyla sayfanın URL adresine ekleyerek. , bu web sayfasının başına değil, hemen bağlantının yerleştirildiği yere gidebileceksiniz (herkes sayfayı otomatik olarak doğru yere kaydıracaktır).

Hakkında ve yardımla sayfada gezinmeyi organize etme hakkında bu makaleleri okuyun.

URL'lerde hangi karakterler kullanılabilir?

URL'lerde kullanılan çeşitli kodlamalardan da bahsetmekte fayda var. Kayıt olmadan, kullanabilirler sadece sınırlı miktar karakterler. Genellikle kendinizi bir dizi karakterle sınırlamanız önerilir: ,,,[_],[-].

Genel olarak, hatalardan kaçınmak için, sitenizin sayfalarının dosya adlarını ve URL'lerini küçük harfle ayarlamanızı tavsiye ederim, çünkü Unix benzeri sistemler için (çoğu web sunucusunun çalıştığı), karakterler üsttedir. ve küçük harf farklıdır (Windows'tan farklı olarak). Farklı kayıtlar nedeniyle gereksiz karışıklıklar ortaya çıkabilir.

URL'lerde diğer karakterlerin (Rusça dahil) kullanımına izin verilir, ancak yeniden kodlama aynı karakterler (URL Kodlaması).

Üzücü olan, yeniden kodlamadan sonra elde edilen, örneğin Kiril gibi sembollerle URL'lerin sindirilemez görünümüdür. Her Kiril karakteri, içinde iki bayt kullanılarak kodlanır, onaltılık olarak yazılır ve yüzde işareti "%" ile ayrılır. Örneğin, bu URL:

https://web sitesi/kim yeni/

dönüşümden sonra şöyle görünecek:

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

Genel olarak, pek havalı olmadığı ortaya çıktı ve ulusal kodlamalarda bu sindirilemez URL türüyle uğraşmayı planlıyorlar, ancak bu şey o kadar sıcak değil.

Yukarıdakilerin tümü ile bağlantılı olarak, CMS'mde ne zaman tavsiye ederim Rusça sayfa adresleri yapmayın ve özellikle birçok destekçiye göre, Yandex ve Google.ru için Seo optimizasyonu açısından daha iyi olacağından.

Sitedeki göreceli ve mutlak bağlantılar

İle başlayalım mutlak bağlantılar, çünkü bu durumda, bu makalede daha önce tartıştıklarımızın ötesinde özel bir şey söylenmeyecek. O. mutlak bir bağlantı, URL adresine - veri aktarım protokolü, sitenin (ana bilgisayar) alan adı ve erişim yolu - üzerinde uyguladığımız gereksinimlere uygun olmalıdır. istenen ağ belge. Herşey.

Html'de, özel A etiketleri (köprüler) kullanılarak mutlak bir bağlantı oluşturulur, yani. bir yere koymak için, belgenin metninde (ifade veya resim) istenen yeri açma ve kapama köprü etiketleriyle çevrelememiz ve “Href” özniteliğine açılış etiketi A'ya yazmamız gerekecek. ziyaretçinin üzerine tıkladığında ulaşması gereken belge:

PHPMyAdmin

Her şey çok basit.

Göreli Bağlantıların Faydaları ve Bunları Nasıl Elde Edebilirsiniz?

Ancak, mutlak köprüler genellikle yalnızca harici sitelere bağlantı vermek istediklerinde kullanılır ve dahili geçişler için çoğu web yöneticisi (akıllı ve anlayışlı, benim gibi değil 🙂) kullanmaya çalışır. göreceli bağlantılar. Ve bunun birkaç nedeni var:

1. Göreceli bağlantılar, tanım gereği daha kısadır ve site kodunu karmaşıklaştırmaz (sonuçta, bu konuda her küçük şey önemlidir).
2. Ayrıca başka bir alana geçiş yaparken veya protokolü https olarak değiştirirken sitedeki tüm linkleri değiştirmenize gerek kalmayacaktır.
3. Ek olarak, bazı İnternet proje tasarımları, dahili göreceli bağlantıları değiştirmeden hızlı ve acısız bir şekilde başka bir kaynağa aktarılabilir.

Bu nedenle, adına bakılırsa, bağlantı verdikleri web belgesinin adresi, bu göreceli bağlantının yerleştirileceği kodundan (sobadan dans) sitenizin belgesine göre yazılmalıdır. Bunları ayarlamak için ikinci seçenek, başlangıç ​​noktası olarak kök klasörü kullanmaktır. bunlar tam olarak oluşturmanın iki yolu göreli bağlantılar şimdi ele alacağız.

İliştirildikleri belgeye göre göreli bağlantılar oluşturun

Göreceli bir yol (köprü etiketinin Href özniteliğinin değeri anlamına gelir) yazmanın en basit ve en kısa yolu, hem web belgeleri hem de bağışçı (iliştirildiği) ve alıcı (dosya veya web belgesi) olduğunda elde edilecektir. yönlendirdiği) sunucuda aynı klasörde bulunur.

Çapa

Şimdi kabul eden belgenin, verici belgeyle aynı dizinde bulunan bir klasörde olduğunu varsayalım.

Bu durumda göreli bir bağlantı nasıl görünür? Her şey de oldukça basit:

Çapa

Şimdilik, her şeyin açık olduğunu düşünüyorum - alıcının dosya veya belgesinin yolunu (klasörün adı ve doğrudan eğik çizgiyle "/" dosya veya belgenin adı) yazıyoruz. Şunlar. Bağışçıdan alıcıya ulaşmak için ilgili linkte adını belirttiğimiz klasörü açmamız gerekecek.

Şimdi, bağışçı belgenin kendisi, zaten bir seviye daha yüksek olan alıcı belgeye veya dosyaya göreceli bir bağlantı koymanız gereken klasörün içinde bulunduğunda, tam tersi durumu düşünelim:

Bağışçı belgeden kabul eden dosyaya (veya belgeye) geçebilmemiz için, bu klasörden bir seviye yukarı çık. Bunun için özel bir eleman sağlanmıştır - üst üste iki nokta, ve sonra bir eğik çizgi ile, alıcıya giden diğer yol yazılır. Dolayısıyla yukarıdaki örnek için göreli yol şöyle olacaktır:

URL nedir

İki seviye yukarı çıkmanız gerekiyorsa, giriş şöyle görünecektir:

URL nedir

Pekala, bundan sonra, alıcıya göreli bir yol belirlemek için, ikinci üst (bağış belgesine göre) düzeyde bir klasör de girmeniz gerekecek:

Karmaşık ray tasarımı

Klasörlere bu kadar çok iniş ve seviye atlama olabilir, asıl mesele sizin kafanızın karışmamasıdır.

Kök klasöre göre bir bağlantı oluşturun

Köprünün eklendiği bağış belgesiyle ilgili yukarıda tartışılan tüm bağlantıları yazdık, ancak şunları yapabilirsiniz: başlangıç ​​​​noktası olarak kök klasörü alın alan. Göreli yollardaki kök, tek bir eğik çizgi "/" gibi görünür.

O. ana sayfaya geçiş oldukça basit ama abartılı görünecek:

Çapa

Örneğin, mutlak yol şöyle görünebilir:

Çapa

ANCAK akraba aynı dosyaya biraz daha kısa olacaktır:

Metin

Göreceli ve mutlak biçimde bir klasöre nasıl başvurulur

Hem mutlak hem de göreceli bağlantılar oluştururken dikkate alınması gereken bir nüansa dikkatinizi çekmek istiyorum. Eğer istersen klasöre bakın, sonra böyle bir köprünün sonuna (adından sonra) bir eğik çizgi "/" koyduğunuzdan emin olun. Yani, bir klasörün içeriğini açmak istersem şunu yazmalıyım:

Çapa

Böyle değil:

Metin

İkinci durumda, işlem sırasında, sunucu önce "uploads" adında bir dosya bulmaya çalışacak (tam olarak bu, herhangi bir uzantı olmadan) ve onu bulamayacak, sonra böyle bir klasör arayacaktır. Bu nedenle hemen yazma istediğiniz klasörün adından sonra eğik çizgi, orada olmayanı aramak için sunucunuzdan ekstra kaynak almayacaksınız.

Şunun da farkında olmalısınız iletişim kurduğunda göreceli veya mutlak referansta klasör, web sunucusu görüntülenecektir içinde bulunan ve kural olarak index.html veya index.php olarak adlandırılan sözde dizin dosyası. Klasörde dizin dosyası yoksa, sunucuda güvenlik doğru şekilde yapılandırılmamışsa, içeriğinin bir listesini göreceksiniz, bu da kaynağınızın güvenliğinin azalmasına neden olabilir.

Kesinlikle bulursanız.

Bu arada, sitenin ana sayfasına erişmek de özünde klasöre (kök) erişmektir ve aynı zamanda kökte bulunan indeks dosyası başlatılacaktır (benim durumumda bu index.php'dir). ). Yani, bir klasöre erişiyorsanız, o zaman sunucu yükünü azaltmak için alan adından sonra bir eğik çizgi yazmak daha iyidir:

İşte Mihalych!

Sana iyi şanslar! Yakında blog sayfaları sitesinde görüşürüz

ilginizi çekebilir

ASCII metin kodlaması (Windows 1251, CP866, KOI8-R) ve Unicode (UTF 8, 16, 32) - krakozyabry ile sorun nasıl çözülür
Web sitesi trafiğini nasıl günde 300 kişiye çıkardım?
Sitede ve çevrimiçi mağazada Yandex araması
Site Haritasının Site Haritası xml biçimi Yandex ve Google için - Joomla ve WordPress'te veya çevrimiçi bir oluşturucuda site haritası nasıl oluşturulur

Herşey HTML bağlantıları dış ve iç olarak ikiye ayrılır. Dış bağlantılar, bir siteden başka bir siteye veya başka bir sitede bulunan dosyaya yönlendiren bağlantılardır. Dahili bağlantılar- bunlar, sitenin bir sayfasından aynı sitenin başka bir sayfasına veya aynı sayfanın bölümlerine bağlantı veren bağlantılardır.

Herşey Dış bağlantılar etiketin href özelliğinde başvurdukları belgenin mutlak yolunu içerir. Dahili bağlantılar, hem mutlak hem de göreceli bir yol içerebilir (bu durumda, kişisel tercihlerinize bağlıdır).

Dilbilgisi kuralları gibi farklı diller, programlamada da kurallar vardır. Doğrulama, sayfanın bu kurallara uyup uymadığını görmenizi sağlar ve hata ve uyarılar varsa bunları ortadan kaldırmak için öneriler sunulur. Böyle bir kontrole duyulan ihtiyaç hakkında daha fazla ayrıntı aşağıda tartışılacaktır.

Sitenin geçerliliğini neler etkiler?

Tarayıcıların bir web sayfasını nasıl "okuduğunu" hiç merak ettiniz mi? Kodu analiz etmek ve onu insanlar için görsel bir forma dönüştürmek için "motorları" var. Ne yazık ki, her tarayıcının kendi kod işleme mekanizması vardır ve bu, sayfalarınızın farklı görüntülenmesine neden olabilir.

Geçersiz bir web sayfası tarayıcılar tarafından farklı şekillerde okunabilir. Bu, ziyaretçilerinizin muhtemelen sayfanın içeriğini tarayıcılarında doğru bir şekilde görememelerine neden olacaktır. Doğrulama daha sonra hemen hemen tüm önemli farklılıkları düzeltecek ve web sayfanızı neredeyse tüm web tarayıcıları tarafından okunabilir hale getirecektir (çoğunlukla istisna, Internet Explorer eski versiyonlar). "Çapraz tarayıcı düzeni" terimi buradan geldi. tüm popüler tarayıcılar için eşit derecede iyi (uyumlu) bir düzen.

Bu SEO'yu nasıl etkileyecek? Arama motoru botlarının semantik web sayfalarını sevdiğini anlamak önemlidir. Vikipedi'ye göre anlamsal düzen, üzerinde web sayfaları oluşturmaya yönelik bir yaklaşımdır. HTML dili, dayalı HTML kullanarak Anlamlarına (amaçlarına) göre etiketler. Ek olarak, yapısal bir semantik web sayfası, arama robotlarının bir web sayfasının hem tek tek öğelerinin hem de bir bütün olarak metnin tamamının önemini daha doğru bir şekilde belirlemesine olanak tanır. Google'a göre geçerli bir kod, sayfa sıralamasını hiçbir şekilde etkilemez. Ancak aynı zamanda, koddaki hataların varlığı, mikro verilerin taranmasını ve mobil cihazlara uyarlanabilirliğini olumsuz etkileyebilir.

Siteniz için doğrulama araçları

Site sayfalarında validasyon hatalarının olmaması ihtiyacını anlayarak, bu hataların nasıl aranacağına bakalım.

Çok var ücretsiz hizmetler W3C İşaretleme Doğrulama Hizmeti , Web Sayfası Çözümleyicisi , Tarayıcı görüntüleri ve diğerleri gibi site doğrulaması için.

Doktora Lavlinsky N. E., Method Lab LLC Teknik Direktörü

Son yayınlanan yeni standart Teknolojiyi önceden yüklemek için (bağlantı). Bu belirtimin temel amacı, geliştirici tarafından sayfa kaynağı yükleme mantığı üzerinde ayrıntılı denetime izin vermekti.

Önceki standartlar

Yük yönetimi fikri yeni değil. Daha önce, birkaç etiket seçeneği geliştirildi bağlantı niteliklerle alt kaynak, ön işleme ve önceden getirme. Ancak, biraz farklı çalıştılar: onların yardımıyla, sitede daha fazla gezinirken gerekli olabilecek sayfa öğelerini veya tüm sayfaları indirebilirsiniz. Yani, tarayıcı bu tür istekleri düşük öncelikli ve son olarak gönderdi. Önceliği artırmanız gerekiyorsa, çözüm yoktu.

Kaynakları önyükleme ile yükleme

Yeni spesifikasyon nedir? İlk olarak, şimdi yükleme, neyin yüklendiğine ilişkin bir belirtim ile gerçekleşir. Tarayıcı, belirtilen kaynak türüne göre indirme önceliğini ayarlar. Örneğin:

İkincisi, kaynak türü ( olarak), sunucunun içeriği en iyi sıkıştırma seçeneğiyle gönderebilmesi için tarayıcının doğru başlıkları göndermesine izin verir (örneğin, tarayıcı destekliyorsa WebP görüntüleri gönderir).

İkinci örnekte, tüm tarayıcılar tarafından desteklenmeyen belirli bir biçimi (WOFF2) belirten bir yazı tipi dosyası yüklüyoruz. Ancak, ön yükleme mekanizması desteği bu format desteği ile aynı olduğu sürece herhangi bir sorun yoktur. Mevcut mekanizma desteği görüntülenebilir.

Daha hızlı yazı tipi yükleme

Ön yükleme kullanarak bir siteyi hızlandırmanın bir örneği, yazı tipleri gibi derinlere gömülü kaynakların yüklenmesidir. Normal indirme işleminde, tarayıcı önce yazı tipini gösteren CSS dosyasını indirmeli, dosyayı ayrıştırmalı ve ancak bundan sonra yazı tipi dosyasını indirme isteğini kuyruğa almalıdır.

Bu yazı tipini HTML sayfa koduna önceden yüklersek, tarayıcı HTML belgesini ayrıştırdıktan hemen sonra isteği gönderir, bu normal durumda olduğundan birkaç saniye önce olabilir. Takılabilir yazı tiplerinin öğeleri engellediğini ve yazı tipinin sayfada oluşturulmasını geciktirdiğini biliyoruz, bu nedenle mümkün olduğunca çabuk yüklenmeleri gerekiyor. Bu sorun özellikle HTTP / 2 kullanırken, tarayıcı sunucuya aynı anda birçok istek gönderdiğinde, bunun sonucunda bazı resimler müşterinin bant genişliğini doldurabilir ve önemli kaynakların yüklenmesi gecikir.

Eşzamansız CSS yükleme

CSS dosyaları her zaman sayfa oluşturmayı engeller, böylece gecikebilecek tüm CSS kaynakları normal dosyalar olarak yüklenebilir ve sayfaya dinamik olarak bağlanabilir.

Bu şu şekilde yapılır:

Yürütmeden JS kodu yükleniyor

Daha sonra yürütmek için komut dosyası kodunu JS'ye önceden yüklemek de yararlı olabilir.

Bu, aşağıdaki kodla yapılabilir:

Ön yükleme mekanizmasını kullanmanın ana yollarını ele aldık, ancak olasılıklar bununla sınırlı değil, kendi deneylerinizi yapın!

Kural olarak, birçok web yöneticisi sitelerini oluşturulduktan hemen sonra ana bilgisayara yükler. Aynı zamanda sayfaların iç kodunun doğruluğundan çok metin içeriğinin anlamının doğruluğuna odaklanırlar.

Site Doğrulama

Ancak sitenin konumunu etkileyebilecek ve etkileyebilecek başka faktörler de var. Ve diğer şeylerin yanı sıra teknik faktörleri de içerirler. Eh, sitenin validasyonu da teknik olanlara aittir. Peki nedir?

Eğer bir basit kelimelerle, site doğrulaması, teknik uygunluk ve hatalar için site kodunun kontrolüdür. Örneğin, /html kapanış etiketini kullanmayı unuttunuz. En son HTML5'te görsel olarak hiçbir şey değişmeyecek. Ancak bu bir kod hatasıdır.

Kod yazarken başka hatalar olabilir. Ve yeniden, modern dil hiper işaretleme çok dayanacak. Örneğin, /head kapanış etiketini "unutmak". Yine, farkı görmeyeceksin. Ama o))

Aslında, bir web sitesi yazarken oldukça fazla hata olabilir. Daha da kötüsü, bu hatalardan bazıları görsel olarak da ortaya çıkabilir. Belki bloklar yüzer, belki hizalanır ya da belki başka bir şey. Potansiyel hatalar, binlerce. Ve hepsi çarpıcı değil.

Tehlike nedir?

Öyle görünüyor ki, bunda yanlış olan ne? Evet, genellikle bu tür hataların görünmediği söylenmelidir. Daha doğrusu, insanlar için görünmez. Ancak sitemizin sayfaları sadece insanlar tarafından değil, siteyi tamamen tarayan arama örümcekleri tarafından da ziyaret edilebilir. Ve sitede buldukları her hatayı Yandex veya Google gibi arama motorlarının sunucularına iletirler.

Arama motorları da sitede çok fazla kod hatası olduğunu görünce sitenin kötü olduğu sonucuna varabilir. Ve bu, aramada onu yükseltmeyecekleri anlamına gelir. Eh, bu zaten aramadan gelen ziyaretçilere veda etmek anlamına gelecektir.

Evet, kabul edilmelidir ki, doğrulama hataları nedeniyle sitenin belirli bir karamsarlığı oldukça nadirdir. Ancak bu oldukça mümkündür, bu da doğrulama üzerinde çalışılması gerektiği anlamına gelir. Ve bunun için ne yapılması gerekiyor? Tabii ki, ilk adım hataları bulmaktır.

Ancak manuel olarak bu çok zaman alan ve güvenilmez bir iş olduğundan, hataları aramak için kullanırlar. Özel servis, sözde "Doğrulayıcılar".

Doğrulayıcı İşaretleme Doğrulama Hizmeti.

Bu hizmet, hemen hemen her siteyi oluştururken çoğu sayfanın temeli olan HTML ve XHTML kodlarının doğruluğunu kontrol eder ve iç yapısını belirler. Bu doğrulayıcı hizmetine http://validator.w3.org bağlantısını izleyerek erişilebilir.

Ancak burada diğer doğrulayıcılar için de geçerli olan bir ön koşul vardır: kontrol edilen site veya kontrol edilen sayfaları barındırmaya yüklenmelidir. Aksi takdirde, doğrulayıcı site adresini "bilmeyecek" ve hiçbir şeyi kontrol edemeyecektir. Artık bu doğrulayıcı üzerinde nasıl çalışacağınızı düşünebilirsiniz.

Bu hizmetin sayfasına girdikten sonra, işlevsel resminin tamamı görüntülenecektir. Ancak gösterilen ve yazılanların çoğu ana kontrol için geçerli değildir ve tüm dikkatiniz yalnızca kontrol edilen sayfanın adresinin giriş penceresine verilmelidir:

İşte tam da buradan başlamanız gerekiyor.

Aslında, bir sitenin doğrulamasını kontrol etmek, tüm ölümlü dünyamız gibi son derece basittir: hizmetin adres penceresine site adresini yazmanız gerekir, yani. URL'sini ve ardından "Kontrol Et"i tıklayın. Bu kadar basit bir işlemden sonra, doğrulayıcı birkaç saniye "püfleyecek" ve aşağıdakileri yayınlayacaktır:

Bu, sayfa kodunda herhangi bir hata olmadığı ve kesinlikle sakin olabileceğiniz anlamına gelir.

Ancak böyle istenmeyen bir seçenek de olabilir:

Bu zaten daha kötüdür ve kontrol edilen sayfanın dahili kodunda bazı hatalar olduğu anlamına gelir. Ancak, bu hiç de ölümcül değildir: Aşağıdaki sayfayı kaydırmanız yeterlidir ve doğrulama işlemi sırasında bulunan tüm hatalar burada ayrıntılı olarak yazılacaktır.

Ek olarak, doğrulayıcı yalnızca bulunan hataları listelemekle kalmaz, aynı zamanda bu hataların dahili kodun hangi satırında bulunduğunu tam olarak gösterir. Böylece onları uzun süre aramak zorunda kalmayacaksınız. Burada, hiçbir şeyi abartmadan, bu doğrulayıcının mükemmel çalıştığını kesin olarak söyleyebiliriz.

Ancak hepsi bu kadar değil: doğrulayıcı yalnızca algılanan kod hatasının yerini göstermekle kalmaz, aynı zamanda bu hataların nasıl ortadan kaldırılacağı konusunda oldukça eksiksiz öneriler de verir. Tabii bunun için tembel olmanıza ve yazılan her şeyi dikkatlice okumanıza gerek yok.

Kısa ve genel bir sonuç olarak şunları söyleyebiliriz:

1. bu doğrulayıcı hizmeti harika çalışıyor ve siteyi çok hızlı bir şekilde kontrol edebilir.
2. Küçük ama çok hoş bir ek: site doğrulaması ücretsizdir.
3. Şimdi bir sonraki adıma geçebiliriz: bu, CSS kodunu kontrol etmektir.

CSS Doğrulama Hizmeti

Genel olarak, bu yukarıdaki hizmetin ikinci işlevidir, ancak HTML ve XHTML kodunu kontrol etmek için değil, özellikle kodun doğruluğunu kontrol etmek için “keskinleştirilmiştir”. css stili dış masada bulunur. Ve hizmet sayfasına ulaşmak için http://jigsaw.w3.org/css-validator bağlantısını takip etmeniz gerekiyor.

Bu arada, burada hoş bir şeye dikkat çekmekte fayda var: Bu hizmeti kontrol etmek tamamen ücretsizdir. Bu yüzden cüzdanınızdan para çekmeyin - doğru ana kadar uzanmasına izin verin. Ancak, bu ikinci hizmet üzerinde çalışma metodolojisine geçelim.

Genel olarak, CSS doğrulayıcı üzerindeki tüm çalışmalar, kod temizliğini kontrol etmekle kesinlikle aynıdır. Bu nedenle, doğrulayıcının adres çubuğunun ayrı bir görüntüsünü sağlamaya gerek yoktur. Sadece biraz daha düşük, çekin sırasını kısaca ele alacağız ve hepsi bu.

Bunun için yapmanız gerekenler adres çubuğu URL yaz CSS tabloları, örneğin "http://my site/style.css" ve ardından Rusça "Kontrol Et" yazısının bulunduğu düğmeye basın. Buna göre, bu doğrulayıcı ayrıca birkaç saniye "puf" yapacak ve istenen sonucu verecektir:

Bu, CSS tablosunun doğru yazıldığı ve içinde hiçbir hata bulunmadığı anlamına gelir.

Ve burada da hoş bir sürpriz var: Sayfayı biraz aşağı kaydırırsanız, CSS tablonuz için optimize edilmiş kod buraya yazılacak ve tüm gereksiz yazılar kaldırılacak ve tüm kod etiketleri sırayla düzenlenecektir. tüm arama motorlarının optimum çalışma gereksinimlerini karşılayan. Geriye bu mükemmel kod örneğini kopyalayıp CSS tablosuna yapıştırmak kalıyor.

Böyle bir şeyin olması oldukça olasıdır:

Bu, CSS kodunda bazı hatalar bulunduğu anlamına gelir, ancak bundan hiç korkmamalısınız. Bu kırmızı çizginin hemen altında, doğrulayıcı size tam olarak hangi etiketin yanlış yazıldığını söyleyecektir. Sadece bu etiketleri stil sayfasında bulmak ve gerekli düzeltmeleri yapmak kalır.

Ve elbette, bundan sonra, düzeltilmiş stil sayfasını ana bilgisayara yükleyin ve yeşil bir çizgi varsa, optimize edilmiş CSS tablosu stil kodunu mutlu bir şekilde kopyalayabilirsiniz. O zaman değiştirmenin en iyisi olduğu oldukça açık eski kod yeni ve optimize edilmiş birine.

Kısa özet.

En temel ve zorunlu iki web sitesi doğrulama kontrolü yukarıda tartışılmıştır. Bu kontroller olmadan robots.txt'de arama motorları için indekslemeyi bile açmamalısınız. Aksi takdirde site indeksleme için göz ardı edilebilir. arama motorları ve uygun yaptırımlarla kusurlu olarak kabul edilecektir.

Bunun olmasını önlemek için, sitenizin ve tüm sayfalarının teknik durumundan kesinlikle sakin ve tamamen emin olmak için sadece birkaç dakika harcamanız gerekir. Tabii ki, ek bağlantı ve çapa kontrolleri yapmak da gereklidir, sitenin görünürlüğü mobil cihazlar ve diğer kodların parametreleri. Ancak o zaman sitenin tam olarak çalışmaya hazır olduğu ve başarılı ve başarılı olduğu kabul edilebilir. hızlı promosyon TOP'da.

Diğer tüm kontrollerin yukarıda tartışılanlar kadar hızlı ve basit olduğunu şimdiden söylemek isterim - doğrulayıcı ile çalışma prosedürünü dikkatlice okumanız yeterlidir.

04/19/2018 tarihinde eklendi

HTML Kodunu Doğrularken Yaygın Geçerlilik Hataları

Makaleyi güncellemeye karar verdi. HTML hataları genellikle sitelerde bulunan kodlar. Her durumda, birçoğu vardı))). Doğrulayıcı, hataları sarı renkle vurgular.

1) Hata: Karakter referansı noktalı virgülle sonlandırılmadı.

Hata: karakter noktalı virgülle kesilmedi - buna göre eklenmelidir.

2) Uyarı: Bölümde başlık yok. Tüm bölümlere tanımlayıcı başlıklar eklemek için h2-h6 öğelerini kullanmayı düşünün.

Uyarı: Bu bölümün başlığı yoktur. Tüm bölümlere tanımlayıcı başlıklar eklemek için h2-h6 öğelerini kullanmayı düşünün. Burada her şey açık, en az bir altyazı eklemeniz gerekiyor. Bu bir hata bile değil, bir tavsiyedir.

3) Hata: Bu bağlamda p öğesinin alt öğesi olarak öğe noindex'e izin verilmiyor.

Hata: noindex öğesine şu şekilde izin verilmiyor alt öğe p öğesi bu bağlamda. (Bu alt ağaçtan daha fazla hatayı bastırın.)
Çözüm basit, noindex etiketini yorumlamanız gerekiyor, görünüm şöyle görünecek:

4) Hata: Merkez eleman eski.

Hata: "center" etiketi güncel değil - değiştirilmelidir, eğer img hakkında konuşuyorsak, align niteliğini kullanabilirsiniz. Başka bir şey ortalanmışsa, onu bir div ile değiştirin.

5) Bir img öğesi, belirli koşullar dışında, bir alt özniteliğine sahip olmalıdır.

Hata: img öğesinin bir alt özniteliği olmalıdır - burada her şey açık, bir alt özniteliği eklemeniz gerekiyor, boş olsa bile hata ortadan kalkacaktır.

6) td öğesindeki genişlik özelliği eskidir. Bunun yerine CSS kullanın.

Hata: 'td' öğesindeki 'width' özelliği kullanımdan kaldırıldı

7) Javascript kaynakları için type niteliği gereksizdir

Hata: Javascript kaynakları için type niteliği gerekli değil. Çözüm, gereksiz olan her şeyi kaldırmak ve yalnızca "script" etiketini bırakmaktır.

8) img öğesindeki hizalama özelliği artık kullanılmamaktadır.

Hata: img öğesindeki hizalama özelliği kullanımdan kaldırıldı. Görüntü hizalama div'leri yapın.