Next to the text, images and graphics are the most important visible parts of the content of your website. So if you optimize the content of your website, you should not neglect image SEO. The image file names, the ALT tags of the images (also ALT texts in German) and the image title play a particularly important role. But why is this so important?
Why optimize images for SEO
An image that appropriately describes your content. A photo of a dish for which you provide a recipe on your blog, or a product image that illustrates your offer. These visual elements offer added value for your users. But imagine that your website images cannot be displayed. There can be various reasons for this. Technical problems on the part of the user, graphic elements with a large file size put a strain on the DSL line or there are server problems. The image also disappears if the file is no longer accessible on the server because an image folder in the root directory was accidentally removed or moved. Also, some browsers and mobile applications do not display graphics.
What do the users see if the images are not loaded or not loaded immediately? Right, nothing. And think one step further: A search engine crawler that scans the content of your website in order to index it on Google only reads the source code and does not see the images as we see them. How is Google supposed to understand what that image is that you put there on the site? What does the picture show, what is its content, what does it stand for? Google only recognizes that there is an image. In order for the search engine to understand what can be seen in the image, you must correctly mark the important components such as image file name, alt attribute and the HTML image title. In this article you will learn how to make your images fit for SEO and how to use image descriptions correctly.
Components of image SEO
Why do I need meaningful image file names?
The recommendation for descriptive image file names can be derived from the fact that it is also advisable for URLs to be descriptive in terms of placement in Google search results. In the area of image SEO, it is important to use descriptive image file names, as these represent a ranking factor for Google image search – it is therefore recommended to also include the keyword in the image file name. Cryptic file names that do not indicate the content are therefore not relevant for the image search. The rules for naming are the same as for URLs. Lower case, recode umlauts, hyphens instead of spaces, no special characters, optional size of the image. In order to keep the image file paths as short as possible, a file name of one to five words is recommended.
The image file name looks like this in the source code:
speaking-image-filename.jpg ” alt=”This is a meaningful image description.”>
What are ALT tags?
An ALT attribute is an alternative (ALT) text of the images, which is why it is often called ALT text. In CMS such as WordPress, this ALT attribute is stored in image files and describes the content of the respective graphic. If an image cannot be displayed for certain reasons, the text of the stored ALT tag of the image appears. Search engines use this attribute to recognize the image content since image files usually cannot be read directly.
In a CMS like WordPress, the image ALT attributes can look like this:
This is a reasonable description of the image. “>
Tip: In WordPress, you can either type in the ALT tags directly in the text view with the HTML function. Or you can edit your image by clicking on it in the media browser and adding your optimized ALT attribute to the “Alternative Text” or “Alt Tag” area.
Why is it important to add ALT text to images?
Alternative descriptions for images and graphics not only play a major role in image SEO of on-page optimization but also in accessibility on the World Wide Web. People with visual impairments use certain voice browsers or screen readers (reading applications) to surf the Internet instead of text mode or a graphical user interface. Attributes such as “old” for images, animations and videos, which are used to describe the visual content, are then read out. If the Image ALT attribute is missing, some screen readers only announce parts of the file name.
What are image title tags?
The title tag (or universal attribute) shows the user information about the image via mouseover with a short delay. Not to be confused with the meta title relevant to the snippet, which gives each URL its own title and is relevant for ranking. The Image Title attribute is primarily for usability and is used when there is no image caption.
The HTML image title can be included as follows:
Magazine Article on Image SEO ” />
Optimize and use the ALT attributes of the images sensibly
In principle, there is no limit to the text length of the ALT attribute. However, a few words are often enough to describe the image meaningfully and to give search engines important information.
Therefore, check the quality of your alternative captions with the following questions:
- Can the user understand the image thanks to this description?
- Is the keyword placed sensibly?
- Do search engines understand the image content?
Let’s take the following example to illustrate what everything described so far could look like. We have an image that goes with this theme and a link to this magazine post from that image. Ideally, this image is displayed in the browser as follows:
If the page does not load properly, the user will only see a placeholder and the image attributes if you have implemented your image SEO correctly. Instead of the image, the ALT attribute “Representation of how users and Googlebot see an image on the website” and the title attribute “Magazine article on image SEO” now appear. Within your title tag, describe what readers can expect when they click on the link or blank space. In our example, you get to the magazine article and can learn more about image SEO.
The URL of the magazine article is first specified in the page source code . The image tag then begins with the image source, i.e. the corresponding file in your root directory (img src). The HTML img alt= is followed by the ALT text of the image in quotation marks. This is followed by the information on height (width) and width (height). In the example below, the image is 700 by 500 pixels.
Other design elements also need an ALT attribute. Some graphics – so-called decorative or ornamental graphics – are used, as the name suggests, for decorative purposes only and are not intended to convey any content. This can be, for example, background images, buttons or lines. Don’t just leave the ALT text blank for these, but fill it with a placeholder (alt=””). Because search engines and screen readers ignore images without SEO such as ALT tags since they are obviously not important for understanding the page. Decorative graphics are ideally not embedded in the code but are defined as background images using CSS. An image without an ALT attribute appears as a meaningless icon in the browser.
Aspects of Image SEO
Like the OnPage optimization of the website, the search engine optimization of the images also takes place on different levels: the visible level, the meta-level and the image level itself. Pay attention to the following factors when editing and saving your images:
- High-quality images are professional and are also used for search engine optimization: Google confirms the quality of images :
“High-quality, sharp images also show up better in thumbnails in our search results. This increases the likelihood that users will click on it.”
- However, the loading speed of your website must not suffer from the quality. Only upload images as large as necessary and compress them if necessary using a tool like tiny png. Scale the images to the right size in an image editing program and paste them one to one into the source code. In this magazine article, we will show you what is important when compressing images!
- Think carefully about which image format is best for you. JPG is usually ideal because of the effective compression. The PNG offers lossless compression but requires more storage space. GIF only makes sense for animations. The SVG format works well for vector graphics.
- Specify the height and width for all images. If the web browser knows the dimensions, it will start displaying a page even before all the images are downloaded. This is how you optimize your loading times. Of course, it makes even more sense to specify the image size “relatively”. This is how Google recommends it for responsive web design. In this way, your images adapt to the devices of your users in the best possible way.
- Name your image source correctly: The author and copyright symbol should be named in the caption, hiding in the mouseover is not sufficient.
Tip for image SEO: Submit an image sitemap
An additional support for search engines is the creation of an image sitemap, in which one can title up to 1,000 images per URL. Google makes a clear statement on this in its support forum:
“You can increase the likelihood of your images appearing in image search results by following webmaster guidelines and image publishing best practices. Additionally, you can use Google image extensions for sitemaps to provide Google with more information about the images available on your pages.”
By storing all image URLs in a separate XML sitemap and uploading it to the Google Search Console, you can promote the indexing of image files in just a few steps.
An image sitemap is structured as follows:
Image SEO with Ryte
You are not sure if all your website images are correctly named and if their ALT attributes are maintained? The Ryte Suite will help you find out. And that in a very simple way.
On the one hand, the “critical errors” in the overview in the Website Success module show you whether there are images on your entire website that are not accessible (missing ALT tag). If you click on this error, you will also find out exactly which images are involved and where they appear on the website. Another way to your images with optimization potential is via “Files > Images > ALT texts”.
Advantages and benefits of image SEO
The correct integration of images is a clear advantage for search engine optimization. Images marked with ALT and title attributes strengthen the topic relevance of the URL, which can increase the chances of better rankings.
With a good image SEO, you can not only increase the visibility of your website but also gain traffic via Google image search. For Google, the ALT attribute is an important parameter in OnPage optimization. Correct labelling with the relevant keywords increases the chance that these images will rank for this main keyword in the universal search: It may happen that a website for a corresponding keyword cannot be found with the URL in the top rankings but with a picture.
The quality and compression of the images have a positive influence on the usability and page speed of your website. Compression is particularly important in the context of mobile optimization since smartphones usually have less bandwidth on the go. Large image files delay page loading unnecessarily.
- Increased visibility through good listing in organic search
- Traffic boost through good ranking in Google image search
- Possibility of a top ranking via the universal search
- Better ranking through ALT tags that fit the thematic context of the respective website
- Improvement of usability especially for mobile devices
Conclusion
In order to guarantee barrier-free surfing on the desktop and screen readers for your visitors, you cannot avoid ALT and title attributes when including images. So take the time to equip all your images with an appropriate alternative text. For faster crawling and the correct classification of your graphics, setting meaningful descriptions is worth its weight in gold. This will also improve your page speed and thus usability – important factors for surfing on mobile applications.