CSS, AJAX, Web 2.0 & Search Engines

Dec 6, 2006 - 3:54 pm 3 by
Filed Under SES Chicago 2006

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.

 

Popular Categories

The Pulse of the search community

Follow

Search Video Recaps

 
- YouTube
Video Details More Videos Subscribe to Videos

Most Recent Articles

Google Updates

Google November 2024 Core Update Heats Up This Weekend

Nov 17, 2024 - 8:10 am
Search Forum Recap

Daily Search Forum Recap: November 15, 2024

Nov 15, 2024 - 10:00 am
Search Video Recaps

Search News Buzz Video Recap: Google November 2024 Core Update, AI Overview Hyperlinks, SEO, Ads, AdSense & More

Nov 15, 2024 - 8:01 am
Google Maps

Google Maps Search For Products Nearby Carousel

Nov 15, 2024 - 7:51 am
Google

iPhone Gets Native Google Gemini App

Nov 15, 2024 - 7:41 am
Google

Google Chrome To Spotlight Merchant Center Promotions

Nov 15, 2024 - 7:31 am
Previous Story: Buying & Selling Links