Are you confused about the difference between image alt text and image titles in WordPress? Do you want to know which one has a bigger impact on your site‘s SEO and accessibility? You‘re not alone! Many WordPress users mix them up or aren‘t sure how to use them effectively.
In this in-depth guide, we‘ll break down everything you need to know about these two image attributes. You‘ll learn:
- What the alt text and title attributes are and how they work in HTML
- Why alt text is crucial for both SEO and accessibility, backed by data
- How to properly add alt text and titles to images in WordPress (with screenshots)
- Best practices, examples, and common mistakes to avoid
- How to streamline the process with the All in One SEO plugin
By the end of this post, you‘ll be an expert on optimizing your images‘ alt text and titles for maximum SEO benefit and improved user experience. Let‘s get started!
Understanding Image Alt Text and Title Attributes in HTML
Before we dive into how WordPress handles alt text and titles, it‘s important to understand what these attributes are and how they function at the code level.
The Alt Attribute
The alt attribute, short for "alternative text", is an HTML attribute that you can add to the <img> tag to provide a text description of an image. Here‘s an example:
<img src="image.jpg" alt="A descriptive phrase summarizing the image" />The alt text serves a few key purposes:
- It displays in place of the image if it fails to load.
- Screen readers announce the alt text to visually impaired users, making the image content accessible.
- Search engines use the alt text to understand what the image depicts, which helps it rank in image search results.
Specifying alt text for images is a part of the W3C‘s Web Content Accessibility Guidelines (WCAG). To conform with WCAG, all non-decorative images should have alt text that serves the same purpose as the image itself.
The Title Attribute
The title attribute is another optional HTML attribute you can add to the <img> tag. It looks like this:
<img src="image.jpg" alt="..." title="Additional information about the image" />When a user hovers their mouse cursor over an image with a title attribute, the title text displays as a small tooltip. This provides a way to convey additional information about the image to sighted users.
However, the title attribute is less important than alt text for a few key reasons:
- It is not used by screen readers, so it doesn‘t improve accessibility
- It doesn‘t directly impact SEO since search engines rely primarily on the alt text
- Not all devices have a hover state (e.g. mobile) so not all users will see titles
For these reasons, the W3C recommends using the title attribute sparingly and avoiding using it for information that all users should be able to access.
Why Alt Text Matters for SEO and Accessibility
Now that you understand what alt text is, let‘s explore why it‘s so crucial to add to your WordPress images.
Alt Text and Accessibility
First and foremost, alt text makes your images accessible to visually impaired and blind users who rely on screen readers to navigate the web. Without alt text, the 2.2 billion visually impaired people in the world would miss out on important information conveyed through images.
When a screen reader encounters an image with alt text, it reads the text aloud to describe what the image shows. This ensures users get the full context of the page. If an image doesn‘t have alt text, the screen reader will either skip over it or read the file name, which is rarely useful.
According to WebAIM, missing alt text is one of the most common accessibility errors, found on 66% of homepages. This means 2/3 of websites are failing to make their images inclusive. By adding descriptive alt text to your WordPress images, you can welcome all visitors, regardless of their visual abilities.
Alt Text and SEO
In addition to accessibility, alt text plays an important role in image SEO. Since search engine bots can‘t "see" images like humans can, they rely on the alt text to understand what the image content is about. This helps them index the image accurately and surface it for relevant searches.
Google has stated that alt text is the most important factor in image SEO:
"Alt text is extremely valuable for Google Images — if you want your images to rank there. Even if you use lazy-loading, you know which image will be loaded, so get that information in there as early as possible & test what it renders as."
John Mueller, Google Search Advocate
When you include your target keywords in the image alt text, it increases the chances of the image ranking for those terms. In fact, Moz found a direct correlation between using keywords in alt text and image rankings:
"Using keywords in alt text had the highest correlation with image rankings out of all the factors we looked at."
Moz
However, that doesn‘t mean you should stuff your alt text full of keywords. The primary purpose is still to describe the image for screen reader users. Only include keywords if they naturally fit into a concise description.
Let‘s look at a real-world example. Imagine you have a food blog and your target keyword is "blueberry muffins". Here‘s an image and alt text you might use:
<img src="blueberry-muffins.jpg" alt="A dozen freshly baked blueberry muffins cooling on a wire rack" />The target keyword "blueberry muffins" fits organically into a descriptive alt text phrase. This gives the image a good chance of ranking for that keyword in Google Image Search without compromising accessibility.
How to Add Alt Text and Titles to WordPress Images
Convinced of the importance of image alt text? Great! Let‘s walk through how to actually add alt text and titles to your images in WordPress.
The process is slightly different depending on whether you‘re using the new WordPress block editor (Gutenberg) or the classic TinyMCE editor. We‘ll cover both below.
Adding Alt Text in the Block Editor
If you‘re using WordPress 5.0 or later, you‘re probably familiar with the block editor interface. To add alt text to an image block:
- Insert a new Image block or select an existing one
- In the Block settings panel on the right, look for the "Alt text (alternative text)" field
- Enter your alt text in this field
You can also add or edit the alt text by clicking on the image itself and selecting the "Edit" button. This will open the Image Settings popup where you can modify the alt text.
Adding Alt Text in the Classic Editor
If you‘re still using the classic WordPress editor, the process is a bit different but still straightforward. To add alt text:
- Click the "Add Media" button to upload a new image or select an existing one from the Media Library
- After inserting the image into the post, click on it to reveal the toolbar above
- Click the pencil icon to edit the image
- In the Image Details window, enter your alt text in the "Alternative Text" field
- Click "Update" to save your changes
Adding Titles in WordPress
The process for adding title attributes is very similar to alt text. In the block editor, you can add a title in the "Advanced" section of the Block settings panel:
And in the classic editor, look for the "Image Title Attribute" field in the same Image Details window as the alt text:
Remember, title attributes are optional and less important than alt text. Only add them if you have additional information that doesn‘t fit in the alt text and would enrich the user experience on hover.
How to Add Alt Text and Titles in the Media Library
What about images you‘ve already uploaded to your WordPress site? You can edit the alt text and title of any image by going to Media > Library and selecting the image.
In the Attachment Details screen, simply edit the "Alt Text" and "Title" fields and click "Update":
Note that this will only affect new instances of the image inserted after making your edits. To update existing images in your content, you‘ll need to use the block or classic editor.
Image Alt Text Best Practices and Examples
Writing effective alt text is both an art and a science. Here are some best practices to follow:
- Be descriptive and specific. The alt text should convey the same information as the image. Describe any important details that aren‘t obvious from the surrounding context.
- Keep it concise. Screen readers tend to cut off alt text around 125 characters, so aim to stay within that limit. If you need a longer description, use the
longdescattribute. - Don‘t include "Image of" or "Picture of". It‘s already clear from the context that this is an image, so those phrases are redundant.
- Use keywords sparingly. Include your target SEO keyword in the alt text if it fits naturally, but avoid keyword stuffing. Stick to 1-2 instances.
- Provide context. If the image is a chart, graph, or illustration that needs additional context to understand, use the surrounding text or caption to provide that information.
- Leave decorative images blank. If an image is purely decorative and doesn‘t convey any information, give it a null alt attribute (
alt=""). This tells screen readers to skip over it.
Here are some examples of good alt text based on different image types:
- Blog post featured image:
<img alt="A close-up view of a bumblebee pollinating a sunflower against a blue sky" /> - Headshot of a person:
<img alt="Smiling headshot of Jane Smith, the company‘s CEO" /> - Product photo:
<img alt="Bluetooth wireless earbuds with charging case in black" /> - Decorative icon or border:
<img alt="" />
Automating Image Alt Text and Titles in WordPress With All in One SEO
If you want to save time and ensure consistency, the All in One SEO plugin can automatically generate SEO-friendly alt text and titles for you based on a template.
The Pro version of AIOSEO includes an Image SEO feature that lets you set up alt text and title attribute templates using dynamic variables. To set this up:
- Go to Search Appearance > Image SEO in the AIOSEO settings
- In the "Alt Tag" and "Title" tabs, configure your desired templates using the available variables and settings
- Toggle the "Autogenerate on Upload" switch on for each attribute you want to automate
Some popular variables to use in the alt text template are [image_title] (use the original image title), [post_title] (use the title of the post/page), and [site_title] (include the name of your site).
You can preview how the generated alt text will look in the "Example" section. Play around with different template configurations until you find one that strikes the right balance of including relevant keywords while still being descriptive for accessibility.
The plugin will automatically apply your template to generate the alt text and/or title whenever you upload a new image to WordPress. It will also retroactively bulk update the attributes for images that are already in your Media Library. This ensures your image SEO is optimized across your entire site without any manual work.
Note that AIOSEO won‘t overwrite alt text or titles that you‘ve manually entered. The autogenerated values only apply to images that don‘t already have an alt or title attribute.
Frequently Asked Questions About Alt Text and Titles
Before we wrap up, let‘s address some common questions about image alt text and titles in WordPress.
What‘s the character limit for alt text?
There isn‘t a hard character limit, but best practice is to keep alt text under 125 characters since that‘s around where most screen readers cut off. If you need a longer description, use the longdesc attribute or include it in the surround text/caption.
Do I need to add alt text to every image?
For best accessibility and SEO, yes. Every non-decorative image should have descriptive alt text that conveys the same information a sighted user would glean from the image. The only exception is images that are purely decorative, like borders or icons. Those should have a null (empty) alt attribute.
Can I just stuff keywords into my alt text?
No, definitely avoid keyword stuffing your alt text. While including your target keyword is good for SEO, the primary purpose of alt text is to describe the image for screen reader users. Stuffing in keywords makes the alt text less useful and could even get you penalized by search engines. Aim to work in keywords naturally where relevant.
What if my image is described in the caption or surrounding text?
If the image is adequately described in the caption or surrounding paragraph, you can keep the alt text short to avoid duplication. Something like "Diagram of [concept]" for a flowchart or "Screenshot of [feature]" for a software UI image would suffice since the important details are covered in the adjacent text.
Should I use the same text for the alt and title attributes?
No, the alt text and title should convey different information. The alt text describes what‘s in the image itself while the title can add supplementary information that isn‘t apparent from the image alone. For example, a title attribute on a product photo could be used to convey the price, brand, or special offers.
Do I need to add alt text to background images?
No, background images applied via CSS instead of an <img> tag in HTML don‘t require alt text. The alt attribute is only valid on <img>, <area>, and <input type="image"> elements.
What should I put for the alt text if the image is described in the filename?
The image filename isn‘t a suitable replacement for alt text, even if it‘s descriptive. Many screen reader users navigate by listening to a list of the alt text on a page, so a filename like "red-shoes.jpg" wouldn‘t be very helpful compared to alt text like "A pair of red canvas sneakers with white rubber soles".
Conclusion
Phew, that was a lot to cover! But you‘re now well-equipped to craft stellar alt text and title attributes for all your WordPress images. Here‘s a quick recap of the key takeaways:
- Alt text describes an image and is used for accessibility and SEO
- Titles are optional for supplementary information on hover
- WordPress makes it easy to add alt text and titles in the block editor, classic editor, or Media Library
- Effective alt text is descriptive, concise, and uses keywords sparingly
- All in One SEO can generate optimized image attributes automatically
The most important thing is to prioritize adding alt text to all your images to create an inclusive experience for everyone. Treat alt text as an integral part of the image itself, not an afterthought.
By taking the time to implement these image SEO best practices, you‘ll make your WordPress site more accessible and SEO-friendly. Your visitors and search rankings will thank you! If you have any lingering questions, let me know in the comments.
