Anpassade breadcrumbs i Wordpress

På webben hittas information via en mångfald av olika kanaler som exempelvis sökmotorer eller olika sociala nätverk. När man via någon av alla kanaler hittat in till en specifik landningssida på en sajt så kan det vara bra att få information om var någonstans i sajtens hierarki man befinner sig. Det är vanligt att man kan utläsa denna information i breadcrumbs eller i en url.

Sajtstrukturen i URL, breadcrumb eller båda

Det finns ju olika åsikter om hur URL-strukturen på en väloptimerad sida bör vara utformad. Vissa menar att url:en bör reflektera strukuturella innehållshierarkier. Själv tycker jag att en platt url-struktur är att föredra även om det troligtvis inte har någon större betydelse. Främst för att jag tycker att breadcrumbs är bättre lämpat för uppgiften men också för att man får bättre kontroll på nyckelorden i url:en på en specifik landningssida. Det blir också lättare för en användare att komma ihåg en url ju enklare dess utformning är. Precis som Matt Cutts förklarar i videon här:

Man kan ju tycka att det bättre att man visar hierarkier i både url och breadcrumbs för att vara på den säkra sidan, och det skadar ju inte att vara tydlig mot användare.

http://polisen.se/Lagar-och-regler/Tillstand-for-lotteri-och-loppmarknad/

Jag skulle nog säga att det är en trade-off mellan att ha en lättmemorerad url med bättre kontroll över nyckelord i url, mot att ha extra tydlig sajtstruktur.  Numer visar ju dessutom Google breadcrumbs i sina sökresultat istället för urlar. Tyvärr än så länge inte i någon större utsträckning.

Google breadcrumbs

Det verkar vara en vanlig undran, hur man ska koda sina breadcrumbs för att Google ska visa dem istället för url:en i SERP:en. Matt Cutts svarar i den här video ganska uttömmande.

Det handlar alltså om att koda rätt och att sajten i fråga måste ha uppnått någon nivå av tillförlitlighet i Google’s ögon.

Hur ser då koden vanligtvis ut på sajter som fått breadcrumbs i Google-SERP:en?

Jag har spanat efter sajter som fått breadcrumbs i sökresultaten och hittat följande:

• De ligger i en <div> eller en <p> som har id eller class “breadcrumbs” eller “bread-crumbs”
• Den vanligaste avskiljaren är > (&gt;)

<p class="breadcrumb">
<a href="http://davidwickstrom.net/">Hem</a> &gt;
<a href="/landa</a>">Undersida</a> &gt;
<strong>Aktuell sida</strong>
</p>

Anpassade breadcrumbs

På tal om att ha kontroll över nyckelord i sin url, så gäller ju samma sak med breadcrumbs.

En som sysslar med sökmotoroptimering har en rad olika element att laborera med:

• title
• h1
• h2
• textinnehåll

Varför inte lägga till breadcrumbs till listan?

Om vi utgår från att man med en landningssida försöker täcka in ett par huvudnyckelfraser och ett knippe av de mest trafikerade long-tail-varianterna, så är det mycket tacksamt att kunna fiffla lite även med breadcrumbs. Titlar, rubriker och text går ju att ändra hursomhelst, och samma flexibilitet är inte så dumt att ha även för breadcrumbs.

Märk väl att jag vill rekommendera att man behåller en viss konformitet, att man inte spejsar ut alltför mycket när man väljer vad sin breadcrumb ska döpas till. Det kan räcka med att använda en annan grammatisk form på sitt nyckelord, specifik longtail-variant av detsamma eller för oss svenskar kanske en särskriven variant.

Tips: Kika efter lämplig variant i Google Suggest!

Så här fixar man anpassningsbara breadcrumbs i WordPress

Här finns det såklart tusen olika lösningar varav många förmodligen skulle vara tjusigare än min variant. Strykan med min variant är att den kräver minimalt med kodning och ger samtidigt en mycket smidig och effektiv lösning.

Förutsättningar:

1. Installera WordPress-pluginet Headspace2.
2. Lägg till följande kod i functions.php:

function david_breadcrumbs() {

 $delimiter = '>';
 $name = 'Hem'; //text for the 'Home' link
 $currentBefore = '<strong>';
 $currentAfter = '</strong>';
 $current = MetaData::get_custom ('Breadcrumbs');

 if ( !is_home() && !is_front_page() || is_paged() ) {

 echo '<div id="breadcrumbs">';

 global $post;
 $home = get_bloginfo('url');
 $hometitle = get_bloginfo('name');
 echo '<a title="'. $hometitle . '" href="' . $home . '">' . $name . '</a> ' . $delimiter . ' ';

 if ( is_category() ) {
 global $wp_query;
 $cat_obj = $wp_query->get_queried_object();
 $thisCat = $cat_obj->term_id;
 $thisCat = get_category($thisCat);
 $parentCat = get_category($thisCat->parent);
 if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
 echo $currentBefore;
 if (!empty($current)) {
 echo $current;} else {
 single_cat_title();}
 echo $currentAfter;

 } elseif ( is_day() ) {
 echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
 echo '<a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
 echo $currentBefore . get_the_time('d') . $currentAfter;

 } elseif ( is_month() ) {
 echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
 echo $currentBefore . get_the_time('F') . $currentAfter;

 } elseif ( is_year() ) {
 echo $currentBefore . get_the_time('Y') . $currentAfter;

 } elseif ( is_single() ) {
 $cat = get_the_category(); $cat = $cat[0];
 echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
 echo $currentBefore;
 if (!empty($current)) {
 echo $current;} else {
 the_title();}
 echo $currentAfter;

 } elseif ( is_page() && !$post->post_parent ) {
 echo $currentBefore;
 if (!empty($current)) {
 echo $current;} else {
 the_title();}
 echo $currentAfter;

 } elseif ( is_page() && $post->post_parent ) {
 $parent_id  = $post->post_parent;
 $breadcrumbs = array();
 while ($parent_id) {
 $page = get_page($parent_id);
 $breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
 $parent_id  = $page->post_parent;
 }
 $breadcrumbs = array_reverse($breadcrumbs);
 foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
 echo $currentBefore;
 if (!empty($current)) {
 echo $current;} else {
 the_title();}
 echo $currentAfter;

 } elseif ( is_search() ) {
 echo $currentBefore . 'Sökresultat för' . get_search_query() . $currentAfter;

 } elseif ( is_tag() ) {
 echo $currentBefore . 'Poster taggade med &#39;';
 single_tag_title();
 echo '&#39;' . $currentAfter;

 } elseif ( is_author() ) {
 global $author;
 $userdata = get_userdata($author);
 echo $currentBefore . 'Inlägg skrivna av ' . $userdata->display_name . $currentAfter;

 } elseif ( is_404() ) {
 echo $currentBefore . '404' . $currentAfter;
 }

 if ( get_query_var('paged') ) {
 if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
 echo __('Page') . ' ' . get_query_var('paged');
 if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
 }

 echo '</div>';

 }
}

Den här koden är en modifierad variant av utmärkta dimox breadcrumbs!

Genom att följa instruktionerna i videon så lägger du till ett specialfält i editorn i WordPress så att du kan specifiera hur din breadcrumb ska se ut.

För att visa breadcrumbs på sin sajt behöver du inkludera en liten kodsnutt som anropar breadcrumb-funktionen som vi klistrat in i funtions.php, i de templates där du vill ha dem:

<?php david_breadcrumbs(); ?>

Vanligt är att man lägger till den i header.php för då får man breadcrumbs på hela sajten i ett svep. En del vill inte ha breadcrumbs i sidhuvudet av designskäl och då kan man ju såklart lägga till breadcrumbs i alla templates var för sig; single.php, page.php, archive.php etc.