Anchor Tag around Table / Block

[Richline_Digital]

Our homepage (here) has four large promotional sections taking up most of the real estate. Each promo section has an image and styled text.

We want each promo section to link to the appropriate page, so we created the promo sections as and wrapped each

in an anchor. That works fine for users but I tried viewing our site in a text-only browser (Lynx) and couldn't follow those links! My fear is that GoogleBot can't follow them either and doesn't know what anchor text to pull.

So, my question: What's the best way to make this entire block clickable, but still have it crawlable by robots? Or is our current implementation ok?

For reference, here's a simplified version of the relevant code block:

•  

         

 

           

         

 

| |

All Diamonds

Extra 20% Off

|

       

• [| |

  Jessica Simspon

  Extra 20% Off

  |](http://jessicasimpson.jewelry.com/shop/)

       

[TakeshiYoung]

One solution would be to make each of the promo sections an image (like http://i.imgur.com/sA8DFYk.png), then make the image a link. You can then use css to float some text on top of the image, or if you don't care, just make the whole thing an image.  You could also separate out the product image from the grey background if you're feeling really nit picky.

[Richline_Digital]

Thanks for the reply, Takeshi! That's pretty much what we are doing, I think... Can you help me understand better?

We are using CSS and a table structure to float the text and the CTA button on top of the image. Then the entire block is wrapped in an anchor so it's clickable. If only the image is inside the anchor, doesn't that mean the rest of the block won't click through to the destination?

Would rather not make the whole thing an image because that hurts our text/image ratio and makes our homepage even less SEO-friendly. But we still want the entire area to go to the destination URL.

[TakeshiYoung]

Sure, here's some pseudo-code:

• 

  position:relative; z-index:50">

  Jessica Simspon

  Extra 20% Off

Hope that clarifies things.

[Richline_Digital]

Thank you! Last follow-up (promise): If we do it that way, there's no associated anchor text. But if we use alt-text on the image, that's less authoritative than the

and

tags we are using, plus it's duplicate content... Do you think that's a problem?

[TakeshiYoung]

I don't think it's that big of a problem, but if you really want anchor text, you could try this:  Use a javascript onclick event for the image instead of an anchor tag. Then turn the promotion title into a link:

• 

  onclick="javascript:location.href='link.html';">

  Jessica Simspon

  Extra 20% Off

Or if you don't want to use javascript, you could have 2 links:

• Jessica Simspon

  Extra 20% Off

  [

  style="float:left; margin-top:-XXpx;

  position:relative; z-index:-2">](link)

   

Hope that helps!

[Richline_Digital]

Heck yes! Very grateful. Thank you!!