Help Google (and Your Audience) Pay Attention to Your Website Images

Basic rules to add images to your WordPress website

There are some basic rules to follow when adding images to your website to increase the connection with search engines and get found online as well as to make your website accessible.

Similar to telephone switchboard lines, to communicate—online or off—the message needs to connect at both ends.

To help your images get attention, we’ll review the basic rules, including how and what to include when you add images in WordPress. Add the same information to your images if you are using another CMS to build and host your website or creating a static html site.

In WordPress, when you upload an image into your post or page, you have the opportunity to add—

1. Title
2. Caption
3. Alt text
4. Description
5. Alignment
6. Link to
7. Choose an image size

Shhh….want to know a secret?
One of the best ways to get found by search engines is to
rename your images before uploading them to your website.

Seriously. It sounds trivial, yet it makes a big difference in the power of your images to work smarter for you.

1) Image upload steps

i) Title or Rename your images before uploading them

How many times have we simply downloaded an image from a favorite free or paid stock photo site and then uploaded it to a website?

You know, the image named istockphoto-137659227.jpg? It is a super easy mistake to make. We are all in a hurry. Yet when you think about it for a moment, how many people are searching for the keyword phrase (istockphoto-137659227.jpg) to find what you have to offer? Likely not too many.

Yet if you take a moment to rename your image using keywords or phrases that you want to rank for, along with a description of the image—your chances just increased that you might get found in a Google search based on that concise, human-friendly and search-engine-rich information now attached to the image you just uploaded.

WordPress will automatically fill in a title using the image name. Another reason to be sure to rename your images before adding them to your website. Though as you can see from the screenshot on the right, you can also add a unique title when you add an image.

ii) Captions can draw attention or distract

Image captions can add visual interest to a page. They are a powerful tool that gives your reader short, relevant teasers. They create interest and encourage her to read your content. Captions are generally in a different font style or size from the main body text, so can draw the reader’s eye down the page, too.

When used to explain the image, they add value. Their power can also be a distraction and create confusion if they are not relevant to the image or surrounding text.

iii) Always fill in the alt text

Have you ever not downloaded the images in an email or website? Sometimes this is a choice because you’ve lost patience when the images load too slowly. Or perhaps a link was broken and the image simply did not load? Whatever the reason, the text that appeared in place of the missing image is what the site owner included as the alt text (or you may have heard of it called the alt tag).

This bit of text information is not only used by your reader when images don’t download, it are also indexed by Google as relevant to your image and page content allowing Google to respond to a search query with answers from your website.

And most importantly, alt text (tags) are used by screen readers to help visually impaired people “see” and understand the full content of your website, including the images. So filling in the alt text is crucial when adding images to your site. So be sure to tell both search engines and your site visitors what the image is and represents.

iv) Are image descriptions necessary?

No. Might they be useful? Perhaps. Not all websites are designed to display an image description. If your site does not display descriptions, adding them may still help your images work smarter for you.

The descriptive text can be read and may be indexed by search engines. Adding relevant, keyword-rich and human-friendly descriptions of your images can help feed information to Google. How much impact that adds to boost your Google website ranking is minimal. Yet if your descriptions are relevant, your images can be found, drawing people to your site.

Relevant being an operative word. Do not just add a jumble of unrelated keywords in hopes google will find you. In fact, doing that can create a negative impact with search engines and get you black listed instead.

One type of site that absolutely benefits from image descriptions is an ecommerce store. People are specifically looking for certain products which your site images (and descriptions) represent.

v) I uploaded one image, why do I have to choose an image size?

When you upload an image to WordPress, you are automagically creating several images of differing sizes. This happens behind the scenes and is coded into your theme by the developer and WordPress. You can then choose which size image to insert as the featured image or into body of your post or page. With a bit of trial and error, you’ll be able to pick the size that works best to display on your website page.

Which image size is best will vary—

• It might depend on the amount or type of other content on the page
• The width of your site page
• How important the image is in relationship to the written text

vi) Alignment…left, right or center

Correct alignment (placement) of your images in the body of your content puts your reader at ease. You can choose where your image is placed in relationship to your text from the alignment drop down menu. How you decide which option to choose depends on where the image best relates to surrounding content and the visuals of the image itself.

When you follow the natural line of sight of the image—the direction your eye naturally moves—the reader knows where to go next.

If, in the image of your favorite cat, he is looking to the left, add your image to the right side of your page or post so your reader’s eye will follow your cat’s eye and naturally move back into the content you want them to read.

vii) To include or not to include a link with your image, that is the question

Unless you need your site visitor to see a larger version of your image for some reason (like a close up image of a product in an ecommerce store), I recommend you not include a default link to (url) with your image.

Instead, select the none option from the link drop down.

The other reason to include a link with your image is because you want to send your site visitor to another page or section when they click on the image. If that is the case, choose “custom url” from the drop down and manually add a link to redirect your visitor to the relevant place.

Before uploading your image

2) Resize and optimize your images

Along with making a habit of renaming an image (see item “i” above), a must, in today’s mobile first world? Resize and optimize your images. Yes, those two words are all too often used interchangeably. Except they are really two different steps on the journey to “put your best image forward.”

2a) Resize your images before uploading them

Resize your images to the maximum width (linear number in pixels) of your WordPress theme. There are various ways to find out this information. I recommend that you use a premium (paid) WordPress theme. When you do, you can ask the theme creator or read the set up instructions for this information. There are also browser tools you can use to find out this information for any theme.

Screen resolution and size vary greatly today. Your image will never look exactly the same to everyone online no matter what size you make it. The important thing, to help your site load faster, is to resize your images so you are using the minimum resources (image file size) for the maximum effect (filling the visible space).

2b) Optimizing your images before uploading them

Optimizing your image relates to the quality of the image. How many pixels (nonlinear from inside an image) can be “deleted” while still maintaining the clarity and integrity of your image. There are many online tools available to help you optimize, or squish, your image.

Squishing your image, just like deflating a balloon, allows your image to take up less space. Because the light emitted by your screen aids visual clarity, you can reduce the number of pixels needed and your image can still look good online. This allows your website to load faster as the more pixels you delete, the smaller the image file and the less time your site requires to load.

3) Crop your images to create the most visual impact

Cropping increases impact by highlighting what you want the reader to see. It tells your reader what is important visually and super-charges the impact of “a picture is worth 1,000 words.”

Smart image use engages your reader and search engines

The above are simple and effective, ways you can make your website images work smarter. In today’s mobile-first and image-intense world, site load speed and strong visuals are important.

When you resize and optimize your images, they will load faster, increase your Google ranking.

When you have a great headline and add a powerful image to create visual interest, you are more apt to be shared via social media.

When you make use of the options available in WordPress, you set up your images for maximum success and accessibility for all audiences.

Doing these steps, while it takes a bit of practice, is something you can empower yourself to do. Give it a try and if you have questions and want to learn more or would rather have someone do it for you, contact me.