How you use images can have SEO benefits
Most people are aware by now that giving the pages on your website human readable names that relate to their content is a must, and helps search engines like Google, Bing and Yahoo index your website content and determine what it’s about but spare a few minutes thought to how you use images on your website and reap some SEO rewards.
Give files descriptive human readable names when using them on your website to get an SEO boost.
Here’s a quick rundown of the key points to consider when using images and other files such as PDF’s or Word documents on your website:
Choosing a great image
The right image is essential, try to avoid cliché stock images of smiling people on white cutout backgrounds (or the massively overused images of people wearing headsets!) – instead try to use your own unique images wherever possible and if you need to use stock images select something that relates to the content of the page it will be used on.
Selecting an appropriate filename
The filename is important and using a good, well formed, filename can have SEO benefits as search engines can determine what the file is about when they may be unable to access it’s contents as is the case with image and some PDF files as well as making it easy for your visitors to who save documents from your website to their computers for later use. Image filenames such as DSC0299.jpg have no SEO benefit, but if your image is of a Sunrise over Swindon (for example) naming it swindon-sunrise.jpg would.
We commonly use the File (Field) Paths module for Drupal when creating websites as this takes care of image file naming based on the rest of the content of the page being added when properly configured.
Adding alt and title text to images
Using image alt texts ensures search engines know what your images are of and helps with SEO.
The alt text is added to an image so there will be a descriptive text when the image for whatever reason can’t be displayed to the visitor. Wikipedia summaries it best: “In situations where the image is not available to the reader, perhaps because they have turned off images in their web browser or are using a screen reader due to a visual impairment, the alternative text ensures that no information or functionality is lost.” Be sure to add alt texts to images, this is the best way to ensure that search engines know about the content of your images.
Title text for images is similar to alt text and a lot of designers and webmasters use the same text for both tags or simply leave the title tag out completely. W3C, the international group who define the way the web works, say that “The title attribute can be very useful, but it is not a safe way of providing crucial information. Instead it offers a good way to provide non-essential information” It’s basically information that you want to convey but that isn’t essential to understanding the content of the page or the image (and doesn’t have much value from an SEO perspective).
Reducing the filesize
Make the filesize of images on your website as small as possible to keep page load times low!
Page load time is a key factor in page optimisation and has massive SEO implications. Faster pages are easier for search engines to index and offer visitors a better user experience and so are usually ranked higher in search results than slower pages so you want to keep your page load times (which includes the time taken to load any images on the page) as low as possible. You can use tools like ImageOptim or websites like JPEGMini or PunyPNG to shrink images by removing unnecessary data from the file.
When we design websites based on the Drupal content management system we take advantage of the various settings and modules available to automatically reduce the image size and remove non-essential data so that the resulting filesize is as small as possible.
OpenGraph and social sharing
We’ll briefly touch on social sharing (which will be the subject of a future post!), the best way to let social sharing sites such as Facecock and Pinterest know about the image you want to associate with your page is to add a little bit of code to the <head> section of your page, like this:
<meta property="og:image" content="http://obrienmedia.co.uk/your-image-file.jpg" />
Make sure to use a high quality image as higher quality / larger images tend to be used by the social media platforms more often. If you don’t see the right image, or you see no image at all, you might want to check out the Facebook URL Debugger to find out what’s going wrong.
Twitter Cards does the same thing when your content is tweeted as OpenGraph does when it’s shared on Facebook, and also allows you to specify some additional information that enhances the tweet that includes a link to your website beyond the usual 140 characters so is well worth checking out.
Next steps
If you want to take advantage of any of the above techniques, or want to see how a well executed social media strategy could benefit your business or organisation please get in touch for a chat and a free social media appraisal.