Why is website image organisation, naming and meta data important?
Organise website images into folders, improve your SEO and meet accessibility criteria
Image organisation is important in order to easily navigate to images on the server for use on the website.
Image naming and meta data are important for SEO and Accessibility
1. ORGANISE YOUR CONTENT FOLDER STRUCTURE METHODICALLY.
It's a good idea to set up a clear directory structure that includes information like the web page topic, a date, and some type of unique identifier. Individual directories may be set up by date, topic, user, or whatever makes sense for a particular website or user.
A website and blog can easily grow to include thousands of images. These need to be organised in an ordered folder hierarchy to allow you and other users to understand where files are saved.
In Joomla! content such as images and .pdf files are stored in the Media section. Building an organised folder structure allows media files to be navigated to easily.
How you organise and name your files and folders will have a big impact on your ability to find those files in the future, and to understand what the folders contain and what the files are about. It helps to be consistent and descriptive in naming and organising files so that it is obvious where to find specific files and what the files are.
2. USE DESCRIPTIVE AND PLAIN LANGUAGE TO NAME FILES.
- A standard method of naming files and folders will reduce the chances of broken links, accidentally overwriting files, etc.
- Short, but descriptive names are quicker to read, and less likely to be truncated by a CMS.
- File name keyword order: write the most important key words in the beginning of the name, and do not use words such as ‘the’, ‘a’, ‘and’, ‘of’, ‘for’, etc
- Using the correct file extension (e.g. .jpg or .pdf) for the file type helps a computer to open the file in the appropriate application.
Think how your customers might search for your products or services to think of useful keywords to name your images.
- Searching for the folder or file; it is easier to search for a descriptively named file e.g. dusty_zebra.jpg than one named DSC758359.JPG
- Helps other users work with the file names
- File and folder names make up the website url (address) structure e.g. web-duka.com/images/web-duka_logo.png
- Results in web traffic reports such as Google Analytics will be easier to read and more useful with clear file and folder names being listed.
- Improved SEO rankings. Search engines read your file and folder name and can list them (e.g. in Google Images) more accurately with a descriptive file name.
- Accessibility - website visitors with visual disables rely on computer programs to read out file names to allow them to understand the website content. Descriptive file names are very important for a website to meet Accessibility criteria.
Image SEO starts with the right file name. You want search engines such as Google to know what the image is about.
For example, if your image is of a dusty zebra in Tsavo, the file name should be something like tsavo_safari_zebra_dust.jpg and not DSC5487.JPG.
The keywords Tsavo, Safari and Zebra are in the beginning of the filename descending in keyword importance.
3. ONLY USE LOWERCASE CHARACTERS, NUMBERS, HYPHEN AND UNDERSCORE
Only use lowercase typeset
eg dusty_zebra.jpg not Dusty Zebra.JPG
- Some web servers and older web browsers can be case sensitive causing problems when names contain capital letters.
- Non alpha-numeric characters and punctuation are used in html code. If you use special characters such as &, %, ?, @, £, *, /, etc in a file or folder name, you run the risk of a web browser interpreting the character as a coded command and not just a name.
- A space will break the url or file/folder address causing a broken link to the folder or image.
4. Only use standard lowercase file extensions
Eg .html, .jpg, .png, .doc, .pdf, .svg etc
- Not all browsers will recognise file extensions such as .psd (Photoshop) or .ai (Illustrator) and therefore the file will not load.
5. ENTERING IMAGE CAPTION AND META DATA VIA THE CMS
Caption: The caption is the text that accompanies the image, and is also important for SEO
Alt text: Text that is added to the image so there will be descriptive text should the image not be able to display to the visitor. This could be because images are turned off in a browser, the user is visually impaired etc. Alt text is important for Accessibility and SEO.
This is a priority for image seo.
Title text: Whilst hovering over an image with the mouse cursor, it is this Title text that appears in the browser as a ‘tooltip’. NB this can differ between browsers. It is a good way to provide non essential information about the image, such as the mood or context of the image. For example ‘A lone male zebra rolls in the dry waterhole at sunset in Tsavo’.