Your text is not the only front-end content in your website that can contribute to the SEO of your site. There are also images and videos that help you gain rank, establish relevance or access rank positions quickly. This step will discuss several different ways that media can either help or hinder your ranking in search engines and how to leverage that as much as you can. It will differ quite a bit from one genre to the next, so just take these tips as generalities around Search Engine Optimising media in the ‘ideal world’. You’ve probably noticed in Google search that you can filter for images and videos, well, that’s reflected in Google Search Console as separate search data. Websites in some genres can gain significant volumes of traffic from those sources.
Probably the best place to start with images is their name. Doing this well can speed up tagging immensely. Here’s what you do:
For every image you plan to upload and use in your website, name them with human-readable text names like ‘green t-shirt with Nike logo’ for example, or maybe: ‘man holding custom safety sign’. Whatever description is most appropriate for your product, label it with just enough words to make it clear what the image is about. Imagine it like this: if you had to describe the content of an image as quickly as possible to a blind person, the description you’d come up with would probably be suitable as the image name. For those of you who love to keep your images in some kind of naming order, you’ll probably hate this concept, but this is a best practice for SEO, especially if you have to deal with a lot of images, like in an eCommerce store.
Most digital images come out of the camera with some kind of ordered label, probably something like DSC0001 and have progressively higher numbers, like DSC0002, DSC0003 etc. Unfortunately, these are meaningless for SEO and this is partly why naming the file appropriately is necessary.
Think about where you plan to use the images before you upload. If they only have to be small and cover less than ½ the width of a typical website, then it’s unlikely they need to have dimensions larger than 500px by 500px. The typical modern website has a width of about 1000px to 1200px, unless set to full screen. Older websites are usually between 800px and 1000px in width. These widths are determined by how large people’s monitors used to be, and how many pixels the average screen was able to display before chopping off some of the content. The display size, and especially the capability to display for variable screen sizes from small to very large, is a factor for Google ranking. Screens and resolutions have gotten larger, so website have too. Pre-size your images according to the maximum size you need to display them at. Not doing so might mean storing many megabytes (or even gigabytes) more of data in your site, and also making your images load very slowly when displaying on your site. The latter may affect your SEO because it means Google will also have to wait to download what your page looks like. This may count against you when assessing ranking for your site. I have no direct evidence this is the case, but it’s very likely to be correct as it affects your User eXperience (UX) on your site.
Aside from sizing, also consider aspect ratio. Images that have content that looks best in landscape format will not look good at all if you want to place them in a portrait sized space in your website. Check that the shape of your image matches the shape of the space you need to fit it into.
There are two main ways you can upload images into your website. The first and probably least technically challenging way is to use the CMS (if your website has one) to upload images into a media folder of some sort. For WordPress websites, like this one, you can choose to upload images into a dated folder, or add them into a single generic folder. Dated folders are usually divided by year, then month, for example 2015/1/ and then 2015/2/ etc., based on the month in which you uploaded it. Generic folders might be called ‘media’ or ‘images’ and all your images and or media might upload to there. For the latter, you can’t have two images or any other file of the same name in the same folder, which means every size images might have to have a size code appended to the image name, like ‘green-t-shirt-200×300.jpg’. This images would measure 200px by 300px. The size code may reduce a little of the SEO strength of a well-named image, but shouldn’t be too much of an issue, so don’t worry about it.
If you’ve used your CMS to upload images, something you should be aware of: The WordPress CMS (and this may be true for many different CMS types) might modify the name of your file. Especially if your file name contains characters that are not permitted by HTML conventions. For example, the character ‘&’ is usually removed and replaced by ‘-‘. So are spaces. But only one dash is allowed at a time. So a file called ‘Green & Red T-shirt.jpg’ will become ‘green-red-t-shirt.jpg’.
The WordPress CMS will also re-sample your images and create new copies of each image at 2 or 3 different sizes, including the original size. The exact sizes depend on your settings.
Uploading images via FTP:
This is a slightly more technical method for uploading images to your website as it requires that you have the following: 1. FTP login access and password, 2. An FTP software on your computer. Using FTP will allow you to upload images and videos that bypass the HTML naming convention changes noted above. It also allows you to create any new folders in your website to store your images just about anywhere.
Title & ALT tags:
Once you’ve named your images, you can add title and ALT tags, but these are often easier to add once you’ve imported or uploaded the images into your website. This is where SEO comes into play.
If you named your images as suggested above, then tagging them with ALT and Title tags will be a lot simpler, because all you need to do is copy the name of the file. If you don’t have time to tag all of your images, you at least have the file names optimised. This is why naming files with their content is important, because in doing so, you usually use keywords that are relevant to your site. If not, then you should take the time to tag the images – you should do this anyway – but you can ‘get away’ with not doing it if you have hundreds of images and they are well named.
The ALT tag and Title tag can be different, and they are used for different purposes in the browser.
The Title tag is the tag that provides additional information to the content of the image when displayed in the browser. It may appear when the user hovers their mouse over the image.
The ALT tag is the information that appears in the browser in the place of the image when the image has not been loaded for some reason. There are many reasons why an image does not load, but the point here is that by setting an ALT you can still provide meaningful content to the user in its place.
Both the ALT tag and Title tags should contain a keyword relevant to the page in which they appear. If you need to use the same image elsewhere on a page with different keyword focus, then upload the image again so you can set a second ALT and Title for the new image placement. Avoid overcrowding any tags with multiple keywords for the same reason that stuffing a page full of various keywords is not a good plan for SEO. Confused? Contact us for an SEO Services consultation at an hourly rate if you’re having trouble figuring out what to do here.
Browsers like Explorer, Firefox, Chrome, Safari etc all support the same image types served across the internet. Image types they cannot read should not be used in your website, unless you know for certain that your end-user will be able to download and use your image for use other than just displaying on your website. The image types universally supported are ‘jpg’, ‘gif’ and ‘png’. There is no direct effect on the SEO capability of your site from choosing one format over another
Choosing the best image type for application:
This selection should be made before uploading your images to the website as most CMSs are unable to change an image type from one to another.
JPG images are best when you need to display photos. Especially when the photo has shading, lots of colour, lots of texture etc. JPG also supports variable compression – see below.
GIF images are best when your image has limited colours, like in logos. Often a logo will have just two or three colours. My logo for this site has just one colour. These image types only support limited colour variance, so check that your colour selections are appropriate before choosing to use GIF. This format can also support transparent pixels (transparent parts of the image where no colour is needed or where the background is supposed to show through – common for logos).
PNG images support a full colour range and also transparency. They offer some compression capability, but generally result in the largest files of the three possible formats. If no transparency is required, then JPG is the better choice.
Whenever possible, aim to use the image type and compression setting that allows you to display your images well but only just within the point where compression starts to make them lose quality. This is called ‘visual optimisation’. This is also the point where your image file will be the smallest possible without affecting your UX. Every image should be visually optimised.
This is also the point where your images will load into the user’s browser as quickly as possible without the compromise on quality. If you’re not sure if your images are optimised for best load speed, try the Page Speed Insights test provided by Google. You will also see a site-wide effect in Google Search Console on page-load speeds (in the section about Crawl) if you have un-optimised images. Your site’s average download time in GSC should be around 2000ms or less.
The Page Speed Insights test will show you if your images need optimising. It’s probable that the data from GSC on Crawl download speeds will affect the SEO of your website, because the preference for Google is to provide their users with links to sites that have the best UX. For assistance on any of the items in the Page Speed Insights report, or in interpreting your Google Search Console data, hire our SEO services.
As with images, the shape and size of video should be limited to the shape and size it will display in your site. If you plan to use YouTube or Vimeo to host your videos, you don’t have quite the same constraints as with images, but you should still consider how much data you really need to provide. If the video resolution is too high, then the user’s browser buffer may cause videos to ‘jitter’ they play.
Videos are also tagged in the same manner as images although the terminology and parameters are a little different. Videos will allow the use of a title element – which is the title of the video. If using YouTube, you have a 100 character limit and should write the title to include the main keywords relevant to both the video and the location in which you are going to place it (if adding it into a website).
Video descriptions are quite expansive and allow up to 5000 characters. This should contain a full description of the content of your video and should use keywords. They’re a top spot for adding SEO value into your video.
Tags can also be used and are essentially a range of keywords for which your video might be an appropriate piece of content should someone search for any keyword from the list.
Videos via YouTube also support the addition of transcripts, annotations and captions, each of which add to SEO value.
There is some tendency for Google to ‘prefer’ short videos of under 1min. Your goal might be to produce a video in the 30-90 seconds length range for best SEO, however the length is only one factor in addition to those noted above which me be offset by other well optimised features should your video be longer than a couple of minutes.
If you plan to host your own videos, ensure you are able to show whichever format is required by the browser. Not all operating systems and browsers universally support a single format. You will need to prepare your video in 3 commonly used formats and have them sampled appropriately for fastest streaming.