Question

I want to do 2 things:

1. Know that I am SEO friendly and that I inserted correctly the text (so search engines would know that this is “my logo”

2. Learn how to resize the logo in case the screen is lower than a specific width (assuming that I know how to work with media-queries)

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

What should I do to achieve them both? What should be my CSS and did I wrote the code correctly?

Answer 1

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

And the css

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

Edit:
The stack overflow logo uses this technique, use firebug and have a look :p

Edit:
Q: What’s the difference between not adding it and it being invisible?
A: Most search engines will read what you put in the alt tag, this will also show for people using text browsers. More complex search engines are said to work differently, though the text-indent trick is currently as far as all my tests go the best way to get search engine readable text into things like logos and menus that use images. It generally comes down to user choice. The alt tag is a valid way of doing it. I’ve personally just had better seo results from text-indent.