» Follow Through on Your Web Design Media with Search Engine Optimization- tutorial blog

You don’t have to be an athlete to appreciate a pro golfer’s drive off a tee, a designated baseball hitter’s swing or an Olympic gymnast’s agility on the high bar. Whether it’s distance, power or grace, it all comes from properly following through.

Web designers also need to follow through textually on their designs–whether they’re simple photographs or sophisticated Flash animations. It’s those final steps in the design process that ensure your design is found by searchbots and people alike.

Here’s the big idea: Searchbots feed on keywords. Although they’re tuned to go after formatted text, filenames, HTML tags,  captions, multimedia and so on, its all about the keywords you use. Keep that in mind as you read further.

A Quick Word about Formatting

Searchbots give more weight to formatting such as bold face, italics, lists, bullets, anchor text links and foreign language characters.

Decisions about formatting usually begin with the copywriter, but you shouldn’t assume Web writers know more about formatting or SEO than you do.

The size of a headline is often as much as a design decision and a copywriting one. It helps you and the copywriter to know that, for example, big headlines are more appetizing to search engine spiders than small ones. The point is, that maxing out  formatting from both design and readability perspectives should be a collaborative effort between designer and copywriter.

Filenames, Alt Tags and Captions

I worked with a designer some months ago who put a bunch of text I wrote into jpegs, because he wanted to spiff up the layout. That’s great from a design point of view; however, from an SEO point of view, not so great. Searchbots care most about HTML and will overlook the content inside an image file, so I had him put everything back into HTML.

Let’s take a quick step through what I’m talking about as it relates to your static images. Suppose my HTML for an image looked like this:
src="http://editorialengine.com/wp-content/uploads/2008/11/image.jpg"

Looks fine. It works. But it’s not SEF (search-engine friendly) because the filename is generic and doesn’t mean anything to you, me or a searchbot.

Let’s try this:
src="http://editorialengine.com/wp-content/uploads/2008/11/green-bottle-french-perfume.jpg"


Notice the filename? Those are my keywords (or they would be if I sold French perfume in green bottles). Now we’re getting somewhere. Let’s go the next step and add the Alt tag:

“Alt” is short for “alternative text” and using this tag will help searchbots discern the image’s contents and make your image Web standards compliant.
src="http://editorialengine.com/wp-content/uploads/2008/11/green-bottle-french perfume.jpg alt="French Perfume Green Bottles Smells Great"

Now, we’re cooking.

A properly formatted image also includes width and height, a thumbnail and a large version of the image (when appropriate) and caption (also when appropriate). If you include a caption, write it close to, or even the same as, the Alt tag and enclose it all with an H5 heading tag.

Here are the properties of an image I made up:

href="http://editorialengine.com/wp-content/uploads/2008/11/green-bottle-french perfume.jpg">< img class="attachment wp-att-1244 alignleft" style="0px;" src="http://editorialengine.com/wp-content/uploads/2008/11/green-bottle-french perfume.thumbnail.jpg" alt="French Perfume Green Bottles Smells Great" width="134" height="104"

Use your keywords in captions, filenames, alt tags and elsewhere, if your copywriter is apt to overlook them. Keyword-rich captions increase the odds of being found in an image search.

I use a WordPress theme that adds important SEO-related text automatically. There are many, many themes and plug-ins for WP and other blogging platforms that will handle the heavy SEO lifting. I’ll write about those when I can.

By the way, thumbnails will often turn up on search engine rankings, press release distribution sites and other sites. There’s another reason to make sure your images at tagged correctly.

Well, what about Multimedia?

The same truths apply to static images as they do to audio and video.

Use your keywords in the video title, in tags that surround your video and in links to the video (both inbound and outbound). Use a video site map on your Web site for searchbots and visitors too.

Also put a transcript of your video into HTML and post it on your site. Remember, searchbots are love HTML more than anything.

A Word About Flash

When the New Year rang in, Google and other searchbots were unable to index textual content in Flash menus, buttons, banners and self-contained Flash Websites.

About mid-year Google announced it had developed a new indexing algorithm by integrating Adobe’s Flash Player technology.

With the new Flash indexing algorithm, Web designers get better visibility of their Flash content, and can expect to see better search results and snippets. There’s more info on the Webmaster Central blog about the Searchable SWF integration.

Final Thought

Photos, graphics, multimedia and the like not only enhance your pages, they also help make your site or blog more visible to searchbots. It’s also worth considering that your images will continue work for you downstream, meaning at least some of them will get linked to and with your permission, picked up and used on other sites.