CodeGym /Kurslar /Frontend SELF AZ /Mikrostruktur

Mikrostruktur

Frontend SELF AZ
Səviyyə , Dərs
Mövcuddur

9.1 Mikroişarətləmə nədir?

Mikroişarətləmə (structured data) — HTML-sənədlərə metadata əlavə etməyin bir yoludur ki, bu da veb-səhifənin məzmununun axtarış sistemləri və digər servis tərəfindən daha yaxşı şərh olunmasını təmin edir. Mikroişarətləmə veb-səhifədə müxtəlif obyektləri və onların qarşılıqlı əlaqələrini təsvir etmək üçün istifadə olunur, bu da səhifənizin axtarış nəticələrində görünüşünü yaxşılaşdırır və zəngin snippet kimi əlavə funksiyalar təmin edir.

Mikroişarətləmə — HTML səhifələrin koduna əlavə edilən strukturlaşdırılmış məlumatdır. Bu, axtarış sistemlərini səhifənin məzmunu, məsələn, məzmun tipi, müəllif, dərc tarixi, reytinq və digər məlumatlar barədə əlavə məlumatla təmin edir.

Mikroişarətləmənin əsas növləri:

  • Schema.org: Əsasən Google, Bing, Yahoo, Yandex kimi böyük axtarış sistemlərinin dəstəklədiyi ən geniş yayılmış mikroişarətləmə standartıdır
  • JSON-LD: JSON formatında kodlaşdırılan, Google tərəfindən tövsiyə edilən mikroişarətləmə formatıdır
  • Microdata: Birbaşa HTML koduna daxil edilmiş mikroişarətləmə formatıdır

9.2 Schema.org

Schema.org — veb-səhifələrdə məlumatların strukturlaşdırılması üçün nəzərdə tutulmuş məlumat tiplərinin və onların xüsusiyyətlərinin lüğətidir. Məqalələr, hadisələr, təşkilatlar, məhsullar və s. kimi çox sayda məlumat tipini dəstəkləyir.

Schema.org istifadəsi nümunələri

Məqalə (Article):

HTML
    
      <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ə mətni...</p>
      </article>
    
  
JavaScript
    
      <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "Article",
          "headline": "Məqalənin başlığı",
          "author": {
            "@type": "Person",
            "name": "Müəllifin adı"
          },
          "datePublished": "2024-01-01",
          "image": "https://example.com/image.jpg",
          "publisher": {
            "@type": "Organization",
            "name": "Nəşriyyat",
            "logo": {
              "@type": "ImageObject",
              "url": "https://example.com/logo.png"
            }
          }
        }
      </script>
    
  

Məhsul (Product):

HTML
    
      <body>
        <h1>Məhsulun adı</h1>
        <img src="https://example.com/product.jpg" alt="Məhsulun şəkli">
        <p>Məhsulun təsviri</p>
        <p>Qiymət: $29.99</p>
      </body>
    
  
JavaScript
    
      <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "Product",
          "name": "Məhsulun adı",
          "image": "https://example.com/product.jpg",
          "description": "Məhsulun təsviri",
          "sku": "0446310786",
          "offers": {
            "@type": "Offer",
            "priceCurrency": "USD",
            "price": "29.99",
            "itemCondition": "https://schema.org/NewCondition",
            "availability": "https://schema.org/InStock",
            "url": "https://example.com/product"
          }
        }
      </script>
    
  

Schema.org istifadəsinin üstünlükləri:

  1. Görünürlüyün yaxşılaşdırılması: axtarış sistemləri axtarış nəticələrində əlavə məlumatları göstərə bilər (zəngin snippets).
  2. Yaxşılaşdırılmış şərhlər: axtarış sistemləri kontenti daha yaxşı başa düşə bilər ki, bu da səhifənin sıralanmasını yaxşılaşdıra bilər.
  3. Standartların dəstəklənməsi: Schema.org bütün əsas axtarış sistemləri tərəfindən dəstəklənir.

9.3 JSON-LD

JSON-LD (JavaScript Object Notation for Linked Data) — JSON formatında mikrostrukturlaşdırmanı kodlamaq üsuludur ki, bu, səhifədə <script> teqi içərisinə yerləşdirilir. Google strukturlaşdırılmış məlumatlar üçün JSON-LD istifadə etməyi tövsiyə edir.

JSON-LD istifadəsi nümunəsi

Təşkilat (Organization):

HTML
    
      <body>
        <h1>Şirkətin adı</h1>
        <p>Şirkətin təsviri</p>
        <div>Əlaqə məlumatları</div>
      </body>
    
  
JavaScript
    
      <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@type": "Organization",
          "name": "Şirkətin adı",
          "url": "https://example.com",
          "logo": "https://example.com/logo.png",
          "contactPoint": {
            "@type": "ContactPoint",
            "telephone": "+1-800-555-1212",
            "contactType": "Müştəri Xidməti"
          }
        }
      </script>
    
  

9.4 Microdata

Microdata — HTML-ə daxil edilmiş bir mikroişarələmə formatıdır. microdata atributları Schema.org lüğətindən tiplər və xüsusiyyətlərlə əlaqələndirmək üçün birbaşa HTML elementlərinə əlavə edilir.

Microdata istifadəsinə nümunə

Hadisə (Event):

HTML
    
      <body itemscope itemtype="https://schema.org/Event">
        <h1 itemprop="name">Hadisənin adı</h1>
        <p itemprop="startDate" content="2024-05-01T19:00">1 may 2024, 19:00</p>
        <div itemprop="location" itemscope itemtype="https://schema.org/Place">
          <span itemprop="name">Keçirilmə yeri</span>
          <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
            <span itemprop="streetAddress">Küçə, ev</span>
            <span itemprop="addressLocality">Şəhər</span>
            <span itemprop="postalCode">Poçt indeksi</span>
            <span itemprop="addressCountry">Ölkə</span>
          </div>
        </div>
      </body>
    
  

Mikroişarələmənin üstünlükləri:

  1. Zəngin snippetlər: axtarış motorları genişləndirilmiş snippetləri axtarış nəticələrində göstərə bilər ki, bu da keçidlərin sayı artıra bilər.
  2. Məzmunun daha yaxşı başa düşülməsi: axtarış motorları məzmunu daha yaxşı anlayır, bu da səhifənin reytinqini yüksəldə bilər.
  3. Səsli axtarışın dəstəyi: strukturlaşdırılmış məlumatlar səsli axtarış nəticələrini yaxşılaşdıra bilər.
  4. Digər xidmətlərlə inteqrasiya: mikroişarələmə Google Knowledge Graph və digər xidmətlərlə məzmunun inteqrasiyasını təmin edir.
Şərhlər
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION