{"id":744112,"date":"2021-09-06T07:58:17","date_gmt":"2021-09-06T07:58:17","guid":{"rendered":"https:\/\/rankmath.com\/?post_type=ht_kb&#038;p=744112"},"modified":"2023-06-30T10:26:16","modified_gmt":"2023-06-30T10:26:16","slug":"breadcrumbs","status":"publish","type":"ht_kb","link":"https:\/\/rankmath.com\/ja\/kb\/breadcrumbs\/","title":{"rendered":"Rank MathSEO\u3092\u4f7f\u7528\u3057\u3066Web\u30b5\u30a4\u30c8\u3067\u30d6\u30ec\u30c3\u30c9\u30af\u30e9\u30e0\u3092\u6709\u52b9\u306b\u3059\u308b\u65b9\u6cd5"},"content":{"rendered":"<p><strong>\u30d1\u30f3\u7c89<\/strong> make it easy for visitors to navigate your website. Enabling breadcrumbs \u2013&nbsp;especially for eCommerce stores \u2013 has enormous benefits, such as good user experience, reduced bounce rate, helping the search engines to crawl the website easily, and ultimately improving the rankings.<\/p>\n\n\n\n<p>Fortunately, the Rank Math SEO plugin makes it extremely easy to add the <a href=\"https:\/\/developers.google.com\/search\/docs\/data-types\/breadcrumb\" data-schema-attribute=\"about\" target=\"_blank\" rel=\"noopener\">Breadcrumb Schema<\/a> that search engines require to show breadcrumbs in search results. Now let&#8217;s take a look at how to enable breadcrumbs with Rank Math:<\/p>\n\n\n<div class=\"youtube-container\"><div class=\"youtube-player\" data-id=\"30jgc9RXLVo\" data-image=\"exists\" data-controls=\"1\" role=\"button\" tabindex=\"0\" aria-label=\"\u52d5\u753b\u3092\u518d\u751f\u3057\u307e\u3059\"><div><img decoding=\"async\" class=\"youtube-thumb\" src=\"https:\/\/img.youtube.com\/vi\/30jgc9RXLVo\/maxresdefault.jpg\" width=\"1280\" height=\"720\" alt=\"How to Enable Breadcrumbs on Your Website with Rank Math SEO? Rank Math SEO\" role=\"presentation\"><div class=\"play-button\" aria-hidden=\"true\"><i class=\"icon-youtube\"><\/i><\/div><\/div><\/div><\/div>\n\n\n<div id=\"toc\">\n<h2 id=\"table-of-contents\">\u76ee\u6b21<\/h2>\n<ul>\n<li><a href=\"#activate-breadcrumbs\">Activate Breadcrumbs<\/a><\/li>\n<li><a href=\"#breadcrumbs-options\">Editing Options of Breadcrumbs<\/a><\/li>\n<li><a href=\"#add-breadcrumbs-theme\">Adding Breadcrumbs to Website<\/a><\/li>\n<li><a href=\"#woocommerce-breadcrumbs\">How to Disable WooCommerce Breadcrumbs?<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"activate-breadcrumbs\"><span class=\"number\">1<\/span>  Activate Breadcrumbs<\/h2>\n\n\n\n<p>The first step is to head over to <strong>WordPress Dashboard \u2192 Rank Math SEO<\/strong>. Once done, enable the <strong>Schema <\/strong>module, as shown below. This would allow Rank Math to add the Breadcrumb Schema for the breadcrumbs we&#8217;ll add in the rest of the tutorial.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1399\" height=\"497\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2025\/07\/Enable-the-Schema-module.png\" alt=\"Enable the Schema module\" class=\"wp-image-1574901\" \/><\/figure>\n\n\n\n<p>Next, you should configure your breadcrumbs settings. To do that, head to <strong>Rank Math SEO \u2192 General Settings \u2192 Breadcrumbs<\/strong>. If Breadcrumbs settings are unavailable, ensure you&#8217;ve <a href=\"https:\/\/rankmath.com\/kb\/advanced-mode\/\">switched to the Advanced Mode<\/a> Rank Math\u3067\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"2394\" height=\"1056\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2023\/01\/breadcrumbs-settings-1.jpg\" alt=\"breadcrumbs settings\" class=\"wp-image-1120974\" style=\"width:900px;height:undefinedpx\" \/><\/figure>\n\n\n\n<p>In the Breadcrumbs settings, you can notice only one setting available at the moment, because the breadcrumbs feature is turned off.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1378\" height=\"270\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2021\/04\/Enable-Breadcrumbs-function.jpg\" alt=\"Enable breadcrumbs function\" class=\"wp-image-837993\" \/><\/figure>\n\n\n\n<p>But once you enable the breadcrumbs function, all the other <a class=\"rank-math-link\" href=\"https:\/\/rankmath.com\/kb\/general-settings\/\">settings<\/a> will appear on the screen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"1397\" height=\"2560\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/10\/enable-breadcrumbs-scaled.jpg\" alt=\"Available Breadcrumbs settings\" class=\"wp-image-1087382\" style=\"width:900px;height:undefinedpx\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"breadcrumbs-options\"><span class=\"number\">2<\/span>  Editing Options of Breadcrumbs<\/h2>\n\n\n\n<p>From the above image, you can notice several editing options available under Breadcrumbs settings. Now, let us look at each option one by one.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"separator-character\"><span class=\"number\">2.1<\/span>  Separator Character<\/h3>\n\n\n\n<p>This option lets you set a separator character for your breadcrumb items. You can choose one from the different characters available in this list, or you can type your own separator character in the last field.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2021\/03\/breadcrumbs-seperator-character.jpg\" alt=\"Breadcrumbs - Separator Character\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"show-homepage-link\"><span class=\"number\">2.2<\/span>  Show Homepage Link<\/h3>\n\n\n\n<p>You can enable this option if you want your homepage to be included in the breadcrumbs. When you enable this option, two new options, &#8216;<strong>Homepage Label<\/strong>&#8216; and &#8216;<strong>Homepage Link<\/strong>&#8216; will pop on your screen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2021\/03\/homepage-link.jpg\" alt=\"Breadcrumbs - Show Homepage Link\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"homepage-label\"><span class=\"number\">2.3<\/span>  Homepage Label<\/h3>\n\n\n\n<p>You can use this option to set a label for the homepage of your website. By default, the label is set as <strong>\u5bb6<\/strong>, but you can type your own label, which would be more relevant to denote your website&#8217;s homepage.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2021\/03\/homepage-label.jpg\" alt=\"Breadcrumbs - Homepage Label\" \/><\/figure>\n\n\n\n<p>If the homepage label is set to Home, the breadcrumb will appear as:<\/p>\n\n\n\n<p><code>Home \/ Knowledge Base \/ SEO Suite \/ How to Enable Breadcrumbs on Your Website with Rank Math SEO<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"homepage-link\"><span class=\"number\">2.4<\/span>  Homepage Link <\/h3>\n\n\n\n<p>You can use this option to configure where the homepage link will take the visitor to. This option is useful if your website has multiple sections like blog, store, etc., and you can enter the link where you want to send your visitor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2021\/03\/homepage-link-1.jpg\" alt=\"Homepage link\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"prefix-breadcrumb\"><span class=\"number\">2.5<\/span>  Prefix Breadcrumb<\/h3>\n\n\n\n<p>You can add a prefix to your breadcrumb path with the help of the <strong>Prefix Breadcrumb<\/strong> option. Some of the popular prefix for breadcrumbs include &#8220;You are here&#8221;, &#8220;Navigation&#8221;, &#8220;Index&#8221;, etc<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2021\/03\/prefix-breadcrumb.jpg\" alt=\"Breadcrumbs - Prefix Breadcrumb\" \/><\/figure>\n\n\n\n<p>For instance, if we add the Prefix Breadcrumb as &#8220;You are here: &#8221; then our breadcrumbs would appear as:<\/p>\n\n\n\n<p><code>You are here: Home \/ Knowledge Base \/ SEO Suite \/ How to Enable Breadcrumbs on Your Website with Rank Math SEO<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"archive-format\"><span class=\"number\">2.6<\/span>  Archive Format<\/h3>\n\n\n\n<p>This option lets you set a breadcrumb format for the archive pages.&nbsp;<code>%s<\/code> represents the taxonomy, and we recommend that you do not remove it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2021\/03\/archive-format.jpg\" alt=\"Breadcrumbs - Archive Format\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"search-result-format\"><span class=\"number\">2.7<\/span>  Search Result Format<\/h3>\n\n\n\n<p>This option lets you set a breadcrumb format for search result pages. <code>%s<\/code> represents the search query, and we recommend you not to remove it. Some popular formats include &#8220;You searched for&#8221;, &#8220;Here&#8217;s what I found for&#8221;, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2021\/03\/search-results-format.jpg\" alt=\"Breadcrumbs - Search Results Format\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"404-label\"><span class=\"number\">2.8<\/span>  404 Label<\/h3>\n\n\n\n<p>This option allows you to set a breadcrumb label for your 404 pages.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2021\/03\/404-label.jpg\" alt=\"Breadcrumbs - 404 Label\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"hide-post-title\"><span class=\"number\">2.9<\/span>  Hide Post Title<\/h3>\n\n\n\n<p>You can enable this option if you do not want the current post&#8217;s title to be included in the breadcrumb. Usually, the title of the page you&#8217;re viewing is included as the last element of the breadcrumb. When you enable this option, the breadcrumb will not include the post title.<\/p>\n\n\n\n<p>When the Hide Post Title option is enabled, our breadcrumb will appear as:<\/p>\n\n\n\n<p><code>Home \/ Knowledge Base \/ SEO Suite<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2021\/03\/hide-post-title.jpg\" alt=\"Breadcrumbs - Hide Post Title\" \/><\/figure>\n\n\n\n<p>If you wish to display the post title in the breadcrumb, but the post title looks lengthier, then you can <a href=\"https:\/\/rankmath.com\/kb\/advanced-tab\/#breadcrumb-title\">change the breadcrumbs label<\/a> alone without making any changes to the title of the post. <\/p>\n\n\n\n<p>To do so, make sure the Hide Post Title option is disabled. Then open the post with the lengthier title and navigate to <strong>Rank Math Meta Box \u2192 Advanced Tab \u2192 Breadcrumb Title<\/strong>, and here you can give a shorter title for your post that would appear only on breadcrumb.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"show-category\"><span class=\"number\">2.10<\/span>  Show Category<\/h3>\n\n\n\n<p>Show Category(s) will show the categories of your post in the breadcrumb. We recommend that you keep this disabled so your breadcrumb will look small and precise. When the show category(s) option is <strong>disabled<\/strong>, our breadcrumbs will appear as:<\/p>\n\n\n\n<p><code>Home \/ Knowledge Base \/ How to Enable Breadcrumbs on Your Website with Rank Math SEO<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2021\/03\/show-category.jpg\" alt=\"Breadcrumbs - Show Category(s)\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"show-category-is-enabled\">Show Category Is Enabled<\/h4>\n\n\n\n<p>But, in case, if your categories are important navigational elements on your website, then enabling this option should be preferred. <\/p>\n\n\n\n<p>When the Show Category(s) option is <strong>\u6709\u52b9<\/strong>, the category will be included just before the name of the post. The primary category will be used here if your post includes multiple categories. In case if you wish to change the primary category for your post, <a href=\"https:\/\/rankmath.com\/kb\/how-to-choose-a-primary-category\/\">here is a dedicated tutorial<\/a>. The breadcrumb would now appear as:<\/p>\n\n\n\n<p><code>Home \/ Knowledge Base \/ SEO Suite \/ How to Enable Breadcrumbs on Your Website with Rank Math SEO<\/code><\/p>\n\n\n\n<p>Now the Show Category(s) option is <strong>\u6709\u52b9<\/strong>, and we&#8217;ve selected a category as the primary category (say &#8220;Technical SEO&#8221;), but it includes a parent category (say &#8220;SEO Suite&#8221;), then the breadcrumb will appear as:<\/p>\n\n\n\n<p><code>Home \/ Knowledge Base \/ SEO Suite \/ Technical SEO \/ How to Enable Breadcrumbs on Your Website with Rank Math SEO<\/code><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"breadcrumb-category-customization\">Breadcrumb Category Customization<\/h4>\n\n\n\n<p><strong>Changing Primary Taxonomy:<\/strong> If you wish to change the taxonomy used for the breadcrumbs, then you can set the <strong><a href=\"https:\/\/rankmath.com\/kb\/titles-and-meta\/#primary-taxonomy\">Primary Taxonomy<\/a><\/strong> for your post type under <strong>WordPress Dashboard \u2192 Rank Math SEO \u2192 Titles &amp; Meta \u2192 Posts<\/strong>.<\/p>\n\n\n\n<p><strong>Changing Breadcrumb Label for Categories:<\/strong> To change the label of any of your categories appearing in breadcrumbs, you can open the category page, and in the Rank Math&#8217;s Meta Box, navigate to the <strong>\u9ad8\u5ea6<\/strong> tab and enter the label in the <strong><a href=\"https:\/\/rankmath.com\/kb\/advanced-tab\/#breadcrumb-title\">Breadcrumb Title<\/a><\/strong> \u5206\u91ce\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"hide-taxonomy-name\"><span class=\"number\">2.11<\/span>  Hide Taxonomy Name<\/h3>\n\n\n\n<p>When you enable this option, Rank Math will remove the taxonomy name from the breadcrumbs of archive pages. The recommended setting is &#8220;Off&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2021\/03\/hide-taxonomy-name.jpg\" alt=\"Breadcrumbs - Hide Taxonomy Name\" \/><\/figure>\n\n\n\n<p>For instance, when the Hide Taxonomy Name option is <strong>disabled<\/strong>, the <strong>archive page<\/strong> of a term (say &#8220;Schema Markup&#8221;) associated with a custom taxonomy (say &#8220;Custom Categories&#8221;) would have a breadcrumb as:<\/p>\n\n\n\n<p><em><code>Home \/ Custom Categories \/ Schema Markup \/<\/code><\/em><\/p>\n\n\n\n<p>When you <strong>\u6709\u52b9<\/strong> the Hide Taxonomy Name option, the taxonomy name will now disappear, and the archive page of the term will have a breadcrumb as:<\/p>\n\n\n\n<p><code>Home \/ Schema Markup \/<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"show-blog-page\"><span class=\"number\">2.12<\/span>  Show Blog Page<\/h3>\n\n\n\n<p>When you enable this option, your blog page will be included next to the home page in the breadcrumb. Rank Math would include the title of your Blog Page in the breadcrumb next to the Home page (if you&#8217;ve configured breadcrumbs to display the Home page). <\/p>\n\n\n\n<p>Rank Math will show the Blog page in the breadcrumbs only on your posts and not to pages or any other custom post types.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1525\" height=\"196\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2021\/04\/Show-Blog-Page-Breadcrumbs-setting.jpg\" alt=\"Show Blog Page - Breadcrumbs setting\" class=\"wp-image-836732\" \/><\/figure>\n\n\n\n<p>For instance, when the Show Blog Page option is <strong>\u6709\u52b9<\/strong>, the <a href=\"https:\/\/rankmath.com\/blog\/canonical-urls\/\">breadcrumb for our blog post<\/a> would appear as:<\/p>\n\n\n\n<p><code>Home \/ Blog \/ Understanding Canonical URLs: The Definitive Guide<\/code><\/p>\n\n\n\n<p class=\"takeaway yellow\"><strong>\u30ce\u30fc\u30c8\uff1a<\/strong> The option to Show Blog Page will be visible in your Breadcrumbs settings only if you have set a <strong>Posts Page<\/strong> \u4e0b <strong>WordPress Dashboard \u2192 Settings \u2192 Reading \u2192 Your Homepage Displays<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-breadcrumbs-theme\"><span class=\"number\">3<\/span>  Adding Breadcrumbs to Website<\/h2>\n\n\n\n<p>Now that you&#8217;ve configured the breadcrumbs settings, you need to add the breadcrumbs code to your website to display on the front end. There are a few ways to add breadcrumbs to your website, and we&#8217;ll look at them individually.<\/p>\n\n\n\n<p class=\"takeaway red\"><strong>\u30ce\u30fc\u30c8\uff1a<\/strong> Before adding breadcrumbs to your website, ensure that Rank Math is the only plugin adding the breadcrumbs. If your theme or any other plugin installed on your website is already adding Breadcrumbs, you may need to disable\/remove their Breadcrumbs first to avoid any conflicts.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"theme-template-files\"><span class=\"number\">3.1<\/span>  Adding Breadcrumbs to Theme Template Files<\/h3>\n\n\n\n<p>You can add Rank Math&#8217;s breadcrumbs code to your theme&#8217;s template files, and the breadcrumbs will appear on your website&#8217;s front end accordingly. Editing the theme files directly could be difficult for beginners and cause adverse effects if not handled correctly. Hence, we always recommend <a class=\"rank-math-link\" href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/\" target=\"_blank\" rel=\"noopener\">using a child theme<\/a>.<\/p>\n\n\n\n<p>To edit your child theme, navigate to <strong>WordPress Dashboard \u2192 Appearance \u2192 Theme File Editor<\/strong> (for a Classic Theme) or <strong>WordPress Dashboard \u2192 Tools \u2192 Theme File Editor<\/strong> (for a Block Theme). <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"988\" height=\"528\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/05\/Theme-File-Editor.png\" alt=\"Theme File Editor\" class=\"wp-image-1051709\" \/><\/figure>\n\n\n\n<p>You will see the theme files on the right side. Select your child theme template as shown below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"954\" height=\"674\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/02\/image-53.png\" alt=\"Add Breadcrumbs code to your theme's template file\" class=\"wp-image-1031586\" style=\"width:900px;height:undefinedpx\" \/><\/figure>\n\n\n\n<p>Next, you should add the following code to the appropriate location in your theme&#8217;s template file to display the breadcrumbs.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\n * Use the following code in your theme template files to display breadcrumbs:\n *\/\n&lt;?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?&gt;<\/code><\/pre>\n\n\n\n<p class=\"takeaway yellow\"><strong>\u30ce\u30fc\u30c8\uff1a<\/strong> Depending upon the theme you use, the theme file where you should add the breadcrumbs function would vary. In most themes, it would be either the single.php file or the header.php file. But in case if you&#8217;re unable to figure it out, you can check with your theme developer or reach out to <a href=\"https:\/\/rankmath.com\/support\/\">Rank Math&#8217;s support team directly from here<\/a> and we&#8217;re available 24&#215;7 to help you out.<\/p>\n\n\n\n<p>Once you have made the changes, click on the Update File button to save your changes. Besides this, if you wish to use a theme compatible with Rank Math&#8217;s breadcrumbs feature out of the box, you can refer to our <a href=\"https:\/\/rankmath.com\/ja\/compatibility\/\">compatibility page here<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"shortcode\"><span class=\"number\">3.2<\/span>  Adding Breadcrumbs With Shortcode<\/h3>\n\n\n\n<p>You can also add the breadcrumb anywhere you want with the help of a shortcode. Just copy and paste this shortcode to the text editor of any post\/page, and then Rank Math will pull the breadcrumb for that specific post\/page.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;rank_math_breadcrumb]<\/code><\/pre>\n\n\n\n<p class=\"takeaway yellow\">You can refer to this guide for&nbsp;<a href=\"https:\/\/rankmath.com\/blog\/how-to-add-shortcode-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\" data-schema-attribute=\"mentions\">adding shortcodes to your site.<\/a>&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"theme-support\"><span class=\"number\">3.3<\/span>  Native Theme Support<\/h3>\n\n\n\n<p>Theme authors can ensure that their themes come with native support for Rank Math&#8217;s breadcrumbs feature. To register theme support, theme authors should include the following code to their theme&#8217;s functions.php file or attach it to the hook <code>'after_setup_theme'<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\n * Register theme support for Rank Math breadcrumbs\n *\/\nadd_theme_support( 'rank-math-breadcrumbs' );<\/code><\/pre>\n\n\n\n<p>Once the theme support for our breadcrumbs feature is registered, include the following code inside the theme at a desirable location to display the breadcrumbs on the front-end.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\n * Use the following code in your theme template files to display breadcrumbs:\n *\/\n&lt;?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?&gt;<\/code><\/pre>\n\n\n\n<p>When a theme comes with native support for our breadcrumbs feature, end-users don&#8217;t have to make changes to their theme&#8217;s files to get the breadcrumbs to show up on the front end, as the theme already includes the code. It also means that users will not be able to disable the breadcrumbs function under <strong>WordPress Dashboard \u2192 Rank Math SEO \u2192 General Settings \u2192 Breadcrumbs<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"1926\" height=\"594\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/10\/breadcrumbs-function.jpg\" alt=\"breadcrumbs function not available\" class=\"wp-image-1087383\" style=\"width:900px;height:undefinedpx\" \/><\/figure>\n\n\n\n<p>Only the option to enable\/disable the breadcrumbs function will not be available for users, while they can still take advantage of all the other editing options that Rank Math offers for breadcrumbs.<\/p>\n\n\n\n<p>The easiest way to know if a theme includes support for Rank Math Breadcrumbs is by heading over to <strong>Rank Math SEO \u2192 Status and Tools \u2192 System Info \u2192 Active Theme<\/strong>. Here in the <strong>Theme features<\/strong>, you can check if <code>rank-math-breadcrumbs<\/code> is listed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"951\" height=\"455\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2022\/07\/Rank-Math-Breadcrumbs-theme-features.png\" alt=\"Rank Math Breadcrumbs theme features\" class=\"wp-image-1064084\" style=\"width:900px;height:undefinedpx\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"elementor\"><span class=\"number\">3.4<\/span>  Adding Breadcrumbs With Elementor <a href=\"https:\/\/rankmath.com\/ja\/pricing\/\" class=\"pro-badge\" target=\"_blank\" style=\"vertical-align:\" title=\"Rank Math\u30d7\u30ec\u30df\u30a2\u30e0\u30d7\u30e9\u30f3\"><span class=\"label\">\u30d7\u30ed<\/span><\/a><\/h3>\n\n\n\n<p>If you&#8217;re using the Elementor page builder, you can easily include Rank Math&#8217;s Breadcrumbs widget in any page or template. <\/p>\n\n\n\n<p>To use breadcrumbs with Elementor, open any page with Elementor page builder, and under the Elements tab, search for the Breadcrumbs widget.<\/p>\n\n\n\n<p class=\"takeaway yellow\"><strong>\u30ce\u30fc\u30c8\uff1a <\/strong>The Rank Math breadcrumbs widget is available only when Elementor Pro and <a href=\"https:\/\/rankmath.com\/ja\/pricing\/\">Rank Math PRO<\/a> are installed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1366\" height=\"631\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2024\/02\/Elementor-Search-for-Breadcrumbs-widget.png\" alt=\"Elementor - Search for Breadcrumbs widget\" class=\"wp-image-1295012\" \/><\/figure>\n\n\n\n<p>Next, click on the breadcrumbs widget. The breadcrumbs will be added to your editing screen. The breadcrumbs settings will also be visible on the left side of the screen, as shown below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1366\" height=\"631\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2024\/02\/Rank-Math-Breadcrumbs-widget-for-Elementor-1.png\" alt=\"Rank Math - Breadcrumbs widget for Elementor\" class=\"wp-image-1295016\" \/><\/figure>\n\n\n\n<p class=\"takeaway yellow\"><strong>\u30ce\u30fc\u30c8\uff1a<\/strong> Rank Math Free users can still use Breadcrumbs in Elementor using this shortcode. Simply add this shortcode in the editing screen of the page builder, and now you can take advantage of the same styling and customizations that Elementor offers for the Breadcrumbs widget.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"styling-options\">Styling Options<\/h4>\n\n\n\n<p>The breadcrumbs widget has some styling options that allow you to change the typography, text color, and link color of your breadcrumbs. You can access the styling options by clicking <strong>Style<\/strong>\u3001\u4ee5\u4e0b\u306b\u793a\u3059\u3088\u3046\u306b\u3002 <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1366\" height=\"631\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2024\/02\/Click-Style-to-access-the-Styling-options.png\" alt=\"Click Style to access the Styling options\" class=\"wp-image-1295276\" \/><\/figure>\n\n\n\n<p>This is what the style option looks like once you&#8217;ve clicked on it. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1366\" height=\"631\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2024\/02\/Rank-Math-Breadcrumbs-Elementor-styling-options.png\" alt=\"Rank Math Breadcrumbs - Elementor - styling options\" class=\"wp-image-1295021\" \/><\/figure>\n\n\n\n<p>Now, let us go through the available styling options one by one.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"typography-options\">Typography Options<\/h4>\n\n\n\n<p>When you click the edit icon next to the Typography option, the complete set of styling options related to Typography will be available for you to edit.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1366\" height=\"631\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2024\/02\/Edit-Breadcrumbs-Typography.png\" alt=\"Edit Breadcrumbs Typography\" class=\"wp-image-1295022\" \/><\/figure>\n\n\n\n<p>The different styling options available under Typography are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Family<\/strong>: There are various font families available to choose one from<\/li>\n\n\n\n<li><strong>Size<\/strong>: To change the size of the font in the breadcrumb<\/li>\n\n\n\n<li><strong>Weight<\/strong>: You can use this option to change the font weight in the breadcrumb, which will make the font look bolder<\/li>\n\n\n\n<li><strong>Transform: <\/strong>The transform option lets you change the text to uppercase, lowercase, or capital letters, or keep it normal<\/li>\n\n\n\n<li><strong>Style: <\/strong>You can choose from the different style options available, like italic, oblique or keep the style as normal<\/li>\n\n\n\n<li><strong>Decoration<\/strong>: You can choose between underline, overline, line-through, or leave it none to decorate your text<\/li>\n\n\n\n<li><strong>Line Height<\/strong>: This option helps to increase or decrease the line-height<\/li>\n\n\n\n<li><strong>Letter Spacing<\/strong>: The letter spacing option lets you change the spacing between two letters<\/li>\n\n\n\n<li><strong>Word Spacing: <\/strong>The word spacing option lets you change the spacing between the words<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"text-and-link-color\">Text Color Option<\/h4>\n\n\n\n<p>\u30b6&nbsp;<strong>Text Color&nbsp;<\/strong>option allows you to select the color of your text. &nbsp;You will click the&nbsp;<strong>color picker<\/strong>&nbsp;icon to choose your desired text color, as shown below.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1366\" height=\"631\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2024\/02\/Set-your-breadcrumbs-text-color.png\" alt=\"Set your breadcrumbs text color\" class=\"wp-image-1295266\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"text-and-link-color\">Link Color Option<\/h4>\n\n\n\n<p>\u30b6 <strong>Link Color <\/strong>option enables you to set the color of your links. It has two options: <strong>Normal<\/strong> \u3068 <strong>Hover<\/strong>. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Normal<\/strong>&nbsp;allows you to change the color of the link as it appears on the post or page<\/li>\n\n\n\n<li><strong>Hover<\/strong>, on the other hand, will enable you to change the color of the link when a visitor hovers over it&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Select one of Normal or Hover. Once done, click the <strong>color picker <\/strong>icon to select your desired link color.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1366\" height=\"631\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2024\/02\/Set-your-breadcrumbs-link-color.png\" alt=\"Set your breadcrumbs link color\" class=\"wp-image-1295267\" \/><\/figure>\n\n\n\n<p>After you&#8217;re done styling the page, click the <strong>\u516c\u958b<\/strong> \u307e\u305f <strong>Update<\/strong> button to save the changes. Following the same method as adding the Breadcrumbs widget to any post\/page with the Elementor page builder, you can also add breadcrumbs to Elementor templates to use it on all your pages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"block-theme\"><span class=\"number\">3.5<\/span>  Adding Breadcrumbs in Block Themes<\/h3>\n\n\n\n<p>In case you&#8217;re using a Block Theme like Twenty Twenty-Four, you can add Rank Math&#8217;s Breadcrumbs to any page with the following steps. <\/p>\n\n\n\n<p>Start by heading over to <strong>WP Admin Dashboard \u2192 Appearance \u2192<\/strong> <strong>Editor<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1366\" height=\"604\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2024\/02\/Editor-from-Appearance-in-Twenty-Twenty-Four-Theme.png\" alt=\"Editor from Appearance in Twenty Twenty-Four Theme.\" class=\"wp-image-1295026\" \/><\/figure>\n\n\n\n<p>Next, click <strong>Templates<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1366\" height=\"631\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2024\/02\/Templates-section-of-Twenty-Twenty-Four-Theme.png\" alt=\"Templates section of Twenty Twenty-Four Theme\" class=\"wp-image-1295029\" \/><\/figure>\n\n\n\n<p>You will be presented with the available templates. Select the template of the post or page you\u2019re looking to add the breadcrumbs to.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1366\" height=\"646\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2024\/02\/Select-the-template.png\" alt=\"Select the template\" class=\"wp-image-1295236\" \/><\/figure>\n\n\n\n<p>After selecting a template, say, for example, Single Post, hover over a location on the editing screen and click the <strong>Add pattern<\/strong> icon <strong><code>+<\/code><\/strong>. Once done, search for <code>\u30b7\u30e7\u30fc\u30c8\u30b3\u30fc\u30c9<\/code> and click the shortcode block, as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1366\" height=\"637\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2024\/02\/shortcode-feature-in-block-theme.png\" alt=\"shortcode feature in block theme\" class=\"wp-image-1295237\" \/><\/figure>\n\n\n\n<p>Now add the following shortcode right inside the block and click the <strong>\u4fdd\u5b58<\/strong> button on the top right corner of the Editor.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;rank_math_breadcrumb] <\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1366\" height=\"633\" src=\"https:\/\/rankmath.com\/wp-content\/uploads\/2024\/02\/Rank-Math-breadcrumbs-shortcode.png\" alt=\"Rank Math Breadcrumbs shortcode\" class=\"wp-image-1295280\" \/><\/figure>\n\n\n\n<p>And, that&#8217;s it. Now you should see Rank Math&#8217;s Breadcrumbs on all the pages that use this template. Similarly, you can also use this shortcode on your other templates and display the breadcrumbs at your preferred location.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"woocommerce-breadcrumbs\"><span class=\"number\">4<\/span>  How to Disable WooCommerce Breadcrumbs?<\/h2>\n\n\n\n<p>By default, WooCommerce adds Breadcrumbs to the product pages and archives. However, it does not add Breadcrumb Schema out of the box.<\/p>\n\n\n\n<p>Fortunately for WooCommerce users, Rank Math is here to save your day. If you want to add Breadcrumb Schema in WooCommerce without losing the benefits of customization options that Rank Math offers for Breadcrumbs, then you will have to disable the default breadcrumbs feature from the <strong>Theme File Editor<\/strong>. For that, you should add the below-mentioned code to your theme files:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/**\n * Function to disable WooCommerce breadcrumbs\n *\/\nfunction remove_wc_breadcrumbs() {\nremove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );\n}\nadd_action( 'init', 'remove_wc_breadcrumbs' );<\/pre>\n\n\n\n<p>Now you have successfully updated the code. You can try using <a href=\"#add-breadcrumbs-theme\">one of Rank Math&#8217;s methods to add breadcrumbs<\/a> to see the effect.<\/p>\n\n\n\n<p>And that&#8217;s it! If you still have questions about using our Breadcrumbs feature, feel free to <a href=\"https:\/\/rankmath.com\/support\/\" data-type=\"URL\" data-id=\"https:\/\/rankmath.com\/support\/\">reach our support forum<\/a> \u2014 we&#8217;re always here to help.<\/p>","protected":false},"excerpt":{"rendered":"<p>Breadcrumbs make it easy for visitors to navigate your website. Enabling breadcrumbs \u2013&nbsp;especially for eCommerce stores \u2013 has enormous benefits, such as good user experience, reduced bounce rate, helping the search engines to crawl the website easily, and ultimately improving the rankings. Fortunately, the Rank Math SEO plugin makes it extremely easy to add the Breadcrumb Schema that search engines require to show breadcrumbs in search results. Now let&#8217;s take a look at how to enable breadcrumbs with Rank Math: Table of Contents Activate Breadcrumbs Editing Options of Breadcrumbs Adding Breadcrumbs to Website How to Disable WooCommerce Breadcrumbs? Activate Breadcrumbs The first step is to head over to WordPress Dashboard [&hellip;]<\/p>","protected":false},"author":452844,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[153],"ht-kb-tag":[],"class_list":{"0":"post-744112","1":"ht_kb","2":"type-ht_kb","3":"status-publish","4":"format-standard","6":"ht_kb_category-getting-started"},"_links":{"self":[{"href":"https:\/\/rankmath.com\/ja\/wp-json\/wp\/v2\/ht-kb\/744112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rankmath.com\/ja\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/rankmath.com\/ja\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/rankmath.com\/ja\/wp-json\/wp\/v2\/users\/452844"}],"replies":[{"embeddable":true,"href":"https:\/\/rankmath.com\/ja\/wp-json\/wp\/v2\/comments?post=744112"}],"version-history":[{"count":3,"href":"https:\/\/rankmath.com\/ja\/wp-json\/wp\/v2\/ht-kb\/744112\/revisions"}],"predecessor-version":[{"id":1574900,"href":"https:\/\/rankmath.com\/ja\/wp-json\/wp\/v2\/ht-kb\/744112\/revisions\/1574900"}],"wp:attachment":[{"href":"https:\/\/rankmath.com\/ja\/wp-json\/wp\/v2\/media?parent=744112"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/rankmath.com\/ja\/wp-json\/wp\/v2\/ht-kb-category?post=744112"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/rankmath.com\/ja\/wp-json\/wp\/v2\/ht-kb-tag?post=744112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}