CSS, AJAX, Web 2.0 & Search Engines

Man up, ladies and gents. We have one more session to visit.

Danny Sullivan is moderating the CSS, AJAX, Web 2.0 & Search Engines session with panelists Shari Thurow (GrantasticDesigns.com), Jim McFayden (Critical Mass), Ryan Johnston (Critical Mass) Dan Crow (Google) and Amit Kumar (Yahoo! Search).

The Web has evolved as more people are making use of things like CSS, JavaScript and AJAX, and sometimes the engines don’t know what to deal with it.

Up first is Shari Thurow, who suggests the creation after an open bar after the last session of the last day. I am so in agreement with that.

CSS is an HTML addition that allows webmasters to control design parameters such as margins, font/typeface appearance, link appearance, etc. The main reason to use it is because it decreases the download time of a page and makes it easier to control exact positioning of the elements on a page. CSS-formatted text links easily communicate visited/unvisited links.

The disadvantages of CSS are that in order for end users to see the page as you designed them, they have to have the fonts and typefaces you used installed on their computers. (Note: Target your type choices to your target audience). For this reason, don’t put your logo in CSS. Usability testing and focus groups might show that users prefer a font/typeface that is not commonly installed on all computers. CSS-formatted hyperlinks can dominate the content of a Web page, making the content appear unfocused.

CSS can also be used to hide text on a page.

Some SEOs believe that encoding the image in a heading tag will make the alt text appear more important. Don’t do this. It doesn’t make a difference and you may be looked at as a spammer. Badness.

There are legitimate uses to hidden layers. For example, a drop down menu is not spam because the text is clearly meant to be viewed by humans and is easily read.

Should your robots.txt exclude the styles directory from the Web search directory?

Shari says no. The engines don’t want that due to all the misuse of CSS that has gone on. Use CSS but don’t use it to exploit the search engines.

As the Web moves into its second generation, sites are making more use of CSS, AJAX, and other advanced and interactive design techniques. But how are the largely Web 1.0 search engines reacting to this from an SEO perspective?

Ryan Johnston and Jim McFayden are up next. Ooo, a dual presentation. Fancy!

AJAX has become another (overused and annoying) buzzword. Everyone wants it on their site but no one knows what it means. AJAX offers an improved user experience, but you have to make sure you’re still meeting your search engine optimization needs.

AJAX stands for asynchronous JavaScript and XML. It makes Web pages feel more responsive. It’s not a technology but a term that refers to the use of a group of technologies. It gains full power from XML and DOM.

AJAX is not a programming language. There are no downloads or installations. All A-grade browsers are AJAX ready.

AJAX is NOT support by the search engines.

Search engines and AJAX don’t mix: the search engines don’t run JavaScript and can’t see AJAX-delivered content. AJAX created navigation goes nowhere; spiders can’t see the links so they won’t follow anything.

The solution to this is to remember that every page needs to be an HTML page and have its own content on the page. There must be a page the search engines can find and index. All links must already be in the HTML. To know if your site is search engine friendly, turn JavaScript off in your browser and see if you can still navigate your site.

When search engine optimization is imperative to the project, it’s important to make sure you build your baseline application. For those fully supported users, it is important to understand that the AJAX you’re going to use is going to enhance the Web site. Make sure you are testing for all the different types of users.

Jim uses a recent project he worked on for Rolex.com as a case study.

He says that AJAX breaks the normal browser behavior. This means content is not necessarily corresponding to a URL. When you navigate a site designed in AJAX there is no addition to the browser history, no history, no back button, nothing. This has a great potential for spamming or cloaking the search engines and presents a major usability issues. To fix this, create unique page IDs to each page. Use JavaScript to update the URL using a # sign (the engines don’t look past the # sign). Use JavaScript to fake an entry in the browsers history.

Great example of BAD AJAX implementation: Gucci.com
Great example of GOOD AJAX implementation: Amazon.com

On the Gucci site, if you don’t have JS enabled, you see nothing. No content, no site. AJAX should be used as an enhancement, not a requirement. All of your pages must exist as plain HTML.

Dan Crow and Amit Kumar didn’t give presentations but offered rebuttals on things they’ve heard during the session.

Dan confirms that the search engines don’t look past the # sign in a URL. He does say not to rely on the state of play today to be the state of play in the future. Everything presented in the panel is true for today, but he expects in the next few months and years that we’ll see a major shift to where the engines are able to index this content.

Amit re-emphasizes that the engines are working hard to find a way to index JavaScript and says the reason they can’t is their fault.

Lisa Barone is a writer, content marketer & VP of strategy at Overit Media. She's also a very active Twitterer, much to the dismay of the rest of the world.

See Lisa's author page for links to connect on social media.