How To Optimize Images With Title And Alt Attributes To Improve SEO For Better Search Engine Results

How To Optimize Images With Title And Alt Attributes To Improve SEO For Better Search Engine Results

If you're blogging or creating a website full of images, chances are you want to optimize those images for search engines a.k.a Search Engine Optimization. I'm going to run through a simple tutorial on how to use the ALT and TITLE attributes properly with your images and basic rules for great image SEO! You'll need a little patience, a computer, an image to post and hands at the ready to type out HTML code. Don't stress, this tutorial is very simple and full of useful tips!

The Tutorial:

1. Find an image that represents your content:

Anytime you write an article and are in sleuth mode for an image to place in that article, remember to find a picture that best represents your content. For example, I wrote an article here titled: How To Take A Screenshot On A Mac Computer and the associated image is of a Mac keyboard, which is appropriate. I wouldn't want to place an image of a cat in that article, which would confuse the visitor, the search engine and make zero sense for the associated content.

Also, remember to properly credit any images you use to their owners or play it safe and use royalty free images from a website like: pixabay.com.

2. Image file size:

While modern times has allowed exceptional photography and hi-res images to be taken, it's still important to remember to keep your image file size at a minimum to allow for quick load times when visitors come to your website and allow search engines to index your website easier. Patience for many surfing the web is very low and if your website content doesn't load within a couple seconds they may just exit and move onto another website. A good rule of thumb is to make your images 72 dpi (dots per inch) a.k.a pixels per inch as well as size them to the exact size of what you need on your website. For example, I size my images to the width of my article section which is 728px. Most computers come with basic image editors that will allow you to do this.

3. Image file name:

Properly naming the images you upload to your website helps SEO because search engines not only crawl the text content you type out, they also crawl your file names. Descriptive file names will helps boost your images SEO rank due to the keywords tucked into it. For example, the image below is named Justin_Woodie_website_screenshot.png, it's an obvious name that represent the image and will allow the web crawlers to index the picture appropriately to boost its rankings for the file name keywords.

4. Title and Alt attribute text:

Screenshot Of Justin Woodie's Website

Above I have an image of my website and if you mouse over it you'll read the words: Justin Woodie's Website, that's known as the image Title attribute. The Title attribute text should be a brief explanation of the image. What you can't see when the image loads (unless it doesn't load) is the Alt (Alternative Text) attribute which reads Screenshot Of Justin Woodie's Website. The Alt attribute text should be more specific as it is used to help those with disabilities or those whose browsers do not load the image understand what the image is. More importantly the Alt attribute takes precedence and is the information that search engines target and crawl when indexing website content. Therefore what you write in your Alt attribute should fully explain the image and/or article you're writing so it can be targeted better for image search results!

Below I have the simple HTML code. I have written in italics where to place the Title attribute, Alt attribute and the hosted Image url. And below that, I have the HTML code without the attributes and image placeholder text just to show you what the bare bones code looks like before you enter the information. Remember to either fully replace the italicized information in the coding below with your Title attribute, Alt attribute and Image or use the HTML code below that which is bare and ready to have that information added to it. Use whichever code you feel most comfortable with! Was this article helpful? Leave your comments below!

<img title="image title goes here" src="image goes here" alt="image alt text goes here" />

<img title="" src="" alt="" />

If you're looking for more information on this topic I have a list of useful links below:

No comments:

Post a Comment

Copyright © justinwoodie.com ©