img's as links-surely not good SEO?

Discussion in 'Web Design and Development' started by Dal123, Oct 25, 2009.

  1. Dal123 macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #1
    I'm trying to improve the poor colour scheme and effects on my basic site linked below.
    So I thought maybe I'd have some sexy link buttons and effects etc. but then I thought I'll have to create imgages in photoshop and surely that's wrecking Search Engine Optimization? As I have links corresponding to my SEO.:confused: Surely using img buttons would have a detrimental effect on this?
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    The img tag provides an alt attribute that allows you to add the text that is in the image. The anchor tag has a title attribute that allows you to add a description for the link. These help maintain SEO when using imagery for links.
     
  3. Akitakoi macrumors regular

    Akitakoi

    Joined:
    Jan 31, 2008
    #3
    I'm using dreamweaver and it prompts you for text. I have been just putting in a description of the product the site sells. Is there any guidelines for this? I'm sure I repeated the same phrase several times.
     
  4. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #4
    Not sure exactly what you're saying there Akk.
    I'm wondering if I should have text of my heading and the background as the same image, or I should have the background-image and text from the browser ontop of that?
    I'm having terrible trouble positioning the image and even getting it to show up. I'm referring to <h2> on my index page. The image is not even showing up, though I did have it showing up a few hours ago. Now nothing. I've been on it about 7 hours and was not expecting it to be so difficult.:eek:
     
  5. IgnatiusTheKing macrumors 68040

    IgnatiusTheKing

    Joined:
    Nov 17, 2007
    Location:
    das Fort
    #5
    You can use background images with text on top to have the best of both worlds.
     
  6. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #6
    Cheers Ignatius, I just got it sorted. What I did was had to 'save as optimized' in Adobe Image Ready and that sorted it despite being as .png in first place.
     
  7. polar-blair macrumors regular

    Joined:
    Apr 20, 2008
    #7
    Also if you didn't want the text to appear on top of the img you could set the text-indent to -1000 for example, you still have the text in the link for the SEo but you don't actually see it on screen and use a background img with CSS
     
  8. Macky-Mac macrumors 68030

    Macky-Mac

    Joined:
    May 18, 2004
    #8
    would using text that's the same color as the background work too?
     
  9. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #9
    Cheers for input people, Macky you're correct I read a SEO tip on exactly what you've picked up on your own intuition :).
     
  10. IgnatiusTheKing macrumors 68040

    IgnatiusTheKing

    Joined:
    Nov 17, 2007
    Location:
    das Fort
    #10
    Yes that should work. You can also make the font size 0px to make it disappear.
     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    For me, I use a nosee class for things I want available for search engines and visually impaired visitors, like my text for "skipping to content." For some browsers, they'll skip text that has a font size of zero or a zero height/width so I try to keep them above zero for the visually-impaired. That's a very small percentage of web surfers though.

    Code:
    .nosee {
     width: 1px; height: 1px;
     overflow: hidden; float: right;
    }
    You'll want to avoid putting the same phrase for an image on the same page. Repeating this can actually hurt SEO as Google and others will penalize for overstating text.
     
  12. B-Ryan macrumors newbie

    Joined:
    Mar 2, 2009
    Location:
    Chicago
    #12
    That is considered Black Hat SEO and will get you banned from the SERPS
     
  13. IgnatiusTheKing macrumors 68040

    IgnatiusTheKing

    Joined:
    Nov 17, 2007
    Location:
    das Fort
    #13
    It's not black hat if you are using an image of the exact same text, in the same location, as your navigation.
     
  14. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #14
    I recommend using graphics with text overlay for nav menus, all controlled by CSS. There are plenty of dynamic menus you can customize which are jQuery plugins. Pick one, run it with default options and make sure it's cross browser compatible. Then start customizing.

    The alt attribute of the image tag is intended to be used by screen readers or devices for the visually impaired. But it, along with the title attribute in links, can also be used to display additional information. Never repeat what's already displayed via text (aside from SEO, imagine if you're visually impaired listening to a screen reader, everything twice) so use the alt attribute to explain the graphic or add details in a brief manner not already evident onscreen. The best use of alt is to imagine the image isn't there, and word the alt text accordingly to describe the missing image's content.

    -jim
     
  15. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #15
    Really? I had no idea of this. I'll have to watch out for that. Any other tips?
     
  16. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #16
    What follows is subjective of course, but good tips for most situations and certainly not the only tips. Here are some I've compiled over time...

    Top 10 SEO tips:

     
  17. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #17
    I believe you meant the title attribute, but rather than the title tag. You covered the tag earlier. Good list by the way, I do all of those usually.
     
  18. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #18
    Thanks, I edited it in case anyone copy/pastes.
     
  19. Dal123 thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #19
    Yeah great list Jim :) thanks much appreciated. I named all my images relevantly to keywords and in lightbox 2 I couldn't keep writing individual descriptions for the images because there was so many so listed keyword 'Formwork' so it was repeated a lot.Will this be penalised?
     
  20. splitpea macrumors 6502a

    Joined:
    Oct 21, 2009
    Location:
    Among the starlings
    #20
    You can also use plain text links and an image replacement technique to show only the images with whatever fancy font or effects you really want to use for your nav. It just means that when you add a page you have to make new graphics and update your stylesheets instead of just adding a link to a list.
     
  21. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #21
    Google's analysis of pages is constantly evolving (as well as the other search engines) and SEO isn't an exact science, so it cannot be determined precisely if you have repeated the keywords too many times and will be penalized. Just use common sense, and don't add extra keywords without a good reason. Turn off all images, stylesheet, and JavaScript and take a look at the text on your page and see if you're using a word too much or it feel spammy.
     

Share This Page