strongタグについてのSEO対策とh3タグの違反問題
- strongタグを使用する方法で文字Bの大きさを変えずにSEO対策を行うことは可能です。
- h3タグを20～30個使用することに違反はありませんが、過度な使用は避けるべきです。
- 詳しいstrongタグの使い方やh3タグの適切な使用方法を学びましょう。
- ベストアンサー
strongタグについて
HTML等全く知識がなくテンプレートやパーツなどは全てコピペで作成してきました。 以下のstrongタグはSEO的に有効でしょうか？ <ul> <li class="menu_len" onmouseover="this.className='menu_len_on'" onmouseout="this.className='menu_len'"><a href="#" id="myText" onmouseover="this.innerHTML='文字A'" onmouseout="this.innerHTML='<strong>文字B</strong>'">文字B</a> <ul> 上記のようにすると文字Bの大きさが変わらずに表示できました。 この方法でstrongタグはSEO対策的に有効でしょうか？ 文字Bの大きさを変えずにstrongやh3タグを使用する方法をご教授お願いします。（できれば文字Aも） それと、同一ページにh3タグを20～30ほど使用したいのですが、違反等の問題はないでしょうか？
- patinkozuk
- お礼率63% (453/711)
- ブログ
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
通常の文字列とは何らかの差別化は成されると思いますが、果たしてイベントハンドラでの結果まで検索エンジンが拾ってくれるかどうか... 厳密なルールは存じませんが、本文とh3やstrongの割合から、その語句の重要度をランク付けしているであろうことは容易に想像できますので、ほとんど本文を挟まずに<h3>などを多数使ったとしても、大して意味はないと思います。 例えば、200字ごとに<h3>が出てくるのであれば、その<h3>は見出しとして重要な語句として認識されるが、<h3>が連続で30個出てきたり、10文字程度の短い本文を挟んで30個の<h3>が登場してたりしたら、重要度を薄めるか、ただの本文として判断されるといった感じです。<strong>などの場合も同様ではないでしょうか。 あくまで想像です。 仮に今良くても、検索エンジンの改良で突然スパム扱いになる可能性もあります。 小手先でこねくりまわさずに、文章として自然なタグ付けを心掛けたほうが、SEOにもアクセシビリティにも良いですよ。
関連するQ&A
- onmouseover="this.className=をjsファイルにまとめて、指定する場所はid=menu1,2～....かclass=menuで統一したい
<div class="font1 bor1" onmouseover="this.className=this.className+' bgcol txcol'" onmouseout="this.className='font1 bor1'"> というものがあったとしてこれを <div id="menu1・・・２・・・">だけにして onmouseover=～をjsに略記できるようにしたいのですが 何かいい手はありませんか？ idで指定できる版のほかに classで指定できる版があるとうれしいです。classだと難しいでしょうか？ また、こちらももしできればでいいのですが、this.classNameを 指定IDのclassName等もできるのでしょうか？ 質問に不足があれば答えられる範囲で答えます。よろしくお願いします。
- ベストアンサー
- JavaScript
- CSSのみで作る横ドロップダウンメニュー
教えてください。白旗です。 クライアントの指示でCSS＋xhtmlのみでサイトを作成していますが、横並びのプルダウンメニューで行き詰りました。 IE6以外のブラウザでは正常な表示をされるのですが、IE６のみへんてこりんになってしまいます。 下記ソースで、メニューAにマウスを乗せてドロップダウンをさせると、メニューBが右に動きます。 これに2日間はまってます。 よろしくお願いします。 ---ソース--- 【html】 <div id="gnavi_container"> <div id="gnavi"> <ul> <li class="gmenu02_off" onmouseover="this.className='gmenu02_on'" onmouseout="this.className='gmenu02_off'"><a href="#"><img src="img/1.jpg" width="122" height="25" alt="" onmouseover='this.src="img/3.jpg"' onmouseout='this.src="img/1.jpg"' /></a> <ul class="gmenu_sub"> <li><a href="#"><img src="img/4.jpg" width="138" height="19" alt="" /></a></li> </ul> </li> <li class="gmenu03_off" onmouseover="this.className='gmenu03_on'" onmouseout="this.className='gmenu03_off'"><a href="#"><img src="img/2.jpg" width="81" height="25" alt="" onmouseover='this.src="img/2.jpg"' onmouseout='this.src="img/2.jpg"' /></a> </li> </ul> </div> </div> 【css】 img{ border:0; } div#gnavi_container{ position : relative; z-index:100; width:800px; height:25px; text-align:left; } div#gnavi ul { margin: 0; padding: 0; list-style: none; } div#gnavi li { float : left; margin : 0; padding : 0; } .gmenu_sub li{ overflow:visible: } .gmenu02_off{ height:25px; width:122px; overflow : hidden; } .gmenu02_on{ width:122px; overflow :visible; } .gmenu03_off{ height:25px; width:81px; overflow : hidden; } .gmenu03_on{ width:81px; overflow :visible; } div#gnavi ul.gmenu_sub{ margin : 0; padding : 0; } div#gnavi ul.gmenu_sub li{ margin : 0; padding : 0; float : none; clear : both; }
- 締切済み
- HTML
- Ctl + Bでstrongタグを挿入してくれるＨＴＭＬエディタ
SEO対策用としてCtl + BもしくはBoldを指定したときにBoldタグではなくStrongタグを挿入してくれるＨＴＭＬエディタを探しています。 できればオンラインサービスが良いですがＰＣアプリでも大丈夫です。よろしくお願いいたします。
- ベストアンサー
- HTML
- 特定のHTML箇所をJavaScriptのdocument.write("");で表示させたい
外部JS化する前のテスト段階で、特定のHTML箇所をJSで表示させるにあたり、エラーになってしまいます。 下記部分 -------------------------------------------------- <li class='off' onmouseover="this.className='on'" onmouseout="this.className='off'" title='テスト'><A href='./test.html'>テスト</a> -------------------------------------------------- を下記のようにしてみているのですが、 -------------------------------------------------- document.write("<li class='off' onmouseover="+this.className='on'+" onmouseout="+this.className='off'+" title='テスト'><A href='./test.html'>テスト</A>"); -------------------------------------------------- FireFoxのエラーコンソールで確認すると this.className= --------------↑ の、=の後の部分が指摘されております。 どのようにすればエラーを回避出来ますでしょうか。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- onmouseoverはCSS参照に含められるか？
<div style="color: blue;" onmouseover="this.style.color='red'" onmouseout="this.style.color='blue'">あああ</div>を、 <style type="text/css"> <!-- div { onmouseover="this.style.color='red'"; onmouseout="this.style.color='blue'; } --> </style> みたいには書けませんか？ a:hoverだったらできるのは承知していますが、 タグが<a>でなく<div>なので、onmouseover、onmouseoutを使わざるを得ず、 さらにonmouseover、onmouseoutはCSSでなくJSだと思うのですが。
- ベストアンサー
- CSS
- タグ内にあるタグに影響させないイベントハンドラの使い方は？
次のようなHTML文の部分があった場合に於いて、最外部に設置したイベントハンドラを、内部にあるタグに対して無効にするにはどうしたらよいのでしょうか？ 具体的にはid="t1"なるul要素以外の内部の各要素上（liやa等）におけるonmouseoutを無効にするには、どうしたらよいのでしょうか？ 最外部のul要素からマウスがoutした時だけ或るイベントを発生させ、かつul内部の各要素からマウスがoutされた時には、そのイベントを発生させないようにするにはどうしたらよいのでしょうか？ <ul id="t1" onmouseover="func1()" onmouseout="func2()"> <li class="level1">なんたらかんたら <ul id="t2"> <li class="level2">○○<a>△△</a></li> <li class="level2">××<a>▽▽</a></li> </ul> </li> <li class="level1">かんたらなんたら</li> <li class="level1">・・・・・・・・</li> </ul>
- ベストアンサー
- JavaScript
- よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたい
よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたいと考えております。そこで以下のような記述をしたいと考えているのですがうまく行かず、また原因もわからずに困っておます。どなた様かご指導のほどよろしくお願いいたします。 まず以下の記述をしました。 ［html］ <div id="menu"> <ul> <li id="menu1"><a href="a/index.html" title="HOME" ><img src="img/1.gif" alt="HOME" onmouseover="this.src='img/11.gif' onmouseout="this.src='img/1.gif'" /></a></li> <li id="menu2"><a href="b/index.html" title="ホームページ製作"><img src="img/3.gif" alt="HOME" onmouseover="this.src='img/33.gif' onmouseout="this.src='img/3.gif'" /></a></li> <li id="menu3"><a href="c/index.html" title="ネットショツプ製作"><img src="img/4.gif" alt="HOME" onmouseover="this.src='img/44.gif' onmouseout="this.src='img/4.gif'" /></a></li> <li id="menu4"><a href="d/index.html" title="SNSサイト製作"><img src="img/6.gif" alt="HOME" onmouseover="this.src='img/66.gif' onmouseout="this.src='img/6.gif'" /></a></li> <li id="menu5"><a href="e/index.html" title="SEOプロモーション"><img src="img/7.gif" alt="HOME" onmouseover="this.src='img/77.gif' onmouseout="this.src='img/7.gif'" /></a></li> <li id="menu6"><a href="f/index.html" title="出版・印刷・その他"><img src="img/8.gif" alt="HOME" onmouseover="this.src='img/88.gif' onmouseout="this.src='img/8.gif'" /></a></li> <li id="menu7"><a href="g/index.html" title="お問合せ・御注文"><img src="img/5.gif" alt="HOME" onmouseover="this.src='img/55.gif' onmouseout="this.src='img/5.gif'" /></a></li> </ul></div> ［css］ #menu ul{ list-style-type:none; } #menu ul li{ display:inline; } http://desktop10.web.fc2.com/test.html 上記URLにアップしています。よろしければ見てみてください。 画像も、横並びにならず、マウスを合わせたときの画像も変化しません。また、ブラウザ上の左下に ページでエラーが発生しました。と出てしまいます。 お手数では御座いますがどなた様かご教示をお願いできませんでしょうか？ わたしとしては、以下のような感じにしたいと考えております。 http://desktop10.web.fc2.com/test1.html なお、一応記載させて頂きますが画像の中に「ホームページ製作」や「SNS」等と・・・ありますが、私は 現在cssの学習をしており、特別パソコン関係の商売をしているわけでもありません。ただ、今後の自分のために色々と出来ればよいと考えているところであります。 初心者では御座いますが、どなた様かご指導のほどよろしくお願いいたします。
- ベストアンサー
- HTML
- プルダウンメニューの設置について
【質問内容】 画像のすぐ上にドロップダウンメニューを設置したいのですが、 マウスオンすると下部の画像の表示位置が下がってしまいます。 この画像表示位置を動かないようにするにはどうすればいいのでしょうか？ 【html】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio … <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="navi_continer"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 1</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <img src="shingo/images/1.TOP.jpg" width="150" height="150" alt="#" /> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 2</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> <li><a href="#">サブメニュー 3</a></li> <li><a href="#">サブメニュー 4</a></li> </ul> </li> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#">メニュー 3</a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> <li><a href="#">サブメニュー 3</a></li> </ul> </li> </ul> </div> </div> </body> </html> 【css】 @charset "utf-8"; #navi_continer { position: relative; z-index:100; width: 300px; height:30px; } #navi { position: absolute; top: 10px; left: 10px; width: 150px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { color: #fffff; float: left; width: 100px; margin: 0; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 3px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } /* サブメニュー */ #navi ul.sub { background: #eeeeee; } #navi ul.sub li { float: none; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding: 3px 0; border-top:1px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:1px solid #000099; } #navi li.navi_menu_on{ border:1px solid #000099; } ご教授お願いします。
- ベストアンサー
- ホームページ作成ソフト
- <strong>と<B>の違い
<strong>と<B>の違いがよくわからないのですが どういう時に使い分ければいいのでしょうか？ http://yume.hacca.jp/koiki/text/strong.htm によると、 <strong>は意味を強調との事ですが、 結局は文字を強調するのですよね？ だったらBタグと同じ気がするのですが・・・
- ベストアンサー
- HTML
- html,cssプルダウンメニューについて教えてください。
html,cssプルダウンメニューについて教えてください。 現在html,cssのみでプルダウンメニューを作成しているのです、解決のできない問題点が あり困っています。どなたか知識のある方、教えていただけると嬉しいです。 [問題点] オンマウスでプルダウンメニュー表示時、その表示分だけ、親要素の<div>の 高さが広がってしまい、それに伴いそれ以下のページ内要素全て下にずれてきます。 (分かりにく表現で申し訳ありません） 出来れば、プルダウンメニューが表示されても、親要素の高さは変わらず、以下のタグ要素の 上に重なって表示させたいと思っています。 対処法がお分かりになる方、教えて頂けると幸いです。 [html] <div id="main_menu"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu04.gif"></a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <li class="navi_menu1" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu05.gif"></a> <ul class="sub"> <li class="navi_menu1"><a href="#">サブメニュー 1</a></li> <li class="navi_menu1"><a href="#">サブメニュー 2</a></li> </ul> </li> </ul> </div> </div> [css] #navi { width:993; margin:0 auto; border:0px solid red; padding:0px 39px 0px 0px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { float: left; margin: 0; width:120px; } #navi li.navi_menu1{ float: left; margin: 0; width:140px; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 0px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } #navi ul.sub { background: #eeeeee; } #navi ul.sub li { padding:5px 0px 0px 0px; float: none; height:25; } #navi ul.sub li.navi_menu1 { float: none; height:25; width:180; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding:0px 0; border-top:0px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:0px solid #000099; } #navi li.navi_menu_on{ border:0px solid #000099;}
- ベストアンサー
- その他([技術者向] コンピューター)
補足
＞uriboar様 ご回答ありがとうございます。 あまり効果はないようですし、突然スパム扱いされるのも困るので今回は見送りたいと思います。