Graphics & SEO

By: Jaimie Sirovich at RustyBrick, Inc.

One of the most mundane tasks a web programmer or designer faces is the creation of (many) buttons. It is a tedious task. If we have the original PSD, we must then resize it, typeset a new button, save it, and then reference it from our anchor.

And this all assumes we have the original artwork. Many of us don't. Most of us have suffered this plight. And this just makes it even more tedious.

On top of all this, as we all know, search engines cannot index the text in buttons that we painstakingly made.

Frankly, I got bored of creating buttons like this every day at work; I'm a programmer not a designer after all, and the product of my frustration is a basic PHP class that generates simple buttons based on a template. The template consists of a left-image, a right-image, and a tile image for everything in between.

This obviates the need to make most buttons, but what about SEO?

Some of you might remember the article posted by Stewart Rosenberger regarding dynamic text (http://www.alistapart.com/articles/dynatext/). He applied Javascript and PHP together to dynamically change h1's to graphics. In a nutshell, Javascript walks the document hierarchy, looks for a specified selector (ex. h1.foo), and replaces it with a image queried from the webserver.

e.g.

Wacky Widgets

becomes:

Kudos to Stewart for coming up with this fantastic idea. I have applied some of the same techniques to an automatically generated button.

e.g.

Camera repair
(<a href='http://www.camerarepair.com' class='foo'>Camera repair</a>)

becomes:

This has the desirable effect of making button creation almost like standard markup. Simply by applying a class to our anchor tag, we have a custom fabricated button. No trips to Photoshop, no font guessing. No aggravation.

It also has some interesting SEO implications. These graphical buttons will not plague keyword relevance. SE's should reference the anchor text as is. So, not only does this method provide a convenient solution to a mundane task, but it also enhances your site's search engine friendliness. So people looking for wacky widgets or camera repair, might just find your site first.

Please see the bottom of this page for a link to source code, and an example implementation. The code is well commented for those interested in the inner workings, but if you're not interested, just follow the examples.

If you have any questions, I can be reached at jsirovic@rustybrick.com.

Acknowlegements:
Stewart Rosenberger - Dynamic Text Replacement
http://www.alistapart.com/articles/dynatext/

Source code and installation instructions are available here: http://www.rustybrick.com/magic-button-info.php

RustyBrick SEO Articles

For more information on our search engine optimization and search engine placement services, please contact us at 877-GO-RUSTY or 845-369-6869 or via email at our contact page.

Bookmark and Share    
blog comments powered by Disqus

16 COMMENTS

posted by seo for home builders on: Mar 12, 2010 07:22am

hi Graphics & SEO is a popular tropic which is improve any web page so flow every all!

posted by Social Media Marketing on: Sep 2, 2012 11:00pm

Thank you for posting elegant information that talks about SEO. It will surely gives us good impact as SEO users.

posted by Social Media Marketing on: Sep 2, 2012 11:02pm

Thanks Barry for posting that informative information that discuss about SEO friendly buttons. Really helpful.

posted by Social Media Marketing on: Sep 2, 2012 11:03pm

Thanks for posting that kind of information.

posted by cast on: Jan 23, 2011 01:29pm

Thank you really worked this admin Ankara da çalışan ankara halı yıkama şirketidir. Kocaeli ve tüm ilçelerine nakliyat hizmeti sunan kocaeli nakliyat firması.

posted by air jordan shoes on: Jun 24, 2010 09:13am

I am agree with landlord.Here provide many game for everyone . Wonderful artical excelling nature images. Let you have unexpected surprise. After you play game tired ,you can come to these websites http://www.from-sports.com/ to relax your mood.

posted by moncler jackets on: Jun 13, 2010 05:47am

Here elaborates the matter not only extensively but also detailly .I support the write's unique point.It is useful and benefit to your daily life.You can go thosetp:http://www.filling-with.com sits to know more relate things.They are strongly recommended by friends.Personally

posted by moncler baby on: Jun 24, 2010 06:32am

Here elaborates the matter not only extensively but also detailly .I support the write's unique point.It is useful and benefit to your daily life.You can go thosetp http://www.moncler-jackets-outlet.com sits to know more relate things.They are strongly recommended by friends.Personally

posted by vibram fivefinger shoes on: Jul 9, 2010 12:44am

It looks good,I have learn a recruit!Recently,I found an excellent online store, the XX are completely various, good quality and cheap price,its worth buying! Nike Zoom Blur

posted by uggs outlet on: Jul 7, 2010 09:23am

Mark S. is definitely on the right track. If you want to get a professional looking email address, Id recommend buying your name domain name, like or ajf 8 If its common it might be difficult to get, however, be creative and you can usually find something.

posted by louis vuitton handbags on: Jul 13, 2010 06:06am

"Here products xx, has fashion model, superior quality and service, cheap ugg boots price and updates quickly.I support strongly always! I want to buy XX, I hesitate to select which style more better.Hope your unique recommends.

posted by air force 1 shoes on: Jul 9, 2010 07:07am

Well , the view of the passage is totally correct ,your details is really reasonable and you guy give us valuable informative post, I totally agree the standpoint of upstairs. I often surfing on this forum when I m free and I find there are so much good ugg boots information we can learn in this forum!

posted by cheap host on: Jul 23, 2010 01:53pm

I am impressed that it is possible to generate button automatically. Great tip.

posted by Austin Green Building on: Sep 20, 2009 12:46pm

test

posted by 154443 on: Oct 17, 2011 03:17am

Nike Lebron shoes andNike ZOOM LeBron  new burberry replica burberry lebron 8 v2i want to look some pandora jewellery; pandora  jewellery beads cheap  nfl jerseys or jersey supply and religion jeans, you can leave a email  to me! thank you! nike air max 2011white air maxnike griffey maxreligions jeanstrue religions jeans true religion jeans outletbears jersey blackhawks jerseyken griffey shoes air griffey maxken griffey jr shoes air griffey max 2cheap Pandora Necklacescheap Pandora Ringscheap Pandora Setscheap Pondora Packagesherve leger bandage dressesmoncler down jacketmoncler doudounesmoncler coatcheap moncler jacket detroit lions jersey

posted by YAO123 on: Nov 4, 2011 05:03am

Hi, my friends,welcome to choose and buy ,it is very great, I like it so much http://www.snowbootsy.com/ ugg boots on sale Ugg snow boots Ugg classic boots Ugg classic cardy boots Ugg classic tall boots Ugg classic mini boots Ugg tall boots Ugg short boots Ugg bailey boots Ugg slippers Ugg boots for men Kids ugg boots