More and more, production design has become a game of trade-offs it when comes to developing a unique site look and feel while maintaining search engine optimization basics. A site that relies on Flash or images-used-as-text might elicit “oohs” and “aahs” from page visitors, but also risks the ignorance of search engine robots and spiders.
Here are some areas that are considered aesthetically limited by SEO requirements, but don’t necessarily have to be:
Headline text
Headline text, H1 and H2 tags specifically, are very important to SEO – they provide context for your content in the eyes of search engines as well as act as visual indicators for actual page visitors. A page without an H1 tag is like a newspaper article without a headline – how would one know what it’s about without reading part or all of the article itself?
Like most page text, headlines have traditionally been limited to web safe fonts – a set of approximately 10 system fonts that are installed by default on Mac and Windows PC systems. If a site headline font is set to be something a site visitor does not have installed on their system, their browser will default to a very generic serif or sans-serif font.
How does a developer create exciting, unique headline when your options are limited to 10 fonts? The surprising answer is images. By using four Cascading Style Sheet (CSS) properties, This headline:
My Great Website Headline
can turn into this headline:
My Great Website Headline
without losing any search engine visibility.
The approach is to realize that search engines and humans view web pages differently. Whereas Joe Site Visitor sees a page as it’s rendered by a web browser, search engine robots and spiders see it for something different: pure code. CSS allows site designers to manipulate a sites layout and visual styles, without necessarily requiring a manipulation of code. In the example above, the code for each headline to appear is the same:
<h1>My Great Website Headline</h1>
What Are Cascading Style Sheets? |
|
Cascading Style Sheets (CSS) is a language that, among other things, defines web page styles based on existing markup languages. CSS allows developers to set universal or specific styles for text, images and hundreds of other page elements. |
However, in the second example, CSS in the pages header area is used to create a special style for the H1 tag:
h1 {
width: 412px;
line-height: 43px;
background: url (mygreatwebsite.gif);
text-indent: -999em;
}
CSS code gives the actual output of the tag a width (412px) and a height (43px), moves the text out of view (text-indent:-999em;), and inserts an image to fill in the defined space (mygreatwebsite.gif). The H1 tag remains intact without the use of images or other non-compliant methods – indicating to search engines exactly how important that text is.
This method is very handy for adding a little flair to your page text, but keep in mind the amount of work needed for each headline – each would be a custom piece of code that would require a background image to be created. This could get daunting for sites with many pages, or sites that use a content management system that has hard-to-use set of styles or limited customization.
Animations
Flash animations or applications have added a new layer of interactivity and creativity to web development over the last 10 years, however one area in which the technology is severely lacking is SEO. Though Google has made the recent announcement that its search engine will be able to ‘crawl Flash’, there is still the matter of optimized Flash output, pagination, proper syntax, proper tags and linking, to name a few items – search engine technology is quite a ways off from indexing Flash elements into something usable.
Is Flash the end-all, be-all of site animation? Not at all. JavaScript libraries like jQuery and MooTools allow developers to incorporate animations and other graphical effects that give page elements a Flash-like appearance, without being Flash. Take a look at Lahive’s homepage animation -- http://www.lahive.com/. Done entirely in jQuery, the home page banner auto-animates with a fading transition between case studies. Users can manipulate which frame they’re on and even highlight text. Best of all, text in this banner area is visible to search engine spiders.
Have Your Cake and Eat It Too
As shown in examples above, search engine optimized-pages do not have be vanilla affairs that lack creativity. By using a range of tools from standard XHTML/CSS coding to more advanced plug-ins like jQuery and MooTools, developers can achieve something both developmentally sound and visually appealing.