Chris
06-21-2004, 05:14 PM
Note: Chris here with an article that may make image use and SEO consideration an easier subject to tackle. Enjoy.
With the exception of alt tags and file names, optimizing images for search engine purposes has always been a difficult task. This task may have become easier thanks to dynamic text replacement technique developed, in part, by Stewart Rosenberger.
By creating text images on the fly, they can replace text that is being used for headers or other purposes. Stewart’s technique appeared on A List Apart, and the process “automatically swaps XHTML text with an image of that text, consistently displayed in any font you own.”
A quick primer in how Rosenberger’s technique works: Once the HTML is finished loading, the JavaScript reads the tag of whatever text you want to be replaced, then “informs” the server-side program, in this case PHP, to create the image that will be used in the replacement process.
The server-side program, by using the selected font which is stored on the server itself, creates the image as a .png file. It then replaces the desired text, on screen, while keeping the HTML with the keyword-text intact.
To read a more technical how to that includes script downloads, please read Stewart’s article (http://www.alistapart.com/articles/dynatext/).
Stewart’s method is a good way to combat plain text appearing differently in browsers. By controlling the appearance of headings with text images, developers don’t have to worry about a visitor receiving a different looking page than was intended.
Other SEO-related benefits of this quasi-applet are that it allows you to use images for your website’s presentation, while keeping the original “text placeholder” that can be spidered for keyword density and relevance. Craig B, a poster at HighRankings.com (http://www.highrankings.com/forum/index.php?showtopic=7199), a forum associated with search engine optimization, says about Rosenberger’s technique:
“Not only does Rosenberg’s method save countless hours preparing and cutting images in Photoshop… From an SEO perspective, images are useless to optimization efforts because search engine spiders cannot read and index images. In fact, image headings take up valuable space where keyword-rich text could be placed as HTML headings.”
“If we use Rosenberger’s method, a spider only sees the HTML and indexes the site as such. H1, H2 and H3 tags are replaced behind-the-scenes with designer-friendly images!”
Alan Perkins, an administrator at HighRankings.com, agrees with Craig, but issues a couple of cautions. Alan believes that this technique can place a higher level of stress on the a server, “as each word is rendered as a separate image.” Perkins believes that this method also contains the potential for spamming.
Besides the spam warning, reaction to this technique has been positive. Because of the difficulty in optimizing images for search purposes, having a program that replaces on-screen text with a duplicate image, while allowing the text to remain crawlable by search engines, is positive for web developers with SEO demands.
The key to this approach is that the text remains within the HTML, and therefore, still viewable by search engine spiders. This will allow developers to maintain any keyword benefits they receive from the text, while giving them more control over the appearance of the website.
The following link is a demonstration of Rosenberger’s technique in action: View demo (http://www.stewartspeak.com/dtr/demo/).
Be sure and view the source code and you will see that no image tags are being used, only text and text headings that the script will recognize and replace with “on the fly” images.
Thanks to SearchEngineRoundTable (http://www.seroundtable.com/archives/000564.html) for the heads up.
With the exception of alt tags and file names, optimizing images for search engine purposes has always been a difficult task. This task may have become easier thanks to dynamic text replacement technique developed, in part, by Stewart Rosenberger.
By creating text images on the fly, they can replace text that is being used for headers or other purposes. Stewart’s technique appeared on A List Apart, and the process “automatically swaps XHTML text with an image of that text, consistently displayed in any font you own.”
A quick primer in how Rosenberger’s technique works: Once the HTML is finished loading, the JavaScript reads the tag of whatever text you want to be replaced, then “informs” the server-side program, in this case PHP, to create the image that will be used in the replacement process.
The server-side program, by using the selected font which is stored on the server itself, creates the image as a .png file. It then replaces the desired text, on screen, while keeping the HTML with the keyword-text intact.
To read a more technical how to that includes script downloads, please read Stewart’s article (http://www.alistapart.com/articles/dynatext/).
Stewart’s method is a good way to combat plain text appearing differently in browsers. By controlling the appearance of headings with text images, developers don’t have to worry about a visitor receiving a different looking page than was intended.
Other SEO-related benefits of this quasi-applet are that it allows you to use images for your website’s presentation, while keeping the original “text placeholder” that can be spidered for keyword density and relevance. Craig B, a poster at HighRankings.com (http://www.highrankings.com/forum/index.php?showtopic=7199), a forum associated with search engine optimization, says about Rosenberger’s technique:
“Not only does Rosenberg’s method save countless hours preparing and cutting images in Photoshop… From an SEO perspective, images are useless to optimization efforts because search engine spiders cannot read and index images. In fact, image headings take up valuable space where keyword-rich text could be placed as HTML headings.”
“If we use Rosenberger’s method, a spider only sees the HTML and indexes the site as such. H1, H2 and H3 tags are replaced behind-the-scenes with designer-friendly images!”
Alan Perkins, an administrator at HighRankings.com, agrees with Craig, but issues a couple of cautions. Alan believes that this technique can place a higher level of stress on the a server, “as each word is rendered as a separate image.” Perkins believes that this method also contains the potential for spamming.
Besides the spam warning, reaction to this technique has been positive. Because of the difficulty in optimizing images for search purposes, having a program that replaces on-screen text with a duplicate image, while allowing the text to remain crawlable by search engines, is positive for web developers with SEO demands.
The key to this approach is that the text remains within the HTML, and therefore, still viewable by search engine spiders. This will allow developers to maintain any keyword benefits they receive from the text, while giving them more control over the appearance of the website.
The following link is a demonstration of Rosenberger’s technique in action: View demo (http://www.stewartspeak.com/dtr/demo/).
Be sure and view the source code and you will see that no image tags are being used, only text and text headings that the script will recognize and replace with “on the fly” images.
Thanks to SearchEngineRoundTable (http://www.seroundtable.com/archives/000564.html) for the heads up.