什麼是添加隱形文字的可調整大小的標誌

Question

我想要做的兩件事情的正確方法：

1. 知道我搜索引擎友好的和我正確地插入的文本（這樣搜索引擎會知道這是「我的標誌」

2. 瞭解如何調整標誌的情況下，屏幕比一個特定的寬度下（假設我知道如何與媒體查詢工作）

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

我該怎麼做才能實現它們？什麼應該是我的CSS，並且我是否正確編寫了代碼？

Answer 1

<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

編輯： 問：有什麼區別之間不添加它，它是不可見的？ 答：大多數搜索引擎會讀取你放入alt標籤的內容，這也會顯示給使用文本瀏覽器的人。據說更復雜的搜索引擎工作方式各不相同，儘管文本縮進技巧目前只要我所有的測試都是將搜索引擎可讀文本轉化爲諸如使用圖像的徽標和菜單之類的最佳方式。它通常歸結爲用戶選擇。 alt標籤是一種有效的方式。我個人從文本縮進中得到了更好的seo結果。

Answer 2

你有什麼使用alt屬性將適用於你的第一個要求。該文本由搜索引擎使用，並未在瀏覽器中顯示。

當出於某種原因（例如，用戶已禁用圖像加載）圖像無法加載時，也會使用此選項。

Answer 3

如果您使用<h1>，則將背景圖像添加到<a>而不是<h1>本身，就像來自「tom at zepsu dot com」的較早示例一樣。

JSFiddle Demo（嘗試在CSS代碼中刪除「一」選擇演示 - 你將無法點擊的標誌）

<h1 id="hlogo"> 
     <a href="#">Stack Overflow</a> 
    </h1> 

CSS：

#hlogo a { /*code goes here*/ }