SEO and Web Standards: A conflict?

[pompeysie]

In a recent Clickz article (Link to Article (http://www.clickz.com/experts/search/opt/article.php/3502111) )Danny Sullivan referred to the common problem of web designers not considering search engine friendliness as part of their design and build process. In particular, the article referred to a series of heated emails between Danny and CSS guru Eric Meyer (worth a read actually if not just to see Eric digging himself in and then out of a hole!).

Having read through the series of articles referred to I have to confess to still being somewhat confused (a common theme from most of my posts on here but hey that's why I'm talking to you lot!). Early on in the article, Danny says the following:

Last summer, I was amazed at an uproar over a Search Engine Strategies session in San Jose. The panel covered how search engines interact with CSS (define), JavaScript, and frames (short answer: not well). An attendee felt the panelists were offering snake-oil solutions rather than focusing on content.

I have highlighted the crucial part in bold. Ok, I am aware of the problems of frames and JavaScript when it comes to search engines ability to spider websites fully but I was not aware of a problem with CSS (i.e. web standards design). However, Danny does not go into any more details than this in the article so I was hoping that Eric Meyer may have had a stab at explaining how web standards built pages can effect search engine rankings. This was Eric’s response:

I’m particularly interested because it seems, reading between the lines, that standards-oriented design isn’t as search-engine friendly as I’d thought (although it’s certainly much better than most alternatives). Peter Janes created a test of Google’s treatment of heading levels, and the results weren’t exactly encouraging. It bothers me that standards-oriented design and search engine optimization might be at odds, whether partially or fully. This is definitely something that needs to be cleared up. The results could affect the future evolution of search engines, which is a goal worth pursuing.
If you have ideas about how to get there faster, or have search engine tests of your own to share, let us know.

Not really the answer I was looking for!

Headscsape (http://www.headscape.co.uk) , the company I work for, have recently made the decision to only build sites for clients using web standards. Obviously, as their eMarketing consultant, I am worried that building sites this way might have negative consequences for my clients in terms of search engine positioning.

Do any of you have any more information on this topic?

Any details would be very much appreciated.

Many thanks in anticipation.

Simon

[Chris_D]

Simon,

Keep using Web Standards - pragmatically.

Keep in mind that "Google's order of results is automatically determined by more than 100 factors" - http://www.google.com/intl/en/webmasters/4.html

I don't think that any conclusions can be drawn from that simple test regarding semantic headings.

How about this test - using exactly the same pages: http://www.google.com/search?q=site:peterjanes.ca+Lorem+ipsum+&hl=en&lr=&c2coff=1&safe=off&filter=0

Why are these pages ranked in this order for the same identical body text? What does that mean? I would contend that this proves nothing about anything...

Web Standards are to be supported - and there should be more common ground between web standards based designers and SEO.

There are 'issues' in the web standards community - just like in the SEO community.

'Envelope pushing' in the design world occurs too - just like in the SEO world. Have you read some of the CSS 'strategies' - like the 'image replacement' strategy which has been around for a while? http://www.mezzoblue.com/tests/revised-image-replacement/

Separation of content and presentation - i.e. Html/Xhtml and CSS - often ignores the fact that images are often part of the 'content' side of the equation - and are not necessarily always part of the 'presentation' side. Zen Garden - which is a fabulous site - has examples which, by nature of the 'rules' of submission - makes the designer put all image 'content' in the CSS.

I actually had a long chat with Dave Shea & Doug Bowman at the Sydney Web Essential 04 conference about the image replacement technique - which is in direct violation of http://www.google.com/intl/en/webmasters/guidelines.html - look at the specific quality guidelines. Look at a site that uses those techniques with 'CSS off '- listen for the 'hidden text' alarm......

I have a very high regard for Dave Shea, Doug Bowman, Eric Meyer et al. And I congratulate Danny for trying to build bridges with these guys. We can all learn from each other.

Short answer - we support web standards pragmatically, validate code, and follow the W3C WCAG from a commercial and pragmatic approach. And we are an SEO firm. Why? - for numerous commercial reasons - from accessibility (people and spiders) to content reusability, usability (font resizing, fluid layouts), to page load speed and bandwidth savings on large sites.

And if you don't believe that Code validation is worthwhile to SEO - try leaving out a </p> on a page....

The biggest issue is that there are only W3C guidelines. As a W3C guy once said 'Most people would rtfm if there was an fm to fr' There is no manual - only guidelines...
:)

[pompeysie]

Great reply Chris and very interesting. Do you think the image replacment issue is the only contencious web standards approach that might cause a search engine problems though. This seems like such a small part of a whole site that I find it difficult to believe that it would cause huge problems.

Anyway, I think pragmatism is the key as you said. If only we had some reps from the search engines themselves with the exact answers here though. Surely, if we are trying to aid accessibilty and usability for our site users the least the search engines conpanies can do is to to provide a decent set of guidlines for developers. Maybe the W3C should arrange a meeting with Google sometime!

Anyway, thanks again. oh and Chris, don't forget to turn your hose-pipe off in Sydney today!!

All the best.

Simon
;)

[Chris_D]

Hi Simon,

Personally, I think that any use of CSS which breaches http://www.google.com/intl/en/webmasters/guidelines.html - e.g. 'Image replacement' - or any use use of CSS to 'hide content' - e.g. positioning off page, display none etc - could cause a problem especially if a human review is invoked.

See this thread about human review http://forums.searchenginewatch.com/showthread.php?threadid=6028

I can point you to heaps of e.g web design firms who are using CSS to hide content they don't want displayed to human users with graphical browsers - and they are currently 'getting away with it'. The only conclusion I can draw is that human review takes a lot longer than automated filtering.

Many CSS 'tricks' are actually in breach of accessibility guidelines. If you have an image - provide an Alt tag. Don't put 'content' in the CSS file and then create some kind of 'poistion the text off the visible page' solution to 'fix' it. And if the content was more appropriate as text - rather than an image - then why not use just text in the first place?

Web standards and SEO are complimentary - when both are used appropriately.

[mcanerin]

I do see a lot of web designers using CSS as a spam or "web designer cloaking system" - and it's gonna bite them, I'm certain.

Detecting CSS spam is WAY easier then IP redirection, and not much harder than detecting current things like white on white text, invisible gifs, etc

Many SEO's I know automatically search source code and the CSS file for "hidden" and absolute positions, etc now for competitors without even thinking about it - it won't take long for the SE's to catch up, I'm sure.

Ian

[SanDiegoSEO]

There are valid design reasons to hide text in a layer, and show it with user interaction. Say clicking an element switches an area of the page from an image to a block of text, or from one block of text to another.

Becuase of the valid uses, I highly doubt it will be anytime soon before the engines start penalizing sites for using them. It's probably on a case by case basis, and going to stay that way for quite some time.

[St0n3y]

There are valid design reasons to hide text in a layer, and show it with user interaction. Say clicking an element switches an area of the page from an image to a block of text, or from one block of text to another.

Becuase of the valid uses, I highly doubt it will be anytime soon before the engines start penalizing sites for using them. It's probably on a case by case basis, and going to stay that way for quite some time.

I completely agree. there is CSS spam and then there is valid CSS usage. I think SEs would be wise to note the difference.

[the lazarus corporation]

Hi Simon,

Personally, I think that any use of CSS which breaches http://www.google.com/intl/en/webmasters/guidelines.html - e.g. 'Image replacement' - or any use use of CSS to 'hide content' - e.g. positioning off page, display none etc - could cause a problem especially if a human review is invoked.

See this thread about human review http://forums.searchenginewatch.com/showthread.php?threadid=6028

I would have thought that if the Image Replacement technique was being used in a legitimate manner (e.g. the most common use is to swap in a nicely typeset graphical headline over an h1 or h2 tag which says exactly the same thing) then a human review would not cause a problem since no deception is taking place. If the Image Replacement technique was being used in a deceptive fashion then a human review would pick this up. That's the whole point of human reviews.

I can point you to heaps of e.g web design firms who are using CSS to hide content they don't want displayed to human users with graphical browsers - and they are currently 'getting away with it'. The only conclusion I can draw is that human review takes a lot longer than automated filtering.

I think your conclusion that human reviews take a lot longer than automated filtering goes without saying.

Many CSS 'tricks' are actually in breach of accessibility guidelines. If you have an image - provide an Alt tag. Don't put 'content' in the CSS file and then create some kind of 'poistion the text off the visible page' solution to 'fix' it. And if the content was more appropriate as text - rather than an image - then why not use just text in the first place?

Web standards and SEO are complimentary - when both are used appropriately.

Similarly, Web standards and CSS are complimentary - when both are used appropriately.

Certainly all content images should be in the mark-up and should be given a well-written alt attribute, but images which exist purely for visual decoration or layout such as background images should not be in the markup but instead in the CSS.

Putting decorative images into the CSS and prevents screen readers from having to list the presence of a bunch of decorative borders or 101 spacer gifs, before getting round to reading out the content to the frustrated user.

As such, putting these images into the CSS aids accessibility, as well as being semantically correct. It all depends on the type of image in question.

However, having recently got back from the Web Standards and Accessibility conference @media2005 (http://www.atmedia2005.co.uk/), one of the most frightening things that was repeatedly mentioned by both delegates and speakers was the fact that so little is known about these subjects (and what little is known is disputed by experts, advocacy groups and accessibility device manufacturers) - even by people who are 'experts', (and Joe Clark (http://www.joeclark.org/) is certainly an expert on Accessibility, and he told us this!).

[projectphp]

SEO and Web Standards: A conflict?
Yes, because the goals of each are different, therefore the solutions, and reasons for solutions, will vary.

Both share the goal of a better ROI for clients, but one says "better ROI through better search compatability" and the other says "better ROI through standards complaince". Both have merits, both have issues.

The question is, where is the "sweet spot". Standards compliance as a religion is fraught with issues. Ditto SEO. Find a balance, keep your eye on the real goals (better ROI and a USP for your business) and move on, leaving the semantics and arguing over the infrequent instances of disagreement to others.

[Chris_D]

Hi the Lazarus Corporation,

Welcome to the forums!

Certainly all content images should be in the mark-up and should be given a well-written alt attribute
I TOTALLY agree.

Putting decorative images into the CSS
Sure - 'decorative gifs' and the like - which contain no content - where no meaningful alt tag is required, and there are no words in the decorative images - agreed. After all - web standards are all about the separation of content and presentation. CSS is for presentation.

I would have thought that if the Image Replacement technique was being used in a legitimate manner (e.g. the most common use is to swap in a nicely typeset graphical headline over an h1 or h2 tag which says exactly the same thing)

So if its text - and its H1 - H2 important - then use text. Why 'guild the lily' with a picture of words?

Most of the image replacement techniques (Fahrner etc) touted over the past 2 or 3 years don't meet W3C guidelines:

The power of text equivalents lies in their capacity to be rendered in ways that are accessible to people from various disability groups using a variety of technologies. Text can be readily output to speech synthesizers and braille displays, and can be presented visually (in a variety of sizes) on computer displays and paper.
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-text-equivalent

Dave Shea's 'enhancement' is the closest to compliant: http://www.mezzoblue.com/tests/revised-image-replacement/ - by using the exact words in heading as in the graphic.

So what did he achieve? He made what should have otherwise been:
1. A text H tag with the words;
or
2. An image (picture of words) with an Alt & title with the words;
into
3. An image (picture of words) with a hidden h3 tag with the words.

And what if you add a few extra words into that title tag- is that still compliant? How many extra words that aren't in the graphic? Don't you think that could fall under the 'keyword stuffing' Google guideline?

a human review would not cause a problem
Therein lies the problem. The exclusion is most often by an automated process - reinclusion is usually after a hand review. Sometimes exclusion can be based on a spam report - which could invoke a human review to instigate exclusion.

After you get excluded - then you may get to plead your case for a human review - someday. Not good odds.

"CSS tricks" are all too open for abuse. Joe Clark was one of the first to expose the accessibility issues caused by the Fahrner image replacement technique. And while Joe's an accessibility expert - I really don't think that Joe would claim to be an authority on search engines.

What would the motive be for using image replacement to use a hidden h1/h2/h3 tag on a page - where either a 'normal' image with an alt & title would have otherwised server the same purpose - or why not just use a H1 tag in the first place?

Most image replacement I've seen isn't 'designer font graphical titles'. Its keyword stuffing via CSS files.

[the lazarus corporation]

Hi Chris - thanks for the welcome. My first post wasn't meant to be too contentious, but I'd been lurking a while to pick up tips and get the hang of the place, and this thread appeared on my pet topic!

So if its text - and its H1 - H2 important - then use text. Why 'guild the lily' with a picture of words?

Most of the image replacement techniques (Fahrner etc) touted over the past 2 or 3 years don't meet W3C guidelines:


http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-text-equivalent

Dave Shea's 'enhancement' is the closest to compliant: http://www.mezzoblue.com/tests/revised-image-replacement/ - by using the exact words in heading as in the graphic.

So what did he achieve? He made what should have otherwise been:
1. A text H tag with the words;
or
2. An image (picture of words) with an Alt & title with the words;
into
3. An image (picture of words) with a hidden h3 tag with the words.

And what if you add a few extra words into that title tag- is that still compliant? How many extra words that aren't in the graphic? Don't you think that could fall under the 'keyword stuffing' Google guideline?


I understand your point of view, and I was referring to Dave Shea's technique when I write about "the Image Replacement technique was being used in a legitimate manner". The only Image Replacement technique I consider legitimate is the exact replication of the words (and only the words) in the graphic. I've explained my motives for using it somewhere below.

And yes, adding extra words to the text version of the tag would count as keyword stuffing as far as I'm concerned (and I bet Google etc would agree).


Therein lies the problem. The exclusion is most often by an automated process - reinclusion is usually after a hand review. Sometimes exclusion can be based on a spam report - which could invoke a human review to instigate exclusion.

After you get excluded - then you may get to plead your case for a human review - someday. Not good odds.

I agree that getting un-excluded sounds like (from what I've read) a long and torturous process akin to a Kafka-esque Trial, and certainly not one I'd like to be caught in.

"CSS tricks" are all too open for abuse. Joe Clark was one of the first to expose the accessibility issues caused by the Fahrner image replacement technique. And while Joe's an accessibility expert - I really don't think that Joe would claim to be an authority on search engines.

What would the motive be for using image replacement to use a hidden h1/h2/h3 tag on a page - where either a 'normal' image with an alt & title would have otherwised server the same purpose - or why not just use a H1 tag in the first place?

Most image replacement I've seen isn't 'designer font graphical titles'. Its keyword stuffing via CSS files.

I would contend that CSS Image Replacement (when used for 'designer font graphical titles' rather than keyword stuffing) is accessible and that, when used like this, is actually more accessible and in agreement with web standards than using an alt tag. Here's my reasoning/motive:

I have a graphic on my theoretical website which is being used as the headline for the entire page. The graphic says "Paul's Article on Web Accessibility" in a lovely typeset and kerned rare font, and the alt attribute attached to this img tag also says "Paul's Article on Web Accessibility" because I'm into accessibility.

However, the graphic is the main heading of the document - something which is not recognised by being a lowly 'alt' attribute. Screen readers and robots can't tell that this is the main title because it has no position in the document hierarchy of h1 h2 h3 etc. I want my document to be semnatically correct and accessible in accordance with web standards, so what do I do?

The solution is Image Replacement - I change the img element to an h1 element containing the text "Paul's Article on Web Accessibility". Now the document is semantically correct, but I've lost my beautiful font and typesetting on the article heading. So I use CSS Image Replacement to display the typeset graphic version of my article title to sighted visitors, while the h1 tag remains in the document for accessibility (screen readers) and also for any computer-indexing/bot-crawling (including, but not limited to, search engine bots) which also need to know the hierarchical structure of the document as well as just the words on the page.

I suspect that Google will (come to) accept this legitimate use of the CSS Image Replacement because of its rapidly growing use. It balances the demands of:
1. the client/boss ("I want pretty article headers in this weird font") with those of
2. SEO experts (keyword-rich page headings in h1 and h2 tags for extra weighting) as well as
3. Web Standards people (semantically correct, hierarchically structured document) and
4. Accessibility gurus (can be read by screen readers).

In summary, CSS Image Replacement can be used for keyword stuffing, but so can many legitimate coding/styling techniques. The CSS technique is not spamming, keyword stuffing is spamming. You can stuff an 'img' alt attribute or a title attribute on a link full of keywords rather than using it legitimately to aid accessibility, but that's no reason to stop using img alt atrtributes or a href title attributes. I think the same applies to CSS Image Replacement. I'd certainly like to think that Google thinks so as well.

Cheers

Paul

[mcanerin]

I haven't tested taking an image with Alt text and then simply placing an <h1> around it, but recent feedback from a different test leads me to beleive that this may actually work just fine - no need for fancy CSS tricks.

I have confirmed that Google now reads and indexes alt text, where previous testing (6 months ago and previous) showed that they did not, unless it was linked.

Additionally, when you check the result in Google text only cache, the text is shown and an H1, as I recall.

Ian

[Robert_Charlton]

Additionally, when you check the result in Google text only cache, the text is shown and an H1, as I recall.

I think anything within the alt tag quotes is just treated as a text string, not as active html code.

Try using alt="<!-- test -->" as the alt tag of an image. In the alt tag flag, <!-- test --> will display in its entirety. The comment tag isn't effective within the alt tag quotes. If it were, it would keep the text enclosed from being displayed and indexed.

Similarly, I don't think that <h1> within the alt tag does anything at all. It's just a text string, and one that will look ugly and confusing to most users who see it.

[mcanerin]

You misunderstand. Though the info on the HTML code in alt tags is interesting - I would have never even thought of trying that.

The code would look like this:

<h1><img src="image.jpg" width="300" height="120" alt="My Title Text Here"></h1>
Testing this shows that text only browsers actually tend to display the "My Title Text Here" as an H1

I have not completly tested this in the major 4 SE's, but based on other tests I'm doing it's very possible this would work fine today.

Ian

[Robert_Charlton]

Testing this shows that text only browsers actually tend to display the "My Title Text Here" as an H1

That is interesting.

Though your accented word test showed that Google is currently indexing alt text, and that suffices for a unique term to rank, it's not clear that alt text is much help for a competitive term, or that the H1 would boost alt text to greater significance.

Alt text for image links, as I'm guessing you know, displays as anchor text in the Google text only cache. I've never been one to put H1s into anchors, but this is another possible combination to look it. If I were Google, I wouldn't give these alt H1s much weight, nor would I boost the relevance of H1 links... but one never knows what Google will do.

Though the info on the HTML code in alt tags is interesting - I would have never even thought of trying that.

I'd first observed this way back when I tried to control line breaks within alt text and saw that it didn't work.

[mcanerin]

Though your accented word test showed that Google is currently indexing alt text, and that suffices for a unique term to rank, it's not clear that alt text is much help for a competitive term, or that the H1 would boost alt text to greater significance.

Agreed, I suspect it's for inclusionary purposes, rather than adding weight to the word. But I'm still testing it - one thing is certain, the old rules have changed and I should take nothing I used to "know" for granted without some sort of recent evidence.

Ian

[hello2paul]

I think projectphp said it first, but the simple answer to this question is:

"Yes. Always"

I've discussed this, (inside my own head!), and at other forums - and the big debate you see above always emerges.