パンくずリストとその前後の評価されるマークアップ方法

パンくずリスト自体と、その前後のマークアップ方法で悩んでいます。
seoに強い方、または「SEO的な結果は知らんけど推奨されている概念はこうだよ」という回答など、わかる方ご回答お願いします。

まずは、main,article、そしてh1などをどう絡めるのか？と言う疑問、

例えば

htm5
1
2<main>
3    <パンくず></パンくず>
4    <article>
5        <h1>ああああ<h1>
6        <p>いいいい</p>
7
8    <article>
9</main>
10
11or
12
13
14<main>
15    <article>
16        <パンくず></パンくず>
17        <h1>ああああ<h1>
18        <p>いいいい</p>
19
20    <article>
21</main>
22
23
24or
25
26
27<パンくず></パンくず>
28
29<パンくず></パンくず>
30<main>
31    <article>
32        <h1>ああああ<h1>
33        <p>いいいい</p>
34
35    <article>
36</main>
37
38
39

と、どれがいいのでしょうか？

そして、ぱんくず自体を囲うタグは何？という疑問。
パンくず本体はschema.orgの定義で書け、というらしいのですが、
それを囲うタグは何？という事です。

<nav>？それとも、何もいらないの？何もいらいない場合には、前述の質問とも関連しますが、mainの外などに置くと、他のコンテンツは何かしらのタグで定義つけられているのに「パンくずりすとだけ、Oｌ、タグだけの定義」になっちゃうのでおかしいのかな？と思ってます。

よろしくお願いいたします。

行動規範の内容に同意します

回答2件

私の場合はこんな感じです

html
1<!DOCTYPE html>
2<html>
3  <head>
4  </head>
5  <body>
6    
7    <header>
8      <nav><!--main menu-->
9        <ul>
10          <li><a href="">nav1</a></li>
11          <li><a href="">nav2</a></li>
12          <li><a href="">nav3</a></li>
13        </ul>
14      </nav>
15    </header>
16
17    <main>
18      <ol><!--breadcrumb list--><!--ol{list-style:none;}-->
19        <li><a href="">list1</a></li>
20        <li><a href="">list2</a></li>
21        <li><a href="#">this page</a></li>
22      </ol>
23
24      <article>
25        
26        <h1>Lorem ipsum</h1>
27
28        <section>
29          <h2>dolor sit amet</h2>
30          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
31        </section>
32
33        <section>
34          <h2>dolor sit amet</h2>
35          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
36        </section>
37        
38      </article>
39
40      <aside>
41        <!--AD-->
42      </aside>
43    </main>
44
45    <footer>
46      <small>2018 &copy; liveAsNotes</small>
47    </footer>
48  </body>
49</html>

投稿2018/08/26 05:23

liveasnotes

総合スコア1284

liveasnotes

2018/08/28 03:50

そういえば言い忘れてましたが，IEはmain要素を認識しないので， IE対応するなら， <div id="main"> 　<main style="width: 100%; height: 100%;"> 　　 　</main> </div> という感じにする必要があります

行動規範の内容に同意します

ベストアンサー

イメージとしては最初の

HTML
1<main>
2    <パンくず></パンくず>
3    <article>
4        <h1>ああああ<h1>
5        <p>いいいい</p>
6
7    <article>
8</main>

で良いかと思います。
※mainの外が「ダメ」な訳ではありません。サイトの作りによって変わっても良いです。

ぱんくず自体を囲うタグは何？という疑問。

<nav>？それとも、何もいらないの？

特に指定タグがある訳では無いです。しかし、「構造化マークアップ」して、Googleに「これはパンくずですよ」とリストを指定すると良いです。

「liveAsNotes」さんの参考先や「パンくず　構造化マークアップ」等で検索されると色々でるので、理解しやすいサイトで勉強してみてください。

投稿2018/08/28 03:43

yoshinavi

総合スコア3523

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

パンくずリストとその前後の評価されるマークアップ方法

関連した質問