Optimise Your Web Images For Search Engines #4: Captions and Context

0

A photo album

Alys Tomlinson / Image Source IE127-013

Photographers! Your beautiful, image-rich portfolio sites are great to showcase work to clients. But to capture the attention of a potential image buyer, you really should read Alex Jordan’s guide to optimising your images for search engines. This week… “Tell the story”

This session is part of my image optimisation series. For more information about the series please see my introduction.

I’m often asked how Google knows what an image is about. In my previous sessions I talked about naming the file and alt tags, however captions and context has a lot to play in how Google and other search engines manage images. I’m going to discuss captions and context in a little more detail and explain why carefully matching images with appropriate text is essential for image optimisation.

Captions

Captions are a useful way of providing more information about an image. For example an image title, credit, geographical location etc are bits of information that are important, but are generally not suitable for use in the alt tag or filename.

Instead, text captions should be used in a way that displays the information in close proximity to the images they refer to. This information should also be kept visible to users. Google will generally not index content that is hidden from users, for example through use of CSS or JavaScript, so what you write should be visible to all.

For those of you who are still using HTML 4.1, there is no way of semantically marking up images and captions. However, this does not mean you cannot use captions. There is no set way of doing it, but one popular method is to wrap captions in <p>…</p> tags and placing them close to the image they refer to. It is then good practice to wrap both the image and caption in a div. For example:

<div>

<img src=”images/animals/ small-dog-eating-bone.jpg” alt=”Jack Russell chewing on a bone”>

<p>Photo of a Jack Russel with Bone: &copy; Image Source 2012</p>

</div>

For those of you using HTML 5 things are a little easier. HTML comes with new “figure” and “figcaption” elements designed specifically for marking up image captions semantically.

Rather than going into too much detail about these new elements I’d like to refer you to this really useful article; however the following example should illustrate how these tags can be used:

<figure>

<img src=”images/animals/ small-dog-eating-bone.jpg” alt=”Jack Russell chewing on a bone”>

<figcaption>Photo of a Jack Russel with Bone: &copy; Image Source 2012</ figcaption >

</figure>

Context

Since search engines assume that you are displaying images relevant to the rest of the content on the page, they tend to use the text surrounding an image to try to understand what it is about. It is therefore important to only use relevant images and to ensure that there is sufficient descriptive text on a page.

This poses several issues for photographers. In my experience photographers tend to publish very image-rich websites that are generally very exciting visually. Unfortunately, this usually means websites that have very little text and pages dominated by images that are not necessarily grouped and displayed in a logical structure.

Photographers should instead try to increase the text content on the pages where their images are featured and group similar images by common features. I appreciate that this is easier said than done, but the following tips should help you take steps to optimise the context of images on a webpage.

  • If you are worried that too much text will take the focus from the images, use a small, non-intrusive font and choose a colour that is readable, but reduced emphasis. Using a dark gray on a white background instead of black goes some way to achieve this.
  • Use page headers (HTML H1, H2, H3 etc tags) to separate relevant content. For example, if a page is dedicated to a travel shoot, instead of displaying all the images in no particular order, headers can be used to separate images that focusing on a common theme, such as landscapes, people, food, wildlife etc
  • Don’t stuff pages with keywords as this is a spam signal. Instead use descriptive sentences to describe an image, concepts, locations etc. If you don’t know what to talk about, try talking about the shoot location, the subject matter, the brief, the concepts conveyed by the images etc.
  • Try to keep relevant images together under their own heading, or preferably their own page. When you have multiple pages it is essential that each has its own identity and that content is not duplicated.

If you have any questions feel free to comment or tweet me at @AlexJordanUK. Next week I’ll be discussing Image Sitemaps, probably the best ways of telling Google that your images exist!

Share.

About Author

Alex has worked in website development and SEO since 2006. With a keen interest in photography, he has been part of the Image Source team since early 2012 offering support and advice to photographers.

Leave A Reply