Search Engine Optimization

What is Alt-text?

Describe the image and boost your SEO

Alt-text is short for alternative text and is an attribute of the HTML image tag. CMS platforms such as WordPress manage the code for the image tag itself. What you need to do yourself is to describe the image’s information in words and to determine whether an image carries relevant information at all.

Alt-text is a text that describes the content of images for the search engine. By working with good alt texts, the website’s SEO and user-friendliness are improved. And user-friendliness has over time become an increasingly important ranking factor.

The alt text is a text you put in the code on your website to describe what an image represents. To see if an image has an alt text, you can let the cursor stand still over an image. If the image has an alt text, the text will appear after a few seconds.

Why are alt-texts used?

Google’s search results yield almost as many image hits as text hits. It is therefore important that you add alt texts for all images on your website so that they are visible in both image search results and text results.

Alt texts are mainly used for the following three reasons:

• Support for the visually impaired
• Search engine optimization
• Technical solution

Support for the visually impaired

Those who have impaired vision and need to use a screen reader must also be able to understand images and graphic content. A software reads out what is on the screen in the form of headings, text, buttons and images. When a screen reader comes to an image, the Alt text of the image is read out so that people with impaired vision can more easily absorb the information on the website.

Alt texts for search engine optimization

Search engines are still bad at reading images. They use the alt texts to understand the images on the page and can thus index them better, which improves the website’s SEO. Search engines determine what is in the image based on the text information given in, among other things, the file name and Alt text. It thus becomes a way to clarify for the search engine what is in the image and create relevance in a text, i.e. improve SEO. In image searches, the Alt text carries extra weight.

The alt text is something that is usually called a direct ranking factor. This means that the words you choose to use in your alt text directly affect which searches Google chooses to display your page on in the search results, i.e. the Serp. Namely, Google reads the content of the alt text and includes it in the overall assessment of your page. Using strategically designed alt texts not only helps you appear in regular search results, but also helps your image appear higher in Google’s image search.

Remember that it is not only the alt text that affects position in image searches. In addition to this attribute, both image caption, context and the website’s overall SEO can affect how high it appears in image searches.

Technical solution

If, for some reason, the image cannot be displayed, the alt text will be presented instead. That is also where it got its name from. An alternative to the image. Thus, the visitor can at least see that an image was intended to be in a specific place and what the image represents.

Alt text recommendations

Include your keywords

For search engine optimization, alt texts are important. Although your main focus should be on accessibility, it is important to remember that Google also indexes and “reads” your alt texts.

Therefore, remember to include the keyword on the page in the alt text if appropriate. So include the search term in a sentence that describes the image in its entirety. The text should still feel good to someone who doesn’t see the image. In the body text, you use your keyword sometimes to create a clear topic for the page. You can do the same in the alt texts.

Remember to work with synonyms and not stick too hard to one specific keyword.

However, be careful with the use of keywords. Do not include the keyword for more than 2/3 of the images you use on your site. Google can penalize your ranking if you engage in so-called keyword stuffing, i.e. if it is perceived that you are exaggerating the use of your keywords.

Same function as the image

An alt-text should, as far as possible, be an equivalent alternative to the image itself. It should therefore not primarily describe the image as such but fulfil the same function. Ask yourself if you delete the image, will any information be lost? If the answer is yes, the image must have an alternative text.

No alt text at all

If the image has no purpose, it needs no alt text. In some cases, an image has only an aesthetic function on a website and does not add any function, the image is on the page only for decoration.

When the text is read with a browser, the alt text on these images is nothing but distracting, the alt text is just confusing. Omitting the attribute makes it easier for both Google and the image readers to handle the text.

However, all images must have alt text, either with text or empty. For an empty alt text, you write alt=”” in HTML. Write the word empty in the intended field if your CMS tool has a media library. Omitting alt text entirely causes problems because many browsers will instead read out the image’s URL.

Image contains text

Images may sometimes include text. If the image has a text content, its alt-text should say the same thing. Especially important to consider, for example, when graphs and figures are used to convey information that is not in the main text.

The text has a function

Enter the function in the Alt text. By clicking on the image, printing may take place or the visitor may be directed to a contact form. There is thus a clear difference between what the image shows and its function. A magnifying glass is usually used to display a Search function on a website. If it is possible to carry out an internal search by clicking on the magnifying glass, it should have “Search” as Alt text and thus not “Small magnifying glass with black handle”.

The image is a link

Explain where the link goes because this is relevant to the person (and Google) who doesn’t see the function of the image.

The image has a unique text

If the image has unique text, which is not presented in text form nearby, this text should be entered as Alt text. Start from the purpose of the image and the user’s needs.

When the image is displayed multiple times

If the image appears several times on the same page, only the attribute needs to be specified on the first occasion, provided that the image has no specific function.

General advice

• The alt text is dependent on the context and how the image is used on that particular page. The same image can therefore have different alt texts depending on the context.
• Do not embed the content in wording that does not tell what the image represents. Keep down the number of words like “picture represents”, “press the button”, etc. Screen readers tell their users what an image or a link is anyway, so the extra words just get annoying.
• If there is nothing meaningful to say about the picture, then don’t say anything about it. Images that have a purely decorative function often do well without alt text.
• All images must have everything – either with text or blank. Omitting everything causes problems because many screen readers will instead read out the URL of the image.
• Use hyphen characters between words instead of spaces in the file name. Write e.g. like this: “preferably-written-sa-har.jpg”. Replace the Swedish å ä ö with the corresponding vowel without a sign above it.
• If the image is close to content that describes the content of the image, you should give it an empty alt tag to avoid redundancy, that is, the image information is read out twice.
• Be concise. Aim to write no longer than 80 – 120 characters and certainly no more than 150 characters. There is no strict rule for how many characters the attribute can be. Keep it short and concise as the image should only be an element of the text, not replace the text.
• Since the alt text is read aloud with other text, it should have normal punctuation.
• Select the level of detail on the text based on the users’ needs, different users may need different alt texts.
• Avoid repetitions by auditioning the page.

Where to enter the Alt-text

CSS (Cascading Style Sheets)

Regardless of which CSS system is used, there is a box where the Alt text is entered. It is usually accessed via the media library or when the image is inserted.

The text entered in the box will be automatically saved and will be the same each time the image is inserted. If the Alt text is changed, images inserted afterwards will have the new Alt text.

Alt text should always be specified when inserting images

Since the same image can have different functions and is specified in different contexts, the Alt text may need to be varied between the different pages on which the image is located. It is not always that changes need to take place, but it is beneficial to review the attribute before inserting the image so that the image really fulfils its function.

HTML

In all CSS systems, it is possible to switch to HTML mode to see the code. In the coding, the Alt text looks like the following:

alt=”Blue car with roof rails”/>

After the image source, “alt=Alt-text” is thus entered. After that, other attributes can also be added to the image. If the image also has a caption, there is an advantage that this is entered before the Alt text. This is so that this information is read first by screen readers and Google.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Entering Alt-text using WordPress

In WordPress, you have the option to add a title and an alt attribute when uploading an image. The default behavior is to use the image filename as the title attribute and copy it to the alt attribute if left empty. However, while this is better than leaving the alt attribute blank, it is not considered best practice. It is highly recommended that you take the time to create a descriptive alt text for each image that you add to a post. By doing so, both users and search engines will benefit from the additional context provided.

• Log in to your WordPress website. When you’re logged in, you will be in your “Dashboard”.
• Open the post or page to edit the content.
• Click on the Image block to open the Image settings in the block tab of the sidebar. You will see the Image settings appear in the block tab of the sidebar.
• Add the alt text and the title attribute.
• Click the “Update” button in the upper right corner.