navの作り方（検索結果にサイトリンクを出す方法）
個人的見解です
真実に限りなく近いオカルト
Googleはサイトリンクの表示基準を完全なるブラックボックスとしていますが、
実際に結果を出してきたので、限りなく正解に近いオカルトだといえると思います。
検索結果にサイトリンクを出す方法
- 大前提として、いいサイトである（ユーザーにもGoogleにも喜ばれるコンテンツが充実している）
- navの書き方にコツ（コーダーとしての最低限の礼儀）がある
navの作り方
- メニューはソース上の上の方に書く
- メニューはnavで囲む
- メニューはul liを使用したリストにする
- メニューはテキストにする
- アンカーリンクは検索結果におさまることを意識して端的にわかりやすく
0.最初のnavがサイトリンクとして認識されるようです。
1.スマホのメニューをフッターに書くかたがあるので要注意、ヘッダーに書きましょう（この場合はポジションを使用してもよい、仕方なし）。
2.ただし、ポジションやテキストインデントなどを使って無理やりなんとかしようとすると、むしろスパム判定の対象となりますので、あくまで自然なマークアップをお願いします。
3.メニューの文字が画像の場合は、バックグラウンドで読み込み、テキストをテキストインデント-9999で飛ばす形で表現する。
ただし、上にも書いたように、テキストインデント-9999はスパム判定を受けがちなので、こういった場合以外ではあまり使わないほうがベターです。
なお、画像を入れてaltに文字を書くという方法は、メニューに関してだけは避けてください。
4.メニューのアンカーテキストにはキーワードを入れるとよいという意見もありますが、個人的見解といたしましては反対です。
検索エンジン最適化スターターガイド - Googleにも、短く・端的で・わかりやすいものがのぞましいと書いてありますので、あがってきたデザイン通り、嘘なしでコーディングをいたしましょう。
5.ポジションとテキストインデントが禁止というわけではありませんので、スピーディーにコーディングが進められるのであれば常識の範囲内で自由にマークアップされてください。
使うなと言ってみたり、使ってよいと言ってみたり、矛盾していて申し訳ありません。
そこはバランス感覚でお願いします。
6.navタグは1ページに何度登場してもよいことになっておりますので、フッターのメニューなどで重複して使用してもOKです。
この場合もリスト＋テキストが理想です。
お手本
例えばこのサイト http://www.makuwcompany.com/
こういう風に画像を切って http://www.makuwcompany.com/img/cmd/nav.jpg
【css】
nav{
width:660px;←ボタン幅合計に合わせる
float:left;←ナビ、ランゲージ、問い合わせを横並びにするため
}
nav li{
float:left;←フロートはliにかける aにかけると階段状のバグとなる
}
nav li a{
display:block;←インライン要素であるaをブロック要素にして高さと幅を持たせられるようにする
background:url(img/nav.jpg) no-repeat;←背景画像の呼び出し
height:60px;←高さ（幅はバラバラなのであとで個別に指定する）
text-indent:-9999px;←文字を見えなくする
}
.n01 a{width:166px;} .n01 a:hover{background-position:0 -60px;}
.n02 a{width:189px;background-position:-166px 0;} .n02 a:hover{background-position:-166px -60px;}
.n03 a{width:225px;background-position: -355px 0;} .n03 a:hover{background-position: -355px -60px;}
.n04 a{width:124px;background-position:-744px 0;} .n04 a:hover{background-position:-744px -60px;}
.n05 a{width:152px;background-position:-868px 0;} .n05 a:hover{background-position:-868px -60px;}
↑ワイドとバックグラウンドポジションは変更する
【html】
<nav>
<ul>
<li class="n01"><a href="http://www.makuwcompany.com/">移動販売製作の眞空</a></li>
<li class="n02"><a href="../making/">移動販売車の製作方法</a></li>
<li class="n03"><a href="../customize.html">カスタマイズについて</a></li>
<li class="n04"><a href="../works/">移動販売車の製作実績</a></li>
<li class="n05"><a href="../contact/">お問い合わせ</a></li>
</ul>
</nav>
↑aの中は変更する
