A lot is written on the topic of Blog SEO but I see very little written about the use of graphics. Your graphics are just as important as the text, in fact more so if they do not render well on the screen.
Each browsers uses a different set of rules to render the graphics to the screen. If you use FireFox, particularly some of the older versions, you may find that when hovering your mouse over an image nothing happens. Internet Explorer on the other hand will display the ALT tag text. Some users prefer to have the graphics function of the browser switched off – in other words, they do not want graphics displayed. This can make a page look rather strange unless you code the graphics correctly.
The Insert/Edit image function in WordPress has a very limited capability. When inserting an image into your content you can use the Insert/edit image function but you will need to enter the code window to clean up the graphics tags.
Optimized Graphics Tags:
<img src=”http://yourimage-url.here” alt=”name of image” title=”name of image” border=”0=none 1,2,3 etc for thickness” width=”xx%” height=”xx%” align=”left, right, center” vspace=”10″ hspace=”10″>
That is a long tag. A quick look at each component.
The IMG SRC (image source) tag tells the browser where to find the image.
The ALT tag is the text that is placed on the screen if the browsers image function is switched off or if the path to the image has been broken (the image may have been deleted for example) – use keywords in this text.
The TITLE tag is the text that is displayed when the mouse hovers over the image (you can get clever and use promotional text here – for example – “click here to see more on blog SEO“) – again, use keywords in the text.
The BORDER tag sets the thickness of the border – zero for no border or you can leave the tag out altogether.
The WIDTH and HEIGHT tag allow you to render the graphic in a size other than the original. You can use sizes greater than 100% but always check how well the graphic appears. You can use just the width tag as most browsers will automatically resize the height according to the width. I find it best to use both tags.
The ALIGN tag places the graphic to the left or right of the text or centers the graphic with text top and bottom. If you are looking for a magazine affect with the text wrapping around the graphic – use the left or right attribute. (note again, not all browsers render this correctly).
The VSPACE and HSPACE are measurements in pixels that tell the browser how much ‘white’ space to place around the graphic. If you leave this tag out the text will placed hard up against the graphic.
Once you have placed the graphic, if it is a third party graphic (taken from another site) then it is always a good idea to link to the graphics source in the accompanying text.
If you follow those tips, your graphic should render well in most browsers and search engines will know where the graphic came from and its importance to the content.
