I have been doing quite a few changes to Crunchify site recently related to Search Engine Optimization (SEO) and better site loading prospective.
While working with my client last week, we discover that Bing SEO Report showed quite a few SEO suggestions.
If you are wondering what all types of suggestions Bing is giving then look at below:
- The title is missing in the head section of the page.
- The <img> tag does not have an ALT attribute defined.
- The page contains multiple titles.
- Evaluated size of HTML is estimated to be over 125 KB and risks not being fully cached.
- The page is missing meta language information.
- The title is too short or too long.
- The <h1> tag is missing.
- The description is missing in the head section of the page.
- The description is too long or too short.
In this tutorial we are going to discuss how to fix <img> tag ALT attribute issue.
ALT & TITLE tags for Gravatar Tips 🙂
Let’s get started:
Step-1.
- Go to Bing Webmaster tool.
- I assume that you have already
addedyour site andverifiedit. - Click on Dashboard -> Reports & Data ->
SEO Reports.
Step-2
- Click on
The <img> tag does not have an ALT attribute definedlink.
Step-3
- Click on any one of the
NON-COMPLIANT PAGES. - Wait for your report to load.
- Don’t click
Analyzebutton now. - Click on
Page SourceTab.
Step-4
- You could see error in
yellow colorbackground as you see at the top of this page.
Step-5 Why this error?
In WordPress, by default, Gravatar doesn’t add ALT tag while grabbing image from gravatar server. Optimizing a site for SEO and overall html5 compliance requires that you have ALT and preferably TITLE tags for all images displayed on the site and hence Bing is showing that error.
If you have default WordPress comment, you would miss ALT tag for all your commenter’s image and that’s a big issue.
Step-6 How to fix this?
We could simply fix missing ALT and TITLE tag value by adding below code to your theme’s functions.php file.
function crunchify_gravatar_alt($crunchifyGravatar) {
if (have_comments()) {
$alt = get_comment_author();
}
else {
$alt = get_the_author_meta('display_name');
}
$crunchifyGravatar = str_replace('alt=\'\'', 'alt=\'Avatar for ' . $alt . '\' title=\'Gravatar for ' . $alt . '\'', $crunchifyGravatar);
return $crunchifyGravatar;
}
add_filter('get_avatar', 'crunchify_gravatar_alt');
Step-7 How to verify?
- Now clear your site cache if you are using WP Super Cache or W3 Total Cache plugin.
- Reload your page.
Right clickon gravatar andInspectHTML element.- You should see
ALT and TITLEboth tag values populated correctly.
- Now go to Bing Webmaster tool and click on
Analyzebutton. - You shouldn’t see any error message now.
Waaa, this didn’t work for my site either. I’m beginning to think that it is an issue that theme developers need to be made aware of.
When adding directly to a PHP file, you’d need to create a child theme and copy the entire function.php file into the child theme folder so not to lose the code when the theme is updated in the future.
This code actually failed when people with a ‘ in their name left a comment on my posts. I added one additional line to fix this issue:
function crunchify_gravatar_alt($crunchifyGravatar) { if (have_comments()) { $alt = get_comment_author(); } else { $alt = get_the_author_meta('display_name'); } $alt = str_replace(''','',$alt); $crunchifyGravatar = str_replace('alt=''', 'alt='Avatar for ' . $alt . '' title='Gravatar for ' . $alt . ''', $crunchifyGravatar); return $crunchifyGravatar; }Instead of doing string replace you can just use `pre_get_avatar_data` filter and pass alt there.
Hi Igor. Thanks for your suggestion.
I’ll take a look and verify your change in few days and update. Appreciate your feedback.
Hi Igor – by any chance do you have complete code which uses
pre_get_avatar_data? I tried at my end but I was not able to modify alt value at my end.Yes, here you go:
// Add alt tags to gravatar function child_pre_get_avatar_data( $args, $id_or_email ) { $args['alt'] = 'Avatar for ' . get_comment_author(); return $args; } add_filter( 'pre_get_avatar_data', 'child_pre_get_avatar_data', 10, 2 );Thanks Igor.
Hello Shah, can you check my above comments on Anonymous thing?
Hi Sravan. I’ve just checked and above step-6 code is perfectly working without any issue.
Could you give it a try and let me know?
Also, make sure you have added your pic on gravatar site.
This changes the Author Bio Alt tag and shows “Avatar for Anonymous”. Any solution you have for this? I appreciate your response.
Good article. I couldn’t get my gravatar to work. Thanks
Hi @disqus_A5VmQr0Crt:disqus. Thanks. What error are you getting? Any log you could share? I’m more than happy to help check your issue.
Thank you very much. This code worked like a charm.
I got to know about this issue when I put my website on ryte.
Thank again.
You are welcome Rajan. Happy to help!!
Dumb question but we can use the code as is? No need to change “crunchify”?
Yeah. That’s right Will. You could use above tutorial code as it is.
Feel free to let me know if you face any issue.
I have read great feedbacks on this code. Unfortunately for me, when I put in the code, the editor puts a bad mark on the line;
$text = str_replace('alt=''', 'alt='Avatar for '.$alt.'' title='Gravatar for '.$alt.''',$text); return $text;And says; ‘expected an identifier and instead saw ‘ ‘
What can I do?
How are you putting code Ugochi? Try copying code block to Text editor and from it to your WordPress functions.php file.
Might be some laptop/desktop specific encoding issue.
Worked like a charm! This is the fourth update I’ve made today from your blog – really love your tips! Thanks 🙂
Hi Luke – good to hear tutorial tips are working on your site. Happy blogging and let us know any additional tutorial you want to see on Crunchify.
Is it possible to change the Gravatar image without an alternate author plugin? I’d rather it load from my own site than Gravatar.
I mainly ask this as I’m always seeing an issue for this in PageSpeed for ‘Leverage browser caching’ – so if we can just choose what image to have, that’d be cool…
I personally don’t recommend using extra plugin as we always follow bare minimum plugin pattern 🙂 Single or few gravatar image loading shouldn’t be a problem.
If you have ~50 comments on single post then it’s really bad loading and making ~50 Gravatar calls. Disqus is the best alternative in that case.