Vill du visa länkar för breadcrumb navigation på din WordPress site?
Breadcrumb navigation talar om för användarna var de befinner sig på en website relativt till homepage. Detta breadcrumb trail visas sedan också i sökresultaten, vilket gör att din website sticker ut.
I den här artikeln kommer vi att visa you hur du visar breadcrumb navigation links i WordPress.
Vad är Breadcrumb navigation och varför behöver du det?
Breadcrumb navigation är en term som används för att beskriva en hierarkisk navigation menu som presenteras som ett spår av links. Den används ofta som en sekundär navigation som allow användare att gå upp i webbplatsens hierarki av pages.
Breadcrumb navigation links är annorlunda än standard navigation menu system i WordPress.
Syftet med breadcrumb navigation är att hjälpa användare att navigera runt på din website. Det hjälper också search engines att förstå strukturen och hierarkin av links på en page.
Om dina breadcrumbs är uppsatta på rätt sätt kommer search engines som Google att displayed dem tillsammans med sidans titel i sökresultaten. Detta ger din website mer synlighet i sökresultaten och ökar din click through rate.
Metoderna i den här guiden hjälper you att ställa in breadcrumbs på rätt sätt genom att använda schema markup. Schema är en smart markeringskod som hjälper Google att identifiera dina breadcrumbs så att de visas i sökresultaten.
Med detta sagt, låt oss ta en titt på hur man addar breadcrumb navigation links i WordPress. Vi kommer att visa dig två metoder, och du kan välja den som fungerar bäst för dig:
Video Tutorial
Om du föredrar skriftliga instruktioner är det bara att fortsätta läsa.
Metod 1: Lägga till Breadcrumb navigation i WordPress med All in One SEO (rekommenderas)
Denna metod är enklare och rekommenderas för alla användare av WordPress.
För denna metod kommer vi att använda All in One SEO för WordPress, som är det bästa WordPress SEO tillägget på marknaden. Det hjälper dig att enkelt förbättra din sökmotorsoptimering för WordPress utan några tekniska färdigheter. Det kommer också med en användarvänlig breadcrumbs-funktion.
Obs: Det finns också en gratis version av All in One SEO available med begränsade funktioner, inklusive breadcrumbs. Vi rekommenderar dock att du uppgraderar till det betalda pluginet för att få tillgång till premium-funktioner som en länkassistent, avancerade sitemaps och mer.
Efter aktivering kommer du att tas till plugins installationsguide. Du kan följa instruktionerna på skärmen för att konfigurera pluginet.
Behöver du hjälp med installationen? Se vår steg-för-steg tutorial om hur du installerar och ställer in All in One SEO.
Därefter måste du besöka All in One SEO ” General Settings page och växla till fliken ’Breadcrumbs’.
Breadcrumbs schemamarkering läggs automatiskt till av All in One SEO till din websites kod så att search engines kan hitta den.
Men om du vill visa breadcrumb navigation länkar på din website också, då måste du aktivera alternativet ”Aktivera Breadcrumbs”.
Switching the toggle allows you to see the different breadcrumb display settings that you can use on your WordPress website.
Det finns fyra sätt som du kan använda för att displaya breadcrumb navigation trail på din WordPress website.
1. Lägga till Breadcrumb navigation med hjälp av shortcode
Shortcode-metoden är enkel och allow you att visa breadcrumb navigation links i your WordPress posts och pages eller på produktsidor i din online store.
Redigera bara posten, page eller produkten och add to följande shortcode där du vill visa breadcrumb navigation trail:
[aioseo_breadcrumbs]
Om du använder standard block editor kommer shortcoden automatiskt att konverteras till Shortcode-blocket.
You can now save your post or page and preview it to see the breadcrumb navigation menu in action.
Så här såg det ut på vår test site.
2. Lägga till Breadcrumb navigation med hjälp av Gutenberg Block
Nu, om du inte vill använda shortcode-alternativet eller inte kommer ihåg shortcode, kan du visa breadcrumb navigation genom att använda AIOSEO – Breadcrumbs block.
Redigera bara posten eller sidan där du vill visa breadcrumb navigation och add to AIOSEO – Breadcrumbs block.
Tillägget kommer sedan att ladda en live preview av dina breadcrumb navigation länkar och visa den i content området.
Glöm inte att updating eller publicera dina ändringar.
3. Lägga till Breadcrumb Navigation med Widget
De två metoderna ovan kräver att du lägger till en shortcode eller ett block i varje post eller page där du vill visa breadcrumb navigation links.
Vad händer om du vill visa breadcrumbs automatiskt för varje post eller page?
Med widgeten AIOSEO Breadcrumbs kan du enkelt göra det.
Gå bara till sidan Appearance ” Widgets och add AIOSEO – Breadcrumbs widget block. You can add it to your site’s sidebar, footer, or any widgetar area.
Du kan ange en Rubrik för widgeten eller lämna den tom om du föredrar det.
Glöm inte att klicka på knappen ”Update” för att spara dina settings.
You can now visit your website and see the breadcrumb navigation menu on all posts and pages.
4. Lägga till Breadcrumb navigation med hjälp av kod
Denna metod allow you att visa breadcrumbs navigation länkar exakt där du vill ha dem. Det är dock obligatoriskt att add to code i dina WordPress theme-filer.
Om du inte har gjort det tidigare, läs gärna vår artikel om hur du lägger till code snippets i WordPress.
Först måste du bestämma var du vill visa länkarna till breadcrumbs. Den vanligaste platsen att visa breadcrumbs-länkar är under det enskilda inlägget, sidan eller produkttiteln.
WordPress teman använder template-filer för att displaya olika sections på din website. Många teman använder till exempel en fil som heter content-single.php som finns i template-parts folder i your theme.
Se vår fusklapp för att hitta vilka filer som ska editeras i ett WordPress theme.
Efter det måste du editera filen med ditt theme med hjälp av en FTP-klient. Se vår guide om hur du använder FTP för att uploada filer till WordPress för instruktioner. Placera sedan följande kod där du vill visa länkarna för breadcrumb navigation:
<?php if( function_exists( 'aioseo_breadcrumbs' ) ) aioseo_breadcrumbs(); ?>
Glöm inte att save dina ändringar och uploada filen tillbaka till din website.
You can now visit your website to see the breadcrumbs links in action.
Ändra hur Breadcrumbs-länkar visas i AIOSEO
Som standard använder All in One SEO en template för att visa dina breadcrumb navigation-länkar. Den innehåller en länk till din home page, kategori, parent page och post eller page title separerade med symbolen ’”.
Du kan ändra det genom att besöka All in One SEO ” Allmänna Settings page och heading över till ’Breadcrumbs’ tabs. Därefter rullar du helt enkelt ner till Breadcrumbs Settings section.
Härifrån kan du ändra separator, visa eller dölja startlänken, add to ett prefix med mera.
När du är slutförd, glöm inte att store dina settings.
Metod 2: Add till Breadcrumb Navigation med Breadcrumb NavXT
Den här metoden kan användas med alla andra sökmotorsoptimeringar i WordPress. Den är användarvänlig om du har ett kompatibelt tema, men om du inte har det måste du editera dina temafiler för att visa dina breadcrumb navigation links.
Det första du behöver göra är att installera och aktivera pluginet Breadcrumb NavXT. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.
Efter aktivering måste du besöka Settings ” Breadcrumb NavXT page för att konfigurera plugin-inställningarna.
Standardinställningarna bör fungera för de flesta websites. Du kan dock customize inställningarna efter behov.
Settings page är indelad i olika sections. På tabben för allmänna inställningar kan you ändra stil och settings för dina breadcrumbs.
You will also notice that these link templates use Schema.org markup in the link tag.
Fliken post types under plugin-inställningar allow you to set up breadcrumbs links for posts, pages, and any custom post types.
Du kan välja hur du vill displaya din post-hierarki. Som standard kommer pluginet att använda hierarkin ”Site Rubrik > Category > Post Rubrik”.
Du kan ersätta kategorier med taggar, tagged, date eller post parent och ändra separator.
Tabbarna Taxonomies och Miscellaneous har liknande templates för dina breadcrumb navigation links.
Glöm inte att save dina ändringar när du är klar.
Breadcrumb NavXT erbjuder flera sätt att visa länkar för breadcrumb navigation på din website.
1. Display Breadcrumb Navigation med Theme Support
Några av de mest populära WordPress-temana har ett built-in alternativ för att visa breadcrumb navigation genom att välja Breadcrumb NavXT eller your WordPress sökmotorsoptimering plugin som källa.
Om du till exempel använder Astra kan du gå till sidan Appearance ” Customize och klicka på menyn ’Breadcrumbs’.
Därifrån väljer du var du vill att dina breadcrumbs ska visas i dropdown ’Header Position’.
I ”Breadcrumb Source” måste du välja ”Breadcrumb NavXT”.
Om du viewar ett enskilt inlägg eller page, så kommer du att se en live preview av dina breadcrumb navigation links.
Glöm inte att clicka på knappen ”Publicera” för att save your changes.
2. Display Navigation Links With Breadcrumb Trail Block
Du kan också visa navigationslänkarna i breadcrumbs genom att använda blocket Breadcrumb Trail.
Gå bara till din WordPress content editor och add sedan Breadcrumb Trail-blocket där du vill visa navigationslänkarna.
Därefter kan du updating eller publicera your content.
Därefter besöker du din website för att se navigations links in action.
3. Lägga till Breadcrumbs navigation med hjälp av en widget
Pluginet tillhandahåller också en widget som du kan använda för att visa breadcrumb navigation i sidebar eller något widget-ready area.
Först, gå till appearance ” Widgets page och add ’Breadcrumb Trail’ widget block till din webbplats widget area, gillar sidebar eller footer.
Standardinställningarna för widgetar fungerar för de flesta websites, men du kan ändra dem om det behövs. Till exempel kanske du vill dölja spåret på front page.
Glöm inte att klicka på knappen ”Update” för att lagra dina inställningar för widgetar.
4. Lägga till Breadcrumb navigation med hjälp av kod
Pluginet erbjuder också en kodmetod för att visa breadcrumb navigation länkar för avancerade användare.
Först måste du ansluta till din WordPress site med hjälp av en FTP-klient. Efter det navigerar du till din aktuella WordPress theme folder som ligger i /wp-content/themes/ directory.
WordPress teman använder template-filer för att displayed olika sections på din website. Många teman använder till exempel en fil som heter content-single.php som finns i template-parts folder i your theme.
Se vår fusklapp för att hitta vilka filer som ska editeras i ett WordPress theme.
Öppna template-filen för att edit den, och placera sedan följande kod där du vill visa breadcrumb trail:
<?php if( function_exists( 'bcn_display' ) ) bcn_display(); ?>
Glöm inte att save dina ändringar och uploada filen tillbaka till din website.
You can now visit your website to see the breadcrumb links trail in action.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du visar breadcrumb navigation-länkar i WordPress. Du kanske också vill se vår guide om hur du får mer trafik till din site i WordPress eller vår uppvisning av de bästa registrarerna för domännamn.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dennis Muthomi says
My theme had a problem with breadcrumbs feature it could not let me click the breadcrumb item, it just displayed the breadcrumb.
I do not know if it was coded like that or it was na error.
But since i had AIOSEO, I used its breadcrumbs feature and made it easy to jump back up the site hierarchy.
AIOSEO solved my problem.
Dayo Olobayo says
Thanks for this informative article. I added the aioseo breadcrumbs widget and it automatically shows breadcrumbs for my blog posts. However, I notice it displays breadcrumbs on the home page which I don’t like. Is there a way to fix that please?
Also, I notice from the screenshot above that your breadcrumbs looks appealing compared to what I have on my blog. Is there a way to customize it?
PS: I use the aioseo lite plugin.
WPBeginner Support says
It would depend on what method you used to add breadcrumbs to your site for how to remove it from the homepage specifically. For our breadcrums those are currently something we have styled specifically with our theme.
Administratör
Dayo Olobayo says
About the breadcrumbs showing up on my homepage, I contacted aioseo support and they provided me with a CSS code that fixed the problem. Thanks for your response.
Steven Jæger says
I have tried different breadcrumbs variants now also the NavXT. The breadcrumb show up and all looks fine.
My main menu are based on pages. My articles are made as posts, I add them in categories. It’s when I visit an article and try to use a link in the breadcrumb to go back one step it goes wrong.
WPBeginner Support says
You may want to resave your permalinks to ensure there wasn’t a hiccup there, otherwise, you would need to reach out to the support for the plugin you are currently using for the support to take a look.
Administratör
Surjeet Kumar Verma says
Thanks for sharing valuable content on breadcrumbs in WordPress. I really like it.
WPBeginner Support says
Glad our guide was helpful
Administratör
Rintesh Roy says
The plugin is not at all documented. At least, I could not find any.
WPBeginner Support says
The documentation for the plugin is linked on the plugin’s page
Administratör
Elizabeth Morgan says
I am using the Breadcrumb NavXT plugin and I added the code you suggested to my header.php file and it gave me this error:
”Your PHP code changes were rolled back due to an error on line 68 of file wp-content/themes/generatepress/header.php. Please fix and try saving again.
syntax error, unexpected ’<', expecting end of file"
What do I do about this?
WPBeginner Support says
There are a few possible reasons, you may want to take a look at our article here: https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
Administratör
Varun says
Thank you finally problem is solved
WPBeginner Support says
Glad our recommendations could help
Administratör
Hammad Rashid says
The plugin is awesome…. Thank You!
WPBeginner Support says
Glad we could recommend it
Administratör
Andres says
Hi WPBeginner,
Amazing post.
I wonder the following.
How do you make the ”home” breadcrumb (in your case WPBEGINNER) appear in blogs and posts but not in your HOME page.
I mean, when you go ”home” I dont see the breadcrumb, but when I click on other page I see the breadcrumb.
Thanks a lot for your time.
Editorial Staff says
In our theme, we have it set to only add breadcrumbs on singular pages and not the homepage template.
Administratör
Manish Ransubhe says
Hello, I am not using any plugin and I have never enabled Breadcrumbs.
Why my search Result showing breadcrumbs help me to disable this
Thank you
Ravi Singh says
same problem happened with me. So I check my theme panel and my theme had enabled breadcrumbs. you can also check your theme panel for more info about this. and I was using Newspaper theme. So if you are also using this theme then it is the one who is create difficulties for you. Disable it from there.
Dua Centre says
I have used seo yoast plugin. Breadcrumbs are being displayed on my webpages but not google search results . When will they start displaying in google search result as well ?
Walter says
Hello! Do you know if is it possible to insert the breadcrumbs inside the menu? I have to design a website with a vertical side menu, and the customer wants to have the breadcrumbs at the bottom of the menu.
DUy says
Is it posible to change the font size and the font color of Breadcrumb?
thanks
Sameer says
Hello,
I’m using breadcrumbs using the Yoast SEO method, But it’s only showing on homepage it’s not showing in Google Search.
Ex : the ideal structure should be Domain.com>Category but it’s showing as Domain.com/Category. can you please tell me how to implement this ?
Joshua says
Hello.. I am using breadcrumb navxt and its widget is working. I inserted the code for the header.php using ”insert header and footer” plugin but I can’t see any changes to my site even after saving and refreshing it.
Pls help, because the widgets area is working but no breadcrumb is showing in my sites header.
juan luis says
Hi. I’m afraid to manipulate codes. In case something goes wrong, can I just delete the inserted code without consequences?
WPBeginner Support says
Hi Juan,
If you don’t want to use code method, then you can try the plugin method. This way you will be able to undo changes by simply deactivating the plugin.
Administratör
Nate Balcom says
By the way I’m using the Yoast code that you have above and it doesn’t display the correct hierarchy. It omits a link for categories, projects, galleries. Anything that isn’t a post basically gets handled the same way. It’s close, but not correct.
Nate Balcom says
Thanks for posting this. I’ve been looking for a way to properly display my breadcrumb trail for the spiders. It gets a bit jenky with categories, projects, galleries and the like. I’ve been hand coding mine, but the php handles the hierarchy in the incorrect order. This is a huge help.
Anna says
My child theme (GeneratePress, from their own child theme download) doesn’t have a header.php file.
I’ve added the code into the parent GP theme header.php and the breadcrumbs are working now. But when I update GP …?
subhan says
Just copy the header.php to the the generate press child theme forlder.
Sunil says
Thanks for great post. Cheers!
Raymond Chukwuman says
Thank you so much. It is really working on my website God bless you
Abiodun says
I followed the steps, didn’t really work for me with the posts. I just saw the ’Home Breadcrumbs’on my homepage. How do I make it appear for my posts please? I’m using Yoast SEO
WPBeginner Support says
Breadcrumbs should automatically appear. If they don’t then please contact your theme’s support.
Administratör
Abiodun says
It worked…but the category do not appear before my posts, I just get Home>>posts title. How do I make categories appear before posts?
Michelle says
Hey! You have to set a parent page for your page that you are publishing. mine was only showing home > current page until i set the current page as ’child’ of the articles page, and the articles page as ’child’ of the homepage. you can do it in the page editor.
JOY says
Great! This is really useful! Thanks a lot!
malek says
thanks you , really usefull