Search Console - Blogger için Breadcrumb hatasının çözümü

Son zamanlarda Search Console da Breadcrumb ile ilgili bir hata görmeye başlamış olabilirsiniz. Bu hatanın kaynağı, yakın zamana kadar kullanımda olan data-vocabulary.org işaretlemesini Google desteklemeyi bıraktı. Bunun yerine schema.org işaretlemesinin kullanılması önerilmektedir. Dolayısıyla neredeyse blogger alt yapılı web sitelerinin hemen hemen hepsinin kullandığı bu işaretlemeyi Search Console 'un tavsiyesine uygun bir şekilde değiştirmek gerekiyor.

Kendi blog sitem için bulmuş olduğum, bu sorunun çözümünü içerik olarak da paylaşıp herkesin faydalanmasını istedim. İşlemlere başlamadan önce her hangi bir hata yapma olasılığınız için şablonunuzu yedeklemenizi tavsiye ederim.

Eğer temanızda zaten bir breadcrumb varsa ömce bunu bulmalısınız. Blogger tema menüsü altından HTML düzenleme sayfasını açın, genelde çoğu temada  <b:includable id='comment-form' var='post'> satırı altında bulunuyor bulmak için editörün içerisine tıklayın ve CTRL+F kısayollarını kullanarak <b:includable id='comment-form' var='post'> satırını arayın. Eğer satır varsa ve breadcrumbs da oradaysa aşağıda görselde işaretlediğim gibi tüm kod bloğunu seçin ve yine daha aşağıda paylaşacağım kod ile değiştirin.

<b:includable id='breadcrumb' var='posts'>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:loop values='data:posts' var='post'>
         <b:if cond='data:post.labels'>
            <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
               <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
                  <a class='homebread' expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
                  <span itemprop='name'>Home</span></a>
                  <meta content='1' itemprop='position'/>
               </span>
               <svg viewBox='0 0 24 24'>
                  <path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/>
               </svg>
               <b:loop index='num' values='data:post.labels' var='label'>
                  <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
                     <a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label.name' itemprop='item'>
                        <span itemprop='name'>
                           <data:label.name/>
                        </span>
                     </a>
                     <meta expr:content='data:num+2' itemprop='position'/>
                  </span>
                  <b:if cond='data:label.isLast != &quot;true&quot;'>
                     <svg viewBox='0 0 24 24'>
                        <path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/>
                     </svg>
                  </b:if>
               </b:loop>
               <svg viewBox='0 0 24 24'>
                  <path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/>
               </svg>
               <span>
                  <data:post.title/>
               </span>
            </div>
         </b:if>
      </b:loop>
   </b:if>
</b:includable>

Örnek görsel

Yukarıdaki bu işlemin ardından aşağıdaki CSS kodlarını </head> etiketinin üstüne ekleyin.

<style type='text/css'>
/* Breadcrumb */
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#222;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#222}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#222}
.homebread{margin:0 2px 0 0}
</style>

Son olarak ise aşağıdaki satırı <b:includable id='main' var='top'> kodunun altına ekleyin, eğer varsa eklemeniz gerekmez.

<b:include data='posts' name='breadcrumb'/>

Eğer yukarıdaki işlem başarısız olduysa yada temanıza uyum sağlamadıysa aşağıdaki kod parçasını kopyalayın ve ardından tema kodlarınız arasında CTRL+F kısayol tuş yardımı ile <div class="post-outer"> satırlarını arayın ve hemen altına bu kodu yapıştırın.

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:loop values='data:posts' var='post'>
         <b:if cond='data:post.labels'>
            <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
               <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
                  <a class='homebread' expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
                  <span itemprop='name'>Home</span></a>
                  <meta content='1' itemprop='position'/>
               </span>
               <svg viewBox='0 0 24 24'>
                  <path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/>
               </svg>
               <b:loop index='num' values='data:post.labels' var='label'>
                  <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
                     <a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label.name' itemprop='item'>
                        <span itemprop='name'>
                           <data:label.name/>
                        </span>
                     </a>
                     <meta expr:content='data:num+2' itemprop='position'/>
                  </span>
                  <b:if cond='data:label.isLast != &quot;true&quot;'>
                     <svg viewBox='0 0 24 24'>
                        <path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/>
                     </svg>
                  </b:if>
               </b:loop>
               <svg viewBox='0 0 24 24'>
                  <path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/>
               </svg>
               <span>
                  <data:post.title/>
               </span>
            </div>
         </b:if>
      </b:loop>
   </b:if>

Tüm işlem bu kadar değil. Son olarak Search Console 'a gidip aşağıdaki görselde gösterildiği gibi hata düzeltmesini doğrulayın.