|
|
|
HOME > SEOに役立つタグ > リストタグ |
|
リストタグ |
|
|
|
|
|
|
|
|
|
リストタグはその名の通り、リストを一覧表示するときに使うタグです。 |
|
下記サンプルのように、縦に一覧表示されるのが特徴です。 |
|
ロボットが重要視するタグ <ul><ol><li>タグを使います。 |
|
|
|
|
|
リストタグのサンプル |
|
|
|
■項目を一覧表示する場合 |
|
|
- 検索エンジンには
- リストタグは
- 重要なタグです
- このように
- 縦にリストとして
- 表示されます
|
同じようなカテゴリーをまとめて一覧表示する際
良く使うタグです。
デザインにあわせてうまくページに配置すると
SEOの効果に繋がります。 |
|
|
|
|
|
■リンクメニューを一覧表示する場合 |
|
|
|
主にサイドメニューで使います。
背景やロールオーバー効果を使えば
デザイン的にもセンス良く出来ますし、
SEO効果もあるので
必ず使いたいタグです。 |
|
|
|
|
|
リストタグの使い方 |
|
|
|
①項目を一覧表示する場合の記載例 |
|
|
|
 HTML記載例 |
|
|
|
|
<ul>
<li>検索エンジンには</li>
<li>リストタグは</li>
<li>重要なタグです</li>
<li>このように</li>
<li>縦にリストとして</li>
<li>表示されます</li>
</ul>
|
|
|
|
|
②リンクメニューを一覧表示する場合の記載例 |
|
|
|
外部スタイルシート記載例 |
|
|
|
|
#nave{
width: 180px;
}
#nave ul {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid #999999;/*上部に線を引く*/
}
#nave li {
margin: 0;
padding: 0;
border-bottom: 1px solid #999999;/*下部に線を引く*/
}
#nave a {
background: #660000;/*背景の色*/
padding:7px 10px;
display: block;
width: 160px ;
color: #FFFFFF;/*文字の色*/
text-decoration: none;
}
#nave a:hover {
background: #330000;/*カーソルオーバーの時の背景の色*/
color: #cccccc;/*カーソルオーバー時の文字の色*/
width: 160px ;
}
|
|
|
|
|
HTML記載例 |
|
メニューの設置場所へ下記を記述して下さい。 |
|
|
|
|
<div id="nave">
<ul>
<li><a target="_top" href="リンクURL">SEOに役立つタグ</a></li>
<li><a target="_top" href="リンクURL">METAタグ</a></li>
<li><a target="_top" href="リンクURL">見出しタグ</a></li>
<li><a target="_top" href="リンクURL">リストタグ</a></li>
<li><a target="_top" href="リンクURL">強調タグ</a></li>
<li><a target="_top" href="リンクURL">お気に入りに追加するタグ</a></li>
<li><a target="_top" href="リンクURL">URLを教えるタグ</a></li>
</ul></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
HOME
