Webmasters Stack Exchange is a question and answer site for webmasters. It only takes a minute to sign up.
Sign up to join this community
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?
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:
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!
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">
