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

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

新規登録して質問してみよう
ただいま回答率
85.45%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

SEO

SEO(Search Engine Optimization)は、検索エンジンでウェブページがランキング上位に上がるように工夫する様々なテクニックの事です。

Q&A

解決済

2回答

1705閲覧

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

yoyoyoyogi

総合スコア47

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

SEO

SEO(Search Engine Optimization)は、検索エンジンでウェブページがランキング上位に上がるように工夫する様々なテクニックの事です。

0グッド

0クリップ

投稿2018/08/26 03:14

パンくずリスト自体と、その前後のマークアップ方法で悩んでいます。
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の外などに置くと、他のコンテンツは何かしらのタグで定義つけられているのに「パンくずりすとだけ、Ol、タグだけの定義」になっちゃうのでおかしいのかな? と思ってます。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

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>

cf. 最新のSEO事情!schema.orgで構造化マークアップせよ!(2017/4/17)

投稿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> という感じにする必要があります
guest

0

ベストアンサー

イメージとしては最初の

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.45%

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

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

質問する

関連した質問