How to Add Alt Tags to Images in WordPress: 3 Effective Methods

[ad_1]

Alt texts, also known as image alt tags, alt descriptions, or alt attributes, show up when an image doesn’t load to describe its content. Learning how to add alt tags to images in WordPress is important to improve search engine optimization (SEO) and web accessibility.

Google and other search engines use the image alt tag to understand your website’s images and how they relate to certain search terms. The better search engine bots can understand your site’s content, the higher the website will rank on search engine results pages.

Providing image alt tags is also a great way to make your website more accessible since screen readers can read the alt attribute.

This article will walk you through three methods on how to add alt tags to images on your WordPress site. We will also share tips on how to write good alt tags and show you how to check whether you have successfully added the alt text.

There are three main ways to edit alt text or add alt tags to images in WordPress – using the WordPress Media Library, the WordPress Gutenberg editor, and editing code.

Using WordPress Media Library

  1. Log in to your WordPress dashboard.
  2. Go to Media -> Library on the left navigation menu.
WordPress dashboard's Media and Library navigation menu options
  1. Once you’re in the Media Library, click on the image you want to add the alt tag to. Alternatively, upload a new image.
Media Library page on WordPress dashboard containing six different images
  1. Find the Alternative text field on the right-hand side of the Attachment details window. In this window, you can also edit other image attributes, such as the image title tag, caption, and description.
The Attachment details window on WordPress Media Library with the Alternative Text field highlighted
  1. Type in your desired alt text into the field.
The Attachment details window on WordPress Media Library with the Alternative Text field highlighted and filled in with the image alt text
  1. Click off the field once finished to let WordPress save the changes.

Using WordPress Gutenberg Editor

  1. Log in to your WordPress admin area and click on Pages on the navigation sidebar.
WordPress dashboard with the Pages option on the navigation menu highlighted
  1. On the Pages page, click the post or page containing the image to which you want to add the alt tag. This will open up the Gutenberg block editor.
Pages page on WordPress dashboard
  1. On the page editor, click on your desired post image. Then, click on the three dots from the menu bar above and select Show more settings.
Image block options on WordPress Gutenberg page editor with the "Show more settings" option highlighted
  1. Click on the Image settings on the right sidebar menu and find the Alt text (alternative text) field.
WordPress Gutenberg page editor's image block options sidebar menu with the alt text field highlighted
  1. Type the image alt text into the field and click the Update button to save the changes.
WordPress Gutenberg page editor with the Update button highlighted and the alt text field on the image block options sidebar menu filled in
  1. Click Publish to make the changes go live.

Editing Code

  1. Open the page containing the image to which you want to add the alt tag using the first two steps from the previous section.
  2. Once you’re on the Gutenberg editor, click on the three dots at the top right corner of the page and click Code editor.
WordPress Gutenberg page editor options with the code editor option highlighted
  1. Find the lines of HTML code representing your chosen image. The first line typically starts with <!– wp:image. If there are multiple images contained within one page, make sure these pieces of code don’t represent any other image.
A piece of the code representing a highlighted image
  1. Among those lines of code, find alt=””.
Image's empty alt text code
  1. Type in the missing alt text between the quotation marks.
Highlighted image's alt text code
  1. Click on the Update button to save the changes.
WordPress Gutenberg page editor's code editor with the Update button highlighted
  1. Click Publish to make the changes go live.

A great image alt tag shouldn’t overexplain or underexplain images. To accomplish this, follow these image alt text practices:

  • Only add alt text when necessary. Not all featured images need alt text. For example, you don’t need to add alternate text to decorative images or the ones already described in a nearby paragraph. Typically, alt text for a background image is also not necessary.
  • Be specific, direct, and concise. Provide an accurate image description but don’t go into too much detail. Get straight to the point.
  • Use content context. This is especially useful for describing stock images without recognizable image details, like well-known places or subjects. For example, if an image of a man looking at a computer screen was posted as part of a blog post on WordPress SEO tips, the alt text could be a “man researching WordPress SEO techniques.”
  • Keep the alt text under 125 characters. Many screen readers will only read alt text consisting of 125 characters, stopping abruptly once it exceeds the character limit. This may make it difficult for visually impaired people to understand the image.
  • Avoid using phrases like “a screenshot of” or “an image of.” This practice is redundant, as browsers and search engine bots can already identify it as an image file through the code.
  • Incorporate keywords wisely. Include the content’s target keywords in the alt text as naturally as possible to avoid keyword stuffing. One of the best strategies to slip keywords into your alt text is by using semantic keywords.

In addition to implementing these alt text practices, other image SEO techniques include using relevant images and optimizing pictures for your WordPress site. Some ways to optimize images are choosing the right format and compressing. The latter is especially important, as larger images take longer to load.

Speeding up your website also improves your website’s SEO. To maintain optimal website performance, make sure to choose a reliable web hosting provider and run website speed tests regularly.

Additionally, writing great image title attributes is an excellent way to improve user experience. Users can see these image titles or title tags in the form of tooltips – text labels that appear when you hover over an image.

How to Check Whether Alt Text Was Successfully Added

If you’re unsure whether you have successfully added alt text to your WordPress images, simply follow the steps below to check:

  1. Go to the live page of your WordPress website that features the images you want to check.
  2. Right-click on the page and click View page source.
  3. Press Ctrl + F on your keyboard to search the page source code. Mac users should press Command + F instead.
  4. Type alt=” into the search field that pops up. This will highlight the alt text of all images on the page.

Conclusion

Image alt attributes are useful for both site users and search engines. Adding alt tags to images is a good SEO technique since it helps search engines better understand your site’s content. Alt text also makes your website more accessible to those using a screen reader to navigate web pages.

There are three main methods of adding missing alt tags to images in WordPress – using the WordPress Media Library, the WordPress Gutenberg editor, or editing code. Remember that you don’t need alt text for all the images, especially the ones described in a nearby paragraph or decorative pictures.
When writing the alternative text attribute, be direct, specific, and concise. Come up with descriptive alt text to explain what the image represents. Try to keep the characters under 125, as it is the limit for many screen readers. Additionally, avoid keyword stuffing and using phrases like “an image of” or “a screenshot of.”

We hope this article has helped you understand how to add alt tags to images in WordPress. Good luck.

[ad_2]

Jaspreet Singh Ghuman

Jaspreet Singh Ghuman

Jassweb.com/

Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

GSTIN is 03EGRPS4248R1ZD.

Contact
Jassweb, Rai Chak, Punjab, India. 143518
Item added to cart.
0 items - 0.00