نحوه اضافه کردن Breadcrumb با داده های ساختاریافته در بلاگر

پیمایش با ناوبری تجربه کاربر را بهبود می بخشد و سازگاری موتور جستجو را برای سایت بلاگر شما بهبود می بخشد. با پیاده‌سازی داده‌های ساختاریافته، موتورهای جستجو می‌توانند به جای نشانی‌های اینترنتی کامل، خرده‌های نان را نمایش دهند و وبلاگ شما را کاربرپسندتر و در دسترس‌تر کنند.

چرا از پودر سوخاری استفاده کنیم؟

• ناوبری بهبود یافته: Breadcrumbs مسیر روشنی را برای کاربران فراهم می کند تا بفهمند کجای وبلاگ شما قرار دارند.
• سئوی بهبود یافته: موتورهای جستجو می توانند ساختار سایت شما را بهتر تفسیر کنند که منجر به بهبود دید در نتایج جستجو می شود.
• تجربه کاربری بهتر: کاربران می توانند به راحتی به صفحات قبلی بازگردند و نرخ پرش را کاهش دهند.

مراحل افزودن Breadcrumbs به Blogger

این مراحل را برای پیاده سازی ناوبری خرده نان در سایت بلاگر خود دنبال کنید:

1. به الگوی بلاگر خود دسترسی داشته باشید: به Blogger بروید و وبلاگ خود را انتخاب کنید. رفتن به الگو و کلیک کنید HTML را ویرایش کنید.
2. کد قالب را پیدا کنید: کلیک کنید CTRL + F برای باز کردن تابع جستجو جستجو کنید <b:includable id='main' var="top">.
3. کد پودر سوخاری را بچسبانید: خطی را که پیدا کردید با کد زیر، درست زیر آن جایگزین کنید:

   <b:includable id='breadcrumb' var="posts">
       <b:if cond='data:blog.homepageUrl != data:blog.url'>
           <b:if cond='data:blog.pageType == "static_page">
               <div class="breadcrumbs">
                   <span><a expr:href="data:blog.homepageUrl" rel="tag">Home</a></span> » <span><data:blog.pageName/></span>
               </div>
           <b:else/>
           <b:if cond='data:blog.pageType == "item">
               <b:loop values="data:posts" var="post">
                   <b:if cond='data:post.labels'>
                       <div class="breadcrumbs">
                           <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                               <a expr:href="data:blog.homepageUrl" itemprop='url'><span itemprop='title'>Home</span></a>
                           </span>
                           <b:loop values="data:post.labels" var="label">
                               » <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                                   <a expr:href="data:label.url" itemprop='url'><span itemprop='title'><data:label.name/></span></a>
                               </span>
                           </b:loop>
                           » <span><data:post.title/></span>
                       </div>
                   <b:else/>
                       <div class="breadcrumbs">
                           <span><a expr:href="data:blog.homepageUrl" rel="tag">Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span>
                       </div>
                   </b:if>
               </b:loop>
           <b:else/>
           <b:if cond='data:blog.pageType == "archive">
               <div class="breadcrumbs">
                   <span><a expr:href="data:blog.homepageUrl">Home</a></span> » <span>Archive For <data:blog.pageName/></span>
               </div>
           <b:else/>
           <b:if cond='data:blog.pageType == "index">
               <div class="breadcrumbs">
                   <b:if cond='data:blog.pageName == "">
                       <span><a expr:href="data:blog.homepageUrl">Home</a></span> » <span>All Posts</span>
                   <b:else/>
                       <span><a expr:href="data:blog.homepageUrl">Home</a></span> » <span>Posts under <data:blog.pageName/></span>
                   </b:if>
               </div>
           </b:if>
           </b:if>
           </b:if>
           </b:if>
           </b:if>
   </b:includable>
   <b:includable id='main' var="top">
   <b:include data="posts" name="breadcrumb"/>
               

4. CSS را برای یک ظاهر طراحی کنید: بلافاصله قبل از تگ بسته شدن ]]></b:skin>CSS ارائه شده در بالا را جایگذاری کنید.
5. در صورت نیاز تنظیم کنید: با خیال راحت CSS را برای مطابقت با طراحی و سبک وبلاگ خود تغییر دهید.

مقاله پیشنهادی

مقاله ما را در مورد بررسی کنید افزودن برجسته سازی نحو کد ویژه برای Blogger برای نکات سفارشی سازی بیشتر!

به کمک نیاز دارید؟

اگر این مقاله را مفید یافتید یا اگر در پیاده سازی پودر سوخاری با مشکل مواجه هستید، در زیر نظر خود را بنویسید!