1

I'm using the breadcrumb inside the article tag, would that be a good use?

let me give an example

<article>
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home Page</a></li>
<li><a href="/category">Cat</a></li>
<li aria-current="page">Post Page</li>
</ol>
</nav>
</article>

1 Answer 1

2

I would not put <nav> inside of <article>. If your breadcrumbs are applied to ~/blog/*, then they are structural component of your pages, they're not consumable content. For the most part, I'd only put the actual content being consumed in <article>.

To my knowledge this would be a proper example, if there's a newer more proper way, someone will clear it up in the comments.

<html>
    <head>
        <title>Example Post</title>
    </head>
    <body>
    <nav>
        <!--Primary Navigation-->
    </nav>
    <header>
        <!--If you have one-->
    </header>
    <nav>
        <ol>
            <li>
                <a href="http://www.example.com/blog">Blog</a>
            </li>
            <li>
                <a href="http://www.example.com/blog/category/">Category</a>
            </li>
            <li>
                Example Post
            </li>
        </ol>
    <nav>
    <article>
    <!--article content-->
    </article>
    </body>
</html>

I would also recommend combining this with JSON-LD structured data:

Based on Googles breadcrumb structured data documentation

<head>
    <title>Example Post</title>
        <script type="application/ld+json">
            {
            "@context": "https://schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": [{
                "@type": "ListItem",
                "position": 1,
                "name": "Blog",
                "item": "https://example.com/blog"
            },{
                "@type": "ListItem",
                "position": 2,
                "name": "Science Fiction",
                "item": "https://example.com/blog/category"
            },{
                "@type": "ListItem",
                "position": 3,
                "name": "Example Post"
            }]
            }
        </script>
</head> 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.