Question

I have 4 links on a website. Each link goes to a different page (windows, siding, roofing, sunrooms). However, I have set the links up in a different way than normal links. Heres a snippet:

<a href="windows.html">
   <div id="img-block">
       <div id="img-link">
           <h1>Windows</h1>
       </div>
   </div>
</a>

CSS:

#img-block {
    width:275px;
    height:175px;
    margin:25px 0;
    background-image:url(images/windows.jpg);
    }

#img-link {
    height:40px;
    width:275px;
    margin:135px 0 0 0;
    background-image:url(images/img-link-bg.png);
    }

A few reasons for why I did this.
A) I wanted the image and the text to be click-able
B) H1 because I’ve read that google gives Headings a higher rank
C) Also read that when someone clicks a link, the wording lets google know it was relevant (Clicking “Windows” takes you to a page about windows, increasing the pages rank for “Windows”)

Now the question I have is, am I accomplishing all these things? Obviously I’ve accomplished goal A. but now I can no longer select the text (“windows”) on top of the image (because my cursor changes to the hand icon, notifying me of a link)… Also, when I drag the image, it shows that I’m dragging the image, the img-link image, and the text all as one, as if it were one image.

Hope this was clear enough, Thanks in advance!

Answer 1

Your going about it all wrong.

You don’t need the extra div.

Simply put the background-imgae on the H1 tag itself (and set the height/width of course)
SEO wise, this is an acceptable way of doing things.

You’ll be just fine 🙂