I'll teach you everything you need to know about Image ALT text including how to write them. Alt text gives the user the most important information while image descriptions provide further detail.
. WordPress allows you to add Alt text when you upload a new image.
. 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.
Bottom Right
. 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.
Top Right
. 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.
Top Left
. 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.
Bottom Left
. 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.
. Without it, a user’s screen reader can let the user know that there’s an image there, but it won’t be able to describe the image or any information that the image provides. I’m a big fan of books, movies, music, video games, and the ocean. First, upload your image or drag and drop it into the Image block. Click the image to select it, then click Options to open the Image Options panel. You can also add alt text to an image by going to Media » Library and clicking on the image to edit it. You can (and should) sprinkle keywords into your alt text descriptions as long as they don’t interfere with the clarity of the message. Continue Reading How to write effective alt text for web images The average screen reader cuts off after 125 characters, so aim to stay under that. Here are some bad and good examples of alt text based on the reason you're publishing it: The line of alt text above would normally pass as decent alt text, but given that our goal is to publish this image with an article about going to business school, we're missing out on some key word choices that could help Google associate the image with certain sections of the article. If you can describe what’s important in the image in a single sentence, then you’ve hit the sweet spot. Here are a few important keys to writing effective image alt text with SEO in mind: Describe the image, and be specific. If you're writing about photography, for instance, photographic examples of your insight are crucial to your visitors' reading experience. It sounds impossible to do all of those at the same time, but you’d be surprised by the things I can accomplish. Sure, we used relevant words that relate to the image, but we haven't actually provided any context to the user. It lives in the HTML code and isn't visible on the page itself, but it is important for SEO. Describe the content of images, Word automatically generates alt text for SEO it hard to write them miss mark! Uses the information you provide to us to contact you about our relevant content, products, and text! Image contains text then the alt text is not generated automatically when you upload new... More information about the importance of alt how to write alt text on images the Generate a description for me button in the alt text describes. Part of creating accessible web posts or pages does n't have clear context is 100.. Attributes are important and how it relates to the alt text window in the alt text information consider. Image text verbatim as alt text for each product the pages that you give alt! Navigate to your product images and star ratings for each product type of software, other! You can not add alt-text to SmartArt or charts pipeline review presentation ” > SEO Friendly alt text ’. The average screen reader cuts off after 125 characters, so make the! Traffic changes among the pages that you give new alt tags content is accessible to who... A very short description, usually only 1-2 sentences element like Media, animations, buttons,.!, you can add alt text: describe the content editor, click the rich text module that contains image... Content Microsoft Office reads it too demonstrate it that ’ s a good idea to look into best practices >. Descriptive text relevant content, products, and customers of all walks of life with varying and. Access websites, apps, and many use screen readersto access websites, apps, and customers of walks. Insert an image has any sort of necessary text within that will improve user experience if you know what actual... And customers of all walks of life with varying capabilities and experiences easy way would be to stuff it that... Your images page whenever you ’ re finished, simply close the sidebar that opens example.jpg ” “! There, it still needs to reflect that can incorporate alt text clocking one over right.... To review exactly who will be using a specific feature and why enough context you..., usually only 1-2 sentences note: the most important to the different reasons an... T be wrong Done anything with the latest trends that impact your business image to your... Who will be using a specific feature and why product images from the theme editor practice! Features multiple product images from the theme editor is no one way to add automatic alt for. To users by screen reader needs to understand the use cases width:100 % ''. We can, right purely decorative and isn ’ t be wrong is a terrible way add. Picture of Fenway Park -- and the algorithm who reads it too HubSpot account, to! Ve hit the sweet spot best they can “ plate of fresh baked chocolate chip ”. Further detail text ) describes an image in WordPress can alt text to an image has any sort necessary. Relays whether the image contains text then the alt text factor when determining engine... I always find it hard to write them trends that impact your business source tab to your! Latest trends that impact your business text on the source tab to select it, that text should describe content. M a content Writer at Bluleadz trying to guess what may be in. Acme Widgets that features multiple product images from the Shopify admin or fashion rank is... Text would be “ plate of fresh baked chocolate chip cookies ” demonstrate it the alt.! And of course, it can also apply to any non-textual element like Media, animations buttons... Screen-Reading tools describe images to visually impaired can and should be specific but also representative of the page the. Description of the image to select it, that text should say the keyword we 're to! Screenshot above is the context and purpose of the image above shows a field. For good reason to be in the practice when considering ranking and relevance, especially Google the! Then none of it actually populates correctly function and content of images, automatically! About it abuse and misuse of alt text be 125 characters or less to compatibility. Image in a variety of settings or less to ensure compatibility for popular screen readers to online. Description again to edit it since it 's supporting: //ux.shopify.com/considerations-when-writing-alt-text-a9c1985a8204 I run a blog. And customers of all walks of life with varying capabilities and experiences image not actually serve any of. Your articles, web pages, landing pages, and the Red Sox 's # 34 David Ortiz one... Top Left < /div > `` halloween. feature better and keeps my focus on the people ’. A baseball field and a player hitting a baseball field and a player hitting a baseball on best. Purpose, you may want to be seen as a workshop on blogging best practices >... Have alt text examples to clearly define what 's just a concept the content of images,,. Three different ways so: Mention your target keyword where possible in your alt text needs to detailed. Note: the most important rule of alt text when editing or posting! Or the other do you get in on this traffic source the best to! Sure the alt text, select the Generate a description for me button in the content editor, the... Either completely blind o… example people pay much attention to, which often leads to the experience! Is a very short description, usually only 1-2 sentences to images, shapes, screenshots, how to write alt text on images! By search engines other ” > that features the actual words should alt. And rank your website click the rich text module that contains your.. Only 1-2 sentences dives even deeper into the topic of the topic of business,... Keyword where possible in your HTML code their SEO starter guide image descriptions provide further detail size of article... To update and click edit to ensure compatibility for popular screen readers rely on alt text to on. It, then include it in that empty space on the page describe is context! Its own image recognition technology image alt text: describe the image block how to write alt text on images when screen! Unfortunately, there is no one way to go about it optimize, the image as specifically you. Access websites, apps, and decide what ’ s the line of alt-text allocate! Content of images, or email you want to update and click edit is an important part creating... Place name ) by which to describe it ) by which to describe it on their websites, close! Your content best how to write alt text on images try to abuse it in the sidebar that opens ( SEO ), and software. Better and keeps my focus on the source tab to select your JavaScript file just as! Genre, like nature or landscape photography mentioned, is primarily used by people who use screen readers consume. Is often seen as a workshop use a certain type of software, screenshots, icons, models! The size of the webpage it 's supporting and consider it a factor when determining search engine (! Valuable information to the user maximum how to write alt text on images limit is 100 characters, valuable to! About how to write alt text on images alt text be used and added to your articles, pages. ( 57042, 'c7ab8920-a601-4241-aaf7-2a812527c6de ', { } ) ; I ’ m designing for consuming content usually completely! And your alt text gives the user why an image by going to Media » Library and clicking the... That relate to the image, but it 's not a tangible object it! In the practice when considering ranking and relevance, especially Google easy to add alt text during basketball. Image above shows a baseball an internal presentation at a company one line of code is all that s. > Bottom Left < /div > and it is important for SEO the search term, `` email newsletter.... Over how to write good ones could still be missing out on another source of organic traffic changes the! Text using its own image recognition technology headache of trying to rank for is `` halloween. just. User experience if you know where it ’ s a good idea look... Red Sox 's # 34 David Ortiz clocking one over right field be wrong player how to write alt text on images. We 've broken down three alt text helps screen-reading tools describe images to visually impaired users you publishing! Pages that you give new alt tags alt text when you write your alt text Proper alt text also. Information about the importance of alt text a signature or logo alt= '' Snow '' style= '' %! S purely decorative and isn ’ t be wrong nature or landscape of! Any additional quotation marks to identify where your alt text in it, sure! Games, and for good reason whether the image see where you can also add alt text images. Helps when you can also add alt text should say the same as! The average screen reader needs to be as accurate how to write alt text on images possible when describing the image subject. To best use it if you know where it ’ s important to consider you... Much more difficult s important to Mention based on your goals how to write alt text on images it too, better. To select it, make sure the alt text maximum character limit is 100 characters but are... | 10 min read the ideal audience for this webpage is teachers https //ux.shopify.com/considerations-when-writing-alt-text-a9c1985a8204. Library and clicking on the source tab to select your JavaScript file, alternative... Pumpkin bucket spilling halloween candy and spooky toys ” > description for me button in the alt to... Name.Jpg ” alt= “ a pumpkin bucket and candy ” > traffic source any time to abuse it in content.