admin管理员组文章数量:1130349
I dont know where to look for help on this one as I cant find any related issues online. I deployed a website 5 days ago on Vercel using a Namecheap domain / / / and its not showing up unless I type in "david glass music", but when it appears on google search it does not say "David Glass | Bay Area Pianist..." with its intended desciption I had written. instead it shows what the screenshot attached says with an unfamiliar logo, sloppy title, and random description. Note: I deleted the favicon.ico from app since I just want the default internet favicon.
AI suggested that google has not yet indexed, but I found that google has indexed my deployed site (screenshot attached)
AI also suggested that it could be the way my layout.tsx is laid out and/or something within my meta tags through the google chrome inspect tools..? I have been comparing inspect tools meta tag/html structures from another website (/) I made to my new one but not sure how to identify if there is a problem still.
Does anyone have a solution? I am not sure how to go about this since there is no real error.
image 1
image 2
layout.tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { MusicProvider } from "../lib/music-context";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
// ✅ Updated Metadata with Open Graph and Twitter Meta Tags
export const metadata: Metadata = {
title: "David Glass | Bay Area Pianist, Filmmaker & Piano Teacher",
description:
"David Glass is a Bay Area pianist, award-winning filmmaker, and piano teacher serving Piedmont, Oakland, and Berkeley.",
openGraph: {
title: "David Glass Music | Bay Area Pianist, Filmmaker & Piano Teacher",
description:
"David Glass is a Bay Area pianist, award-winning filmmaker, and piano teacher serving Piedmont, Oakland, and Berkeley.",
url: ";, // Replace with your actual domain
type: "website",
images: [
{
url: "/imgs/david_blackwhite.png", // ✅ Correctly referencing your image in the public/imgs/ folder
width: 1200,
height: 630,
alt: "David Glass playing piano in black and white",
},
],
},
twitter: {
card: "summary_large_image",
title: "David Glass Music | Bay Area Pianist, Filmmaker & Piano Teacher",
description:
"David Glass is a Bay Area pianist, award-winning filmmaker, and piano teacher serving Piedmont, Oakland, and Berkeley.",
images: ["/imgs/david_blackwhite.png"], // ✅ Twitter preview image (same as Open Graph)
},
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" className="bg-zinc-800">
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
</head>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<MusicProvider>{children}</MusicProvider>
</body>
</html>
);
}
I dont know where to look for help on this one as I cant find any related issues online. I deployed a website 5 days ago on Vercel using a Namecheap domain / https://www.davidglassmusic/ / and its not showing up unless I type in "david glass music", but when it appears on google search it does not say "David Glass | Bay Area Pianist..." with its intended desciption I had written. instead it shows what the screenshot attached says with an unfamiliar logo, sloppy title, and random description. Note: I deleted the favicon.ico from app since I just want the default internet favicon.
AI suggested that google has not yet indexed, but I found that google has indexed my deployed site (screenshot attached)
AI also suggested that it could be the way my layout.tsx is laid out and/or something within my meta tags through the google chrome inspect tools..? I have been comparing inspect tools meta tag/html structures from another website (https://graybuckmedia/) I made to my new one but not sure how to identify if there is a problem still.
Does anyone have a solution? I am not sure how to go about this since there is no real error.
image 1
image 2
layout.tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { MusicProvider } from "../lib/music-context";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
// ✅ Updated Metadata with Open Graph and Twitter Meta Tags
export const metadata: Metadata = {
title: "David Glass | Bay Area Pianist, Filmmaker & Piano Teacher",
description:
"David Glass is a Bay Area pianist, award-winning filmmaker, and piano teacher serving Piedmont, Oakland, and Berkeley.",
openGraph: {
title: "David Glass Music | Bay Area Pianist, Filmmaker & Piano Teacher",
description:
"David Glass is a Bay Area pianist, award-winning filmmaker, and piano teacher serving Piedmont, Oakland, and Berkeley.",
url: "https://yourwebsite", // Replace with your actual domain
type: "website",
images: [
{
url: "/imgs/david_blackwhite.png", // ✅ Correctly referencing your image in the public/imgs/ folder
width: 1200,
height: 630,
alt: "David Glass playing piano in black and white",
},
],
},
twitter: {
card: "summary_large_image",
title: "David Glass Music | Bay Area Pianist, Filmmaker & Piano Teacher",
description:
"David Glass is a Bay Area pianist, award-winning filmmaker, and piano teacher serving Piedmont, Oakland, and Berkeley.",
images: ["/imgs/david_blackwhite.png"], // ✅ Twitter preview image (same as Open Graph)
},
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" className="bg-zinc-800">
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
</head>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<MusicProvider>{children}</MusicProvider>
</body>
</html>
);
}
2 Answers
Reset to default 0My friend was able to identify that I fot to swap out the boiler plate cgpt code line here
url: "https://yourwebsite",
with my actual domain.
Add the meta tag for it.
<link rel="icon" href="/favicon.ico"/>
Further reference: Favicon Standard - 2024 - svg, ico, png and dimensions?
I dont know where to look for help on this one as I cant find any related issues online. I deployed a website 5 days ago on Vercel using a Namecheap domain / / / and its not showing up unless I type in "david glass music", but when it appears on google search it does not say "David Glass | Bay Area Pianist..." with its intended desciption I had written. instead it shows what the screenshot attached says with an unfamiliar logo, sloppy title, and random description. Note: I deleted the favicon.ico from app since I just want the default internet favicon.
AI suggested that google has not yet indexed, but I found that google has indexed my deployed site (screenshot attached)
AI also suggested that it could be the way my layout.tsx is laid out and/or something within my meta tags through the google chrome inspect tools..? I have been comparing inspect tools meta tag/html structures from another website (/) I made to my new one but not sure how to identify if there is a problem still.
Does anyone have a solution? I am not sure how to go about this since there is no real error.
image 1
image 2
layout.tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { MusicProvider } from "../lib/music-context";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
// ✅ Updated Metadata with Open Graph and Twitter Meta Tags
export const metadata: Metadata = {
title: "David Glass | Bay Area Pianist, Filmmaker & Piano Teacher",
description:
"David Glass is a Bay Area pianist, award-winning filmmaker, and piano teacher serving Piedmont, Oakland, and Berkeley.",
openGraph: {
title: "David Glass Music | Bay Area Pianist, Filmmaker & Piano Teacher",
description:
"David Glass is a Bay Area pianist, award-winning filmmaker, and piano teacher serving Piedmont, Oakland, and Berkeley.",
url: ";, // Replace with your actual domain
type: "website",
images: [
{
url: "/imgs/david_blackwhite.png", // ✅ Correctly referencing your image in the public/imgs/ folder
width: 1200,
height: 630,
alt: "David Glass playing piano in black and white",
},
],
},
twitter: {
card: "summary_large_image",
title: "David Glass Music | Bay Area Pianist, Filmmaker & Piano Teacher",
description:
"David Glass is a Bay Area pianist, award-winning filmmaker, and piano teacher serving Piedmont, Oakland, and Berkeley.",
images: ["/imgs/david_blackwhite.png"], // ✅ Twitter preview image (same as Open Graph)
},
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" className="bg-zinc-800">
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
</head>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<MusicProvider>{children}</MusicProvider>
</body>
</html>
);
}
I dont know where to look for help on this one as I cant find any related issues online. I deployed a website 5 days ago on Vercel using a Namecheap domain / https://www.davidglassmusic/ / and its not showing up unless I type in "david glass music", but when it appears on google search it does not say "David Glass | Bay Area Pianist..." with its intended desciption I had written. instead it shows what the screenshot attached says with an unfamiliar logo, sloppy title, and random description. Note: I deleted the favicon.ico from app since I just want the default internet favicon.
AI suggested that google has not yet indexed, but I found that google has indexed my deployed site (screenshot attached)
AI also suggested that it could be the way my layout.tsx is laid out and/or something within my meta tags through the google chrome inspect tools..? I have been comparing inspect tools meta tag/html structures from another website (https://graybuckmedia/) I made to my new one but not sure how to identify if there is a problem still.
Does anyone have a solution? I am not sure how to go about this since there is no real error.
image 1
image 2
layout.tsx
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { MusicProvider } from "../lib/music-context";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
// ✅ Updated Metadata with Open Graph and Twitter Meta Tags
export const metadata: Metadata = {
title: "David Glass | Bay Area Pianist, Filmmaker & Piano Teacher",
description:
"David Glass is a Bay Area pianist, award-winning filmmaker, and piano teacher serving Piedmont, Oakland, and Berkeley.",
openGraph: {
title: "David Glass Music | Bay Area Pianist, Filmmaker & Piano Teacher",
description:
"David Glass is a Bay Area pianist, award-winning filmmaker, and piano teacher serving Piedmont, Oakland, and Berkeley.",
url: "https://yourwebsite", // Replace with your actual domain
type: "website",
images: [
{
url: "/imgs/david_blackwhite.png", // ✅ Correctly referencing your image in the public/imgs/ folder
width: 1200,
height: 630,
alt: "David Glass playing piano in black and white",
},
],
},
twitter: {
card: "summary_large_image",
title: "David Glass Music | Bay Area Pianist, Filmmaker & Piano Teacher",
description:
"David Glass is a Bay Area pianist, award-winning filmmaker, and piano teacher serving Piedmont, Oakland, and Berkeley.",
images: ["/imgs/david_blackwhite.png"], // ✅ Twitter preview image (same as Open Graph)
},
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" className="bg-zinc-800">
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
</head>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<MusicProvider>{children}</MusicProvider>
</body>
</html>
);
}
2 Answers
Reset to default 0My friend was able to identify that I fot to swap out the boiler plate cgpt code line here
url: "https://yourwebsite",
with my actual domain.
Add the meta tag for it.
<link rel="icon" href="/favicon.ico"/>
Further reference: Favicon Standard - 2024 - svg, ico, png and dimensions?
本文标签：
版权声明：本文标题：html - Metadata title, description, and favicon not showing up correctly on google after deployment - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/questions/1741196777a1846120.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论