Home>

I am worried about the breadcrumbs themselves and the markup methods around them.
If i am strong in seo, or someone who knows, such as "I don't know the SEO result, but the recommended concept is this," please answer.

First of all, how do you involve main, article, and h1?

For example

<main>
    <Breadcrumbs></Breadcrumbs>
    <article>
        <h1>OhAh<h1>
        <p>nice</p>
    <article>
</main>
or

<main>
    <article>
        <Breadcrumbs></Breadcrumbs>
        <h1>OhAh<h1>
        <p>nice</p>
    <article>
</main>

or

<Breadcrumbs></Breadcrumbs>
<Breadcrumbs></Breadcrumbs>
<main>
    <article>
        <h1>OhAh<h1>
        <p>nice</p>
    <article>
</main>

Which is better?

And what is the tag that surrounds Punk itself? The question.
It seems that the bread crumb body can be written with the definition of schema.org.
What is the tag that surrounds it? That's it.

<nav> ;?
Or do you need anything?
If i don't need anything, it's related to the above question. Is it strange because it's just a definition?
I think.

  • Answer # 1

    I like this

    <! DOCTYPE html>
    <html>
      <head>
      </head>
      <body>
        <header>
          <nav><!-main menu->
            <ul>
              <li><a href = "">nav1</a></li>
              <li><a href = "">nav2</a></li>
              <li><a href = "">nav3</a></li>
            </ul>
          </nav>
        </header>
        <main>
          <ol><!-breadcrumb list-><!-ol {list-style: none;}->
            <li><a href = "">list1</a></li>
            <li><a href = "">list2</a></li>
            <li><a href = "#">this page</a></li>
          </ol>
          <article>
            <h1>Lorem ipsum</h1>
            <section>
              <h2>dolor sit amet</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </section>
            <section>
              <h2>dolor sit amet</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </section>
          </article>
          <aside>
            <!-AD->
          </aside>
        </main>
        <footer>
          <small>2018&copy;liveAsNotes</small>
        </footer>
      </body>
    </html>

    cf. The latest SEO situation! Make structured markup at schema.org! (2017/4/17)

  • Answer # 2

    The first image

    <main>
        <Breadcrumbs></Breadcrumbs>
        <article>
            <h1>OhAh<h1>
            <p>nice</p>
        <article>
    </main>


    I think it's okay.
    * Outside of main is not a bad translation. It may change depending on the site creation.


      

    What is the tag that surrounds Punk? The question.
      <nav> ;?
      Or do you need anything?

    There are no specific tags. However, you should do "structured markup" and give Google a list that says "This is bread crumbs".

    If you search for "liveAsNotes" or "Breadcrumb structured markup", please search on an easy-to-understand site.

Related articles