How to get Google Images to pick up image titles from Hugo website when using Shortcodes?

This relates to my previous post a la http://reallyreallyrandom.com, but also I think to all other Hugo sites.

I declare my pictures in the markdown as shortcodes, i.e.

   {{<figure src="./media/trng-dilemma.png"
    title="The TRNG dilemma."
    alt="The TRNG dilemma: Are any true random number generators really random given the stakes and circumstances?" >}}

which Hugo converts to the following HTML:-

  <figure>
        <a href="http://192.168.1.70:1313/media/trng-dilemma.png" data-featherlight="image"><img src="./media/trng-dilemma.png" alt="The TRNG dilemma: Are any true random number generators really random given the stakes and circumstances?"></a>

        <figcaption>
                <h4>The TRNG dilemma.</h4>
        </figcaption>
     </figure>

And it all renders correctly :slight_smile: But you see that the title text is now a figcaption. So the problem: Google Images displays that image as:-

image

It has not picked up the figcaption at all. Despite Google stating that they suck up figcaptions. Neither the alt text. It’s actually displaying the website main title:part of the meta description and home URL. And Google does that for all of my images anywhere on the site :frowning:

This seems to be the intended behaviour, but it doesn’t seem right to me as part of the site’s informatics gets lost. Images are meant to sometimes be more informative than words.

Q: How can I get my image title to be displayed by Google Images?

That’s probably something to ask at an SEO forum. I don’t think the Google Image Bot cares at all about what you use as a description at any place for the image, be it figcaption or alt text. It’s “suggestions” for the bot. They will probably tell you that it’s not possible to influence that.

If you know how the figure HTML should look so that it works with Google parsing, you can write a custom figure.html shortcode in your site’s layouts/shortcodes/ directory and that will override the Hugo built-in version.

Thanks davidsneighbour. But I’m not so sure.

  1. As a regular, you probably know whether or not all Hugo generated sites suffer this problem. Do they?

1 1/2. Is it me doing something wrong?

  1. If no, that’s a pretty serious bug with Hugo’s sortcode. Google Images search is a huge portion of Google search - it’s massive. Most other sites’ results have proper and meaningful titles. Look for yourself. It seems to me that there’s little point tweaking Hugo’s pipes or something ultra techie like that, if half of Google is unable to correctly index the image content of a Hugo site.

What do you think?

kaushalmodi, thanks.

At this point I’m simply trying to discover whether it’s me being stupid, or whether it’s a concrete problem with Hugo. What happens with your site(s)’ images please? The only fact I have is that my site isn’t indexed like most of the other sites are.

You are right that Google Images is showing the site title at the title of all images inserted using the figure shortcode.

I have never looked at the Google Images for the images on my website, and also it’s not very important to me.

But I understand the issue you are raising here; that the default shortcode should generate an HTML with the right tags and attributes such that Google Images and probably others can parse the image titles correctly.

Can you do some research on what the image figure/img HTML should look like so that they are parsed correctly?

https://www.blog.google/products/search/get-more-useful-information-captions-google-images/

This week we’re adding captions to image results, showing you the title of the web page where each image is published. This extra piece of information gives you more context so you can easily find out what the image is about and whether the website would contain more relevant content for your needs.

Mar 13, 2018

You’re right. I just scrolled through some arbitrary Google Images search results and they all do indeed caption the images with the page titles. In some places, the caption is derived from the page title, probably using some machine learning algorithm. I think so because those partial titles are not in the HTML source of such images (at least the two that I looked at).

Right then, it appears that Hugo’s working correctly.

Thing is, now we all have to do more work. As I see it, if Hugo’s automated menu construction feeds off the page titles, and so does Google Images, we have to add specific and different menu entries to those of the page titles.

So be it :slight_smile: Thanks all.

P.S. Just tried this, and it’s worse than just adding additional menu entries. Not Hugo’s fault, but Google’s. Problems:-

  1. All meaningful images on a single page get displayed with the same caption, even if they’re totally different. Tricky for gallery pages.

  2. Any for design only images also get similarly captioned with the page title. So a tranquil picture of sheep might present as “How to bleed car radiators in 2 minutes”.

  3. Meaningful images taken out of context (in search results) require a longer description. That requires the page titles on my site to be much longer than they need to be as they’re in context there.

  4. What is the point of if search engines ignore it? If the purpose is for it to inform the reader, then so should Google.

Thanks again.