WordPress Breadcrumb Navigation ohne Plugins

Breadcrumbs helfen dem User dabei sich schneller auf der Webseite zurechtzufinden in dem sie Ihm genau aufzeigen in welcher Hierarchie auf der Webseite er sich gerade befindet. Der Vorteil der mit Rich Snippets angereicherten Breadcrumb liegt auf Googles Seite (der Seite der Suchmaschinen). Google kann den Content dank der Rich Snippets besser in die Seite einordnen, also die Taxonomie der Seite einfacher bestimmen.

Da ich mittlerweile mehr WordPress Plugins installiert habe als für das Blog gut ist und ich die volle Kontrolle über meine Breadcrumbs in WordPress haben möchte, war ich auf der Suche nach einer geeigneten Möglichkeit die Breadcrumb Navigation ohne ein Plugin in WordPress einzubauen.

WordPress Breadcrumb Grundlösung

Bei wpti.ps habe ich dann letztendlich die perfekte Grundlage für die Plugin-lose Implementierung der WordPress Breadcrumb Navigation gefunden.

Was mir hier gefehlt hat ist, dass die WordPress Breadcrumb nicht in den Kategorien-Seiten erschien und der eigentliche Post selbst nicht in der WordPress Breadcrumb enthalten war. Also habe ich kurzerhand das Skript angepasst und mir die fehlenden Attribute dazugebaut

WordPress Breadcrumb Navigation ohne Rich-Snippets

Das Ergebnis schaut letztendlich später so aus:

wordpress breadcrumb ohne plugin

Dazu muss der folgende Sourcecode am Ende der functions.php im jeweiligen WordPress Theme Verzeichnis hinzugefügt werden und im Template an passender Stelle mit
<?php echo write_breadcrumb(); ?>
aufgerufen werden

WordPress Breadcrumb Navigation mit Rich-Snippets

Damit nicht nur eure Besucher der Seite etwas von der Breadcrumb Navigation haben, sondern auch der Google Bot diese Navi in die Suchergebnisse einbauen kann gibt es die Möglichkeit die Breadcrumb Leiste mit Rich Snippets auszuzeichnen. Das schaut im Ergebnis dann in der Google Suche so aus:

wordpress breadcrumbs with rich-snippets without a plugin

Quellcode

Der besseren Lesbarkeit halber habe ich den Code für die Rich-Snippets Integration der Breadcrumbs in einer externen Datei hinzugefügt. Hier könnt ihr den Code downloaden.

CSS aktualisieren

Folgende CSS Styles müsst ihr nur noch eurem Stylesheet hinzufügen, fertig!

Wordpress Breadcrumb mit Rich Snippet und ohne Plugins

29 Kommentare » Schreibe einen Kommentar

  1. Hi Viktor,

    super Beitrag, vielen Dank dafür.
    Ich habe den Code gerade voller Vorfreude eingebaut, allerdings funzt es noch nicht so, wie ich mir das vorstelle. Das Problem ist, dass der Breadcrumb immer nur bis “Home” aufgeführt wird. Der Rest (also die Kategorie und der jeweilige Post) werden nicht angezeigt.
    Hast Du eine Idee, woran das liegen könnte?

    Vielen lieben Dank! :-)

  2. dann funktioniert der gesamte dynamische Teil bei Dir nicht….
    Zeigt er denn die » » oder auch nicht?
    Welche WordPress Version nutzt Du?
    Wie hast Du den Quellcode kopiert?

  3. Hi Viktor,

    danke für Deine Mühe! :-)
    Ich habe jetzt einen anderen Weg gefunden mittels eines Plugins.

    Trotzdem tausend Dank!

  4. Super, vielen Dank dafür!
    Hat mir viele Umstände erspart, zumal ich ohnehin kein Fan von Plugins bin. Läuft bereits auf meinem Blog :)

  5. Hallo,

    hat alles bestens bei einem Blog, den ich betreue, funktioniert. Danke für die saubere Auflistung.

    Ralf,
    kein Plugin-Freund ;)

  6. Hallo und vielen Dank für Deine Anleitung, aber muss bei den Rich-Snippets nicht der letzte Punkt (aktive) auch mit einen Link versehen werden? Erst dann bringt doch das “Rich-Snippets” erst etwas!

  7. Das ist eine sehr gute Frage! Ich bin der Meinung, dass das letzte Element nicht verlinkt werden muss, da der Besucher sich ja auf der Seite bereits befindet. Die Breadcrumb ist ja an sich eine Navigationshilfe. Ein Link auf sich selbst verwirrte den Besucher ja nur.

    Ich nutze beide Varianten. Sowohl in der einen als auch der anderen Variante werden nur die übergeordneten Hierarchien in den SERP dargestellt:

    letztes Breadcrumb Element verlinkt

    Breadcrumb letztes Element verlinkt

    letztes Breadcrumb Element nicht verlinkt

    Breadcrumb letztes Element nicht verlinkt

  8. Eine interessante Anleitung, die bei anderen auch zu funktionieren scheint. =)
    Ich habe in meinem Skript, das ich fremderworben habe, bereits eine Breadcrumbstruktur, wie es schein. Besteht da eine Möglichkeit, die vorhandene in diese Vorgehensweise zu integrieren – denn im snippet-Tool werden keine Krümel angzeigt.

    Vielen Dank.

  9. kommt drauf an, woher die Breadcrumb bei Dir kommt.
    Möglich ist aber alles. Die Frage ist nur, ob das Plugin oder das Theme beim Update dann überschrieben wird, oder man die Funktion auslagern kann.

  10. Ich sehe übrigens gerade, dass Du mehrere Plugins hast, die sich gegenseitig relativieren!
    Bsp: Verschiedene Plugins spucken unterschiedliche og:image Meta Informationen aus!
    Dann hast Du multiple Descriptions und und und…

  11. Klingt einleuchtend.
    Ist schon zu viel verlangt, aber hättest Du einen Tipp, wie ich herausfinde, welche sich überschneiden?

    Danke.

  12. Auf jeden Fall “Add-Meta-Tags WordPress plugin” mit “platinum seo pack”
    “Add-Meta-Tags WordPress plugin” kannst Du Dir in diesem Fall sparen!

    “SHR Open Graph Tags” kollidiert scheinbar mit im Theme manuell gesetzten Open Graph Tags

  13. Hi,

    was genau mache ich mit dem Rich Snippets Code? Bringt es mehr, wenn Google die Breadcrumbs “indexiert”?

    Grüße,
    Hendrik

  14. Entdeckt, eingebaut und funktioniert. Super Lösung, danke für den Tipp. Schön das man dafür kein Plugin benötigt…

  15. Viktor, das ist eine schnelle Antwort, merci!

    Aber: durch was ersetzen? Das ist meine Frage…

    ich hab das schon in der Zeile 6 gefunden, aber ich brauch für eine geplant mehrsprachige Seite eine Variable, wie krieg ich den jeweiligen Menu-Text da hinein? Das möchte ich gerne wissen, wäre das Sahnehäubchen ;=)

  16. Ich habe noch eine Abfrage eingebaut, ob die write_breadcrumb-Funktion auch existiert:

    Das ersetzt den von dir geposteten Code an der entsprechenden Stelle im Template:

    Wenn alles korrekt eingebunden ist, ist aber kein Unterschied zu merken.

    Vielen Dank für das Tutorial, Viktor.

  17. Toller Code, danke zunächst dafür. Ich habe aber eine Frage: Wenn ich in einer Kategorie Artikel drin habe, die mehrere Kategorien haben, dann wird bisweilen in der Breadcrump nicht die Kategorie, in der ich mich befinde angezeigt, sondern eine andere. Wie kann ich das beheben? Wahrscheinlich müsste man den loop zurücksetzen, aber wie mache ich das bei deinem Code?

  18. Hallo Raphael,

    Du gehst an die Breadcrumbs falsch heran! Eine Breadcrumb ist ein eindeutiger Pfad zu einem Beitrag. Selbst wenn dieser in verschiedenen Kategorien gelistet ist sollte der Canonical identisch auf den Pfad der Breadcrumb zeigen. Alles andere wäre entweder Duplicate Content oder eine Kanibalisierung der Keywords im Beitrag/Title.
    Matt Cutts hat sich neulich zu genau diesem Problem geäußert http://www.searchenginejournal.com/matt-cutts-explains-can-use-multiple-breadcrumbs-page-without-confusing-googlebot/95333/

  19. Hi Victor,
    sehr coole Sache, vielen Dank! Ich habe eine Frage, die sich an Raphaels Beitrag anlehnt. Und zwar veröffentliche ich schon mal Posts in verschiedenen Kategorien. Die URL ist immer einmalig, aber dadurch werden Beiträge dann in mehreren Kategorien angeteasert. Das macht manchmal wirklich Sinn. Ein Artikel kann ja beispielsweise für Wirtschaft und Politik interessant sein. Also hat er eine eindeutige Heimat, aber wird auch in einem anderen Ressort angeteasert.
    Nun aber zu meiner Frage: Da bei WordPress ja immer die niedrigste ID gewinnt, habe ich ein Plugin installiert, mit dem ich eine eindeutige Heimat auswählen kann (in dem fall http://wordpress.org/plugins/hikari-category-permalink/). In der Breadcrumb gewinnt nun aber weiterhin die niedrigste ID, nicht die tatsächlich über das Plugin ausgewählte, die sich auch in der URl widerspiegelt. Dadurch werden nun im Rich Snippet und bei Google falsche Kategorien aufgelistet. Gibt es eine Möglichkeit, dein Script so anzupassen, dass nun auch in der Breadcrumb die korrekte URL angezeigt wird?
    Viele Grüße und besten Dank
    Jo

  20. Hallo Jo,

    um Dir eine Hilfe zu geben, müsste ich wissen wie das angesprochene Plugin die Permalinks generiert. Ich habe grad in das Plugin reingeschaut. Ehrlichgesagt verstehe ich darin nur Bahnhof. Sorry, muss bei dieser Frage passen.

  21. Ich vermute aber, dass Du bei Zeile 21 den folgenden Part:
    <a href=”‘.get_permalink($pdata->ID).’”>

    gegen dieses hier ersetzen musst:
    <a href=”‘.get_post_meta($post->ID, ‘_category_permalink’, true).’”>

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.


Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>