. Subscribe to our blog & get notified on the latest trends that impact your business. They’ll still receive full context of the page in its entirety. Here are tips on how to write it well. Let's say the keyword we're trying to rank for is "Halloween." How to Add Alt Text to an Image. hbspt.cta._relativeUrls=true;hbspt.cta.load(57042, 'c7ab8920-a601-4241-aaf7-2a812527c6de', {}); I’m a Content Writer at Bluleadz. Premium plans, Connect your favorite apps to HubSpot. Simply explain what the image shows using your keywords as the primary descriptor and additional text as needed. Alt text (alternative text), also known as \"alt attributes\", “alt descriptions\", or technically incorrectly as \"alt tags,” are Those are the few instances when it’s actually okay to leave your alt text empty, like this: The user will assume that it’s nothing of relevance sitting there if it doesn’t load properly. If you can minimize the number of hurdles they have to leap over to engage with you and your brand, you should. Add alt text to an image in a rich text module. Search engines also index alt text information and consider it a factor when determining search engine ratings. With the bad alt text (above) in mind, better alt text for this image might be: The line of alt text above technically follows the first rule of alt text -- be descriptive -- but it's not being descriptive in the right way. And of course, alt text should be added when creating content Microsoft Office. It’s not about one extreme or the other. Writing effective ALT text isn't too difficult. This is a terrible way to go about it. Alt text helps them consider what’s in the image and how it relates to the text around it. Continue Reading How to write effective alt text for web images Any additional quotation marks will cause the HTML to break. It would suck to do all of that work and then none of it actually populates correctly. You cannot add alt-text to SmartArt or charts. 2. If the content that the image conveys is presented within text in the surrounding context of the image, then an empty alt attribute may suffice. In the content editor, click the rich text module that contains your image. Therefore, the image's alt text needs to reflect that. So where’s the line of being too descriptive and falling out of context? Write out text in image. Once you’ve uploaded a … This text helps screen-reading tools describe images to visually impaired readers and allows search engines to better crawl and rank your website. This is pretty common in stock images, where you're allowed to interpret it however you'd like. Simply describe the function of the button, like “submit,” “search.” or “apply now.”, We said earlier that you can leave design image tags empty, but you can also be explicitly clear about it by simply marking the alt text as “decorative image.”. Those are the few instances when it’s actually okay to leave your alt text empty, like this: The user will assume that it’s nothing of relevance sitting there if it doesn’t load properly. These are important specifics Google would need to properly index the image if it's on, say, a blog post about Boston sports. Related links hbspt.cta._relativeUrls=true;hbspt.cta.load(53, 'b86a9513-efae-441c-8b14-17ab402495e8', {}); Originally published Sep 28, 2018 7:00:00 AM, updated September 23 2020, Image Alt Text: What It Is, How to Write It, and Why It Matters to SEO, How to Successfully Migrate a Website Without Harming SEO [Checklist], How to Prevent Redirect Chains from Destroying Your SEO, The Simplified Guide to Google's RankBrain Algorithm. We'll go over how to write alt text for two different use cases. Type your description of the image and tap Done. Be descriptive and specific. It can help to see what's right and what's wrong when deconstructing what you need to do to master something as important as alt text. We know to be specific and contextual. It’s not uncommon to have an image act as a button on a page. You want to be detailed, but you want to be relevant. Provide alternative text, or alt text, when a screen reader needs to understand the message provided by the images on a page. Try to use different alt text for each image, even if the images are similar. There’s all sorts of reasons as to why an image wouldn’t appear: Alt text lets the user know what value the image contributes to the messaging on the page. And they appear to be in the middle of a game, discussing plays. Images provide context to your articles, web pages, and other campaigns, but what provides them context? This is the process of optimizing all your images so that search engines understand them (as well as to help people with accessibility issues understand what the images … Lay out all the possibilities, and decide what’s most important to mention based on your goals. So: Mention your target keyword where possible in your alt text. Keep in mind, however, that this alt text rule can lose its value if your alt text doesn't also consider the image's context. But this is also a picture of Fenway Park -- and the Red Sox's #34 David Ortiz clocking one over right field. Alternative text, also known as alt text, allows you to add text descriptions to photos, diagrams, and illustrations. Alt text (alternative text) describes an image on a web page. This is better than what we were trying for before, but it's still not quite there. When you write your ALT text, think about the person who needs it and the algorithm who reads it too. Always, always, always test a page whenever you’ve done anything with the HTML code. Your raw HTML uses quotation marks to identify where your alt text begins and ends. https://www.wptasty.com/blog/how-to-craft-alt-text-for-images This example dives even deeper into the topic of business school, and specifies that the ideal audience for this webpage is teachers. . Those keywords might be important to the publisher, but not to Google. We're committed to your privacy. Alt text, as mentioned, is just text that describes what’s going on in the image. Going back to the different reasons why an image may fail to load or appear, sometimes technology just fails us. This isn’t always necessary, so make sure you take a beat to consider relevance and context. Then, add your text into the alt text window in the sidebar that opens. For other images, though, the field may be blank if no one has crafted alt text … Here are tips on how to write it well. So, the easy way would be to stuff it in to the alt text as best we can, right? The actual image looks like this: Clearly, “alt text example 1” isn’t exactly an all comprehensive description of everything happening in the image. The screenshot above is the first SERP Google produces for the search term, "email newsletter design." In most cases, an image will only have a function if it is contained within a link (or is an image map hotspot or a button). Alt text, or alternative text, is primarily used by people who use screen readersto access websites, apps, and other software. Bloggers and webmasters can add alt text to images on their websites. Use focus keywords. It looks absolutely ridiculous to have a thought interrupted by an image in the middle of a paragraph. The line of alt text above is almost as descriptive and specific as the good alt text from the previous example, so why doesn't it suffice for a webpage about education software? Alt text tells people what is in an image, such as text or basic essential details. SEO best practices are what most people associate with alt text, and for good reason. Use proper spelling, capitalization, spacing, and grammar too- if someone is pinning the image to Pinterest, the alt text is what will display as the image description. Despite your best SEO efforts, you could still be missing out on another source of organic traffic: your website's images. You may unsubscribe from these communications at any time. D'Angelo Russell, who both play for the Golden State Warriors. Alt text can miss the mark in three different ways. You’ll have readers, subscribers, and customers of all walks of life with varying capabilities and experiences. Millions of peopleare visually-impaired, and many use screen readers to consume online content. Watch to see how your organic traffic changes among the pages that you give new alt tags. The recommended alt-text length is about 125 characters. Click X to close the Image Options panel. There are a few dos and don’ts when writing alt text for SEO. The user doesn’t necessarily need to know every line of text in the image since, in reality, that’s not what’s important. If you have any serving this purpose, you’ll still want to give it an alt tag. It looks unattractive and most search engines will penalize you for it. Hover over the page, post, or email you want to update and click Edit. If an image fails to load, alt text will display in its place. Note: The ALT text maximum character limit is 100 characters. I… On the content tab, enter your Alt text in the Alt text field at the bottom. If you spend time optimizing your blog or website's content, headers, subheaders, and meta descriptions for search engines, the following image should alarm you: Today, Google's search engine results pages (SERPs) deliver just as many image results as they do text-based results. This nets you the best of both worlds with clear textual descriptions of images for visitors who can’t view them, while also getting your site some of that sweet, sweet SEO juice. It’s even easier if you’re using software, like HubSpot’s CMS, that allows you to click on an image to optimize it or access its rich text module. If the image features a product, then you can include the product name into the tag for those who can’t see the image. A purpose that not many people pay much attention to, which often leads to the abuse and misuse of alt text. . You want to be as accurate as possible when describing the image. Use proper spelling, capitalization, spacing, and grammar too- if someone is pinning the image to Pinterest, the alt text is what will display as the image description. But not to fret. Free and premium plans, Customer service software. Your alt text would be something like this: “Beautiful landscape photography of a lake with mountain view.”. Alternative text allows Google to place images in search results as well as aid in assisting visually impaired users. Twitter users can add alt text from the settings menu. For those who are vision impaired, alt text is critical while consuming content. Remember when we said you should be specific where you can? . When deciding what to fill in there, it’s important to consider what you’re looking to communicate to the user. On the image, tap the +Alt button to insert descriptive text. If you’re left to your own devices working in HTML, then do a quick search of your image’s file name. For example, a logo for Acme Widgets that features the actual words should have alt text that includes those words. When you’re finished, simply close the sidebar and your alt text will save with the image. . Alternative text (alt text) is an HTML code element which describes both the content and function of an image on a webpage; it translates non-textual elements into text. See all integrations. Accessibility is important. In many cases, Google searchers don't want the classic blue, hyperlinked search result -- they want the image itself, embedded inside your webpage. Click on the Source tab to select your JavaScript file. (The limit is 1000 characters.) Usually, they skip over these images, or worse, read out long and unhelpful image filenames. This is a lot more specific and lets the user know exactly what's going on, instead of a general "two players" situation. There’s rules to everything across the internet, and if you’re not up to speed on what’s happening, then you’re written off as a waste of digital space. If you’re reading this article, I’m guessing you have at least some awareness of what alt text is for and how it’s used. For example when I write about layered haircut i add different images but i vary my alt text like layered cut for long hair , short layered cut etc. Alt text can and should be used in a variety of settings. Micah Lally | An idea. It’s a simple feature, but to those who can’t see what you’ve thrown up, it can make all the difference in understanding the page. Alt text, also known as alternative text or alt tag, is a short description of the image that displays when a user can’t access the image. If your image has any sort of necessary text within that will improve user experience, then include it in the alt text. In fact, you’re actually ruining the user experience if you try to abuse it in that way. Write good Alt Text to describe images | Digital Accessibility First, let’s cover the dos: Mention Target Keywords. Even though you’re looking to keep it short and sweet, it still needs to be contextual. Unfortunately, there is no one way to add alternative text. This is where you'll need to use the topic of the article or webpage to which you're publishing the image. You can replace automatically generated alternative text with your own description of a photo. Determining if the image presents content and what that content is can be much more difficult. Free and premium plans, Content management system software. When explaining how to use a certain type of software, screenshots of that software are often the best way to demonstrate it. It provides more information about the function and content of images. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. If your image contains information or represents something meaningful, determine the message the image conveys and write a short, concise text … Marketing automation software. If the image contains text then the ALT text should simply repeat this text, word-for-word. To learn more about alt text and theme accessibility, see Accessibility for themes. The image is just an example of alt text in action. Consider the examples below. Plugging in that short snippet of code is all that’s necessary to implement it into your images. HubSpot users: Here's what this image optimization window looks like in the CMS inside your HubSpot portal: Your alt text is then automatically written into the webpage's HTML source code, where you can edit the image's alt text further if your CMS doesn't have an easily editable alt text window. In fact, the alt text above makes it hard for Google to understand how the image relates to the rest of the webpage or article it's published on, preventing the image from ranking for the related longtail keywords that have higher levels of interest behind them. Here are a few important keys to writing effective image alt text with SEO in mind: So, where do you start when developing alt text for your blog posts and webpages? When you view the source code of your page, you can identify where the image is by looking for a line of code similar to this one: Do you see where it says “alt="alt-text-example-1.jpg"”? Alt text is often seen as a tool to improve search engine optimization (SEO), and they wouldn’t be wrong. What's wrong with the line of alt text above? This helps me understand the use cases of the feature better and keeps my focus on the people I’m designing for. In most content management systems (CMSs), clicking on an image in the body of a blog post produces an image optimization or rich text module, where you can create and change the image's alt text. Some browsers only create one line of alt-text and allocate the size of the image to the length of the one line. Proper alt text in image tags is an important part of creating accessible web posts or pages. You’ll have a target keyword in mind if you want to write SEO friendly alt text for your images. How To Add Alt Text To An Image In WordPress. . To Add Alt-Text to HTML Source Code Directly In Chrome: Load a page from your local file system where the image resides and open Developer Tools from the “Tools” menu in the Chrome ribbon. Adding Alt Text to Objects in Word. You can also add alt text to your product images from the Shopify admin. Stay up to date with the latest marketing, sales, and service tips and news. We've broken down three alt text examples to clearly define what's good and what's just plain ugly. When you learn how alt text populates on a web page, you may get the idea to use it as a replacement for text in sentences. This is a very short description, usually only 1-2 sentences. You can add alt text to images, shapes, screenshots, icons, 3D models, and even text boxes. Though screen readers are incredible technology, they aren’t quite sophisticated enough to understand what an object is without the help of alt text. It’s really easy to add alt text once you know where it’s meant to live in your HTML code. Search engines place a lot of value in the practice when considering ranking and relevance, especially Google. Check your software’s documentation or help files for information on how to add alt text to your images from within that platform.In Microsoft Word, for example, right-click on the image and choose Add Alt Text. Again, don’t do it. If you want to make a strong connection with your audience and the search engine results, make sure you make a connection between the text in your content, the image, and the alt text. Stay up to date with the latest marketing, sales, and service tips. Get the idea so far? Different software platforms do it in different ways. For many kinds of images, Word automatically generates alt text using its own image recognition technology. At times, an image not actually serve any sort of purpose. Transforming the way companies market, sell, and service their customers, 20 Competitor Analysis Tools to Help Grow Your Brand (2021 Edition), How to Create Static Designs and Animations Using Adobe XD and CodePen, How User-Centered Design Will Shape Businesses in 2021, How to Write the Best Alt Text for Your Images (w/ Examples). Proper alt text in image tags is an important part of creating accessible web posts or pages. The present alt text saves them the headache of trying to guess what may be sitting in that empty space on the page. Written by Braden Becker Consider performing a basic audit of your existing content to see where you can incorporate alt text into previously untagged pictures. The more images you optimize, the better your SEO strategy will be moving forward. . https://ux.shopify.com/considerations-when-writing-alt-text-a9c1985a8204 Tap the description again to edit it prior to posting the Tweet. In that case, you may want to highlight a certain genre, like nature or landscape photography. Whether or not you perform SEO for your business, optimizing your website's image alt text is your ticket to creating a better user experience for your visitors, no matter how they first found you. With certain images you're able to build your own context and write whatever story suits your content best. I always find it hard to write different alt text for my article .I normally include 5-6 images in one post. Write Good Alt Text Both images above have clear context that can help us write good alt text -- one is from a HubSpot office, and the other is Fenway Park. People who use screen readers are usually either completely blind o… But what if your image doesn't have official context (like a place name) by which to describe it? Whenever you aim to optimize anything, it’s a good idea to look into best practices. . It is strongly recommended that alt text be 125 characters or less to ensure compatibility for popular screen readers. It doesn’t take all that long to look at a quick preview of the page once you’ve finished adding all your alt text. Here are 8 tips on how to write ALT text: Describe the image as specifically as you can. But it serves a purpose beyond that. Think about how a subscriber would hear your email if he/she is using a screen reader – will the user want to hear the same image alt text over and over? Here are 8 tips on how to write ALT text: But people are still going to try and process your content the best they can. Now let's interpret it as an internal presentation at a company. If you're creating content on a topic that requires the support of visuals, consider how your audience might prefer to find answers to their questions on that topic. If you want to add automatic alt text, select the Generate a description for me button in the Alt Text pane. It also relays whether the image is simply decorative or not. . But what it does describe is the context and purpose of the image. If they need access to the information in that image in order to better understand the rest of the content, then make sure you supply it to them, with or without a solid internet connection. It’s purely decorative and isn’t communicating any important information. . Is it decorative? You can add other words, but the alt text should say the same thing as the image. These work by converting on-screen content, including images, to audio. And they appear to be in the middle of a game, discussing plays. Using alt text to stuff keywords into fragmented sentences adds too much fluff to the image and not enough context. The secret to great alt text is knowing that the marketing and accessibility methods to coming up with alt text aren’t mutually exclusive. Images without alt text cause problems for screen readers because there’s no way to communicate the content of the image to the user. ALT text should be related to your images. Free and premium plans, Sales CRM software. Too many references to HubSpot. November 18, 2019 | Also called "alt tags" and "alt descriptions," alt text is the written copy that appears in place of an image on a webpage if the image fails to load on a user's screen.