CSS, AJAX, Web 2.0 & Search Engines

Dec 6, 2006 • 3:54 pm | comments (3) by twitter Google+ | Filed Under Search Engine Strategies 2006 Chicago
 

Shari Thurow from Grantanstic Design

CSS is an html addition allowing webmasters to control design, placement of elements, etc. You can use it to change the look of a site very quickly and easily. It also decreases the download time of the page. It is also easier to control the exact positioning of elements on a page. CSS formatted text links easily communicate visited/unvisited links.

CSS Disadvantages: - End users must have font installed on their computers or the page will not display as designers intended - Usability testing and focus groups might show that users prefer a font that is not commonly installed on all computers - CSS formatted hyperlinks can dominate the content of a web page, making the content appear unfocused.

Issues with CSS: - Text formatting -- Text wrapping -- White on White is dangerous -- Don't make all your content H1 tags with CSS -- Alt text in an h1 wont work - CSS Layers -- X, Y, and Z coordinates -- Ways of hiding text and links inside of CSS invisible layers -- She said the search engines know the position of all your text on your page, so don't try to trick them -- Stacking content on top of content, typically with a flash box on top of a text box

She then shows examples. She then says do not exclude the CSS style directory in your robots.txt file because it may raise a red flag and search engine reps want to be able to get to that content...

Jim McFadyen from CriticalMass is next up. Everyone wants AJAX on their sites, but they don't necessarily know what it means. AJAX is Asynchronous JavaScript And XML. It allows the browser to communicate with the server without refreshing the page. It may improve user experience. AJAX is comprised of the JavaScript CMLHtttpRequest Object. It uses XHTML and CSS often. AJAX is not a programming language.

AJAX is nor supported by search engines.

Search Engines and AJAX Do Not Mix, spiders do not run JavaScript. Search engiens cant see AJAX delivered content. AJAX created navigation wont be crawled.

Every page must be HTML, every page must have its content on the page, all links must already be in the HTML, and test this by turning off JavaScript in your browser.

Web developers can use (non-AJAX_ JavaScript to update the anchors on the page, and change the functionality to AJAX calls. This ensures that the AJAX will work, we know it will work because AJAX calls were set up by the JavaScript, which search engines are not capable of...

Ensure baseline application is built first and then you can take AJAX to take the user experience one step forward.

AJAX breaks the normal browser refresh - This means content not necessarily corresponding to URL - No addition to the browser history - No history, no back button

Fix this by Add Unique page IDs to each Page: - Use JavaScript to update the URL using # - Use JavaScript to fake an entry into the browser history - But is that a duplicate content issue? But typically # signs do not count as duplicate content, they ignore that. - Make sure not to cloak, it is very easy to cloak in this case, dont do it

Bad AJAX: - Gucci.com - Looks nice - Most content is served through AJAX - AJAX navigation - He then turned off JavaScript and the page was blank - Bad

Good AJAX: - Amazon Diamond Search (www.amazon.com/gp/gsl/search/finder?ie-UTF8&productGroupID-loose_diamonds - He shows off the diamond search feature with sliders - When he turns off JavaScript it shows a simpler version of the AJAX version

Scott Orth from Selytics to talk about Web 2.0 He explains web 2.0 is hard to define, he gives his conceptual explanation of it... How you interact with customers...

Case Study on Carrier North America Home Comfort: - Problem was the site was very static, not much in terms of being interactive, slow, conversions bad - They did the paper prototyping and focus groups to plan the new navigation - Interactive tools to enhance the user experience (polls, sliders, cost savers, forms, etc.) - New site was mainly built in CSS -- Makes it easier to update -- Loads faster -- Reduces Code size -- Allows you to do a lot more with the site -- Tables caused errors, they got rid of it -- They used H1s and H2s and standard content

2005 vs. 2006 Size 260KB 204KB HTML 760 250 Line 1 484 91

Results: - 97% increase in top ten organic rankings - Traffic jumped from search 53% - Organic performance accounted for 73% of all search referrals - Targeted conversions increased by 59%

Yahoo wants to make some general points: - There is a reason why Yahoo wants it to work for a general user that doesnt have JavaScript, they want to look at the site from a "baseline." - Yahoo will understand this stuff, they will get there, so dont assume stuff right now - Open up your CSS so Yahoo can peak into it - He also brought up Sitemaps as a way to also submit content (Site Explorer) - Search engines arent built to interact with the site, like users

Google said they will also be indexing JavaScript and AJAX and CSS, so don't use it to hack. Google will walk you through it with Webmaster Console. Google's ultimate goal is for you not to worry about engines, and it is Google's job to figure it out.

Yahoo added again, again. simple user...Build it for the simple user and not the search engine.

These posts may have spelling and grammar issues. These are session notes, written quickly and posted immediately after the session has been completed. Please excuse any grammar or spelling issues with session posts.

Previous story: Buying & Selling Links
 

Comments:

Aaron Shear

12/06/2006 10:32 pm

You can still use Ajax and Javascript with a proper DHTML layer below it.

Marty

12/08/2006 08:50 pm

Whomever said these things wasn't speaking from a very expert position on CSS: <blockquote>End users must have font installed on their computers or the page will not display as designers intended</blockquote> Most CSS designers use a range of fonts to get the desired effect, knowing that not all users will have the most preferred font. <blockquote>Usability testing and focus groups might show that users prefer a font that is not commonly installed on all computers.</blockquote> Well, that is a web-wide problem. Even if you hard-code a font (using dreaded <code><font></code> tags), you would still be limited by the fonts that each user had. That is why there are 'web-safe fonts', because they are almost universal. CSS vs. HTML doesn't make a bit of difference here. <blockquote>CSS formatted hyperlinks can dominate the content of a web page, making the content appear unfocused.</blockquote> Again, this is a general statement with almost no validity. CSS doesn't CREATE the formatting; it simply allows the user to apply the formatting to multiple elements at once, and more easily control the way links appear in link, active, hover and visited states. But you can do the same thing in HTML, so CSS is not the problem here - bad link design is bad link design. The rest of this isn't bad, but the CSS stuff is blatantly uninformed.

kapilver

01/29/2008 05:05 pm

Good information related with Ajax and CSS. But it's still a issues, how we can make our ajax based sites search engine friendly.

blog comments powered by Disqus