rustybrick
06-17-2004, 04:19 PM
Excellent post over at HighRankings Forum (http://www.highrankings.com/forum/index.php?showtopic=7199) on the topic of how to dynamically create image based headers for pages and have the search engines read it as text. Let me quote some of the thread and then do my best to explain it to the best of my abilities.
"Sticking with the traditional typefaces is smart for body text, but when it comes to our headings ã short, attention-grabbing blocks of text ã it would be nice to have some choice in the matter. We've become accustomed to this problem and we cope with it either by making the most of the few fonts we have, or by entirely replacing our heading-text with images."
For example, Mercedes-Benz uses a font called Corporate (by Kurt Weidemann) in all its branding materials. To implement this font on the web, we create hand-made image text headings in Photoshop and include the images on the site with image tags. But with Stewartês tutorial as a guide, developers can generate these text images on the fly. Smart.
Let me explain. What you can do is set a style sheet, javascript and a server side include to access graphics and replace the letter A with a graphic A. So what this does is, if you include an header tag for example and tell it to use the graphics it will, so the end user will see a graphical header and the search engines will see plain text.
An example always helps. Check out http://www.stewartspeak.com/dtr/demo/, what you will see are graphical headers that looks like this to the end user:
http://www.seroundtable.com/archives/graphical-text-header.gif
Now view the source of that page and it will look like:
<h2>Fight Font-Ache: Control Your Typeface</h2>
Smart and simple.
"Sticking with the traditional typefaces is smart for body text, but when it comes to our headings ã short, attention-grabbing blocks of text ã it would be nice to have some choice in the matter. We've become accustomed to this problem and we cope with it either by making the most of the few fonts we have, or by entirely replacing our heading-text with images."
For example, Mercedes-Benz uses a font called Corporate (by Kurt Weidemann) in all its branding materials. To implement this font on the web, we create hand-made image text headings in Photoshop and include the images on the site with image tags. But with Stewartês tutorial as a guide, developers can generate these text images on the fly. Smart.
Let me explain. What you can do is set a style sheet, javascript and a server side include to access graphics and replace the letter A with a graphic A. So what this does is, if you include an header tag for example and tell it to use the graphics it will, so the end user will see a graphical header and the search engines will see plain text.
An example always helps. Check out http://www.stewartspeak.com/dtr/demo/, what you will see are graphical headers that looks like this to the end user:
http://www.seroundtable.com/archives/graphical-text-header.gif
Now view the source of that page and it will look like:
<h2>Fight Font-Ache: Control Your Typeface</h2>
Smart and simple.