Oct 20, 2008

Using Images for SEO

Humans vs. Search Engines

Human visitors and search engine robots that visit websites and index information about them look for different things in a page. People like to see an attractive layout with nice pictures and graphics, animation, easy-to-locate navigation, and friendly greetings like "Welcome to Annie's Online Shop" at the top of a page. Search engines, on the other hand, like sites that have lots of textual content, good site structure (sitemaps, consistent linking style), and a meaningful phrase such as "Chicago Area Florist" as the heading of a page. While search engines can read the "alt image" tags of graphics, they cannot "look at" pictures the way a human visitor can, and far prefer text.

Replacing Text with Images

One way to work around this paradox is to shift some of the text that search engines have no interest in over to graphics. For example friendly greetings like "Welcome to Our Site" or "Annie's Online Shop" work best as header graphics.

Creating a header graphic in a graphic editing program like Photoshop, Illustrator, or Fireworks has the advantage of letting you know exactly what that part of your site will look like to visitors. If you create a header or navigation bar with text, you are limited to a common set of fonts. If you use a fancy font that is installed on your computer, your page will look great to you, but when a visitor who does not have that font on their computer visits your site, their browser's default font will be used and that nice aspect of your site will disappear. By making your header or navigation button images, you are free to use any of the fonts on your computer, and can be sure they will display the same way to your visitors.

Another advantage of using a header graphic is that you can remove words irrelevant to your target keywords from your textual content. When search engine robots visit a site, they read pages from left to right, top to bottom. The first 20-25 words and last 20-25 words of your text content are especially important, and you want to make sure to include your target keywords within these sections. If at all possible, your primary target keyword phrase should be the very first text in your page. That is, if you are able to make a natural-sounding sentence beginning with it. If your page begins with "Welcome to our site!", then you are pushing your keyword further away from the starting point of your text.

The first line of the main text on your page should be in heading format, with H1 tags (In html code it will look like this:
London Hotels
), and should contain your target keyword. However, you may want to add a greeting above the heading ("Welcome to Our Site!" for example). Since this is a very general phrase, with no relevance to any target keyword, it is best to make this a graphic.

If your site already has a greeting such as "Welcome to Our Site" in text at the top of your main page, it is relatively easy to convert this to a graphic, as follows.
  • Open your page in an internet browser.
  • Push the "Print Screen" button on your keyboard.
  • Open a photo editing program, such as Photoshop
  • Create a new document and select Edit & Paste or Ctrl+V on your keyboard. The screenshot will be pasted on the blank document.
  • Crop the image down to just the word or phrase you would like to replace, with only a little blank space around the edges.
  • Choose "Save as" or "Save for Web", saving the file in the "Images" folder of your site.
  • In your site editor, such as Dreamweaver, simply open your page, delete that text, and drag and drop in the image you created. Save and upload your page.
Replacing Images with Text

Of course, the opposite might also be true of your current site. Your keywords might be displayed as graphics rather than text. In this case, you should either repeat those keywords in text in a way that looks natural, or get rid of the graphics altogether and replace them with text. The important thing is that your target keyword appears as text, as close to the beginning of the page as possible, and within H1 tags.

Alt Image Tags

"Alt image" tags are short pieces of text that are associated with a graphic. If the graphic cannot be displayed for some reason, or if someone has set up their browser to block images, the text is shown instead. (The "alt" is short for "alternative".) Also, browsers designed for the sight impaired read out the text content of pages, and read the alt image tags as a way of describing a page.

No comments: