Wednesday , June 23 2021

What is it, how to write it and why it is important for SEO

If you spend time optimizing your blog or the content of your website, headers, subtitles and meta descriptions for search engines, the following image should alarm you:

Image pack on a Google search engine results page

Today, Google search engine results pages (SERPs) offer many Image results as they make results based on the text. The screenshot above is the first SERP produced by Google for the search term, "email newsletter design". Note how, in addition to the "Images" tab at the top, Google pulls a sizable pack of images clickable at the top of the main results page – before any organic text results are even visible.

Despite your best SEO efforts, you could still lose another source of organic traffic: images from your website. How do you get into this traffic source? Alt text image.

Click here to get everything you need to get the ranking of your website in the search.

Increasingly, the topics on which many companies and publishers create content require images to accompany their words. If you're writing about photography, for example, photographic examples of your vision are critical to your visitors' reading experience. When explaining how to use a certain type of software, the screens of that software are often the best way to prove it.

If you're creating content on a topic that requires visuals support, consider how your audience might prefer to find answers to their questions on that topic. In many cases, Google searchers do not want the classic search result hyperlinked blue: they want the image itself, embedded in your web page.

One of the most important things that the image's text can do for you is turning your images into search results with hyperlinks – giving your website another way to receive organic visitors.

Whether or not you run SEO for your business, optimizing the alternative text image of your website is your ticket to create a better user experience for your visitors, regardless of the way where they found you for the first time.

How to add alternative text to images

In most content management systems (CMS), clicking an image in the body of a blog post generates an image optimization or rich text form, where you can create and edit the alternative text of the image.

HubSpot users: Here's how this image optimization window appears in the CMS inside your HubSpot portal:

image-optimization-window "width =" 371 "style =" width: 371px; display block; margin-left: car; margin-right: car; "srcset =" 186w, https: //blog.hubspot .com / hs-fs / hubfs / image-optimization-window.png? t = 1538205472522 & width = 371 & name = image-optimization-window.png 371w, hubfs / image-optimization-window.png? t = 1538205472522 & width = 557 & name = image-optimization-window.png 557w, t = 1538205472522 & width = 742 & name = image-optimization-window.png 742w, -optimization- window.png 928w, 1113w "sizes =" (maximum width: 371 px) 100vw, 371 px

Your alt text is then automatically written into the HTML source code of the web page, where you can further modify the alternative text of the image if your CMS does not have an easily editable alt text window. Here's how the alt tag could look in the source code of an article:

Image alt text tag in the HTML of a blog post "width =" 600 "style =" width: 600px; "srcset =" HTML.png? T = 1538205472522 & width = 300 & name = image-alt-text-HTML.png 300w, = 600 & name = image-alt-text-HTML.png 600w, alt- text-HTML.png 900w, 1200w, 1500w, https: // blog .hubspot .com / hs-fs / hubfs / image-alt-text-HTML.png? t = 1538205472522 & width = 1800 & name = image-alt-text-HTML.png 1800w "sizes =" (maximum width: 600px) 100vw, 600px

The most important rule of alt text? Be descriptive and specific. Keep in mind, however, that this alternative text rule may lose its value if your alternative text does not even consider the context of the image. The alternative text may be missing the brand in three different ways. Consider the examples below.

3 Examples of alternative image text (good and bad)

1. Key word and details

Orange mural saying "send it" on a wall in the HubSpot Singapore office "width =" 500 "style =" width: 500px; display block; margin-left: car; margin-right: car; "srcset =" 250w, https: // blog / hs -fs / hubfs / hubspot-mural.jpeg? t = 1538205472522 & width = 500 & name = hubspot-mural.jpeg 500w, jpeg? t = 1538205472522 & width = 750 & name = hubspot-mural.jpeg 750w, 1000w, 1250w, / hubfs /hubspot-mural.jpeg?t=1538205472522&width=1500&name=hubspot-mural.jpeg 1500w "sizes =" (maximum width: 500px) 100vw, 500px

Bad Alt Text

alt = "Wall of the HubSpot office in Singapore murals at work arriving on the orange walls market ship it"

What's wrong with the alt text line above? Too many references to HubSpot. The use of alt text to insert keywords into fragmented sentences adds too much image to the image and not enough context. These keywords may be important to the publisher, but not to Google.

In fact, the alternative text above makes it difficult for Google to understand how the image relates to the rest of the web page or article in which it is published, preventing the image from ranking for the relative long tail keywords that have higher levels of interest behind them.

Good text

With the bad alternative text (above) in mind, the best alternative text for this image could be:

alt = "An orange mural that says 'send it' on a wall in HubSpot's Singapore office"

2. Detail and specificity

David Ortiz of the Boston Red Sox joke from home base at Fenway Park "width =" 500 "style =" width: 500px; display block; margin-left: car; margin-right: car; "srcset =" 250w, https: //blog.hubspot .com / hs-fs / hubfs / david-ortiz-fenway.jpg? t = 1538205472522 & width = 500 & name = david-ortiz-fenway.jpg 500w, / hubfs / david-ortiz-fenway.jpg? t = 1538205472522 & width = 750 & name = david-ortiz-fenway.jpg 750w, t = 1538205472522 & width = 1000 & name = david-ortiz-fenway.jpg 1000w, -ortiz- fenway.jpg 1250w, 1500w "sizes =" (max width: 500px) 100vw, 500px

Image of Winslow Townson

Bad Alt Text

alt = "Baseball player hitting a ball in a baseball field"

The alternative text line above technically follows the first alternative text rule – be it descriptive – but it is not descriptive in the right way. Yes, the image above shows a baseball field and a player hitting a baseball. But this is also a photo of Fenway Park – and the # 34 David Ortiz of the Red Sox scored one on the field to the right. These are important specifications that Google would need to properly index the image if it is, for example, a blog post on the Boston sports.

Good text

With the bad alternative text (above) in mind, the best alternative text for this image could be:

alt = "David Ortiz of the Boston Red Sox beaten from home at Fenway Park"

3. Specificity vs. Context

Marketing professor indicating a student's computer screen during a lesson on alt text "srcset =" 250 & name = women-on-computer.jpg 250w, 500w, https: // 750w, -fs / hubfs /women-on-computer.jpg?t=1538205472522&width=1000&name=women-on-computer.jpg 1000w, jpg? t = 1538205472522 & width = 1250 & name = women-on-computer.jpg 1250w, = women-on-computer.jpg 1500w "sizes =" (maximum width: 500px) 100vw, 500px

Image via UCLA

Both images above have a clear context that can help us to write a good alternative text: one comes from a HubSpot office and the other is Fenway Park. But what if your image does not have an official context (like the name of a place) with which to describe it?

This is where you will need to use the subject of the article or web page where you publish the image. Here are some good and bad examples of alternative text based on why you're publishing it:

For an article on how to attend the Business School

Bad Alt Text

alt = "Woman pointing to a person's computer screen"

The top alternative text line would normally pass as a decent alternative text, but since our goal is to publish this image with an article on going to the business school, we are missing out on some keyword choices that could help Google to associate the 39; image with some sections of the article.

Good text

With the bad alternative text (above) in mind, the best alternative text for this image could be:

alt = "Business school professor pointing to a student's computer screen"

For a Web page on Business School teacher training software

Bad Alt Text

alt = "Teacher pointing to a student's computer screen"

The alternative text line above is almost as descriptive and specific as the good alternative text of the previous example, so why is not it sufficient for a web page related to educational software? This example dives deeper into the business school subject and specifies that the ideal audience for this web page is teachers. Therefore, the alternative text of the image should reflect this.

Good text

With the bad alternative text (above) in mind, the best alternative text for this image could be:

alt = "Professor who uses an educational software to instruct a student of a female business school"

Best practices Alt Text

Ultimately, the alt text image must be specific but also representative of the topic of the Web page it supports. Do you get the idea up until now? Here are some important keys to writing an alternative text with effective image with SEO in mind:

  • Describe the image and be specific. Use both the object of the image and the context to guide you.
  • Keep your alt text less than 125 characters. Screen reading tools usually interrupt alt text reading at this point, interrupting the long alt text in difficult moments during the verbalization of this description for the visually impaired.
  • Do not start the alt text with "picture of …" or "Image of …" Jump to the right in the image description. The screen reading tools (and Google, if it is for this) will identify it as an 'image from the article's HTML source code.
  • Use your keywords, but sparingly. Enter only the keyword of the article if it is easily included in your alternative text. Otherwise, take into consideration semantic keywords or only the most important terms within a longtail keyword. For example, if the head keyword of your article is "how to generate leads", you could use "lead generation" in your alt text, since "how to" might be difficult to include in the alternative text of the image in natural way.
  • Do not cram your keyword into the alternative text of every single image. If the blog post contains a series of body images, include the keyword in at least one of those images. Identify the image that you think is most representative of your topic and assign your keyword. Stick to further aesthetic descriptions in the surrounding media.

So, where do you start when you develop the text for your blog posts and web pages? Consider running a basic check of your existing content to see where you can embed alternate text into previously unmarked images. Watch to see how your organic traffic changes between pages and new alt tags.

The more you optimize, the better your SEO strategy will be.


Source link

Leave a Reply

Your email address will not be published.