10.1 Semantik işarələmə
SEO (axtarış optimizasiyası) web-developmentdə vacib rol oynayır, çünki web-səhifələrin axtarış sistemlərinin nəticələrində görünməsini yaxşılaşdırmağa kömək edir. Müasir HTML işarələməsi SEO-ya əhəmiyyətli dərəcədə təsir göstərir, axtarış sistemlərinə məzmunu daha yaxşı anlamağa və indeksləşdirməyə kömək edir. SEO-nun müasir HTML işarələməsinə təsirinin əsas aspektlərini nəzərdən keçirək.
HTML5 semantik teqləri axtarış sistemlərinə web-səhifənin strukturunu və məzmununu anlamağa kömək edir. Düzgün teqlərdən istifadə etmək əlçatanlığı yaxşılaşdırır və məzmunu axtarış sistemləri üçün daha anlaşılan edir.
Semantik teqlərə nümunələr:
<header>: səhifənin və ya bölmənin başlığı<nav>: naviqasiya linkləri<main>: səhifənin əsas məzmunu<section>: mövzu ilə bağlı bölmə<article>: müstəqil məzmun bloku<aside>: əlavə məlumat və ya yan panel<footer>: səhifənin və ya bölmənin alt hissəsi
İstifadə nümunəsi:
<body>
<header>
<h1>Sayt başlığı</h1>
<nav>
<ul>
<li><a href="#home">Əsas səhifə</a></li>
<li><a href="#about">Haqqımızda</a></li>
<li><a href="#contact">Əlaqə</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Məqalə 1</h2>
<p>Məqalə mətni...</p>
</article>
<section>
<h2>Bölmə</h2>
<p>Bölmə mətni...</p>
</section>
</main>
<aside>
<h2>Yan panel</h2>
<p>Əlavə məlumat...</p>
</aside>
<footer>
<p>© 2024 Mənim saytım. Bütün hüquqlar qorunur.</p>
</footer>
</body>
10.2 Mikroişarələmə
Mikroişarələmə (structured data) axtarış sistemlərinə səhifənin məzmunu haqqında əlavə informasiya vermək üçün istifadə olunur. Bu, axtarış sistemlərinin kontenti daha yaxşı anlamasına kömək edir və səhifənin axtarış nəticələrində görünməsini artırır.
Schema.org nümunələri:
- Article: məqalələr və xəbərlər üçün
- BreadcrumbList: "çörək qırıntıları" üçün
- Product: məhsulların təsviri üçün
- Event: tədbirlərin təsviri üçün
Mikroişarələmənin istifadəsi nümunəsi:
<body>
<article>
<h1>Məqalənin başlığı</h1>
<p>Müəllif: Müəllifin adı</p>
<p>Nəşr tarixi: 1 yanvar 2024</p>
<img src="https://example.com/image.jpg" alt="Şəkil nümunəsi">
<p>Məqalənin mətni...</p>
</article>
</body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Məqalənin başlığı",
"author": "Müəllifin adı",
"datePublished": "2024-01-01",
"image": "https://example.com/image.jpg"
}
</script>
10.3 Başlıqların və meta-teqlərin optimizasiyası
Başlıqlar və meta-teqlər SEO-da əsas rol oynayır, çünki onlar axtarış sistemlərinə və istifadəçilərə səhifənin məzmunu haqqında məlumat verir.
Meta-teqlər:
<title>: axtarış nəticələrində göstərilən səhifənin başlığı<meta name="description">: axtarış nəticələrinin snippetlərində istifadə olunan səhifənin təsviri<meta name="keywords">: açar sözlər (müasir axtarış sistemləri üçün böyük əhəmiyyət daşımır)
Meta-teqlərin istifadəsinə nümunə:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Səhifə başlığı nümunəsi</title>
<meta name="description" content="Bu, SEO üçün səhifə təsviri nümunəsidir.">
<meta name="keywords" content="nümunə, SEO, HTML">
</head>
<body>
<h1>Səhifənin başlığı</h1>
<p>Səhifənin məzmunu...</p>
</body>
</html>
10.4 Şəkillərin optimizasiyası
Şəkillərin optimizasiyası alt və title atributlarından istifadəni, həmçinin yükləmə sürətini artırmaq üçün sıxılma və müasir şəkil formatlarından (məsələn, WebP) istifadəni nəzərdə tutur.
İstifadə nümunəsi:
<body>
<h1>Şəkillərin optimizasiyası nümunəsi</h1>
<img src="example.jpg" alt="Şəklin təsviri" title="Şəklin başlığı" loading="lazy">
</body>
10.5 Çörək qırıntıları
Çörək qırıntıları (breadcrumbs) — istifadəçinin əsas səhifədən indiki səhifəyə gedən yolunu göstərən naviqasiya elementləridir. Bunlar istifadəçilərə saytda asanlıqla hərəkət etməyə kömək edir və əvvəlki naviqasiya səviyyələrinə keçidlər təqdim edir. Bu element istifadəçi interfeysinin vacib hissəsidir, xüsusən də dərin səhifə iyerarxiyasına malik böyük saytlar üçün.
Çörək qırıntılarının əsas aspektləri
Çörək qırıntıları adətən səhifənin başlığının və ya menyunun altında göstərilən keçidlər zolağıdır. Zolaqdakı hər bir keçid istifadəçini indiki səhifəyə qədər keçdiyi səhifələrdən birinə aparır.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/home">Əsas səhifə</a></li>
<li class="breadcrumb-item"><a href="/category">Kateqoriya</a></li>
<li class="breadcrumb-item active" aria-current="page">Cari səhifə</li>
</ol>
</nav>
Çörək qırıntılarının növləri:
- İyerarxik: saytı əsas səhifədən başlayaraq iyerarxik olaraq göstərir.
- Nümunə: Əsas səhifə > Kateqoriya > Alt-kateqoriya > Cari səhifə
- Xronoloji: istifadəçinin hərəkətlərinin ardıcıllığını göstərir, bu xüsusilə çoxmərhələli naviqasiya və ya alış-veriş prosesində faydalıdır.
- Nümunə: Əsas səhifə > Kateqoriya > Məhsul > Səbət > Sifarişin rəsmiləşdirilməsi
- Atributiv: cari səhifənin atributlarını və ya etiketlərini göstərmək üçün istifadə olunur, xüsusilə çox sayda kateqoriyalar və filtrələr olan saytlar üçün faydalıdır.
- Nümunə: Əsas səhifə > Elektronika > Mobil telefonlar > Smartfonlar > Apple
Çörək qırıntılarının üstünlükləri:
- Naviqasiya təkmilləşdirilməsi: istifadəçilərə əvvəlki səhifələrə tez qayıtmağa imkan verir.
- SEO üstünlükləri: axtarış sistemlərinə saytın strukturunu anlamağa kömək edir və onun indeksləşdirilməsini yaxşılaşdırır.
- İstifadə rahatlığı: saytı daha intuitiv və istifadəsi asan edir.
- İmtina dərəcəsinin azalması: naviqasiyanı asanlaşdırır, bu da imtina dərəcəsini azalda bilər, çünki istifadəçilər əvvəlki səhifələrə asanlıqla qayıda bilər və ya saytı tərk edə bilməzlər.
SEO üçün üstünlüklər
Çörək qırıntıları SEO-da vacib rol oynayır, çünki onlar axtarış sistemlərinə saytın strukturunu daha yaxşı anlamağa kömək edir və istifadəçilər üçün naviqasiyanı yaxşılaşdırır. Çörək qırıntılarının düzgün istifadəsi nəticə səhifələrində saytın reytinqinə müsbət təsir göstərə bilər.
GO TO FULL VERSION