İçerik haritası

Bir web sayfasında görüntülenen 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.

Yapılandırılmış veri ekleme

Yapılandırılmış veriler, 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ış veriler konusunda yeniyseniz yapılandırılmış verilerin nasıl çalıştığı hakkında daha fazla bilgi edinebilirsiniz.

Aşağıda, yapılandırılmış verilerin nasıl oluşturulacağı, test edileceği ve yayınlanacağı hakkında bir genel bakış sunulmuştur. Bir web sayfasına yapılandırılmış verinin nasıl ekleneceği hakkında adım adım açıklamalı kılavuz için yapılandırılmış veri codelab'e göz atın.

  1. Zorunlu özellikleri ekleyin. Yapılandırılmış verinin sayfada nereye yerleştirileceği hakkında bilgi için JSON-LD structured data: Where to insert on the page (JSON-LD yapılandırılmış veri: Sayfada yerleştirilecek yer) başlıklı videoyu izleyin.
  2. Yönergeleri uygulayın.
  3. Zengin Sonuçlar Testini kullanarak kodunuzu doğrulayın.
  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 Site Haritası API'si 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. ancillaryjustice.html sayfası, arama bağlamına bağlı olarak şu içerik haritası yollarını görüntüleyebilir.

İçerik haritalarını uygulamanın yaygın bir yolu, URL yolunun bir bölümünü içerik haritası yolu olarak kullanmaktır. URL yolunun bazı bölümlerinin, kullanıcıların sayfanın web sitenize nasıl uyduğunu anlamalarına yardımcı olmadığını unutmayın. Örneğin, ne "https://example.com/pages/books/catcher_in_the_rye.html" URL'sindeki "pages" ne de üst düzey öğe "example.com" herhangi bir bilgi sağlamaktadır. 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.

Tek içerik haritası yolu

"2014 Nebula Ödülü en iyi roman" şeklinde yıla ve türe dayalı bir ödül arama sorgusunda şu içerik haritası oluşturabilir:

Kitaplar › Bilim Kurgu › Ödül Kazananlar

JSON-LD

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>

RDFa

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>

Mikro veri

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>

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="http://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="http://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

JSON-LD

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>

RDFa

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>

Mikro veri

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>

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="http://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="http://www.example.com/books/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
    <ol>
      <li>
        <a href="http://www.example.com/literature">Literature</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

Kurallar

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

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.

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.

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 gerekli 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 bir URL yerine name içeren bir Thing kullanıyorsanız name gerekli 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 sayfaların sayısı artarken hatalarda veya uyarılarda artış görmemenizdir. Yapılandırılmış verilerinizde sorun bulursanız:

  1. Hataları 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ış veri hatalarında ve uyarılarda artış olup olmadığını izleyin.
  • Hata sayısında bir 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üyorsanız (hatalardaki 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'si ile otomatik olarak da ulaşabilirsiniz.

Sorun giderme

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