{"id":1336,"date":"2024-11-13T07:32:06","date_gmt":"2024-11-13T07:32:06","guid":{"rendered":"https:\/\/diib.com\/learn\/?p=1336"},"modified":"2026-09-23T15:14:17","modified_gmt":"2026-09-23T15:14:17","slug":"alt-text-for-images","status":"publish","type":"post","link":"https:\/\/diib.com\/learn\/alt-text-for-images\/","title":{"rendered":"What is an Alt Text for Website Images?"},"content":{"rendered":"<h2 id=\"chapter1\">Introduction<\/h2>\n<p>Designing excellent images within the content on your website is vital for a successful online presence. However, having quality pictures is not enough to ensure that your page will yield the expected traffic, sales, and leads. With Google&#8217;s redesign of the image search user interface, you need to optimize your photos to achieve the best SEO results. Hence, search engines will easily understand them, which increases your site&#8217;s visibility to your target audience. It would help if you utilized alt text on your images to accomplish better results on SERPs.<\/p>\n<p>This article aims at giving you a detailed explanation of what is alt text and the process of adding it into your SEO strategy. If you also wonder when an image should have null alt text, continue reading to gain all the essential insights.<\/p>\n<blockquote><p><b>FACT<\/b>: Images are returned for <b>22.6% of search queries<\/b> on Google. Moreover, <b>62% of Gen Z and Millennial consumers<\/b> want visual search more than any other new technology.<\/p><\/blockquote>\n<h2 id=\"chapter2\">What is Alt text for images?<\/h2>\n<p>Alt text, also known as alt attributes or alt descriptions, is a short HTML element of about 100 characters assigned to describe your web page&#8217;s images. It&#8217;s not always visible to frequent visitors, but it helps search engine crawlers comprehend your photos&#8217; function and appearance. Additionally, your pictures get better indexing that improves your site&#8217;s visibility.<\/p>\n<p>Additionally, image alt text HTML also helps to provide better web access to your visually impaired users. In case an image file fails to load on your page, the alt description shows up instead to give visitors an entire picture of your content. Here is what that would look like in practice:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1344\" src=\"https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images8.jpg\" alt=\"What Is an Alt Text for Website Images\" width=\"1000\" height=\"366\" srcset=\"https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images8.jpg 1000w, https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images8-300x110.jpg 300w, https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images8-768x281.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<h2 id=\"chapter3\">Alt text best Practices<\/h2>\n<p>When writing alt text for your images, you need to adhere to some best practices as discussed below;<\/p>\n<h3 id=\"chapter4\">Use Keywords in your alt Descriptions<\/h3>\n<p>Whenever you utilize alt descriptions on your images, use the opportunity to indicate keywords within your content. It facilitates communication with search engines about the relevance of your page for a specific search query.<\/p>\n<p>If you find it hard to determine the highly relevant and profitable keywords to use, the alt text generator can be of great help. It helps you know the right terms to use that would optimize your alt descriptions for your images. However, note that you should avoid stuffing your alt attributes with all the generated keywords. It will result in a poorly crafted alt text which can be penalized by Google. For example, in the image below, you&#8217;ll notice the good alt text example readily explains the image. However, the bottom example doesn&#8217;t go very far in explaining the what the photo is all about.:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1345\" src=\"https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images9.jpg\" alt=\"What Is an Alt Text for Website Images\" width=\"471\" height=\"467\" srcset=\"https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images9.jpg 471w, https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images9-300x297.jpg 300w, https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images9-150x150.jpg 150w\" sizes=\"auto, (max-width: 471px) 100vw, 471px\" \/><\/p>\n<h3 id=\"chapter5\">Keep your alt text short<\/h3>\n<p>It&#8217;s good practice to use a descriptive alt text, but you should avoid writing an entire paragraph to describe an image. Note that most screen readers capture up to 125 characters of the alt attribute, thus ensuring that you stick to a brief and concise text.<\/p>\n<p>It would be best to get straight to the point and bring out the most prominent characteristics in the image when the elements are too many. The essential aspects should give ample details to search engines, and users will relate the photo to your page&#8217;s context.<\/p>\n<p>For instance, the alt text below is too long when describing two dogs;<\/p>\n<ul>\n<li>Alt = grey dog on the left and black dog with long ears on the right lying on the couch with yellow cover<\/li>\n<\/ul>\n<p>An excellent alt description would be as follows;<\/p>\n<ul>\n<li>Alt = grey and black dog lying on the couch<\/li>\n<\/ul>\n<p>Also, avoid some descriptions that would be too short such that they don&#8217;t bring out a concise meaning such as;<\/p>\n<ul>\n<li>Alt = two dogs<\/li>\n<\/ul>\n<p>[post_cta_seo]<\/p>\n<h3 id=\"chapter6\">Be specific<\/h3>\n<p>Whenever you create an alt text, keep in mind that you should describe your web page&#8217;s image. Therefore, you need to make sure it&#8217;s as specific to the picture as possible. The aim is to ensure that every searcher will immediately understand the image even without viewing it. When designing your image alt text HTML, ask yourself if you would comprehend the description&#8217;s relevance without necessarily seeing the picture.<\/p>\n<p>For example, if you intend to bring out a picture of dogs playing in a park, you can do it as follows;<\/p>\n<ul>\n<li>Alt = male and female black German shepherd dogs playing in the park<\/li>\n<\/ul>\n<p>The description gives a clear and accurate representation of what the picture represents.<\/p>\n<p>On the other hand, you would be wrong to write it as follows;<\/p>\n<ul>\n<li>Alt = dogs playing on grass<\/li>\n<\/ul>\n<h3 id=\"chapter7\">Avoid Writing your alt text just for SEO<\/h3>\n<p>It&#8217;s understandable to aim at enhancing visibility while writing your alt descriptions. However, don&#8217;t focus purely on improving SEO but also keep your searchers in mind. Remember, your alt attribute should remain relevant to a specific image and page content. Alt text is used specifically for the visually impared.<\/p>\n<blockquote><p>Quote box: &#8220;There are 2,140,000 estimated total number of people living with sight loss (2021) in the UK&#8221; (Site Loss Data Tool, RNIB 2021)<\/p><\/blockquote>\n<p>Hence, stuffing your alt text with keywords will end up hurting search engine rankings instead of enhancing your SEO efforts. Also, avoid using similar keywords and alt attributes for numerous images since both scenarios can spam.<\/p>\n<h3 id=\"chapter8\">Don&#8217;t Leave out form Buttons<\/h3>\n<p>In case you have a form in your site that utilizes an image as its &#8216;submit&#8217; button, it would be best to give it an alt text. The image button is supposed to have an alt description that describes its function, such as &#8216;apply now,&#8217; &#8216;search,&#8217; &#8216;sign up,&#8217; among many.<\/p>\n<h3 id=\"chapter9\">Don&#8217;t Include extra Specifications<\/h3>\n<p>Remember that users and search engines assume the alt text refers to an image in your site. Therefore, it&#8217;s unnecessary to add other specifications in your alt attributes such as &#8216;picture of,&#8217; &#8216;image of,&#8217; and more.<\/p>\n<h3 id=\"chapter10\">Remember to use longdesc<\/h3>\n<p>You may have some more complex images in your website such that you need longer descriptions. In such a case, don&#8217;t forget to use longdesc = &#8216;explore using the longdesc.&#8217; Here is a good example of what that would look like technically:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1343\" src=\"https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images7.jpg\" alt=\"What Is an Alt Text for Website Images\" width=\"383\" height=\"132\" srcset=\"https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images7.jpg 383w, https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images7-300x103.jpg 300w\" sizes=\"auto, (max-width: 383px) 100vw, 383px\" \/><\/p>\n<h3 id=\"chapter11\">Avoid using Images as text<\/h3>\n<p>For SEO-friendly web development, avoid using photos in place of words since search engines won&#8217;t read the text within the images. However, if you must, ensure that you expound what your picture says within your alt attribute.<\/p>\n<h2 id=\"chapter12\">How alt text Works<\/h2>\n<p>Keep in mind that search engines cannot see images the same way we do. Hence, it would help if you offered some assistance to Google to ensure it understands what the photos are about. This is one of the reasons it is crucial you name your images to have alt text accessibility and filenames to help crawlers &#8216;see&#8217; the images on your page.<\/p>\n<h2 id=\"chapter13\">How to add Alt Text to Images<\/h2>\n<p>A majority of the CMSs you can use to design and make your alt text changes are straightforward. With just a click on a photo in the post&#8217;s body, you get a rich text module or image optimization to design the alt attribute.<\/p>\n<p>It also varies depending on the web design on your page. In most cases, most of the sites will provide you with a section where you enter your alt description when a photo gets uploaded. Additionally, you also get a chance to make extra alterations on the uploaded image. It then gets encoded on your page in an image text HTML format.<\/p>\n<p>If you use a browser&#8217;s &#8216;inspect feature,&#8217; you will see the HTML code. For instance, when using Chrome, click a photo on the web page and tap the drop-down menu&#8217;s inspect features. You will then see a window appear with the site&#8217;s HTML tag showing &#8216;alt = followed by the alt description.&#8217;<\/p>\n<p>Here is an illustration of how to add alt text on different platforms;<\/p>\n<h3 id=\"chapter14\">\u00b7 <b>WordPress<\/b><\/h3>\n<p>When using WordPress, the process is straight forward. Go to the editor window and tap into an image. You will see a field on the image settings for your &#8216;alt text (alternative text)&#8217; to create or make changes for your alt description.<\/p>\n<p>Alternatively, you can go to the media library and click on a preferred image. You will see the options where you can either edit or design your alt text.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1342\" src=\"https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images6.jpg\" alt=\"What Is an Alt Text for Website Images\" width=\"519\" height=\"309\" srcset=\"https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images6.jpg 519w, https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images6-300x179.jpg 300w\" sizes=\"auto, (max-width: 519px) 100vw, 519px\" \/><\/p>\n<p>(Image credit: <a href=\"https:\/\/www.wpbeginner.com\/beginners-guide\/image-alt-text-vs-image-title-in-wordpress-whats-the-difference\/\">wpbeginner<\/a>)<\/p>\n<h3 id=\"chapter15\">\u00b7 <b>Wix<\/b><\/h3>\n<p>Wix has also stepped up their efforts to make the platform more SEO friendly. You can now add alt descriptions to photos on their store and make any necessary editing.<\/p>\n<p>Get to the editing window and hit on the image that you intend to add the alt text. In the settings, you will view an option for &#8216;what&#8217;s in the image?&#8217; In this area, add your alt description. Here is that page:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1341\" src=\"https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images5.jpg\" alt=\"What Is an Alt Text for Website Images\" width=\"484\" height=\"348\" srcset=\"https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images5.jpg 484w, https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images5-300x216.jpg 300w\" sizes=\"auto, (max-width: 484px) 100vw, 484px\" \/><\/p>\n<p>(Image credit: <a href=\"https:\/\/support.wix.com\/en\/article\/optimizing-your-images-and-galleries-for-seo-alt-text\">wix.com<\/a>)<\/p>\n<h3 id=\"chapter16\">\u00b7 Magento<\/h3>\n<p>Magento is another platform that offers a straightforward procedure to add the alt attribute.<\/p>\n<p>Tap on the catalog section to choose the preferred product that you want to add the alt text. Then scroll to the videos and images category and click on a specific photo to add or edit the alt description. Here is the Magento alt text screen:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1340\" src=\"https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images4.jpg\" alt=\"What Is an Alt Text for Website Images\" width=\"504\" height=\"448\" srcset=\"https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images4.jpg 504w, https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images4-300x267.jpg 300w\" sizes=\"auto, (max-width: 504px) 100vw, 504px\" \/><\/p>\n<p>(Image credit: <a href=\"https:\/\/community.magento.com\/t5\/Magento-2-x-Programming\/Adding-quot-alt-quot-tags-for-the-product-images-in-magento2\/td-p\/54698\">Magento<\/a>)<\/p>\n<h3 id=\"chapter17\">\u00b7 <b>Shopify<\/b><\/h3>\n<p>Using Shopify allows you to add the alt attribute to both the product and theme images.<\/p>\n<p>If you want to optimize the alt description on product photos, go to the &#8216;products&#8217; section then hit on the item listing you wish to edit. On the item details page, tap on the media item and look for the preview media page. Next, add your alt text. For instance:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1339\" src=\"https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images3.jpg\" alt=\"\" width=\"756\" height=\"469\" srcset=\"https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images3.jpg 756w, https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images3-300x186.jpg 300w\" sizes=\"auto, (max-width: 756px) 100vw, 756px\" \/><\/p>\n<p>(Image credit: <a href=\"https:\/\/increasily.com\/how-add-alt-tags-to-shopify-product-images\/\">increasily<\/a>)<\/p>\n<p>When adding the alt attribute to your theme images, go to the &#8216;online store&#8217; section, and find &#8216;themes&#8217; then tap to customize your store&#8217;s theme. You will see the menu section on the left-hand side where you click into image blocks and individual photos. You will then view a text box where you can edit or add your alt description.<\/p>\n<h2 id=\"chapter18\">Why is Alt Text Essential for Good SEO?<\/h2>\n<p>Now that you have learned how to add alt text to images, you may be wondering why you need to use them on your website and whom they benefit. The three main groups that are the first beneficiaries of alt attributes are;<\/p>\n<ul>\n<li><b>Search engines<\/b> \u2013 When you use the alt description, it helps search engines interpret the subject in a specific image. Hence, Google can quickly determine when to include your photo in relevant search outcomes, giving alt text pictures a higher likelihood of being found.<\/li>\n<li><b>Visually impaired visitors<\/b> \u2013 Using alt descriptions provides visually impaired visitors with a substitute for images. Hence, it allows users to utilize programs that read text aloud to comprehend what the photos add to your content.<\/li>\n<\/ul>\n<p>For example, if such people browse through a website that uses navigation images, it will be challenging to figure out various categories. However, if the photos contain alt attributes, they can maneuver through the entire site.<\/p>\n<ul>\n<li><b>Marketers<\/b> \u2013 when you utilize alt descriptions on your images, your page has better chances of getting higher rankings in search outcomes. As a result, your site gets more traffic on Google, thanks to optimization.<\/li>\n<\/ul>\n<p>It helps you enhance your brand awareness, especially when your images contain your company name. Moreover, the higher your page gets on search results, the more people will click through the image outcomes to visit your website.<\/p>\n<blockquote><p><b>FACTS<\/b>:<\/p>\n<ul>\n<li>Dan Morgan at WebSpection got one of his photos to rank #1 in Google Images for &#8220;best person in Cardiff&#8221; in less than four days by optimizing his image.<\/li>\n<li>And, Robbie Richards generated 150,732 visits by adding image alt tags, compressing images, and a few other SEO tricks.<\/li>\n<\/ul>\n<p>&#8212;Search Engine Journal<\/p><\/blockquote>\n<h3 id=\"chapter19\">Main reasons why alt text is vital to your website<\/h3>\n<ul>\n<li><i><b>To Improve Accessibility: <\/b>Note that most searchers are usually visually impaired; thus, they use screen readers while consuming online content. Alt descriptions are supposed to describe different images on your page to visitors who can&#8217;t see them. If you fail to use alt text attributes on your images, users cannot understand your page&#8217;s content. Screen readers end up skipping over such photos or even read long and unhelpful file names.<\/i><\/li>\n<li><i><b>To Enhance Topical Relevance:<\/b> For Google to understand your page&#8217;s content, it looks at the different terms used. On the other hand, when you include images in your site, search engines can&#8217;t figure out its purpose. Therefore, you need to have an alt attribute since context may be &#8216;locked away&#8217; in images.<\/i><\/li>\n<li><i><b>To assist you to rank in Google Images: <\/b>Using alt text also helps your page to rank higher on Google images search engine. Besides, people are increasingly putting it ahead of other platforms such as Bing and YouTube when looking for photos.<\/i><\/li>\n<li><i><b>To Serve as Anchor texts for Image Links:<\/b> In many sites, anchor texts link one page to another. Search engines use them to comprehend more about your website and what it entails. You can also use alt attributes to serve the same purpose.<\/i><\/li>\n<li><i><b>When Should an Image have null Alt Text<\/b>: It&#8217;s good practice to ensure that you always include the alt attribute on your images for better rankings on search engines. At the same time, you may be asking when should an image have null alt text.<\/i><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1338\" src=\"https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images2.jpg\" alt=\"What Is an Alt Text for Website Images\" width=\"495\" height=\"302\" srcset=\"https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images2.jpg 495w, https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images2-300x183.jpg 300w\" sizes=\"auto, (max-width: 495px) 100vw, 495px\" \/><\/p>\n<p>You don&#8217;t have to use alt text in some cases, especially when the image doesn&#8217;t carry vital details or is used for decorative purposes.<\/p>\n<p>For instance, if your website uses icons to separate various content sections, the images are meant to make your page look pretty. Therefore, no need to add alt text since it may end up annoying users with screen readers, and it will not add SEO value to your page.<\/p>\n<p>Additionally, stock and generic images do not also need alt text accessibility. Besides, inserting one wouldn&#8217;t be useful for visually impaired readers.<br \/>\n[post_cta_second]<\/p>\n<h2 id=\"chapter20\">How you can find and fix issues with alt text<\/h2>\n<p>If you want to accomplish better results with alt text, it will help if you conducted an audit on pages with traffic to make necessary enhancements. Here is the procedure that you can use to make the scrutiny;<\/p>\n<p><b><i>Find the most Visited Pages<\/i><\/b><\/p>\n<p>First, start by doing a thorough check to know your most organically visited pages by your audience. You can go through various platforms such as Google Search Console, Google Analytics, or the report in &#8216;top pages&#8217; on Ahrefs site explorer.<\/p>\n<p><b><i>Audit your alt Descriptions<\/i><\/b><\/p>\n<p>When doing an audit on your alt descriptions, you can use the Alt Text Tester Chrome extension. Start by installing the free tool, then load the page with the most traffic and activate the extension. Here is what that looks like:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1337\" src=\"https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images1.jpg\" alt=\"What Is an Alt Text for Website Images\" width=\"584\" height=\"190\" srcset=\"https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images1.jpg 584w, https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images1-300x98.jpg 300w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/p>\n<p>Whenever you roll over a photo, you will see the alt description displayed on the platform. In case the alt attribute is missing, it should show a warning as &#8216;alt text missing.&#8217;<\/p>\n<p>For all alt text in your content, go through several of them in your images. After a few checkups, the tool helps you determine whether your pictures are poorly or well optimized or not at all.<\/p>\n<p><b><i>Repeat for more Pages<\/i><\/b><\/p>\n<p>The last process should involve repeating the same procedure for the pages that have generated the most traffic. The process should give you a sense of whether your alt description optimization is excellent or needs some enhancements.<\/p>\n<h2 id=\"chapter21\">Diib\u00ae: Providing Alt Text Statistics and Monitoring!<\/h2>\n<p>As a website owner, adding alt descriptions is straight forward regardless of the web platform you use. Also, keep in mind that not all images on your page require alt text as they would not make sense to search engines or those who are visually impaired. The Diib User Dashboard analyzes all alt text on your website and Facebook profile, giving you actionable insights for improvement. Here are some of the features we know you&#8217;ll love:<\/p>\n<ul>\n<li>Custom Alerts, which keep you informed on your website health and any changes to the google algorithms that can affect your traffic patterns.<\/li>\n<li>Objectives with customized suggestions on ways to improve your website health and organic traffic.<\/li>\n<li>Insights into not only your own alt text health, but that of your key competitors.<\/li>\n<li>Sync your Facebook profile to give you insights into the specifics of your social media campaign. Things like individual post performance, demographics of users, best time of day to post and conversions.<\/li>\n<li>Provide a monthly collaborative session with a Diib growth expert that can help you fine tune your SEO efforts and guide you to Shopify growth and success.<\/li>\n<\/ul>\n<p>Call today at 800-303-3510 or <a href=\"https:\/\/diib.com\/learn\/\">click here<\/a> to get your free 60 website scan and learn more about your SEO strengths and weaknesses.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Designing excellent images within the content on your website is vital for a successful online presence. However, having quality pictures is not enough to ensure that your page will yield the expected traffic, sales, and leads. With Google&#8217;s redesign of the image search user interface, you need to optimize your photos to achieve the [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1346,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1336","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo"],"acf":{"faq":"<h2 id=\"chapter22\"><b>FAQ's<\/b><\/h2>\r\n<section class=\"accordion-section clearfix mt-3\" aria-label=\"Question Accordions\">\r\n<div class=\"container\">\r\n<div id=\"accordion\" class=\"panel-group\" role=\"tablist\" aria-multiselectable=\"true\">\r\n<div class=\"panel panel-default\">\r\n<div id=\"heading0\" class=\"panel-heading\" role=\"tab\">\r\n<h3 class=\"panel-title\"><a class=\"collapsed\" title=\"\" role=\"button\" href=\"#collapse0\" data-toggle=\"collapse\" data-parent=\"#accordion\" aria-expanded=\"true\" aria-controls=\"collapse0\">What does Alt text look like on Instagram?<\/a><\/h3>\r\n<\/div>\r\n<div id=\"collapse0\" class=\"panel-collapse collapse\" role=\"tabpanel\" aria-labelledby=\"heading0\">\r\n<div class=\"panel-body px-3 mb-4\">\r\n\r\nAlt text hasn't always been used on Instagram, however, it has been needed for a long time. Being an image based platform, Instagram utilizing alt text is a huge milestone. It makes the platform more accessible to people of all ability levels and easier to navigate.\r\n\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"panel panel-default\">\r\n<div id=\"heading1\" class=\"panel-heading\" role=\"tab\">\r\n<h3 class=\"panel-title\"><a class=\"collapsed\" title=\"\" role=\"button\" href=\"#collapse1\" data-toggle=\"collapse\" data-parent=\"#accordion\" aria-expanded=\"true\" aria-controls=\"collapse1\">Should alt text have icons?<\/a><\/h3>\r\n<\/div>\r\n<div id=\"collapse1\" class=\"panel-collapse collapse\" role=\"tabpanel\" aria-labelledby=\"heading1\">\r\n<div class=\"panel-body px-3 mb-4\">\r\n\r\nWith the increasing regularity of business icons being used, it is vital to add alt text. This helps the searcher and search engines to know exactly what the icon or logo stands for and properly route people.\r\n\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"panel panel-default\">\r\n<div id=\"heading2\" class=\"panel-heading\" role=\"tab\">\r\n<h3 class=\"panel-title\"><a class=\"collapsed\" title=\"\" role=\"button\" href=\"#collapse2\" data-toggle=\"collapse\" data-parent=\"#accordion\" aria-expanded=\"true\" aria-controls=\"collapse2\">What does the alt attribute do?<\/a><\/h3>\r\n<\/div>\r\n<div id=\"collapse2\" class=\"panel-collapse collapse\" role=\"tabpanel\" aria-labelledby=\"heading2\">\r\n<div class=\"panel-body px-3 mb-4\">\r\n\r\nIf for some reason an image can't be displayed, the alt attribute will display alternative information about the image. Whether a technical difficulty or a human disability, this is vital to include.\r\n\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"panel panel-default\">\r\n<div id=\"heading3\" class=\"panel-heading\" role=\"tab\">\r\n<h3 class=\"panel-title\"><a class=\"collapsed\" title=\"\" role=\"button\" href=\"#collapse3\" data-toggle=\"collapse\" data-parent=\"#accordion\" aria-expanded=\"true\" aria-controls=\"collapse3\">How do I add alt text to Facebook?<\/a><\/h3>\r\n<\/div>\r\n<div id=\"collapse3\" class=\"panel-collapse collapse\" role=\"tabpanel\" aria-labelledby=\"heading3\">\r\n<div class=\"panel-body px-3 mb-4\">\r\n<ol>\r\n \t<li>Click Photo\/Video at the bottom of the Create Post screen.<\/li>\r\n \t<li>Select the photo you want to add.<\/li>\r\n \t<li>Click Edit Photo (paintbrush icon), then click Alt Text.<\/li>\r\n \t<li>The automatically generated text will be shown on the left side of your photo.<\/li>\r\n \t<li>Write your Alt-Text in the box.<\/li>\r\n \t<li>To save your alt text, click Save in the bottom right.<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"panel panel-default\">\r\n<div id=\"heading4\" class=\"panel-heading\" role=\"tab\">\r\n<h3 class=\"panel-title\"><a class=\"collapsed\" title=\"\" role=\"button\" href=\"#collapse4\" data-toggle=\"collapse\" data-parent=\"#accordion\" aria-expanded=\"true\" aria-controls=\"collapse4\">How do you give an Alt tag a background image?<\/a><\/h3>\r\n<\/div>\r\n<div id=\"collapse4\" class=\"panel-collapse collapse\" role=\"tabpanel\" aria-labelledby=\"heading4\">\r\n<div class=\"panel-body px-3 mb-4\">\r\n\r\nThe traditional method to accomplish this is to put the text into the div and use an image replacement technique. Create a new class in CSS and position off screen. Then put your alt text in HTML right before the property that calls your background image.\r\n\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/section>","time_read":"16","menu-side":"<a href=\"#chapter1\">Introduction<\/a>\r\n<a href=\"#chapter2\">What is Alt text for images?<\/a>\r\n<a href=\"#chapter3\">Alt text best Practices<\/a>\r\n<a href=\"#chapter4\">Use Keywords in your alt Descriptions<\/a>\r\n<a href=\"#chapter5\">Keep your alt text short<\/a>\r\n<a href=\"#chapter6\">Be specific<\/a>\r\n<a href=\"#chapter7\">Avoid Writing your alt text just for SEO<\/a>\r\n<a href=\"#chapter8\">Don't Leave out form Buttons<\/a>\r\n<a href=\"#chapter9\">Don't Include extra Specifications<\/a>\r\n<a href=\"#chapter10\">Remember to use longdesc<\/a>\r\n<a href=\"#chapter11\">Avoid using Images as text<\/a>\r\n<a href=\"#chapter12\">How alt text Works<\/a>\r\n<a href=\"#chapter13\">How to add Alt Text to Images<\/a>\r\n<a href=\"#chapter14\">WordPress<\/a>\r\n<a href=\"#chapter15\">Wix<\/a>\r\n<a href=\"#chapter16\">Magento<\/a>\r\n<a href=\"#chapter17\">Shopify<\/a>\r\n<a href=\"#chapter18\">Why is Alt Text Essential for Good SEO?<\/a>\r\n<a href=\"#chapter19\">Main reasons why alt text is vital to your website<\/a>\r\n<a href=\"#chapter20\">How you can find and fix issues with alt text<\/a>\r\n<a href=\"#chapter21\">Conclusion\t<\/a>\r\n<a href=\"#chapter22\">FAQ's<\/a>","cta_title":"How can diib\u00ae help me improve my website today?","cta_text":"<p>diib\u00ae connects to your Google Analytics account in about 60 seconds (optional to start) and shows you exactly what to fix to grow your website. More than 800,000 businesses use diib, starting with a free website scan. PRO memberships start at just $29.99 a month.<\/p>\r\n<p>Because we serve so many members, we can also offer <strong>wholesale pricing<\/strong> on high-quality services, including:<\/p>\r\n<ul>\r\n<li>Backlink development on DA10\u2013DA80 websites<\/li>\r\n<li>Professional Google Analytics setup<\/li>\r\n<li>Website speed analysis and optimization<\/li>\r\n<li>Keyword research<\/li>\r\n<li>Article writing and publishing (500\u20135,000+ words)<\/li>\r\n<\/ul>\r\n<p><strong>Enter your website below to create your free account and see everything we offer our members.<\/strong><\/p>","new_slogan":"Our AI will Check Your Website for Free in 60 Seconds!","hero_button_text":"Check My Website Free","answer_first":"","meta_description":"","learn_faq_1_question":"","learn_faq_1_answer":"","learn_faq_2_question":"","learn_faq_2_answer":"","learn_faq_3_question":"","learn_faq_3_answer":"","learn_faq_4_question":"","learn_faq_4_answer":"","learn_faq_5_question":"","learn_faq_5_answer":"","learn_faq_6_question":"","learn_faq_6_answer":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is an Alt Text for Website Images? - diib\u00ae - Learn<\/title>\n<meta name=\"description\" content=\"Learn about alt text for website images, including best practices for SEO optimization. Get insights on how to add alt text to images on WordPress, Wix, Magento, and Shopify.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marketing-optimization.diib.com\/learn\/alt-text-for-images\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is an Alt Text for Website Images? - diib\u00ae - Learn\" \/>\n<meta property=\"og:description\" content=\"Learn about alt text for website images, including best practices for SEO optimization. Get insights on how to add alt text to images on WordPress, Wix, Magento, and Shopify.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marketing-optimization.diib.com\/learn\/alt-text-for-images\/\" \/>\n<meta property=\"og:site_name\" content=\"diib\u00ae - Learn\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.linkedin.com\/in\/daniel-urmann-1927147b\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-13T07:32:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-23T15:14:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marketing-optimization.diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images-cover.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1400\" \/>\n\t<meta property=\"og:image:height\" content=\"934\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daniel Urmann\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is an Alt Text for Website Images? - diib\u00ae - Learn","description":"Learn about alt text for website images, including best practices for SEO optimization. Get insights on how to add alt text to images on WordPress, Wix, Magento, and Shopify.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/marketing-optimization.diib.com\/learn\/alt-text-for-images\/","og_locale":"en_US","og_type":"article","og_title":"What is an Alt Text for Website Images? - diib\u00ae - Learn","og_description":"Learn about alt text for website images, including best practices for SEO optimization. Get insights on how to add alt text to images on WordPress, Wix, Magento, and Shopify.","og_url":"https:\/\/marketing-optimization.diib.com\/learn\/alt-text-for-images\/","og_site_name":"diib\u00ae - Learn","article_author":"https:\/\/www.linkedin.com\/in\/daniel-urmann-1927147b\/","article_published_time":"2024-11-13T07:32:06+00:00","article_modified_time":"2026-09-23T15:14:17+00:00","og_image":[{"width":1400,"height":934,"url":"https:\/\/marketing-optimization.diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images-cover.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Daniel Urmann","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/marketing-optimization.diib.com\/learn\/#website","url":"https:\/\/marketing-optimization.diib.com\/learn\/","name":"diib\u00ae - Learn","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/marketing-optimization.diib.com\/learn\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/marketing-optimization.diib.com\/learn\/alt-text-for-images\/#primaryimage","inLanguage":"en-US","url":"https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images-cover.jpg","contentUrl":"https:\/\/diib.com\/learn\/wp-content\/uploads\/2020\/09\/What-Is-an-Alt-Text-for-Website-Images-cover.jpg","width":1400,"height":934,"caption":"What Is an Alt Text for Website Images"},{"@type":"WebPage","@id":"https:\/\/marketing-optimization.diib.com\/learn\/alt-text-for-images\/#webpage","url":"https:\/\/marketing-optimization.diib.com\/learn\/alt-text-for-images\/","name":"What is an Alt Text for Website Images? - diib\u00ae - Learn","isPartOf":{"@id":"https:\/\/marketing-optimization.diib.com\/learn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/marketing-optimization.diib.com\/learn\/alt-text-for-images\/#primaryimage"},"datePublished":"2024-11-13T07:32:06+00:00","dateModified":"2026-09-23T15:14:17+00:00","author":{"@id":"https:\/\/marketing-optimization.diib.com\/learn\/#\/schema\/person\/a595ca0fb3b2cc89407e678575ea2c57"},"description":"Learn about alt text for website images, including best practices for SEO optimization. Get insights on how to add alt text to images on WordPress, Wix, Magento, and Shopify.","breadcrumb":{"@id":"https:\/\/marketing-optimization.diib.com\/learn\/alt-text-for-images\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/marketing-optimization.diib.com\/learn\/alt-text-for-images\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/marketing-optimization.diib.com\/learn\/alt-text-for-images\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/diib.com\/learn\/"},{"@type":"ListItem","position":2,"name":"What is an Alt Text for Website Images?"}]},{"@type":"Person","@id":"https:\/\/marketing-optimization.diib.com\/learn\/#\/schema\/person\/a595ca0fb3b2cc89407e678575ea2c57","name":"Daniel Urmann","image":{"@type":"ImageObject","@id":"https:\/\/marketing-optimization.diib.com\/learn\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/7fda32967ede67ed7bd612042ad452f060bd6475b37fbc7c8fc17d425191d047?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7fda32967ede67ed7bd612042ad452f060bd6475b37fbc7c8fc17d425191d047?s=96&d=mm&r=g","caption":"Daniel Urmann"},"description":"Daniel Urmann is the co-founder of Diib.com. Over the past 17 years Daniel has helped thousands of business grow online through SEO, social media, and paid advertising. Today, Diib helps over 150,000 business globally grow online with their SaaS offerings. Daniel\u2019s interest include SMB analytics, big data, predictive analytics, enterprise and SMB search engine optimization (SEO), CRO optimization, social media advertising, A\/B testing, programatic and geo-targeting, PPC, and e-commerce. He holds a Master of Business Administration (MBA) focused in Finance and E-commerce from Cornell University \u2013 S.C. Johnson Graduate School of Management.","sameAs":["https:\/\/www.linkedin.com\/in\/daniel-urmann-1927147b\/","https:\/\/www.facebook.com\/daniel.urmann.5"],"url":"https:\/\/diib.com\/learn\/author\/dan\/"}]}},"_links":{"self":[{"href":"https:\/\/diib.com\/learn\/wp-json\/wp\/v2\/posts\/1336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/diib.com\/learn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/diib.com\/learn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/diib.com\/learn\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/diib.com\/learn\/wp-json\/wp\/v2\/comments?post=1336"}],"version-history":[{"count":6,"href":"https:\/\/diib.com\/learn\/wp-json\/wp\/v2\/posts\/1336\/revisions"}],"predecessor-version":[{"id":11217,"href":"https:\/\/diib.com\/learn\/wp-json\/wp\/v2\/posts\/1336\/revisions\/11217"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/diib.com\/learn\/wp-json\/wp\/v2\/media\/1346"}],"wp:attachment":[{"href":"https:\/\/diib.com\/learn\/wp-json\/wp\/v2\/media?parent=1336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/diib.com\/learn\/wp-json\/wp\/v2\/categories?post=1336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/diib.com\/learn\/wp-json\/wp\/v2\/tags?post=1336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}