SEO guidelines for images
Applying image optimisation correctly is crucial for accessibility, findability, and loading speed.
Guidelines for Images (SEO and Accessibility)
Correctly optimising your images improves findability in Google Images and makes your content accessible to all.
| Field | Purpose | Guideline | Main Consideration |
|---|---|---|---|
| File name | Used by servers and search engines to identify content. | Short, keyword-rich and use only hyphens (-) instead of spaces. Always lowercase. | Crucial for SEO. Improved loading speed due to short names. |
| File title (title attribute) | Displayed as a 'tooltip' when the user moves the mouse over the image (depending on browser/CMS). | Short and descriptive. May contain keywords, but focus on user experience. | Not essential for SEO, but improves user experience. |
| File description | Often for internal management or as basis for caption. | Detailed explanation of image and context, especially useful for archiving. | Mainly internal management. Not usually shown to the visitor. |
| Alt text (alt attribute) | Describes the image for search engines and screen readers (accessibility). Displayed if the image does not load. | Short and informative: Maximum 150 characters (about 15-20 words). Contains the most important keywords. Describe what the image means in context, not just what you see. | Essential for SEO and WCAG accessibility (Web Content Accessibility Guidelines). |
Additional Guidelines for Web pages
1. The Caption
- Purpose: The text immediately below or next to the image.
- Guideline: Use it to provide additional information. Search engines value captions because they are directly linked to the visual content.
- Consideration: Use it to reinforce the text on the page. For example, "Figure 1: The illustration shows how you can contribute to Almere's energy-neutral goal with solar panels."
2. ARIA Labels
ARIA labels are needed to give additional context to assistive technologies, but are rarely needed for images if the alt text is properly completed.
| ARIA-Label | When to use | Reason |
|---|---|---|
| role="presentation" | For purely decorative images (e.g. small icons or background textures). | Tells the screen reader to ignore the image. Important: In this case, the alt text must be empty (alt=""). |
| aria-labelledby / aria-describedby | For complex diagrams or charts where the full description is very long. | Links the image to a long description elsewhere on the page (e.g. a caption). |
Conclusion for Standard Images:
For the standard illustration on a website (such as the green city with solar panels), you do not need additional ARIA labels. The combination of a good alt text and any caption is sufficient.