Cara Membuat Breadcrumb WordPress Seo Friendly

Cara membuat breadcrumb di WordPress sangat berbeda dengan di Blogspot, perbedaan yang mendasar adalah bahasa php yang menyusun website tersebut, sedangkan blogger hanya menggunakan html dan css. untuk cara konfigurasinya pun cukup mudah, anda tinggal menyimak artikel mengenai cara membuat breadcrum wordpress seo friendly ini dari awal hingga akhir.

Cara Membuat Breadcrumb WordPress Seo Friendly

• Log in ke wordpress
• Copy kode dibawah ini[php]
  // Breadcrumbs
  function the_breadcrumb() {
  $home = ‘Home’;
  echo ‘<ul class=”breadcrumb” xmlns:v=”http://rdf.data-vocabulary.org/#”>’;
  global $post;
  echo ‘<li typeof=”v:Breadcrumb”><a rel=”v:url” property=”v:title” href=”‘.home_url( ‘/’ ).'”>’.$home.'</a>
  </li>’;
  $cats = get_the_category();
  if ($cats) {
  foreach($cats as $cat) {
  echo ‘<li typeof=”v:Breadcrumb”><a rel=”v:url” property=”v:title” href=””.get_category_link($cat->term_id).”” >$cat->name</a></li>’;
  }}
  echo the_title(‘<li typeof=”v:Breadcrumb”>’ , ‘</li>’);
  echo ‘</ul>’;
  }
  [/php]
• pastekan kedalam functions.php (taruh dibagian paling bawah)
• Copy kode berikut ini
  [php]
  <?php the_breadcrumb(); ?>
  [/php]
• letakkan kedalam header setiap halaman

Cara Terbaru 2017 Breadcrumb Google

Cara terbaru ini adalah Breadcrumb yang saya buat sesuai standar Google yang markup-nya bisa anda lihat disini
[php]
https://developers.google.com/search/docs/data-types/breadcrumbs
[/php]
Cara pasang Breadcrumb standar Google ini saya update pada 22 April 2017. Saya lebih menyarankan menggunakan kode dibawah ini daripada kode yang diatas karena menurut saya lebih rapi dan seo friendly. Untuk penerapannya cukup copy script berikut ini dan paste kedalam function.php
[php]
// BREADCRUMB SEO FRIENDLY ala APLIKITA
function aplikita_breadcrumbs($custom_home_icon = false, $custom_post_types = false) {
wp_reset_query();
global $post;
$is_custom_post = $custom_post_types ? is_singular( $custom_post_types ) : false;
if (!is_front_page() && !is_home()) {
echo ‘<ol class=”breadcrumb” itemscope itemtype=”http://schema.org/BreadcrumbList”>’;
echo ‘<li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>’;
echo ‘<a href=”‘.site_url().'” title=”‘.get_bloginfo(”).'”>’;
echo ‘<strong itemprop=”name”>Home</strong>’;
echo ‘</a>’;
echo ‘<meta itemprop=”position” content=”1″ />’;
echo “</li>”;

if ( has_category() ) {
$cats = get_the_category();
if ($cats) {
foreach($cats as $cat) {
echo ‘<li class=”active” itemprop=”itemListElement” itemscope=”” itemtype=”http://schema.org/ListItem”>’;
echo ‘<a itemscope=”” itemtype=”http://schema.org/Thing” title=’.$cat->name.’ itemprop=”item” href=”‘.get_category_link($cat->term_id).'”>’;
echo ‘<span itemprop=”name”><strong>’.$cat->name.”;
echo ‘</strong></span>’;
echo ‘</a>’;
echo ‘<meta itemprop=”position” content=”2″ />’;
echo ‘</li>’;
}}}

if ( is_single() ) {
echo ‘<li class=”active” itemprop=”itemListElement” itemscope=”” itemtype=”http://schema.org/ListItem”><span itemprop=”item”>’;
echo ‘<span itemprop=”name”>’.get_the_title($post->ID).'</span>’;
echo ‘<meta itemprop=”position” content=”3″ />’;
echo ‘</span></li>’;
}

elseif ( is_page() && $post->post_parent ) {
$home = get_page(get_option(‘page_on_front’));
for ($i = count($post->ancestors)-1; $i >= 0; $i–) {
if (($home->ID) != ($post->ancestors[$i])) {
echo ‘
<li itemscope=”” itemtype=”http://schema.org/Thing” itemprop=”item”><a href=”‘; echo get_permalink($post->ancestors[$i]);
echo ‘”>’;
echo get_the_title($post->ancestors[$i]);
echo ‘</a></li>’;
}}

echo ‘<li class=”active” itemprop=”itemListElement” itemscope=”” itemtype=”http://schema.org/ListItem”>’.get_the_title($post->ID).'</li>’;
}

elseif (is_page()) {
echo ‘<li class=”active” itemprop=”itemListElement” itemscope=”” itemtype=”http://schema.org/ListItem”>’.get_the_title($post->ID).'</li>’;
}

elseif (is_404()) {
echo ‘<li class=”active” itemprop=”itemListElement” itemscope=”” itemtype=”http://schema.org/ListItem”>404</li>’;
}
echo ‘</ol>’;
}}
[/php]
Untuk memanggilnya cukup copy script berikut dan paste kedalam elemen website anda seperti single.php, content.php atau di halaman tertentu dimana anda ingin menampilkannya
[php]
<?php aplikita_breadcrumbs(); ?>
[/php]

Untuk style atau tampilannya, silahkan copy kode css dibawah ini dan paste kedalam style.css pada template website anda
[php]
.breadcrumb {
padding: 15px 15px;
background-color: #e1f1ff;
margin-bottom: 20px;
list-style: none;
border-radius: 4px;}

.breadcrumb ol, ul {
margin-top: 0;}

.breadcrumb>li {
display: inline-block;}

.breadcrumb a, .breadcrumb>.active {
color: #6f6f6f;
font: 15px Roboto;
font-weight: 400;}

.breadcrumb strong {
font-weight: 700;}

.breadcrumb > li + li::before {
content: “›”;
font-size: 16px;
color: #ccc;}
[/php]
Demikin artikel mengenai Cara Membuat Breadcrumb WordPress Seo Friendly, jika anda mengikuti tutorial ini dengan seksama, seharunya Breadcrum valid seo ini terimplementasi dengan baik pada struktur website wordpress sobat. selamat mencoba!!