How do I animate my website using jQuery web animation while still keeping it SEO friendly?
When most people visit websites, they assume the animated material is Flash. That’s not always the case. Due to the growing popularity of JavaScript frameworks, there are now a variety of exciting options for incorporating animations and animated material into your website that don’t involve Flash, which can’t be read by search engines.
You want your website to be creative and interactive, but you also want to show up in the SERPS. You don’t have to sacrifice any optimization with jQuery. It serves as an excellent tool for front-end developers to present information to the end user in more interesting ways. The fact that jQuery web animation uses JavaScript to manipulate DOM objects, (represented with HTML and styled with CSS) makes it easy to stay SEO friendly because you can reveal and hide content from the user with effects, but still keep the same page markup for search crawlers.
jQuery Web Animation Techniques
If you’re interested in jQuery web animation for your website, check out these 6 cool website animation techniques:
1. jQuery Cycle: http://malsup.com/jquery/cycle/
A great way to display your images!
This useful plugin can be used to create slideshows of images without the need for Flash. You can use this to display a gallery of images and choose the manner you’d like the images to transition. Effects include Shuffle, Zoom, Fade, Turn Down, Curtain, and Scroll.
Boomtown uses this jQuery animation here: www.boomtownig.com
2. jQuery Accordion: http://jqueryui.com/demos/accordion/
Manage your content.
The jQuery Accordion can help you display lots and lots of content in a condensed form that’s still visible to search engines, but doesn’t overload users’ senses.
RCD Technology uses the accordion plugin to successfully manage their content: http://www.rcdtechnology.com
3. Form Validation: There are many plugins available online for form validation.
Doing client-side form validation is made much easier with the jQuery forms plugin.
Widely regarded as one of the best jQuery plugins, Form Validation involves doing things like checking that all required fields were filled out and, if so, were they filled out to a required specification (e.g. correctly formatted phone numbers or dates), enabling you to get the information you need.
4. Superfish: http://users.tpg.com.au/j_birch/plugins/superfish/#examples
Create a cross-browser multi-level horizontal or vertical navigation.
The jQuery Superfish plugin is great for managing drop down and multi-level navigation. With the Superfish navigation plugin, you’ll be able to showcase and direct visitors to the many webpages your site has to offer.
It’s used for the navigation in the orange top menu of the Boomtown site and blog: www.boomtownig.com
5. Subtle Animation Effects: http://www.rcdtechnology.com/rfid-applications/partners-customers/
Create subtle animation effects for page items and images. (You can view these by mousing over the partner logos).
The creation of these effects for page items adds different movement to images.
6. Or you can use any of the widgets in the jQuery UI to enhance user experience:
http://jqueryui.com/demos/
We hope these 6 tools will inspire you to explore all that jQuery has to offer—there are numerous other plugins and website animation techniques as well. Learn more about jQuery and what it can do for your website!