İçerik haritası (BreadcrumbList) yapılandırılmış verileri

Arama sonuçlarındaki içerik haritası

Bir sayfadaki içerik haritası yolu, sayfanın site hiyerarşisindeki konumunu belirtir ve kullanıcıların bir siteyi etkili bir şekilde anlamasına ve keşfetmesine yardımcı olabilir. Bir kullanıcı, içerik haritası yolundaki son içerik haritasından başlayarak, her seferinde bir seviye ilerleyip site hiyerarşisinin en üstüne kadar gidebilir.

Özelliğin kullanılabilirliği

Bu özellik, Google Arama'nın kullanılabildiği tüm bölgelerde ve dillerde masaüstü cihazlarda kullanılabilir.

Yapılandırılmış veri ekleme

Yapılandırılmış veri, bir sayfa hakkında bilgi sağlamak ve sayfa içeriğini sınıflandırmak için kullanılan standart bir biçimdir. Yapılandırılmış veri konusunda yeniyseniz yapılandırılmış verinin nasıl çalıştığı hakkında daha fazla bilgi edinebilirsiniz.

Aşağıda, yapılandırılmış verinin nasıl oluşturulacağı, test edileceği ve yayınlanacağı hakkında bir genel bakış sunulmuştur.

  1. Zorunlu özellikleri ekleyin. Kullandığınız biçime bağlı olarak sayfada yapılandırılmış verilerin nereye ekleneceğini öğrenin.
  2. Yönergeleri uygulayın.
  3. Zengin Sonuçlar Testini kullanarak kodunuzu doğrulayın ve kritik hataları düzeltin. Ayrıca, araçta işaretlenmiş olabilecek kritik olmayan sorunları düzeltmek de yapılandırılmış verilerinizin kalitesini iyileştirmeye yardımcı olabilir (ancak bunların düzeltilmesi, zengin sonuçlara uygunluk için gerekli değildir).
  4. Yapılandırılmış verinizi içeren birkaç sayfa dağıtıp Google'ın sayfayı nasıl gördüğünü test etmek için URL Denetleme aracını kullanın. Google'ın sayfanıza erişebildiğinden ve bir robots.txt dosyası, noindex etiketi veya giriş gereksinimleri tarafından engellenmediğinden emin olun. Sayfa düzgün görünüyorsa Google'dan URL'lerinizi yeniden taramasını isteyebilirsiniz.
  5. İleride yapılacak değişiklikler konusunda Google'a bilgi vermeye devam etmek için site haritası gönderin. Bu işlemi Search Console Sitemap API ile otomatikleştirebilirsiniz.

Örnekler

Google Arama, arama sonuçlarındaki sayfadan alınan bilgileri kategorilere ayırmak için bir web sayfasının gövdesindeki içerik haritası işaretlemesini kullanır. Aşağıdaki kullanım durumlarında gösterildiği gibi, genellikle kullanıcılar bir sayfaya çok farklı türlerde arama sorgularından ulaşabilir. Her arama aynı web sayfasını döndürebilir ancak içerik haritası, içeriği Google Arama sorgusunun bağlamında sınıflandırır. Kurgusal bir kitap ödülünün kazananlarına ait sayfada aşağıdaki içerik haritası yolları kullanılabilir:

Tek içerik haritası yolu

Sayfaya yönlendiren tek bir içerik haritası yolu varsa sayfa aşağıdaki içerik haritası yolunu belirtebilir:

Kitaplar Bilim Kurgu https://support.google.com/accounts/answer/12372353?hl=tr

Söz konusu içerik haritasını desteklemek için bir JSON-LD örneğini burada bulabilirsiniz:


<html>
  <head>
    <title>Award Winners</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

Söz konusu içerik haritasını desteklemek için bir RDFa örneğini burada bulabilirsiniz:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="3">
      </li>
    </ol>
  </body>
</html>

Söz konusu içerik haritasını desteklemek için bir Mikro veri örneğini burada bulabilirsiniz:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award winners</span>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
  </body>
</html>

Aşağıda, görsel tasarımın parçası olarak sayfada yer alan bir HTML içerik haritası bloğu örneği verilmiştir.

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

Çoklu içerik haritası yolu

Sitenizdeki bir sayfaya gitmenin birden fazla yolu varsa tek bir sayfa için çoklu içerik haritası yolu belirtebilirsiniz. Aşağıda, ödüllü kitaplar hakkındaki sayfaya götüren bir içerik haritası yolu örneği verilmiştir:

Kitaplar Bilim Kurgu Ödül Kazananlar

Aşağıda, aynı sayfaya götüren başka bir içerik haritası yolu verilmiştir:

Edebiyat Ödül Kazananlar

Aşağıda, çoklu içerik haritası yollarını destekleyen JSON-LD örneği verilmiştir:


<html>
  <head>
    <title>Award Winners</title>
    <script type="application/ld+json">
    [{
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    },
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Literature",
        "item": "https://example.com/literature"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Award Winners"
      }]
    }]
    </script>
  </head>
  <body>
  </body>
</html>

Aşağıda, çoklu içerik haritası yollarını destekleyen RDFa örneği verilmiştir:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction/awardwinners">
          <span property="name">Award Winners</span></a>
        <meta property="position" content="3">
      </li>
    </ol>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/literature">
          <span property="name">Literature</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="2">
      </li>
    </ol>
  </body>
</html>

Aşağıda, çoklu içerik haritası yollarını destekleyen Mikro veri örneği verilmiştir:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books/sciencefiction/awardwinners">
          <span itemprop="name">Award Winners</span></a>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/literature">
          <span itemprop="name">Literature</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award Winners</span>
        <meta itemprop="position" content="2" />
      </li>
    </ol>
  </body>
</html>

Aşağıda, görsel tasarımın parçası olarak sayfada yer alan bir HTML içerik haritası bloğu örneği verilmiştir.

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/books/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
    <ol>
      <li>
        <a href="https://www.example.com/literature">Literature</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

Yönergeler

Google Arama’da içerik haritasıyla görünmeye uygun olmak için aşağıdaki yönergeleri uygulamalısınız.

URL yapısını yansıtmak yerine, söz konusu web sayfasına giden tipik bir kullanıcı yolunu temsil eden içerik haritaları sağlamanızı öneririz. Hem üst düzey yol (sitenizin alan adı veya ana makine adı) hem de sayfanın kendisi için ListItem içerik haritası eklemeniz gerekmez.

Yapılandırılmış veri türü tanımları

İçerik haritasını belirtmek için en az iki ListItems içeren bir BreadcrumbList tanımlayın. İçeriğinizin, içerik haritalarınızla görüntülenmeye uygun olması için zorunlu özellikleri eklemelisiniz.

BreadcrumbList listedeki tüm öğeleri içeren kapsayıcı öğedir. BreadcrumbList öğesinin tam tanımını schema.org/BreadcrumbList adresinde bulabilirsiniz. Google tarafından desteklenen özellikler şunlardır:

Zorunlu özellikler
itemListElement

ListItem

Belirli bir sırada listelenmiş içerik haritası dizisi. Her içerik haritasını bir ListItem ile belirtin. Örneğin:

{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Books",
    "item": "https://example.com/books"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Authors",
    "item": "https://example.com/books/authors"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Ann Leckie",
    "item": "https://example.com/books/authors/annleckie"
  }]
}

ListItem

ListItem listedeki bağımsız bir öğeyle ilgili ayrıntıları içerir. ListItem öğesinin tam tanımını schema.org/ListItem adresinde bulabilirsiniz. Google tarafından desteklenen özellikler şunlardır:

Zorunlu özellikler
item

URL veya Thing alt türü

İçerik haritasını temsil eden web sayfasının URL'si. item öğesini belirtmenin iki yolu vardır:

  • URL: Sayfanın URL'sini belirtin. Örneğin:
    "item": "https://example.com/books"
  • Thing: Kullandığınız işaretleme biçimine dayalı olarak URL'yi belirtmek için bir kimlik kullanın:
    • JSON-LD: URL'yi belirtmek için @id kullanın.
    • Mikro veri: URL'yi belirtmek için href veya itemid kullanabilirsiniz.
    • RDFa: URL'yi belirtmek için about, href veya resource kullanabilirsiniz.

İçerik haritası, içerik haritası yolundaki son öğeyse item zorunlu değildir. item son öğeye dahil edilmezse Google, bunu içeren sayfanın URL'sini kullanır.

name

Text

Kullanıcı için görüntülenen içerik haritasının başlığı. item belirtmek için URL yerine name içeren bir Thing kullanıyorsanız name zorunlu değildir.

position

Integer

İçerik haritasının, içerik haritası yolundaki konumu. Konum 1, yolun başlangıcını belirtir.

Search Console ile zengin sonuçları izleme

Search Console, sayfalarınızın Google Arama'daki performansını izlemenize yardımcı olan bir araçtır. Google Arama sonuçlarına dahil olmak için Search Console'a kaydolmanız gerekmez, ancak Google'ın sitenizi nasıl gördüğünü anlamanıza ve iyileştirmenize yardımcı olabilir. Aşağıdaki durumlarda Search Console'u kontrol etmenizi öneririz:

  1. Yapılandırılmış verileri ilk kez dağıttıktan sonra
  2. Yeni şablonlar yayınladıktan veya kodunuzu güncelledikten sonra
  3. Düzenli olarak trafiği analiz etmek için

Yapılandırılmış verileri ilk kez dağıttıktan sonra

Google sayfalarınızı dizine ekledikten sonra, ilgili Zengin sonuç durum raporunu kullanarak sorunları arayın. İdeal olan, geçerli öğelerin sayısı artarken geçersiz olanlarda artış olmamasıdır. Yapılandırılmış verilerinizde sorun bulursanız:

  1. Geçersiz öğeleri düzeltin.
  2. Sorunun devam edip etmediğini kontrol etmek için yayındaki URL'yi inceleyin.
  3. Durum raporunu kullanarak doğrulama isteğinde bulunun.

Yeni şablonlar yayınladıktan veya kodunuzu güncelledikten sonra

Web sitenizde önemli değişiklikler yaptığınızda yapılandırılmış verilerdeki geçersiz öğelerin sayısında artış olup olmadığını takip edin.
  • Geçersiz öğe sayısında artış görürseniz çalışmayan yeni bir şablonu kullanıma sunmuş olabilirsiniz veya siteniz mevcut şablonla yeni ve kötü bir şekilde etkileşime giriyor olabilir.
  • Geçerli öğelerde azalma görürseniz (geçersiz öğelerdeki artışla eşleşmeyen), artık sayfalarınıza yapılandırılmış veri yerleştirmiyor olabilirsiniz. Soruna neyin neden olduğunu öğrenmek için URL Denetleme aracı'nı kullanın.

Düzenli olarak trafiği analiz etme

Performans Raporu'nu kullanarak Google Arama trafiğinizi analiz edin. Veriler, sayfanızın Arama'da ne sıklıkta zengin sonuç olarak göründüğünü, kullanıcıların bu zengin sonucu ne sıklıkta tıkladığını ve arama sonuçlarında göründüğünüz ortalama konumu gösterir. Bu sonuçlara Search Console API ile otomatik olarak da ulaşabilirsiniz.

Sorun giderme

Yapılandırılmış verileri uygulamada veya hata ayıklamada sorun yaşıyorsanız size yardımcı olabilecek bazı kaynaklar aşağıda verilmiştir.