Get the most of your images with Text Captions with CSS
Category: SEO, SEO Image tips, Webdesign
(Disclaimer: Much of the code/images and idea for this post was acquired from Digital Inspiration over at www.labnol.org with explicit permission)
If you looks at the websites from the BBC and The New York Times, you will notice that they are now display images and pictures within an attractive box made possible by a little nifty CSS programing. (see image to the right)
You will also notice a couple of sentences of text within the caption just below the image that containing a brief description of the image, copyright information, etc.
Advantages of adding image captions:
1. Very Stylish and Reader Friendly - Visitors to your site will benefit from the extra information on the image from the small CSS text caption and it looks very professional.
2. Maximize Image SEO potential - This to me is the most important factor to implement such a CSS image caption strategy. It is no secret that image aggregators such as ‘Google Images’ can drive an enormous amount of traffic to a websites via the their ‘Google Images’. This is especially relevant if your site has an image or photo focus. Since captions describe the image and the text is located in close proximity to the image, they could be very effective in getting your images ranked well on image search engines. Text that is encapsulated around an image provides search engines a way to figure out what the image is about (actually, Google has recently applied for a patent which allows them to recognize text within images also!).
Adding Text Captions with CSS:
With CSS and HTML coding, you can quickly and easily add text captions to images. To the left, is what the end product will look like. The Google logo is aligned to the left of the browser and is enclosed inside a CSS caption with borders that also contains a text caption.
Here is the HTML + CSS code to achieve the above result:
Step 1: Add the below CSS code to your CSS file (usually style.css) or place this in the header section of your webpage.
<style type=”text/css”>
.picture { background-color: #F9F9F9;
border: 1px solid #CCCCCC; padding: 3px;
font: 11px/1.4em Arial, sans-serif; }
.picture img { border: 1px solid #CCCCCC;
vertical-align:middle; margin-bottom: 3px; }
.right { margin: 0.5em 0pt 0.5em 0.8em; float:right; }
.left { margin: 0.5em 0.8em 0.5em 0; float:left; }
</style>
Step 2: Insert the following HTML code somewhere between the <BODY> tags of your the web page. The process is the same as inserting a normal image but the <DIV> tag has been modified to include the CCS caption element.
<div class=”picture left” style=”width:278px;”> <img src=”google.gif” width=”276″ height=”120″ alt=”Google Logo” /> <br />Image Caption goes here. </div>
In the above example, I added the file google.gif and aligned it to the left with an image dimensions of 276×120.
Feel free to tweak the CSS code to change the font, size, border colors, background, margins, etc.
To sum it up, implementing this image CSS caption can result in your web site’s images ranking higher in search engines and in turn returning a lot of relevant and targeted traffic to your website!
