Using XHTML/CSS for an Effective SEO Campaign
by {embed="embeds/article-authors" entry_author=" Brandon Olejniczak" entry_username="brandonolejniczak" entry_id="14751"}
by {embed="embeds/article-authors" entry_author=" Brandon Olejniczak" entry_username="brandonolejniczak" entry_id="14751"}
67 Reader Comment{if "67" > 1}s{/if}
Back to the {if "articles" == "columns"}Column{if:elseif "articles" == "blog"}Post{if:else}Article{/if}{if "http://cheshrkat.blogspot.com/"} heretic {if:elseif twitter} heretic {if:else} heretic {/if}
While good web developers will know why XHTML+CSS is a Good Thing, many managers/clients will refuse to believe it until someone else says so. Hence, being able to reference a document online adds weight to your argument.
Plus, I’d never really thought about the effects on search engine ranking that standards compliance could have… so it was good to bring the point to my attention.
The grandma crack does make it risky to give out the URL though – should have been edited out. Beautiful code doesn’t mean perfect copy! :)
{if ""} Eugene {if:elseif twitter} Eugene {if:else} Eugene {/if}
I was totally surprised by the length of the article. There should’ve been more material in it. As it is… it looks more like a blog post than an ALA article. (And no, don’t tell me that ALA is a blog.)
{if "http://www.webmarketingplus.co.uk/"} Ammon {if:elseif twitter} Ammon {if:else} Ammon {/if}
I’m quite bemused by some of the comments in this discussion so far. I mean, SEO is a sub-function of Internet Marketing, and yet some of the marketers who’ve commented seem to have completely missed the fact that they are not your primary audience.
The opening paragraph should have informed them:
“ANY INTERNET MARKETING PROFESSIONAL will tell you, just as we will…”
As a professional Internet Marketing Consultant of many years standing I agree. For an audience of web designers (professonal and amatuer alike) the advice that using CSS and XHTML can help with SEO is sound. Leaner code, faster downloading of pages, the ability to use a H1 tag without it defaulting to huge chunky size, rollovers that can be crawled – all great benefits.
As for some of the questions and ‘tips’ in the posts above, well, no major search engine gives as much ‘weight’ or credence to ALT text as to regular text. Even if you put H1 tags around it.
<h1>keywords</h1> will beat <h1><img alt=“keywords”></h1> in every engine that matters.
In fact, in some of the most important engines, keywords will beat <h1><img alt=“keywords”></h1> too, making it far from ‘optimal’ for search engines.
“put an h1 containing the company name (for example) above that image. Then just hide that h1 (i.e. h1#hidden {display: none}).”
The trouble with this is that idiots misuse it. Google is very clear about hiding anything: Don’t.
“Quality Guidelines – Specific recommendations:
1. Avoid hidden text or hidden links.” says Google
http://www.google.com/webmasters/guidelines.html
You see, if you are in a market that is competitive enough to need to use hidden content, then conversely, it is too competitive to use hidden content. One of the competitors will make a spam report to Google (after examining your code to see how you rank well).
While some very good sources have been mentioned already, my final point is to offer one more:
http://www.cre8asiteforums.com/
Owned by a professional Usability and UI Consultant who also does SEO, yet with plenty of the more traditional SEO related topics of course, Cre8asite takes a slightly more holistic view of marketing than many webmaster forums.
{if ""} Michael Ward {if:elseif twitter} Michael Ward {if:else} Michael Ward {/if}
Re: Mark Orbits comment that we’ll be back to square one once everyone discovers the benefits of good XHTML and CSS coding, I don’t agree!!
I run a website, unfortunately I am only involved with the content and moderation issues and do not get a say on the coding behind the pages. We are running the site using PHP Nuke and the code it creates (or the template creats) is hideous.
We also struggle to rank well in a search engine because of all the crap in the code. How does a search engine know what is a title on any of my pages? What parts are lists? The semantic meaning of my site is currently close to nil.
Any site that has good semantic definition will allow the search engines to give them fair representation. Currently some parts of my site (footers for example) are being given much more weight than they deserve by the search engines. I could sort that problem if my site was properly marked up.
The URL to my web site is in the above link if anyone is interested in looking at the code (it’s not a pretty sight!!)
I may just have a go at a PHP-nuke template one of these days and see if I can get my site using good code!!
{if ""} Michael Ward {if:elseif twitter} Michael Ward {if:else} Michael Ward {/if}
Missed out the URL!!
http://centurions.rlfans.com
{if "www.raymckenzie.com"} Ray {if:elseif twitter} Ray {if:else} Ray {/if}
Articles are like code. It’s either lean or bloated. Come to think of … any form of communication is like code. Lean or bloated.
The author said what he had to say … and that’s that.
{if "http://bcheckb.com"} Brandon {if:elseif twitter} Brandon {if:else} Brandon {/if}
Let’s look at this from a utopianistic perspective: It is the future. Everyone who makes websites are using standards. .01% of websites are obsolete. We’ve all learned to use clean, valid, semantically correct markup. There’s no mixing of content and design anymore.
In this future, every website is rendered equal; on the same level. Search enging spiders can read them all with the same ease. Does this mean google is going to have to find new algorithims to rank websites? Absolutely not. If everyone were using standards the only algorithim necessary would be relevancy. One website on cardiovascular workouts is going to be more relevant than the other, guaranteed.
The future is not about writing great code. It’s about writing good content.
{if "http://www.masadelante.com"} Sonia {if:elseif twitter} Sonia {if:else} Sonia {/if}
Wow,
As usual Ammon makes some great points. Cre8asite is an excellent resource.
WRT the hiding the h1 image technique written on Stop Design and mentioned here, it does involve hiding text and could be considered a little risky wrt Google. (Now that StopDesign has comments available, maybe someone should post a ‘warning’)
We got dinged by Google on one site when using Eric Meyers hide/show menu text using a ‘hidden and revealed’ span – a technique/example that he uses on his website.
Another cutting edge thing that may or may not be dangerous:
The excellent ‘Pure-CSS Tabs’ (http://kalsey.com/2003/05/css_tabs_with_submenus) are something that we are afraid to try due to our bad luck with Eric Meyers technique described above. We figure (but what do we know, really – this is speculation based on experience) that Google seems not to mind hidden/shown elements when mixed with Javascript, but maybe bites you when it’s pure CSS.
{if ""} {if:elseif twitter} {if:else} {/if}
“This article was in no means meant as a complete guide on optimizing a site. Its primary purpose was to inform the knowledgeable CSS and XHTML author about things they are already familiar with and how implementing them will improve upon their search engine optimization. “
why bother?
if the authors are already knowledgeable and familiar with information, why would we care? what would be useful is a well-written article that we could use to convince Marketing Professionals, Executives and everyone else with their fingers in a project why XHTML and CSS are useful.
this article spends more time telling the reader “what they already know” and what’s not going to be covered than it does in providing useful information.
even some simple discussion of what search engines you should target, and why XHTML and CSS are great food for primary SE spiders would have been useful.
this article is thin, and far from the quality i’ve come to expect from ALA.
{if ""} {if:elseif twitter} {if:else} {/if}
too short.
{if "www.cre8asiteforums.com"} Adrian {if:elseif twitter} Adrian {if:else} Adrian {/if}
I think many people who have replied here seem under the impression there is some kind of magic to SEO. I know people like Ammon have spent many years learning about Search Engines and various marketting techniques to really know them in great detail and be able to get as much out of them as possible. But the basic of SEO have been the same for a few years, good content with unfussy, well marked up code.
The fact is many people don’t go along with web standards and don’t think to make the best of their text. The article is perfectly acceptable as it is, it is about how XHTML can help you with search engines, not specific tricks to get ahead of everyone else, its tricks that people like Google don’t like and why things like hiding H1 is a dodgy tactic. I contacted Doug Bowman about what I felt was a risky technique for search engines as far as the FIR trick was concerned for the simple fact that they don’t like hidden text!
Yes following web standards can help with SEO, if your already following web standards then of course there wasn’t going to be anything new in the article, thats what it was all about! However, people who want to know more, or need convincing of the pros of using valid markup are more the kind of target audience of the article.
For most of you who are well versed in CSS/XHTML already a simple line to say ‘Using XHTML in accordance with the W3C standards can help in getting a better rank in Search Engines’, but that wouldn’t really of made much of an article at all and wouldn’t have helped the people who needed the ‘how will it help’ type info. Its one thing doing it, its another to understand why you do it. Something I think the likes of Zeldman and Meyer generally do very well in looking at the ‘bigger picture’.
{if "www.simoncox.com"} Simon Cox {if:elseif twitter} Simon Cox {if:else} Simon Cox {/if}
When I converted my personal site over to Movable Type earlier this year I made a concerted attempt at setting everything in xhtml and css. I used many all of the techniques Brandon mentions in his article and my site’s Google click through rate has gone up at an unbelievable rate. Mind you one of the most popular searches is “Tights Gallery” – I have some pictures in my gallery of a Tie and Tights party we had – all very innocent but I suspect the visitors to those pages are somewhat disappointed!
I have to agree that structural mark up is paramount and I still can’t believe how many sites ignore this!
{if "http://www.catalogablog.blogspot.com"} David bigwood {if:elseif twitter} David bigwood {if:else} David bigwood {/if}
Brandon mentions the importance of having the title in the text, not just an image. However, having the author’s name in text is important as well. His only appears in the image. Nowhere in text searchable by a spider. He is invisible to the Web search engines.
{if ""} DudeMan {if:elseif twitter} DudeMan {if:else} DudeMan {/if}
I really don’t know why you bothered. Not wishing to be egotistical but you really have a lot to learn about CSS. What you did using JavaScript can also be done using CSS and HTML.
And I know you were merely explaning how to optimize a web page for the purpose of Search Engine Indexing, but come on, is it really necessary to waste time using JavaScript when a little experimentation with CSS and HTML will also do the trick? Articles like this are most often misleading and a complete waste of time for those in the know. If you wish to show us something, at least take the time to do it properly.
{if ""} {if:elseif twitter} {if:else} {/if}
If you are going to tout using CSS then please use correct CSS in your one and only bit of code. The correct property is FONT-SIZE not SIZE. The SIZE property controls the size and oreintation of a page (for printing). See http://www.w3.org/TR/REC-CSS2/page.html#propdef-size
{if ""} {if:elseif twitter} {if:else} {/if}
… to say about SEO?!
{if ""} LePhuronn {if:elseif twitter} LePhuronn {if:else} LePhuronn {/if}
And that was constructive HOW? If you’re gonna complain then at least keep it relevant…one could say “make the most of your text” in that regard.
{if "http://www.yayel.com"} Jerome {if:elseif twitter} Jerome {if:else} Jerome {/if}
Ammon: thanks for your tips. But 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…
{if "http://www.piercegleeson.com"} Pierce Gleeson {if:elseif twitter} Pierce Gleeson {if:else} Pierce Gleeson {/if}
Very little information. But maybe that’s all the information there is on this topic. If so, fair enough.
I feel sorry for his Grandmother.
{if ""} Corelli {if:elseif twitter} Corelli {if:else} Corelli {/if}
This was way below the standard I’ve come to expect and enjoy from ALA stories in the past. ALA’s strapline is “for people who make websites”, right? Nothing covered in this article was in any way ‘extended technique’ for anyone who’s ever read an ALA story before.
I don’t expect one of the three (?) main points of an ALA story to be ‘use heading tags’.
{if "www.zone4health.com"} Marie {if:elseif twitter} Marie {if:else} Marie {/if}
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!
{if "http://zone4health.com"} Marie {if:elseif twitter} Marie {if:else} Marie {/if}
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!
{if "http://www.webmarketingplus.co.uk/"} Ammon {if:elseif twitter} Ammon {if:else} Ammon {/if}
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/
{if ""} DudeMan {if:elseif twitter} DudeMan {if:else} DudeMan {/if}
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.
{if ""} DudeMan {if:elseif twitter} DudeMan {if:else} DudeMan {/if}
Because if you are going to do something, either do it to the best of your abilities, or don’t bother doing it.
{if "http://faustlabs.com"} James Dezendorf {if:elseif twitter} James Dezendorf {if:else} James Dezendorf {/if}
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.
{if "http://www.notablog.com"} Yoki Holte {if:elseif twitter} Yoki Holte {if:else} Yoki Holte {/if}
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!
{if ""} Scott Blanchard {if:elseif twitter} Scott Blanchard {if:else} Scott Blanchard {/if}
I am in the process of converting to XHTML/CSS, everything looks fine in all browsers tested so far (expect IE 5.2 Mac).
However, when I run the site against the w3c validator for transitional XHTML, it reports several errors in my javascript header. Like this
Line 5, column 417: character “)” not allowed in attribute specification list (explain…).
…nt.cookie.length;var i=0;while(i<clen){j=i+alen;if([removed].substring(Its complaining about the “)” after “i<clen”
WHat gives??? Do I need to wrap the script contents in CDATA?
{if ""} Edward_Hew {if:elseif twitter} Edward_Hew {if:else} Edward_Hew {/if}
Hi, I may be a bit off-topic here, but does search engine spiders access web pages like browsers do?
I’m not referring to long URLs. But …
Lets say I build my site using custom objects and function libraries that render HTML elements.
something lke this:
// will print HTML <head> elements to a browser<?
// get all custom function an objects
include(“html_elements.php”);
htmlHead();
?>
<!—escape PHP and do HTML—>
<!—place META tags here—>
<?
htmlBody();
?>
HTML body content
<?
htmlClose();
?>
will this example make sense to a search engine spiders / robots?
when a spider accesses this page, what will she see?
Thanks!