- This topic has 5 replies, 2 voices, and was last updated 2 years, 3 months ago by Ying.
-
AuthorPosts
-
December 17, 2021 at 6:51 am #2051960Melissa
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…
December 17, 2021 at 10:16 am #2052280YingStaffCustomer SupportHi 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/#exampleLet me know ๐
December 17, 2021 at 11:23 am #2052324MelissaThank 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)
December 17, 2021 at 12:01 pm #2052363YingStaffCustomer SupportThe
alt
attribute is not allowed for thea
element, please find reference in the below article: https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-elementI checked all a element that listed in lighthouse test result, and all of these images are missing
alt
info, can you go to media library check if there’salt
info added to the image itself?
example:
https://www.screencast.com/t/So5ZPffTDecember 19, 2021 at 5:13 am #2053529Melissa@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
December 20, 2021 at 10:13 am #2054758YingStaffCustomer SupportYou are welcome ๐
Hope you’ll find the solution soon!
-
AuthorPosts
- You must be logged in to reply to this topic.