Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024

SEO Images and Alt-Text

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

Surfing is fun, isn’t it?

Don’t worry, here surfing doesn’t mean in the waves. It means surfing the web!

A Lady Surfing the Logo of the World Wide Web

While searching for anything on a particular, have you noticed how we always find a few popular websites on top? These web pages are usually helpful with great content and proper illustrations too. Also, since they top the list, we tend to visit them more frequently. 
Doesn’t the whole thing seem a bit magical? 

A Boy Thinking About Magic

Well, the magic behind this is search engine optimization (SEO). 

SEO is a method of making and modifying web pages so that they have increased traffic. It ranks a website and displays it accordingly when searched on Google or any other search engine.

Now, when reading a book, do you love a book with illustrations or one with a lot of text?
You must be choosing a book with illustrations. 
Similarly, with web pages, people tend to like web pages with pictures in the content. 

Now, a web page with pictures may seem appealing to us, but a search engine does not see the images. Instead, it considers the alt-text provided for each picture. 
But then, what is alt-text?
Don’t worry. We’ve got you covered.
This article teaches about the SEO of images and alt-text and how to increase the page with suitable alt-texts. 

SEO Images and Alt-Text

Image SEO and its Importance

Before we start with image optimization, you’re probably wondering why we need to add pictures to a web page.

Previously we mentioned that people find web pages with pictures more attractive. Also, an image breaks large blocks of text. This makes an article interesting to read. Both are a part of on page optimization, but that’s not the only reason we should add pictures to a web page.
When we add images to a web page and a related topic is searched in Google Images, the image on the web page also appears. Thus, optimized images increase the chance of ranking a web page in Google Images. 

Now, we have mentioned image SEO a couple of times, but what is it?
In short, image SEO is the optimization of images to increase traffic to a web page. This increases the page rank in a standard Google search and Google Images. Other than this, image SEO also makes a web page more accessible, which also increases a web page’s ranking and is a legal requirement in some countries.

Now that we realize how important it is to optimize images let’s see how to do it in the next section.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Optimization Tips for Images

Adding images to a page, indeed, is a good on page SEO technique. We must optimize these images themselves, too, to enhance the page. Let us see how we can do that.

Naming Image Files

Images are generally saved with a random name, but we shouldn’t upload them to a site like that. A proper name for an image file also tells a search engine what it is. 
Also, Google recommends using hyphens instead of underscores while separating the words in the name.

Steps to Rename an Image

Resizing or Compressing Images

The number of pixels an image contains controls how long it takes to load. Site speed plays a vital role in on page SEO. So, we must make sure that we resize images before uploading them.
Another alternative is to compress an image. This reduces the file size, enhancing site speed and page ranking.

Format of an Image

We all know there are different formats of an image. The different formats are used based on how it is to be used. So the proper usage of image formats also helps improve the page rank.
The basic formats and their uses have been summarized below.

Format

Use

JPEG

Online photos, artwork, emails

PNG

Images with a transparent background

WebP

Images and animations that need compression more than JPEG and PNG

SVG

Icons and logos

Image Sitemap

This means adding a uniform resource locator (URL) to the images on a web page. In doing so, the image has a URL of its own, which helps a search engine fetch that image during an image search. 

Content Delivery Network

A content delivery network is a group of servers that quickly load images and other content. They are located worldwide for quicker distribution of content to separate places. For example, since we are in Asia, downloading an image from a server in Asia will load faster than downloading from a server in North America.
So on using it, the site speed of a web page increases, increasing the page rank.

A Pictorial Representation of the Content Delivery Network Showing Servers Located All Around the World and Connected

Lazy Loading

Images usually take more time to load than normal content. So in this method, images and JavaScript elements are loaded only when that section of the page is viewed. Thus, the main contents of a page are loaded for the viewer, but the images are only when needed, increasing the site speed.

A Pictorial Representation of Lazy Loading Where the Images in a Website Are Being Loaded While the Content Has Already Been Loaded

Browser Caching

When we open a web page for the first time, all its content, including images, is loaded and stored in the browser cache. The next time we open the same web page, they are fetched from the browser cache instead of loading the images again, thereby increasing the site speed and page rank.

Open Graph Images

Have you noticed that sometimes when you share a link, say a YouTube link, the shared link goes with an image and description added to it?
This image is called an open graph and is used as a social media strategy.
For example, if someone shares a link with an OG image on social media, it may catch your eye because of which you open the link. The same may happen to many other people, increasing the traffic on the web page.

Now, do you remember the part where we read that a search engine cannot see images?
There we said that a search engine views an image as its alt-text. So let’s learn what alt-text is next.

Alt-Text

Alt-text is short for alternative text. It is often called alt attributes or alt tags.
I guess its name is self-explanatory, indicating that the alt-text is a text alternative for images.

Now you may be wondering how alt-texts help in SEO.
Since a search engine cannot recognize images, it identifies them as content through the alt-text. Thus, the alt-text helps determine what the image shows and uses it in on page SEO and image SEO.

A Picture of a Sunrise From Behind the Mountains and Its Corresponding Alt-Text

Now, although you may consider the above points as advantages of images and alt-text, there are more. Let’s see what they are in the next section. 

Advantages of Adding Alt-Text

We already know that alt-texts are helpful in SEO, but adding them has other advantages. 

Alternative to Images

Images and alt-text represent the same thing. So, if an image does not load for some reason, its alt-text describes the image. 

For Search Engines

From the beginning of this article, we have read that search engines use alt-texts to understand the content of an image.

Page Ranking

Including the keyword in the alt-text of an image improves the web page’s page rank. This is because a search engine scans the alt-text as content and uses keywords for page ranking. 

For Visually Impaired Users

Visually impaired users usually use screen readers to go through a web page. Screen readers cannot read images, but they can read alt-texts. Thus, the user will know that there is an image and what it is showing.

After learning about alt-texts and all their advantages, I’m pretty sure you can comprehend their importance.
Now the question arises, how are we supposed to write good alt-text that enhances page ranking?
Let’s learn that in the next section.

Tips to Write Good Alt-Text

Knowing about images and alt-text is essential, but the ability to write good alt-text plays a more significant role. Let’s learn how to!

Descriptive

Alt-texts act as alternatives to images, so they should describe the image adequately, keeping the relevancy intact. 

Short in Length

Alt-texts should be concise and within 125 characters. This is because screen readers usually cut off alt-text if it exceeds that limit. In that case, the user will not even know an image exists. 

Usage of Keywords

Including the keyword in alt-texts without stuffing helps in SEO. It lets search engines know that the web page contains images that are relevant to the topic. This increases the page rank. 

Images Should Not Replace Text

The images should complement the text and not substitute since search engines cannot read pictures even if it contains the text. 

Phrases to Omit

The alt-text need not contain phrases like “image of”, “picture of”, etc. Alt-text itself defines that it describes the image. 

Use Tags for Long Descriptions

The tag <img longdesc=""> can be used for images with long descriptions. 

Form Buttons

Form buttons containing an image saying “submit”, “sign up”, “search”, etc., should also be provided with an alt-text. 

Frequently Asked Questions

What is search engine optimization?

SEO is a method of making and modifying web pages so that they have increased traffic. It ranks a website and displays it accordingly when searched on Google or any other search engine.

What is image SEO?

Image SEO is the optimization of images so that it increases the traffic to a web page. This increases the page rank in a typical Google search and Google Images.

Name some optimization techniques for images.

Some optimization techniques for images include naming image files, resizing or compressing images, adding open graph images, using image sitemaps, content delivery networks, lazy loading, and browser caching.

What is alt-text?

Alt-text is short for alternative text. It is often called alt attributes or alt tags. It is a text alternative for images.

Why should we add images and alt-text?

We should use alt-text because they provide an alternative to images for humans and search engines and help enhance the page rank of a website.

What are some tips for writing good alt-text?

While writing alt-text for images, try to make them descriptive and short. In case of long alt-text, use the “longdesc” tag. Use the keyword in the alt-text, but ensure the text does not replace the images. Do not use phrases like “image of” and add alt-texts for form buttons.

Conclusion

SEO images and alt-text are essential parts of a web page, especially regarding search engine optimization.
Images make a web page more appealing to viewers. Search engines cannot read these images, so alt-texts are used. Apart from search engines, alt-texts are helpful to visually impaired humans.
So, in this article, we learned how to optimize images and alt-text, but optimization isn’t only for images and alt-text.

Apart from this, you may read other articles on SEO like

Other than these articles, there are a lot of courses to explore and resources on Coding Ninjas Studio. Also refer to interview experiencesguided pathsproblemstest series, and an online library of Coding Ninjas. 

Happy learning!

Topics covered
1.
Introduction
2.
Image SEO and its Importance
3.
Optimization Tips for Images
3.1.
Naming Image Files
3.2.
Resizing or Compressing Images
3.3.
Format of an Image
3.4.
Image Sitemap
3.5.
Content Delivery Network
3.6.
Lazy Loading
3.7.
Browser Caching
3.8.
Open Graph Images
4.
Alt-Text
5.
Advantages of Adding Alt-Text
5.1.
Alternative to Images
5.2.
For Search Engines
5.3.
Page Ranking
5.4.
For Visually Impaired Users
6.
Tips to Write Good Alt-Text
6.1.
Descriptive
6.2.
Short in Length
6.3.
Usage of Keywords
6.4.
Images Should Not Replace Text
6.5.
Phrases to Omit
6.6.
Use Tags for Long Descriptions
6.7.
Form Buttons
7.
Frequently Asked Questions
7.1.
What is search engine optimization?
7.2.
What is image SEO?
7.3.
Name some optimization techniques for images.
7.4.
What is alt-text?
7.5.
Why should we add images and alt-text?
7.6.
What are some tips for writing good alt-text?
8.
Conclusion