2

私は2つのことをしたい：

  1. 私がSEO フレンドリーであり、テキストを正しく挿入したことを理解してください (検索エンジンはこれが「私のロゴ」であることを認識します)

  2. 画面が特定の幅よりも低い場合にロゴのサイズを変更する方法を学びます(メディアクエリの操作方法を知っていると仮定して)

    <div id="myLogo">
  <a href="#">
       <img src="css/img/my_logo.png" alt="My Logo">
  </a>  
</div><!--End of #myLogo-->

両方を達成するにはどうすればよいですか？CSS はどうあるべきか、コードは正しく記述されているか?

4

3 に答える 3

2 
<h1>
  <a href="http://www.mysite.com">Text that search engines will see but not users</a>
</h1>

そしてcss

h1{
   background-image:url(mylogo.png);
   width:100px;
   height:100px;
   text-indent: -99999px;
}

編集：スタックオーバーフローのロゴはこのテクニックを使用し、firebugを使用して見てください:p

編集: Q: 追加しないことと非表示にすることの違いは何ですか? A: ほとんどの検索エンジンは、alt タグに入力した内容を読み取ります。これは、テキスト ブラウザを使用しているユーザーにも表示されます。より複雑な検索エンジンは別の方法で動作すると言われていますが、テキスト インデント トリックは現在、すべてのテストで、画像を使用するロゴやメニューなどに検索エンジンで読み取り可能なテキストを挿入するための最良の方法です。それは一般的にユーザーの選択に帰着します。alt タグは有効な方法です。個人的には、text-indent のほうが seo の結果が良くなりました。

于 2011-11-28T11:26:53.250 に答える
0

alt 属性を使用しているものは、最初の要件で機能します。このテキストは検索エンジンで使用され、ブラウザには表示されません。

これは、何らかの理由 (ユーザーが画像の読み込みを無効にしているなど) で画像を読み込めない場合にも使用されます。

于 2011-11-28T11:09:56.510 に答える