Automatically Add Link Title Attributes in WordPress
Back in the day before the Gutenberg editor and even before WordPress updated the classic editor you may remember that when inserting links in your posts you could define a title attribute for your links. WordPress decided to remove the ability to define your link title attributes because for the most part when adding links in post content the title attribute is not needed and can actually cause accessibility reasons.
The link title attribute creates that little tooltip you see when hovering over links on a website and it should only be used if you need to provide additional information about the link. There are some SEO “extremists” though that believe all links should have title attributes (I don’t believe so). But adding link title attributes to all links on your site can be a difficult task if done manually, especially on a large site with a lot of content.
What is the link title tag?
Before getting started with the code lets quickly review what a title tag is and what it’s used for. Personally, I resort to “MDN Web Docs” for this type of thing and in their documentation it states the following:
The title global attribute contains text representing advisory information related to the element it belongs to.
view source
Simply speaking, the title attribute is used to add extra information about an element which can be used by the browser, crawlers and assistive technology. This means that the title attribute should convey different information then what’s already available.
You should NOT use a link title to provide the same information over again to the user. This will cause a usability issue and annoy people, especially those using text to speech because they will hear the same text read to them twice.
Have you ever been to a site and hovered over a text link and seen the same exact text displayed in the tooltip? You didn’t need to see the same thing you had hovered on.
How to Title Attributes Automatically?
Now that you understand what the title attribute is and how it should be used lets dig into the code needed to automatically add title attributes to your site.
Warning: Before you go adding code to your site, keep in mind that I personally do NOT recommend automatically adding title attributes to your site links. This article was originally written many years ago when adding title attributes to all your links was recommended by all SEO excerpts. This is no longer the case and link title attributes should be manually added only as needed.
Below is a sample code you can use which will scan your post content to locate all links and add title attributes to any links that are missing them. It’s important to note that it’s only possible to automatically add title attributes to post content links. There is no way possible to automatically modify links added via a theme or plugins. Well, at least not in any way that will work for all themes and plugins. If you need to modify the way links work in a theme or plugin you will need to contact the product developer to see if there are hooks available.
The Code:
/**
* Parses the $content to automatically add link titles.
*
* @link https://www.wpexplorer.com/add-link-titles-wordpress/
*/
function wpex_auto_add_link_titles( $content ) {
if ( empty( $content ) || ! class_exists( 'DOMDocument' ) ) {
return $content;
}
$links = [];
// Create new dom object.
$dom = new DOMDocument;
// Load html into the object.
$dom->loadHTML( utf8_decode( $content ) );
// Discard white space.
$dom->preserveWhiteSpace = false;
// Loop through all content links.
foreach ( $dom->getElementsByTagName( 'a' ) as $link ) {
// If the title attribute is already defined no need to do anything.
if ( $link->getAttribute( 'title' ) ) {
continue;
}
// Get link text.
$link_text = $link->textContent;
// If there isn't any link text (most probably an image) lets try and get it from the first child.
if ( ! $link_text && ! empty( $link->firstChild ) && $link->firstChild->hasAttributes() ) {
// Get alt.
$alt = $link->firstChild->getAttribute( 'alt' );
// If no alt get image title.
$alt = $alt ?: $link->firstChild->getAttribute( 'title' );
// Clean up alt (remove dashses and underscores which are common in WP).
$alt = str_replace( '-', ' ', $alt );
$alt = str_replace( '_', ' ', $alt );
// Return cleaned up alt.
$link_text = $alt;
}
// Save links and link text in $links array.
if ( $link_text ) {
$links[$link_text] = $link->getAttribute( 'href' );
}
}
// Loop through links array and update post content to add link titles.
if ( ! empty( $links ) ) {
foreach ( $links as $text => $link ) {
if ( $link && $text ) {
$text = sanitize_text_field( $text );
$text = ucwords( $text );
$replace = $link .'" title="'. esc_attr( $text ) .'"';
$content = str_replace( $link .'"', $replace, $content );
}
}
}
return $content;
}
add_filter( 'the_content', 'wpex_auto_add_link_titles' );
You can also view the full code on the Github repository which has been coded as a plugin so you can download it and upload it to your site and activate instead of using a child theme or code snippets plugin.
Thank you so much.
It’s actually best not to use the title attribute – for accessibility reasons. Screen readers don’t read the information. It would be better to put descriptive text in the link text.
You are correct, but it’s probably best to do both 😉 For SEO it’s best to include the title attribute (unless things have changed and I am unaware).
Thanks for providing the login with valuable features included in it.
Hi AJ. I don’t know how to reach you with regard to the Tetris Free Masonry Tumblog WordPress Theme. Should I be worried it’s no longer available at WordPress.org? Is the Tetris Theme still supported and where can I go to check for updates? How regularly is it updated? I’m using it with two of my WordPress sites and with the way security has become a problem, just want to make sure the theme is still up to date. It’s one of the best themes I’ve used so far. I searched for premium, but looks as though it’s a free theme only.
The Tetris theme was never offered at WordPress.org. You may be looking at different theme as often times themes have the same names. The Tetris theme we offer at our site is created, managed and updated by us. Updates are provided as needed so there isn’t a specific time frame. Support isn’t included for free, but you can use our bug report function to report any bugs.
unfortunately this plugin produces an error with the new wordpress versions and does not work. title attributes are still not added. is there any chance you could update it? this is exactly what i am looking for for a while now.
Hi,
There was a small typo in the plugin preventing the titles from being added and I just uploaded a fix. I also have added automatic updates for the future 😉 So you will have to re-download the plugin now to get version 1.1.0, but in the future you will see the updates in your WP dashboard.
In terms of “errors” I didn’t notice any…do you have a screenshot?
Thank you for this nice plug-in. I installed WP Auto Post Link Title Attributes plugin on ruyabul.com website, the plugin works. But Turkish Characters shows incorrect. Site language Turkish. What can I do?
Thank you.
I wasn’t able to locate the issue on your live site, did you de-activate the plugin? If you want to share an example of a specific “sentence” I can try on my local installation to see what could be going on – thanks!
it replaces all the same title in the same link but I have different anchor text.
Sorry, but I’m not sure what you mean. It should grab the anchor text and set it as the title tag. But..title tags are basically useless these days for SEO and also are not a good idea for accessibility. I would say this plugin is essentially deprecated and wouldn’t recommend it.