2

I have noticed that google has started to show little images next to search results on mobile devices. The first photo I have displayed on my website is my logo. Currently this is the image that is being displayed. It doesn't look good. My logo isn't square so it crops it and looks bad.

I am assuming that there is some sort of meta tag, just like the meta tag I used to tell Facebook what photo to display.

What do I put in my HTML to tell google what photo I want displayed there?

2 Answers 2

2

Old question but must be answered completely. It's very disappointing that it has not been answered in almost a year!

Those images come from either your:

  1. Twitter card image or
  2. Facebook opengraph image

I am not 100% from which one, but I am 100% it is from one of the two, or at least the first image that Google finds while reading your page. So keep this in mind.

To add a facebook opengraph you add these meta tags:

<meta property="fb:app_id" content=""/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="My website title"/>
<meta property="og:url" content="https://www.mywebsite.com/"/>
<meta property="og:image" content="https://www.mywebsite.com/images/special/image_og.jpg" /> 
<meta property="og:image:width" content="640" /> 
<meta property="og:image:height" content="480" />
<meta property="og:description" content="My website description"/>

Then go to check how it looks on facebook: https://developers.facebook.com/tools/debug

To add a twitter card you add these meta tags:

<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@mywebsite" />
<meta name="twitter:title" content="My website title"/>
<meta name="twitter:image" content="https://www.mywebsite.com/images/special/image_twitter.jpg"/>
<meta name="twitter:image:width" content="200"/>
<meta name="twitter:image:height" content="200"/>
<meta name="twitter:description" content="My website description"/>

Then go to check how it looks on twitter: https://cards-dev.twitter.com/validator

Now ask Google to reindex your page using the URL Inspection Tool here:

https://search.google.com/search-console

https://support.google.com/webmasters/answer/9012289

And to be complete, before you ask for a re-index by Google, add also the special favicon which will appear only on Google mobile search results!!! This is not your regular favicon. This is special. So I suggest adding another line to your page like this:

<!-- GOOGLE MOBILE SEARCH favicon 48x48 MINIMUM!!! -->
<link rel="shortcut icon" href="https://www.mywebsite.com/images/special/favicon.png">

Best to use 'https://www.mywebsite.com/images' a complete URL for all these images. These are all special images for special purposes and have special requirements. Therefore I have them in a special folder!

3
  • Great answer. It's worth noting that Facebook's OpenGraph is more of a "standard" than Twitter's card tags (in fact, Twitter can read some of the OpenGraph tags). Google reads OpenGraph tags too, but I'm not sure they read Twitter tags. Jul 7, 2020 at 1:13
  • Thanks for getting back to me @conanDrum. I no longer have this website but this will be useful in the future
    – Juan Pablo
    Jul 7, 2020 at 5:28
  • @JuanPablo My pleasure
    – conanDrum
    Jul 7, 2020 at 9:48
1

Google mobile search results show your website’s favicon. You can add your favicon at /favicon.ico, or specify a custom URL as follows:

Add a tag to the header of your home page with the following syntax:

<link rel="shortcut icon" href="/path/to/favicon.ico">

https://support.google.com/webmasters/answer/9290858?hl=en

2
  • Hey, I am not talking about the favicon. I know google has also started to show favicon icons in the web results but there is also a small square photo to the right of the result with a photo of the website. That is what I am trying to change.
    – Juan Pablo
    Jul 30, 2019 at 0:37
  • which is only on web results on mobile, not on laptops
    – Juan Pablo
    Jul 30, 2019 at 0:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.