Image Tag
Tag: <img>
Syntax: <img src=“location of image” alt=“Keyword-rich image description”>
Description:
The img tag is used to display an image on your page. It has attributes to tell the browser where to find your file ‘src’ means source and points to the source of the image, i.e. where it is sored on your server and what text to display if the image cannot be shown to the user, for whatever reason.
Overview:
- Search engines are not able to determine the actual content or intent of photos and images on web pages. If your web pages have any images, use some of the basic options mentioned in this article to assist the engines in understanding the content of the images on your site.
- The main purpose of the alt (alt = alternative) attribute is to describe the image for the benefit of those who surf the web with images turned off and for those who have the contents of web pages read out loud for them (special browsers can do this).
- The alt attribute is also an important part of search engine optimization because it describes your image to the search engine and when a user searches for a certain image this is a key determining factor for a match. If you use correct descriptions for your images with your targeted keywords, the general SEO scores for the Web page as a whole will be higher.
- Some bad SEO techniques are intended to improve search engines ranking while inadvertently damaging the visitor experience. Don’t repeat the same mistake. Avoid keyword-stuffed alt text as it runs the risk of being seen as spam. The primary purpose of inserting alt attributes for images is to explain the content to the users (such as those whose browsers have disabled the display of images), not to describe the image to the search engines. Remember that search engines are more likely to use alt tags to gain a better understanding of a page’s target keywords or theme rather than for ranking purposes. Use the alt text appropriately – to describe an image.
- The title attribute plays a lesser role but is important for visitors as this text will automatically appear in the tool tip when the mouse is placed over the image. Use the title tag differently from the alt tag by using slightly different keywords.
- You don’t want both alt text and title to be too generic.
- If you wrap your image with the anchor tag to turn it into a link, include good anchor text that describes the contents of the image. Your anchor text should contain some of the same keywords you’ve used in the image name and alt text.
- Use descriptive image names and build a folder structure (meaningful directory and file names) that includes relevant keywords.
- Do not unite the keywords but separate them with dashes, not underscores. Use logical spelling (for both the search bots and the people)
- Write a snippet that summarizes the content of the image, in the immediate vicinity of the image.
- Place the image in the immediate vicinity of keyword-related content
- Replace width and height with the actual sizes of the picture you want to display on your website (speeds up loading of the page).
- The alt attribute is a good way of adding keywords to a page if there is little text already on that page. If there is enough text and the keyword density within optimal bounds, then try not to keyword stuff your HTML tags. Remember, ‘content is king’ and making use of HTML tags is to assist you in SEO, but not to replace proper interesting content. If your content is not interesting, your visitors will quickly leave your page and you may end up with a high ‘bounce rate’, which is damaging.
- Images can increase the usability and improve the appearance of your Web site, but whenever possible, use actual text within your content instead of images. The search engines read alt tags and take that text into consideration when ranking pages, but alt image text is not an equal substitute for actual text included within body of the page.
Example:
As an example for a site selling cameras called “Joe’s Cameras”:
[Unoptimised] <img src=”/nice_image.jpg”>
[Optimised] The new Nikon photography gallery can be views to the right <img src=”http://www.joescameras.com/photography-images/nikon-camera.jpg” alt=”Nikon photography gallery” width=”100” height=”100” />