Anpassade breadcrumbs i WordPress

2010-06-29 klockan 07:36 5 kommentarer
Bread Crumbs

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.

GlödlampaFör de som använder WordPress så behöver koden modifieras för att man ska kunna ha ett större djup i breadcrumbs än i url. Alltså: vill du visa hur djupt en sida ligger enbart med breadcrumbs så måste du skaffa dig kontroll över url för posts, pages, kategorisidor m.m.

Tips: pluginet Custom Permalinks (Obs! fungerar inte tillsammans med WP No Category Base)

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 = '&gt;';
 $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.

Kul att du läste ända hit! Hjälp gärna till och förbättra inlägget med dina synpunkter eller frågor genom att kommentera.

5 kommentarer

Kommentera inlägget

Kommentera eller trackbacka från din sajt.

Publicerad: 2010-12-18 klockan 07:59
google-terminator

Den här bloggposten reflekterar över hur Google leder utvecklingen i världen när det gäller att samla, tolka och sortera information. Faktum är att de också är bäst i världen på att kapitalisera på andras information, men det är en annan bloggpost.

I den här bloggposten kikar vi kort på fyra språkverktyg som Google lanserat. De bakomliggande teknologierna för de här publika tjänsterna är sannolikt bara en liten del av Google sammanlagda verktygslåda och tjänsterna nog är …

Publicerad: klockan 08:42
lankgraf

I mitt tidigare inlägg om Google’s maskinella språkkunskaper så nämnde jag kort att beteendet vad gäller att länka ut till exempelvis informationskällor och liknande har blivit utarmat. Att webbtext i många stycken inte liknar den ursprungliga idéen om hypertext.
Jag hittade den här texten som definerar hypertext. Jag fastnade för det här stycket som säger något om hur bra hypertext ska vara utformad vad gäller länkar:
Lots of links. If each document has just one link, then …

Publicerad: 2010-10-08 klockan 07:58
forstoringsglas

Google genomför just nu tester i resultatsidorna med ett litet förstoringsglas som dyker upp precis till höger om titeln vid varje enskilt resultat. Klickar man på förstoringsglaset så får man när man hovrar över resultaten en förhandstitt av hur respektive målsida ser ut.

Tanken är väl att man ska kunna undvika att slösa tid på att klicka sig fram och tillbaka till sidor som om man fått en liten förhandstitt på, inte valt att besöka. Sen …

Publicerad: 2010-12-01 klockan 05:19
solros

Det är mycket enkelt för vem som helst att när som helst publicera stora mängder innehåll på en eller flera olika sajter. Problemet är att vara ägare till innehållet.
När jag säger problemet så menar jag egentligen flera saker. För det första så är det resursintensivt att skapa innehåll. Speciellt kvalitativt innehåll. Den stora resursåtgången för att skapa innehåll är alltså ett “problem” för en sajtägare. Helst skulle sajtägaren vilja köpa fantastiska texter för inga pengar …

Publicerad: 2010-08-21 klockan 06:43
svavare

Jag skrev tidigare hur man kan variera texten i sina breadcrumbs för att få naturligt få in olika varianter av ett eller flera nyckelord på sin sida. Det här är en liknande historia fast denna gång gäller det title-elementet i bilder. Närmare bestämt så kallade “post thumbnails”. Sedan WordPress version ca 2.9 finns möjligheten att tilldela varje post en speciell bild, som man sedan kan hämta varifrån som helst i sitt tema.
Jag förutsätter att du …

Publicerad: 2011-02-18 klockan 06:03
insekt

I ett av mina tidigare inlägg som beskriver hur man skapar en sökmotorvänlig paginering så nämnde jag att det är bra med ett titel-suffix för de paginerade sidorna. Gör man det så slipper man duplicerade titlar. Det bästa hade ju varit om jag själv haft det på detta sättet innan jag skrev bloggposten och faktum är att jag håll på och kliat mig i huvudet kring varför jag inte fått det att funka – nu …

Publicerad: 2010-08-30 klockan 09:57
e-handel

Att jobba med sökmotoroptimering för e-handel är en utmaning på många sätt. Sammanfattningsvis kan man säga att svårigheterna liggier i att skapa en sajt där alla produkterna representeras av en webbsida som är unik och tillräckligt innehållsrik för att en sökmotor ska bedöma att den är värd att behålla i index, och ännu bättre att den också visas högt upp i SERP:arna för relevanta sökord.
Content is king
Olika affärssegment rymmer olika sorters svårigheter. Ta som exempel, …

Publicerad: 2010-12-31 klockan 12:42
vagguttag

Det finns inte mycket längre som hindrar en från att skapa WordPress-sajter närmast perfekt SEO. Det krävs inte längre några svårkodade speciallösningar. Ett mindre antal plugins som löser ett större antal brister i WordPress som publiceringsverktyg. Läs min post som samlar dessa plugins med kommentera om respektive plugin, syftet med dem och varför just detta plugin är bättre än andra liknande.

Publicerad: 2011-02-15 klockan 09:45
paginering

När ett visst innehåll blir för omfattande att visa på en sida brukar man ju dela upp det över flera sidor – det heter ju paginering. Att skapa paginering som är sökmotorvänligt är inte svårt, men ändå finns det, mig veterligen, inget CMS som har alla rätt på provet direkt ur kartongen.

Publicerad: 2010-10-12 klockan 08:38
joost

Äntligen får jag säga, är det någon som ordnar ett vettigt plugin för SEO i WordPress, det var sannerligen på tiden. Joost de Valk, ägaren till hemsidan Yoast.com, har tagit intivativet och snickrat ihop vad som ser ut att vara det mest heltäckande pluginet hittills för sökmotoroptimering i WordPress. Här är ett litet axplock av de funktioner som pluginet, som befinner sig i beta, har i nuläget:

Titlar och meta descriptions för poster
Robots meta konfigurering
Canonical-taggar
Kontroll över …