Archived topic
Lighthouse Error: Category Post Image Links do not have discernible name
5 replies · Started by Melissa on December 17, 2021
When running lighthouse on the Category page I receive the error that "Link do not have discernible name" The failing elements are the a href tags for the post image itself.
when you click on the "a" in the above screenshot lighthouse report, it shows this code specifically:
<div class="post-image">
<a href="https://www.mydomainhere.com/recipes/4962-candied-bacon-maple-walnut-fudge/"> <img width="500" height="372" src="https://www.mydomainhere.com/wp-content/uploads/2018/12/candied-bacon-maple-walnut-fudge-.jpeg" class="attachment-full size-full wp-post-image lazyloaded" alt="" itemprop="image" sizes="(max-width: 500px) 100vw, 500px" srcset="https://www.mydomainhere.com/wp-content/uploads/2018/12/candied-bacon-maple-walnut-fudge-.jpeg 500w, https://www.mydomainhere.com/wp-content/uploads/2018/12/candied-bacon-maple-walnut-fudge--225x167.jpeg 225w, https://www.mydomainhere.com/wp-content/uploads/2018/12/candied-bacon-maple-walnut-fudge--80x60.jpeg 80w" data-ll-status="loaded"><noscript><img width="500" height="372" src="https://www.mydomainhere.com/wp-content/uploads/2018/12/candied-bacon-maple-walnut-fudge-.jpeg" class="attachment-full size-full wp-post-image" alt="" itemprop="image" srcset="https://www.mydomainhere.com/wp-content/uploads/2018/12/candied-bacon-maple-walnut-fudge-.jpeg 500w, https://www.mydomainhere.com/wp-content/uploads/2018/12/candied-bacon-maple-walnut-fudge--225x167.jpeg 225w, https://www.mydomainhere.com/wp-content/uploads/2018/12/candied-bacon-maple-walnut-fudge--80x60.jpeg 80w" sizes="(max-width: 500px) 100vw, 500px" /></noscript> </a>
</div>Img of code returned: https://snipboard.io/fOWGnL.jpg
ideas how to fix this one?
**UPDATE***
I'm actually seeing an svg placeholder type of image on most of the others:
<div class="post-image"> <a href="https://www.mydomain.com/recipes/1502-brown-sugar/"> <img width="400" height="267" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20267'%3E%3C/svg%3E" class="attachment-full size-full wp-post-image" alt="" itemprop="image" data-lazy-srcset="https://www.mydomainhere.com/wp-content/uploads/2017/11/brown-sugar-.jpeg 400w, https://www.mydomainhere.com/wp-content/uploads/2017/11/brown-sugar--225x150.jpeg 225w" data-lazy-sizes="(max-width: 400px) 100vw, 400px" data-lazy-src="https://www.mydomainhere.com/wp-content/uploads/2017/11/brown-sugar-.jpeg"><noscript><img width="400" height="267" src="https://www.mydomainhere.com/wp-content/uploads/2017/11/brown-sugar-.jpeg" class="attachment-full size-full wp-post-image" alt="" itemprop="image" srcset="https://www.mydomainhere.com/wp-content/uploads/2017/11/brown-sugar-.jpeg 400w, https://www.mydomainhere.com/wp-content/uploads/2017/11/brown-sugar--225x150.jpeg 225w" sizes="(max-width: 400px) 100vw, 400px" /></noscript> </a></div>
Snippet that I think is the issue:
<img width="400" height="267" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20267'%3E%3C/svg%3E" class="attachment-full size-full wp-post-image" alt="" itemprop="image" <snipped for brevity>
Particularly this one Missing alt=""
I don't know where that image is called from, which template, since it's not hosted on my domain...
Hi Melissa,
Would you like to use this PHP snippet to remove the link from the featured image?
https://docs.generatepress.com/article/generate_featured_image_output/#example
Let me know :)
Thank you Ying. I'm not looking to remove the link, but rather add the proper data to it to pass lighthouse requirements.
I found the line of code in /inc/structure/featured-images.php line#37-42:
'<div class="post-image">
%3$s
<a href="%1$s">
%2$s
</a>
</div>',I tried adding: alt="%2$s" but it didn't seem to add anything
'<div class="post-image">
%3$s
<a href="%1$s" alt="%2$s">
%2$s
</a>
</div>',(Yes, I know, direct changes to code are bad & frowned upon)
The alt attribute is not allowed for the a element, please find reference in the below article: https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element
I checked all a element that listed in lighthouse test result, and all of these images are missing altinfo, can you go to media library check if there's altinfo added to the image itself?
example:
https://www.screencast.com/t/So5ZPffT
@Ying! Omg, you're right, somehow the Alt has been stripped from the image, which is very odd because all the images had ALT data, I used a plugin to add it several years ago. I'll have to find a way to search the media to see how many are missing alt tags now.
Thank you
You are welcome :)
Hope you'll find the solution soon!
