Next.js Discord

Discord Forum

metadata not loading.

Answered
ani posted this in #help-forum
Open in Discord
aniOP
has it ever happened to you that you put metadata in layout but when seeing your website it aint loading the metadata but when you inspect element ur website , its right their?
for me that's the issue.

https://paylix.gg/ -> metadata not loading
-> layout has all metadata correctly , if i inspect and see the head it shows metadata too? what could be the problem?
Answered by ani
okay so i figured out, delayed loader was messed up
View full answer

2 Replies

aniOP
sharing my layout.tsx
import type { Metadata } from "next";
import { Inter, Inter_Tight } from "next/font/google";
import "./globals.css";
import { Navbar } from "@/components/common/navbar/navbar";
import { Footer } from "@/components/common/footer/footer";
import { GoogleAnalytics } from "@/components/GoogleAnalytics";
import { DelayedLoader } from "@/components/common/delayed-loader";

const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
});

const interTight = Inter_Tight({
  variable: "--font-inter-tight",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Digital Selling done Right",
  description: "End-to-end universal payment experience that simplifies commerce and transactions across cryptocurrencies and fiat.",
  keywords: ["e-commerce", "payment processing", "digital products", "paylix"],
  openGraph: {
    title: "Digital Selling done Right",
    description: "End-to-end universal payment experience that simplifies commerce and transactions across cryptocurrencies and fiat.",
    url: "https://paylix.gg",
    siteName: "Paylix",
    images: [
      {
        url: "https://cdn.paylix.gg/static/landing/hero-dashboard.png",
        width: 1200,
        height: 630,
        alt: "Paylix",
      },
    ],
    locale: "en_US",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Digital Selling done Right",
    description: "End-to-end universal payment experience that simplifies commerce and transactions across cryptocurrencies and fiat.",
    images: ["https://cdn.paylix.gg/static/landing/hero-dashboard.png"],
  },
  icons: {
    icon: "/logo/paylix_logo_small_black.svg",
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${inter.variable} ${interTight.variable} antialiased`}
      >
        <DelayedLoader>
          <Navbar />
          {children}
          <Footer />
          <GoogleAnalytics />
        </DelayedLoader>
      </body>
    </html>
  );
}
aniOP
okay so i figured out, delayed loader was messed up
Answer