[Resolved] Lighthouse Error: Category Post Image Links do not have discernible name

Home Forums Support [Resolved] Lighthouse Error: Category Post Image Links do not have discernible name

Home Forums Support Lighthouse Error: Category Post Image Links do not have discernible name

  • This topic has 5 replies, 2 voices, and was last updated 1 month ago by Ying.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2051960
    Melissa

    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.
    links do not have discernible name
    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…

    #2052280
    Ying
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #2052324
    Melissa

    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)

    #2052363
    Ying
    Staff
    Customer Support

    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

    #2053529
    Melissa

    @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

    #2054758
    Ying
    Staff
    Customer Support

    You are welcome ๐Ÿ™‚

    Hope you’ll find the solution soon!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.