Dismiss Notice
Welcome to Our Community
Wanting to join the rest of our members? Feel free to sign up today.

Site with all text content contained within images

Discussion in 'Search Engine Optimization' started by kieransimkin, Jun 25, 2009.

  1. kieransimkin

    kieransimkin New Member Webmaster

    I've been working on an interesting project recently - I'm building my personal portfolio (slinq.com) and decided I wanted to use a font that isn't included in the standard set of "Web fonts". While IE supports a hacky way of sending a font file to the browser, this doesn't work in other browsers and I want my website to work in all browsers. I've therefore achieved my custom font by having a script running on the server render each fragment of text and send it to the browser as a GIF image. This is used for literally every bit of text on the site, including headings, titles etc. I am of course setting the alt tags on all of these images so that they contain the text content.

    I am also trying to get my site to rank highly in the search engines - it's a bit of an experiment; can I get a site with no text content at all to rank for my search keywords? Obviously I'm following all of the normal link building and page optimisation techniques. I'm just wondering if anyone has attempted this before and has any practical advice for me?

    One question in particular is in relationship heading tags (ie
    etc). At the moment, my heading tags look a bit like this:

    <h2 style="background-image: url(textfrag.php?text=Heading&size=32);
    background-position:center top;background-repeat:no-repeat;text-indent:-4000px;">Heading</h2>
    In other words, I'm putting the actual text of the heading within the heading tag, but using the text-indent CSS property to move it so that it's not visible on screen, I'm then using the background-image property to reference the image containing the text fragment. I know this could potentially be considered deceptive by Google, has anyone else had any successes or failures with this technique?

    The other way that it occured to me to implement heading tags was something like this:

    <h2><img src="textfrag.php?text=Heading&size=32" alt="Heading"></h2>
    This is obviously less deceptive and cleaner code-wise but the actual text of the heading only occurs in the alt tag of the image. What are your thoughts on the relative merits of each approach?

    Check out my website to see this in action - all feedback welcome:
    http://slinq.com/ - My personal portfolio including photography of Cuckmere Haven and the South Downs (England)

    Best regards,

    ~Kieran Simkin
  2. webbizideas

    webbizideas New Member Webmaster


    Interesting experiment. I think it can be done. Adobe ranks #1 for "click here" in Google and that text is not mentioned anywhere in their page or code.


Featured Resources (View All)

Share This Page