Next.js Discord

Discord Forum

favicon and thumbnail not showing on Google search result.

Unanswered
Gouty oak gall posted this in #help-forum
Open in Discord
Gouty oak gallOP
export const metadata = {
title: "Sahil Al Farib",
description: "Passionate software developer crafting efficient and innovative solutions. Explore my portfolio, showcasing expertise in web development, cutting-edge technologies, and creative problem-solving.",
image: "https://sahilalfarib.tech/opengraph-image.png", // Absolute URL
url: "https://sahilalfarib.tech"
};

export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<meta property="og:title" content="Sahil Al Farib" /> {/* Absolute URL /}
<meta property="og:description" content="Passionate software developer crafting efficient and innovative solutions. Explore my portfolio, showcasing expertise in web development, cutting-edge technologies, and creative problem-solving." />
<meta property="og:image" content="https://sahilalfarib.tech/opengraph-image.png" /> {/ Absolute URL /}
<meta property="og:type" content="website" />
<meta property="og:url" content="https://sahilalfarib.tech" />
<link rel="icon" href="https://sahilalfarib.tech/favicon.ico" type="image/x-icon" sizes="48x48" /> {/ Absolute URL /}
<link rel="icon" href="https://sahilalfarib.tech/favicon.ico" sizes="192x192" /> {/ Android Chrome icon /}
<link rel="icon" href="https://sahilalfarib.tech/favicon.ico" sizes="128x128" /> {/ Android Chrome fallback icon /}
<link rel="apple-touch-icon" href="https://sahilalfarib.tech/favicon.ico" /> {/ iOS Apple Touch Icon */}
</head>
<body className={jetbrainsMono.variable}>



This is my layout.jsx. I've hosted my portfolio site on vercel with custom domain. But my favicon and thumbnail is not showing on the Google search result. How can I resolve this.All the links are working correctly. Here is my site.

https://sahilalfarib.tech/

12 Replies

Chinese Chongqing Dog
Your Favicon needs to be a multiple of 48px and a square, but as far as I have seen your code this should be alright

If you use the app router you can put the favicon directly into the app router, to show it on your page.
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons

Is your favicon showing up in development mode?

If yes, then you have to wait some time ~ 1 - 2 weeks until the favicon shows up in the search results
Gouty oak gallOP
Thank you for your response my favicon is showing on the development mode. I didn't know I have to wait for 1 to 2 weeks. Is it same for the featured picture showing on the search result?
riský
its whenever google wants, and what google wants (i havent worked out picture, but it seems to be first img tag in page)
Gouty oak gallOP
Can you suggest me what can I do to make sure the opengraph picture and the favicon shows on Google search result
Chinese Chongqing Dog
Well it's as @riský said it's not officially documentend which Image is shown in the Google Search Results. So putting it into the og:image Open Graph Image can help, but the og:image purpose is for Content you want to share on Social Media Apps (it's the image that shows up in the share Preview)

So Just Upload A good high quality Picture on the Home Page, and hopefully the Algorithmn takes this (putting it as the first Image can help)

And if you make changes, it can take as I said around ~ 1-2 weeks until you see it in the search results
riský
if you try to search your page every so often, and do manual revalidate, its decently fast (at least for me)
Chinese Chongqing Dog
Yeah but on new domains for example we noticed that it sometimes takes ages
Maybe spamming the url with a VPN from different Countries helps 😄
riský
yeah true
google is just too fancy
id think not even they know the extent anymore
Gouty oak gallOP
Thank you guys for your insights
Really appreciate it