The alternative text (Alt text) plays an important role in improving your website's SEO and image rankings. However, manually adding alt-text to every uploaded image in WordPress can be time-consuming, especially for sites that frequently upload large amounts of media.
Fortunately, Meta Box can make this process automatic. So, let’s explore how to add alt text for images effortlessly using the Meta Box custom field and action hook or Slim SEO.
Why Should We Use Action Hook to Automate Alt Text in WordPress?
Using an action hook to automatically add alt text is not only more convenient but also more effective. As a result, managing media alt text is optimized.
Benefits of Automatically Adding Alt Text
Each website usually has thousands of images. And it would be a nightmare to have to add alt text to uploaded images by hand. So, automating set alt text helps you save time and effort significantly.
Moreover, you can avoid missing filling in the alternative text for the uploaded image. Then, the result on Google Image Search is improved.
In this article, I’ll show you two ways to automatically add alt text to images. The simplest method is using the Slim SEO plugin — just install it, and Slim SEO will handle the rest for you. In the case that you want to use content from another source instead of the image file name, you can use an action hook. This approach requires some coding knowledge.
Benefits of Using Action Hook and Custom Fields
Many users are used to uploading images manually to WordPress. However, I suggest a more optimal method: using a custom field since it’s helpful to get the alt text effortlessly via the rwmb_{field_id}_after_save_field
action hook.
As you may know, custom fields are used for dynamic content. Therefore, you can update images easily without affecting the WordPress core.
rwmb_after_save_field
is a Meta Box action hook that runs after a field is saved. And, rwmb_{field_id}_after_save_field
is one of its variations. It applies to a field with a particular ID. Using this action, adding alt text will be automatic, dynamic, and flexible.
You can also specify where the image alt text should come from. It could be the image name, description, or anything else. In this article, I will use the image name as an example.
Using Action Hook to Add Image Alt Text Automatically
Before starting, you should install Meta Box Lite on your site to have a UI on the backend to visually create a custom field for uploading images. It’s free.
As the method I mentioned above, we’ll use a custom field for uploading images, then use the rwmb_{field_id}_after_save_field
action hook to set alt text for them.
Create a Custom Field to Upload Images
Right on the admin dashboard of Meta Box, click on the Create a field group quick button.
Besides custom fields to store extra information about the post type or page, add a new field to upload the image in the backend. Meta Box provides two field types for it: Single Image (to add an image) and Image Advanced (to add many images). For demonstration purposes, I add the Single Image field.
You should remember the field ID. It’ll be used to set the alt text in the next step.
Add Action Hook to the Themes File
Go to your themes file and add this code:
add_action( 'rwmb_{field_id}_after_save_field', function ( $new, $old, $object_id ) { $alt_text = get_the_title( $object_id ); update_post_meta( $object_id, '_wp_attachment_image_alt', $alt_text ); }, 10, 3 );
In there:
rwmb_{field_id}_after_save_field
: is a Meta Box action hook that triggers after a specific field is saved. It runs only when that field is updated.$new
,$old
,$object_id
: are the parameters of this action.
$alt_text = get_the_title( $object_id ): is to retrieves the title of the post or attachment with the given ID, then assign to thealt_text
variable.update_post_meta( $object_id, '_wp_attachment_image_alt', $alt_text )
: is to get data from thealt_text
variable to assign to the alt text image throughwp_attachment_image_alt
. It is the meta key used by WordPress to store alt text for images.
That’s done.
In the case that you use the Image Advanced field in the previous step, the code will be like this:
add_action( 'rwmb_{field_id}_after_save_field', function ( $new, $old, $object_id ) { foreach ( $object_id as $image_id ) { $alt_text = get_the_title( $image_id ); update_post_meta( $image_id, '_wp_attachment_image_alt', $alt_text ); } }, 10, 3 );
There is only one difference here: You should retrieve each image and its title via the image_id
instead of the object_id
.
Upload Image
Go to the post editor, you can see the field you created. Click on the + Add Media button to upload an image.
The alt text is blank now. You don’t need to type it as previously.
After displaying the image on the frontend using MB Views or any page builders, you can see the alt text is created automatically.
Using Slim SEO to Add Alt Text Automatically
If you're looking for a simpler solution without writing any code, Slim SEO is one of the plugins that can help you add the alt text automatically. This feature is available in the free version of the plugin.
Slim SEO checks if any image is missing alt text and fills it in using the image title - no manual work needed.
Last Words
We hope that this tip will be useful for saving your time and effort while having a high ranking of SEO.
You can also refer to tips on license key management. It’s helpful when you have many licenses on your site.
If you have any questions or suggestions, feel free to leave them in the comments. Thanks for reading!