Next.js Discord

Discord Forum

Open Graph Tags Not Working

Unanswered
Wool sower gall maker posted this in #help-forum
Open in Discord
Wool sower gall makerOP
import React from "react";
import Head from "next/head";

interface OpenGraph {
  url: string;
  title: string;
  description: string;
  images: {
    url: string;
    width?: number;
    height?: number;
    alt: string;
  }[];
  site_name?: string;
}

interface Twitter {
  handle?: string;
  site?: string;
  cardType?: string;
}

interface HeaderProps {
  title?: string;
  description?: string;
  keywords?: string;
  openGraph?: OpenGraph;
  twitter?: Twitter;
}

const Header: React.FC<HeaderProps> = ({
  title = "Ana Sayfa",
  description = "Sağda Solda Arama, Sakarya'nın en kapsamlı aracı platformu",
  keywords = "aracı, iş ilanı",
  openGraph = {
    url: "https://dibimde.com",
    title: "Dibimde.com",
    description: "Sağda Solda Arama, Sakarya'nın en kapsamlı aracı platformu",
    images: [
      {
        url: "https://dibimde.com/logo.png",
        width: 1200,
        height: 630,
        alt: "dibimde.com logo",
      },
    ],
    site_name: "dibimde.com",
  },
  twitter = {
    handle: "@dibimdecom",
    site: "@dibimdecom",
    cardType: "summary_large_image",
  },
}) => {
  const fullTitle = `${title} | Dibimde - Sakarya'nın en kapsamlı aracı platformu`;
  const canonicalUrl = openGraph.url
    .replace(/\/$/, "")
    .replace(/([^:])(\/\/+)/g, "$1/");
  const primaryImage = openGraph.images[0];
  const imageWidth = /*primaryImage.width ||*/ 1200;
  const imageHeight = /* primaryImage.height ||*/ 630;

  const validatedImageUrl = primaryImage.url.startsWith("http")
    ? primaryImage.url
    : `https://dibimde.com${primaryImage.url}`;

  return (
    <>
      <Head>
        <title>{fullTitle}</title>
        <meta name="description" content={description} />
        <meta
          name="keywords"
          content={`
        ${keywords}, 
        dibimde, dibimde.com, Sakarya iş ilanları, Sakarya firmaları,
        Sakarya yurtları, Sakarya araç kiralama, Sakarya turizm,
        Sakarya kampanyalar, Sakarya konserleri, Sakarya acil hizmetler
      `}
        />

        <meta property="og:url" content={canonicalUrl} />
        <meta property="og:type" content="website" />
        <meta property="og:title" content={openGraph.title} />
        <meta property="og:description" content={openGraph.description} />
        <meta
          property="og:site_name"
          content={openGraph.site_name || "dibimde.com"}
        />
        <meta property="og:image" content={validatedImageUrl} />
        <meta property="og:image:width" content={imageWidth.toString()} />
        <meta property="og:image:height" content={imageHeight.toString()} />
        <meta property="og:image:alt" content={primaryImage.alt} />

        <meta
          name="twitter:card"
          content={twitter.cardType || "summary_large_image"}
        />
        <meta name="twitter:site" content={twitter.site} />
        <meta name="twitter:creator" content={twitter.handle} />
        <meta name="twitter:title" content={openGraph.title} />
        <meta name="twitter:description" content={openGraph.description} />
        <meta name="twitter:image" content={validatedImageUrl} />
        <meta name="twitter:image:alt" content={primaryImage.alt} />

        <meta name="author" content="Dibimde.com" />
        <link rel="canonical" href={canonicalUrl} />
        <link rel="icon" href="/favicon.ico" />
      </Head>
    </>
  );
};

export default Header;

I am using this component for my nextjs app v15.1,
I can see all meta tags through DevTools, and the title works, but Open Graph tags do not appear at all when I use them in my component.

3 Replies

Wool sower gall makerOP
import React from "react";
import { motion } from "framer-motion";
import classNames from "classnames";
import Header from "@/components/Header";
import { Quicksand } from "next/font/google";
import Hero from "@/components/home/Hero";

const QuicksandFont = Quicksand({
  weight: ["400", "500", "600", "700"],
  subsets: ["latin"],
});

export default function Home() {
  return (
    <div className="flex flex-col min-h-screen" style={QuicksandFont.style}>
      <Header
        title="Ana Sayfa"
        description="Dibimde.com Ana Sayfası. Sağda solda aramayın, dibimde yanınızda!"
        keywords="dibimde, dibimde.com, ana sayfa, home"
        openGraph={{
          url: "https://dibimde.com/",
          title: "dibimde.com",
          description:
            "Dibimde.com Ana Sayfası. Sağda solda aramayın, dibimde yanınızda!",
          images: [
            {
              url: "https://dibimde.com/logo.png",
              width: 800,
              height: 600,
              alt: "dibimde.com",
            },
          ],
          site_name: "dibimde.com",
        }}
      />

      <Hero />
    </div>
  );
}
but I tried like that this is working
what is the problem