{"id":6277,"date":"2019-05-14T17:48:58","date_gmt":"2019-05-14T17:48:58","guid":{"rendered":"https:\/\/www.crimsondesigns.com\/blog\/?p=6277"},"modified":"2020-03-05T19:00:42","modified_gmt":"2020-03-05T19:00:42","slug":"image-alt-tags-for-seo","status":"publish","type":"post","link":"https:\/\/www.crimsondesigns.com\/blog\/image-alt-tags-for-seo\/","title":{"rendered":"Image ALT Tags for SEO: What, Where, Why & How"},"content":{"rendered":"

We can probably agree that a web page without images is hard to read. Images not only help to improve user experience, they make tutorials easier to understand and products more enticing for customers. If you have a website, chances are that it includes a lot of images.<\/p>\n

But do those images have ALT tags (a.k.a. attributes) for SEO?<\/p>\n

I\u2019ll explain the \u201cWhat, Where, Why and How\u201d when it comes to image ALT tags. The “What” and “Where” sections are a tiny bit technical, but will help you understand these seemingly unimportant attributes. Then the “Why” and “How” will convince you that an image and its \u201cALT\u201d tag go hand-in-hand. If you add an image to a website, you should add an ALT tag too.<\/p>\n

First, the word ALT tag is commonly used, though the correct terminology is alt text, alt attribute or alt description. I will use them all in this tutorial. You can decide which one is right for you. To understand them better, you have to understand a little bit of HTML. Let\u2019s get started with \u201cWhat\u201d and \u201cWhere.\u201d<\/p>\n

(1) WHAT\u2026<\/h2>\n

What is an image ALT tag?<\/h3>\n

Image ALT tags are short descriptions that can be assigned to images in a web page. They are used in HTML code to describe the appearance and function of an image.<\/p>\n

How HTML helps you see Images in a Web Browser<\/h4>\n

HTML defines the structure and layout of a web page by using tags and attributes. Web designers use a lot of elements with tags and attributes to make up one page. (They can be seen in the source code of a page.) Curious? See HTML in the page source of a web page.<\/a><\/p>\n

The HTML <img><\/code> element embeds an image into the document.<\/strong><\/p>\n

This markup tells a web browser how to display that image. Images are not actually inserted into an HTML page. The tag creates a holding space for the image. When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page.<\/p>\n

The browser needs an image file with a name<\/strong> to find the image or you will see a broken link.<\/p>\n

EXAMPLE: my-red-train.gif<\/strong><\/p>\n

\"red<\/p>\n

What is an Image File Name?<\/h4>\n

The image file name is the name you give an image on your computer before you upload it to your website. You should describe your image in 3-8 words, use hyphens in between and include relevant keywords for SEO.<\/p>\n

Example: \u201cmy-red-train.gif\u201d is better than \u201cIMG6344376.gif\u201d<\/p>\n

<src>, <alt> and <title>attributes<\/h3>\n

HTML elements have attributes.  <img> attributes provide information<\/b> about the image. This information is usually surrounded by quotes. It is the “value” of that attribute.<\/span><\/p>\n

\"html<\/p>\n

<src> attribute<\/h4>\n

The <src><\/strong> attribute tells the browser where an image is located. It is a required<\/strong> attribute for an image.<\/p>\n

<ALT> and <title> attributes<\/h4>\n

The <ALT><\/strong> and <title><\/strong> attributes are not required. But not including the <ALT><\/strong> tag  is an SEO mistake<\/b>. You\u2019ll see why in a moment.<\/p>\n

(2) Where\u2026<\/h2>\n

Where exactly is the ALT attribute located?<\/h3>\n

The <ALT><\/strong> attribute is contained in the <img><\/strong> element’s tag along with the <src><\/strong> attribute. <\/span><\/p>\n

EXAMPLE:<\/strong> <img src=”my-red-train.gif” alt=\u201cmodern red train\u201d>.<\/p>\n

\"HTML<\/p>\n

The <ALT><\/strong> attribute has a value of \u201cmodern red train.\u201d This information describes the train, but should also relate it to the web page. Image alt text, such as this, is source code information that most visitors will never see. I\u2019ll explain more in a moment.<\/p>\n

Common question:<\/strong> When I add an image ALT  tag to a web page, I cannot see the text when I scroll over the image.  I don\u2019t understand this. Could you please help? <\/span><\/p>\n

Some people may be confused about the difference between alt text and the image title text attribute. They serve different purposes. We\u2019ll compare them below.<\/p>\n

(3) Why\u2026<\/h2>\n

Why should I include ALT attributes (tags)?<\/h3>\n

 Image <\/span>Alt attributes were first designed for users of screen readers. <\/span><\/h4>\n

Image ALT descriptions can help visually impaired visitors understand images on a web page, even if they can\u2019t see them. This “eye-opening” tutorial explains the usefulness of ALT text from the perspective of a web developer with vision impairment who uses a screen reader every day: <\/span>Alt-texts: The Ultimate Guide<\/a>. It’s worth reading!<\/p>\n

Image ALT tags are also good for search engine optimization (SEO).<\/h4>\n

Image ALT tags help search engines associate images with a web page ‘s content so they can not only understand them, but also properly index them in their search results pages. Search engine crawlers may be able to pick out basic image colors and shapes, but not much more. When a search engine crawls your page, it won\u2019t “see” your images the way you do.<\/p>\n

If you’re uploading a balloon image, you will help Google, Bing and other search engines by explaining what kind of balloon you’re adding to your page. Also, what is its purpose? Do you sell balloons? Do you provide hot air balloon rides at your business? Are you using balloons as an example in your blog post about image ALT tags and SEO? Your ALT descriptions would be different based on how your image relates to your web page.<\/p>\n

\"how<\/p>\n

Besides choosing a good image file name, adding ALT text to your images is one of the best things you can do for image optimization<\/a>, which is a key component of  search engine optimization<\/a> (SEO).<\/p>\n

How can I see the image ALT tags on a web page?<\/h4>\n

In web browsers such as Firefox, the ALT text is displayed only when an image is broken or when all images have been disabled. You won’t see them unless you have broken image links, disabled images, a screen reader or if you’re a search engine bot.<\/p>\n