Google's search engine results pages (SERPs) now have about as many picture results as text results. Before any organic text results are available, Google pulls in a huge pack of clickable images to the top of the main results page. Despite your best SEO efforts, your website's photos could be a source of organic traffic that you're losing out on. How do you get a piece of this valuable traffic? Image alt text.
Do you know what is alt text? It is the first concept of web accessibility is to include alt text for images. It's also one of the most difficult to put into practice correctly. There are several pictures on the internet with an incomplete, wrong, or bad alternative text. Determining a suitable, equivalent image title tag, like so many other aspects of web accessibility, is often a matter of personal interpretation. This article will provide our experienced understanding of the acceptable use of image alt text and alt text examples.
The topics on which many companies and publishers create content are increasingly requiring images to accompany their words. If you're writing about photography, photographic examples of your perspective are essential to your reader’s enjoyment of your work. Screenshots of software are often the best way to illustrate how to use it while demonstrating how to use it.
What is alt text and how does it work?
So what is alt text? They are also known as "image alt tags", “alt tags” is a type of HTML code that describes the appearance and purpose of an image on a web page.
If an image on a website fails to load on a user's computer, alt text is the written copy that appears in its place. These alt text images aides screen-reading software in describing images to visually impaired readers, as well as allowing search engines to crawl and rate your website more effectively.
Whether you perform SEO for your business, optimizing your website's image and alt text is the key to giving your visitors a better user experience, regardless of how they found you.
Alt tags are used for:
• Adding alt tags to images is, first and foremost, a web accessibility concept. An image alt text will be read to visually impaired users using screen readers to help them understand an on-page image.
• If an image file cannot be loaded, alt text will be displayed in its place.
• Alt tags provide search engine crawlers with better image context/descriptions, assisting them in properly indexing an image.
3 alt text examples (Good & Bad)
1. What is the difference between a keyword and a detail?
This image is taken from Strikingly Website
Bad Alt Text: "Strikingly homepage make a website in minutes, get started, it's free"
What's the deal with that line of alt text up there? There are far too many references to Strikingly. Using alt text to cram keywords into broken sentences adds too much fluff and not enough meaning to the picture. The publisher will value those keywords, but Google does not.
In reality, the text above makes it difficult for Google to understand how the image relates to the rest of the website or article it's on, making it impossible for the image to rank for similar longtail keywords with higher levels of interest.
Good Alt Text: "Strikingly website builder log in page"
2. Specificity vs. Detail
This image is taken from in.musafir.com website
Bad Alt Text: "dog in paris"
While the line of alt text above logically follows the first rule of alt text, namely, to be descriptive, it does so incorrectly. Yes, the picture above depicts Paris, France, and a dog. But this is also a sight of Eifell tower, and a Chihuahua dog. If the picture is on, say, a blog post about traveling to France, Google will need these details to properly index it.
Good Alt Text: "Chihuahua dog sitting on a red chair by the Eiffel Tower, Paris France"
3. Context vs. Specificity
The meaning in both of the images above is simple, which can help us write good alt text: one is from Strikingly Website, and the other is from Paris, France. But what if your image lacks official context (like a location name) to explain it?
This is where the subject of the article or website on which you're uploading the picture can come in handy.
Examples of bad and good alt text, depending on why you're publishing it
1. For an article about the use of accounting software.
Bad Alt text: "Man pointing to a person's computer screen"
Why doesn't the line of alt text above suffice for a webpage about accounting software? It's almost as descriptive and precise as the good alt text from the previous example. This example delves much further into the subject of business school, stating that the target audience for this page is students. Therefore, the alt text for images must represent this.
Good Alt Text: "Businessman using accounting software to instruct an accounting team"
2. For an article on graduate school.
Bad alt text: "Man pointing to a person's computer screen"
The alt text above would usually suffice, but because our aim is to publish this image alongside an article about business school, we're losing out on some keyword options that might help Google connect the image with specific parts of the article.
Good Alt text: "Graduate school professor pointing to a student's computer screen"
Importance of Alt Text
1. Accessibility
A fundamental principle of open web design is alt text. Its main (and still primary) function is to explain photos to visitors who are blind. This includes image-blocking screen readers and browsers, as well as users who are disabled or otherwise unable to visually recognize an image. By using alt text with your photos, all users, regardless of visual capacity, will appreciate your site's content.
2. Image Search Engine Optimization
Including alt tags on your photos not only benefits customers but it can also help you gain SEO benefits, both explicit and implied. Along with following best practices for image title and file naming, including image alt tags may help with image SEO.
Although image recognition technology has greatly improved over time, search crawlers still can't "see" the images on a website page as we can, so it's not a good idea to rely solely on them for understanding. It's likely that if they don't understand or get it wrong, you'll either rank for unintended keywords or miss out entirely.
You can use image alt text to include your goal keyword. With on-page keyword use still a ranking factor for search engines, it's in your best interest to build alt text that explains the picture while also using, if possible, a keyword or keyword phrase you're targeting.
How to optimize alt text: best practices and how to write good alt texts
- Alt text for images must be descriptive while still being symbolic of the webpage it supports. Have you gotten the gist of it so far? Here are a few key points to remember when writing a successful image title tag for SEO.
- Give a detailed description of the picture. Use the subject and meaning of the picture to direct you. Be as descriptive as possible when describing the picture. First and foremost, alt text is intended to provide text descriptions of images for users who are blind or visually impaired. If an image has no meaning or significance and is only there for design purposes, it should be placed in the CSS rather than the HTML.
- Keep your alt tags to 125 characters or less. When verbalizing this explanation for the visually impaired, screen-reading tools usually stop reading alt text at this stage, cutting off long-winded alt text at uncomfortable moments.
- Don’t start your alt tags with "picture of..." or "image of..." rather than "picture of..." or "Image of..." Take a look at the image's definition right away. Screen-reading software (and, for that matter, Google) would recognize it as an image in the HTML source code of the post.
- Make use of keywords, but do so sparingly. Just use your article's target keyword in your alt text, if it's simple to do so. If not, think about using semantic keywords, which are simply the most relevant terms inside a longtail keyword. If your article's head keyword is "how to use planograms," for example, you may use "uses of planograms" in your alt text instead of "how to," since "how to" can be difficult to include in an image alt text naturally.
- Don't stuff your keyword into the alt text of each picture. Include your keyword in at least one of your body photos if your blog post includes a sequence of them. Choose the picture that you believe best represents your subject, and make it your keyword. In the surrounding media, stick to more aesthetic details.
Images should not be used as text. This is more of a general SEO-friendly web development tenet than an alt text-specific best practice. You should stop using pictures in place of words since search engines can't read text inside images. If necessary, use your alt text to clarify what your picture means.
Adding Alt text to your website image
Now you’ve understood the importance of alt text as an SEO tool and how to write good alt text, let’s move forward on how to add alt text to your web images.
Add Alt Text to Individual Images:
- In your web editor, navigate to the picture you want to edit.
- Hover your mouse over the picture and select "Edit."
- To add your alt text, click "Add Alt Text."
- "Save" should be selected.
This image is taken from Strikingly Product
Add Alt Text to Images in Galleries:
- In your site editor, go to the Gallery section.
- Move your cursor over the picture and select "Edit."
- To add a title to your picture, click "Add Title" (alt text).
- To add a description to your picture, click "Add Description."
- "Save" should be selected.
This image is taken from Strikingly Product
Using pictures in your articles inspires people to read them, and well-chosen images will also help you rank well in image search results by supporting your post. However, remember to offer your photos strong alt attributes: alt text enhances the message of your articles with search engine spiders and increases your website's usability.
Create your website!
An alt text works best when written well. But where will you publish those images, articles, and blogs you just created? The answer is simple. Make a website!
This image is taken from Strikingly Website
Strikingly has hundreds of stunning and free website templates to choose from. There are e-commerce website templates, music website templates, photography templates, and much more to choose from.
This image is taken from Strikingly Product
All you have to do now is choose the one that best suits your company's needs, look, and sound. Then sign up for free in a matter of minutes. Finally, personalize your pages by incorporating your own content and style.
Making your Alt text count.
So, how do you go about creating alt text for your blog posts and webpages? Consider conducting a simple audit of your current content to determine where alt text can be added to previously untagged images. Keep an eye on how your organic traffic shifts when you add new alt tags to the pages. The more photos you refine, the more effective your SEO strategy will become. For more details, contact our chat support today!