Using XHTML/CSS for an Effective SEO Campaign

by Brandon Olejniczak

62 Reader Comments

Back to the Article
  1. I have just started a web site, www.zone4health.com, and am desperately looking for more cost-effective ways to get the name out there. For the novice, this was a brilliant article. You have my utmost appreciation!

    Copy & paste the code below to embed this comment.
  2. Jerome asked: “…what do you think of my hidden logo and title in the http://www.via-israel.com ? I coded this since the logo is already embeded in the background image and I am lazy to positionate some transparant PNG logo with a javascript/activeX hack… Anyway the logo and title are hidden but not for pda/smartphones/lynx-like/NS4… “

    Hi Jerome. I certainly understand your reasons, and the implementation is both practical and sensible. You do have a hidden H1 heading, but it repeats exactly what would otherwise be hidden from user-agents that do not support images. In other words, what you have is a cross-browser compatibility device rather than a method for hiding keywords.

    In fact, I commend you for not trying to take further advantage. It would be easy for many to think that if you were going to have a little hidden text anyway, legitimately, that adding in a couple of extra keywords wouldn’t hurt. Your honesty is your final and strongest protection.

    You see, even were some jealous competitor to personally report your hidden text to Google or any other search engine, I believe that the employee following up on that report would determine that there was no intention to decieve or ‘trick’ the spider, and so would reject the complaint immediately.

    What I’m saying is that the technique you have used has been used well and with honest intention. That makes a big difference in the final analysis.

    In fairness to all at ALA, I wish to ask that any further questions or requests for analysis be brought to the forums where I and others give advice freely, so that this discussion doesn’t get side-tracked into discussions of individual sites.

    Anyone wishing to ask about specific issues on their sites, rather than comment about the article and issue under discussion here, is most welcome to seek me out at http://www.cre8asiteforums.com/

    Copy & paste the code below to embed this comment.
  3. Dudes, you really need to learn to use CSS properly and update your web site. I used to be able to read “titchy small tiny fonts” like many of you egotists seem to prefer, but in the long run, the only thing that “titchy small tiny fonts” do to a person is to make them blind.

    Update your CSS to enable older bods with eyesight that is less than perfect (like meself) to be able to change the fonts to suit us.

    ROFLAO, watch em squirm as they scramble to find out how to achieve this. I bet they don’t update their web site to enable this feature.

    Copy & paste the code below to embed this comment.
  4. Because if you are going to do something, either do it to the best of your abilities, or don’t bother doing it.

    Copy & paste the code below to embed this comment.
  5. While these tips are good for optimizing the returned results of a search that hits your site [and there’s a lot to be said for that] I don’t really know how much this advice could help one’s actual search ranking. I don’t think there are any big engines anymore that actually use the page itself for ranking outside of keyword appearance.

    Having a legible summary on a search engine results page can be extremely valuable though.

    Copy & paste the code below to embed this comment.
  6. You’re giving away all the search engine optimisation secrets! Free! ;) Just kidding – it’s a really great article and I’ll be pointing my clients to it to help them understand the basics. Good one!

    Copy & paste the code below to embed this comment.
  7. Edward, when your using server side languages like PHP, the code, as I’m sure you know, is processed on the server before being exported as standard HTML to the browser.

    When an SE Bot requests a web page from a web server, the same process applies, the page is requested, the PHP engine processes it and outputs the product to the useragent.

    With the kind of example you posted above, I don’t think any SE will have problems crawling it as if it was any other static HTML page. You can get problems with certain areas of page dynamics, with things like variables being passed in the url for example. Its getting better, but there are things, well otuside the scope of this article, that can be done to make them more ‘Search Engine Friendly’. If you want more info on that kind of thing, I’d suggested following myself and Ammon to wwwcre8asiteforums.com where theres a few people more than willing to help. The article here was very specifically about XHTML and engines and how coding with standards can help. Anything outside that would be better discussed elsewhere I think!

    And DudeMan, I don’t think its especially hard to find articles on using relative font sizes instead of px to get user adjustable fonts. If your complaining, you could use a browser like Opera which has a full page zoom function that works whenever……

    ” if you are going to do something, either do it to the best of your abilities, or don’t bother doing it.”

    Isn’t always true in business, your best may take too long, use too many resources to make it viable. Over at www.accessifyforum.com its been discussed that maybe it would be better for people to be told if their site conforms to Bobby A or AA (within what the auto tests can handle) rather than just telling them what they need to do to make the site ‘prefect’. That would provide more encouragement to web designers not fully conversant with Accessibility to say that they have at least made an effort, rather than demanding they use an all or nothing approach to get any kind of recognition of it.

    Its always nice to aim for the best, but people also have to learn and businesses need to take ROI into account, can they justify the extra expense to make it ‘perfect’ when 85% ‘perfect’ may be good enough?

    Copy & paste the code below to embed this comment.
  8. Shame about the syntax errors. The deprecated font size attribute accepts a number or a percentage, it doesn’t take units. There is no size property in CSS, there’s a font-size property – but its a really bad idea to use pixels for it (http://diveintoaccessibility.org/day_26_using_relative_font_sizes.html).

    Copy & paste the code below to embed this comment.
  9. Nice reading, (except for your granny, curious remark, that)
    though not groundbreaking news for web designers,
    as often to be found here.

    More often than not, seo-required H1 tags interfere with my layout needs
    so I get rid of it’s formatting entirely using margin, float and line-height.
    Demo at http://www.byteshift.de/tips/get-rid-of-h1-formatting

    Copy & paste the code below to embed this comment.
  10. I can’t see why it makes any difference to the search engine crawlers when they read a webpage, whether it starts with an <h1> right after the body tag. The thing is a computer right? What difference does it make to the computer if it is just looking for the <h1> tag? White space, garbage or script, what difference does it make as long as the computer recognises it isn’t <h1>?

    I can see there might be a content length limit, i.e. a couple of lines.

    See what I mean? That’s why it makes no sense to me to worry about having your logo JPG before your <h1> title. Or has google etc actually stated something along these lines?

    Copy & paste the code below to embed this comment.
  11. Thanks for the article. Other than the grandma comment, which was rude, the article was brief but helpful. I’ve been doing SEM for years but haven’t had the opportunity to build a pure CSS-driven site yet. I’m looking forward to it, and if I need a little ammunition to convince others that it’s worthwhile, this article may help a little bit.

    By the way, my grandmother at 81 is making lovely use of the web.

    Cheers,
    Gradiva

    Copy & paste the code below to embed this comment.
  12. Can’t believe you’d call your grandmother “dimwitted.” That’s just mean.

    Copy & paste the code below to embed this comment.
  13. It’s interesting that the article doesn’t mention the (X)HTML code structure itself. For example, with the magic of CSS, I can have a left menu that actually gets coded on the page /after/ the main content, so even though my menu is entirely text-based, contains H1 tags, etc, when google spiders my page, it’ll use the beginning text – which is actually content – as the small summary in its results.

    Example -> http://quotes.prolix.nu/

    This site uses a tweaked version of the blue robot CSS code. Good stuff.

    Copy & paste the code below to embed this comment.
  14. Hi, i’m new to CSS layout. After 6 years of mucking up HTML, i discovered this method really recently, after being struck by espn’s site.
    Not seeing any tables was a shock. This article gave me a lot of simple pieces of advice. I will source it when i try to convince the management to switch to CSS layout for our clients.

    Copy & paste the code below to embed this comment.
  15. let’s say i don’t want to use a h1 tag, just an image? is there a way so that i still reveive good search egine results? thx

    Copy & paste the code below to embed this comment.
  16. Another potential benefit for SEO of CSS design is the ability to position content in the hierarchy of the HTML in order to have the most important (keyword-rich) content at the top.

    Example: the chairman wants his 500-word mission statement appear at the top of the page, with product information below it. CSS-P saves the day by allowing us to position the content that the search engines require at the top of the HTML and yet display the chairman’s waffle at the top of the displayed content.

    Copy & paste the code below to embed this comment.
  17. After reading the article I thought that it is time to put it to the test. I proposed to my marketing team to implement across Europe and see what results we get. Will provide feedback on rankings in 1 months time.

    Copy & paste the code below to embed this comment.
  18. In general terms, I’d say that the article is right, but I think that any designer hoping that his/her rankings will get a boost only because of the code/content ratio is in for some nasty surprises. It’s really one of the ranking factors, but is not by far one of the most importants.

    And, of course, it’s not necessary for a web to be in XHTML+CSS to achieve that ratio, old HTML+CSS will do fine, but I agree, it’s good that these good practices gets rooted in he XHTML way of coding.

    Copy & paste the code below to embed this comment.
  19. You can get a good placement without using a h1, but images has nothing to do with your placement ;)

    Copy & paste the code below to embed this comment.
  20. You called your grandmother completely dimwitted—enough said!

    Copy & paste the code below to embed this comment.
  21. Googlebot happens to love well marked-up websites + Googlebot loves a good code to content ratio.

    XHTML / CSS offers you both.

    Copy & paste the code below to embed this comment.
  22. I honestly think that the amount of code does not matter as long as the site is quick loading, and has at least some amount of content to be indexed (or sufficient link popularity to not need to worry about on the page factors.)

    Copy & paste the code below to embed this comment.