CODEWITHSUNDEEP
next.jsfacebook-opengraphmeta-tagsshare-open-graph
koobi41e
koobi41e

Reputation: 31

Open Graph meta tags not recognized in NextJS website deployment

I have been working on a NextJS website project and I'm facing an issue with Open Graph meta tags. I have added appropriate meta tags for title, image, and description on all pages of the website to ensure proper sharing on social media platforms. However, when I deploy the project to the internet and use Facebook's debug tool to verify the tags, they are not being recognized.

I have followed the standard procedure to add Open Graph meta tags in the component of each page in my NextJS project. Here's an example of how I have implemented it:


import Head from "next/head";
import { useRef } from "react";
import { useEffect,useState } from "react";
import CardSection from "../components/home/card-section-new";
import Hero from "../components/home/hero-section";
import { useMediaQuery } from 'react-responsive'
import OurChef from "../components/home/our-chef";
import Faq from "../components/home/faq";
import DishedTestimonial from "../components/home/dished-testimonial";
import Banner from "../components/home/banner";
// Import Swiper React components

export default function Home() {
  const loadedPage = useRef(false);

  useEffect(() => {
    setTimeout(() =>{
      if (!loadedPage.current) {
        window.location.hash = "popup";
      }
  
      return () => {
        if (!loadedPage.current) return (loadedPage.current = true);
      };
    },5500)
  });
  
  const [isClient,setClient] = useState(false)
  const isMobile = useMediaQuery({ maxWidth: 425 })
  const isTablet = useMediaQuery({ minWidth: 426, maxWidth: 800 })
  const isDesktop = useMediaQuery({ minWidth: 801 })


  useEffect(() => {
    setClient(true)
  },[])

  if(!isClient){
    return null
  }

  return (
    <div>
      <Head>
        <meta charset="utf-8"/>
        <title>Dished | Chef-Driven Meal Prep Made Easy</title>
        <meta
          name="keywords"
          content="meal prep, meal delivery, local chefs, customizable meals, food marketplace, chef services, fresh flavors, convenient ordering, culinary delights, gourmet meals, meal customization, food delivery, local cuisine, chef-prepared meals, healthy meal options, home-cooked meals, personalized meal plans, weekly meal subscriptions, chef-curated menus, on-demand food delivery"
        />
        <meta
          name="description"
          content="Dished is a meal prep marketplace connecting you with talented local chefs. Explore a wide range of customizable meals curated by chefs and enjoy convenient doorstep delivery. Indulge in fresh flavors, personalized meal plans, and the convenience of chef-prepared meals. Explore our chef-curated menus for a delightful and hassle-free meal prep experience. Savor the joy of delicious cuisine from the comfort of your home with Dished."
        />
        <meta name="author" content="Dished"/>
        
        <meta name="robots" content="index, follow" />
        <link rel="icon" href="/favicon.ico" />
        <meta
          itemProp="name"
          content="Dished | Find Local Culinary Services"
        />
        <meta
          itemProp="description"
          content="Dished is a meal prep marketplace connecting you with talented local chefs. Explore a wide range of customizable meals curated by chefs and enjoy convenient doorstep delivery. Indulge in fresh flavors, personalized meal plans, and the convenience of chef-prepared meals. Explore our chef-curated menus for a delightful and hassle-free meal prep experience. Savor the joy of delicious cuisine from the comfort of your home with Dished."
        />
        <meta
          itemProp="image"
          content="images/high-five-og.webp"
        />
        <meta
          property="og:type"
          content="website"
        />
        <meta
          property="og:title"
          content="Dished | Chef-Driven Meal Prep Made Easy"
        />
        <meta
          property="og:description"
          content="Dished is a meal prep marketplace connecting you with talented local chefs. Explore a wide range of customizable meals curated by chefs and enjoy convenient doorstep delivery. Indulge in fresh flavors, personalized meal plans, and the convenience of chef-prepared meals. Explore our chef-curated menus for a delightful and hassle-free meal prep experience. Savor the joy of delicious cuisine from the comfort of your home with Dished."
        />
        <meta
          property="og:image"
          content="https://firebasestorage.googleapis.com/v0/b/dished-782ef.appspot.com/o/webResources%2Fhigh-five-og.png?alt=media&token=7e080897-83d2-47ea-b99f-080821157778"
        />
        <meta
          name="twitter:card"
          content="summary_large_image"
        />
        <meta
          name="twitter:title"
          content="Dished | Chef-Driven Meal Prep Made Easy"
        />
        <meta
          name="twitter:description"
          content="Dished is a meal prep marketplace connecting you with talented local chefs. Explore a wide range of customizable meals curated by chefs and enjoy convenient doorstep delivery. Indulge in fresh flavors, personalized meal plans, and the convenience of chef-prepared meals. Explore our chef-curated menus for a delightful and hassle-free meal prep experience. Savor the joy of delicious cuisine from the comfort of your home with Dished."
        />
        <meta
          name="twitter:image"
          content="images/high-five-og.webp"
        />
        <meta property="og:locale" content="en_US"/>
      </Head>

      <Hero />
      <CardSection />
      <OurChef />
      <Faq />
      <DishedTestimonial />
      <Banner title='Order now and save 10% on your first order' buttonText='Explore Menus'/>
    </div>
  );
}

Locally, when I test the website and share the page on social media platforms, the Open Graph tags do not work. After deploying the project to the internet, the tags seem to be ignored. When I check the URL of my website using Facebook's debug tool (https://developers.facebook.com/tools/debug/), it reports that the Open Graph tags are not found. However, when I inspect my website page at https://dished.co, I do see the og meta tags there.

I have tried rescraping the URL using the debug tool, but it doesn't seem to make a difference. I have also ensured that the meta tags are properly nested within the component.

Has anyone encountered a similar issue with NextJS and Open Graph meta tags not being recognized after deployment? Any insights or suggestions would be greatly appreciated. Thank you!

Facebook Debuger Tool Result Website Inspection

I have tried rescraping the URL using the debug tool, but it doesn't seem to make a difference. I have also ensured that the meta tags are properly nested within the component. I have tried multiple re-deployments.

Upvotes: 3

Views: 4420

Answers (2)

Aatif Khan
Aatif Khan

Reputation: 46

Add your metaTags in your page.js files or index.js file instead of component , then view the page source and you might be able to see your tags over there.

Upvotes: 0

Pei Qi Tea
Pei Qi Tea

Reputation: 304

I was using an old version of Next.js, and I think the problem is that the <Head> tags across components are not merging.

  • I could see the <meta> tags in Inspector, but not Page Source.
  • A lot of solutions recommended next/seo but I didn't want to use yet another package

I'm not sure how to fix it for older versions, but I upgraded to the latest version that's not using JSX for the meta tags (v13.4.12, it has a completely different project structure with app/ folder taking priority). It works for me now.

From what I understood, in this new architecture, metadata becomes a reserved variable in any page.tsx/layout.tsx. So including this snippet:

// layout.tsx or page.tsx
export const metadata = {
  title: 'Next.js',
}

Automatically sets the <title> for the page to "Next.js".

But there's also this warning:

The metadata object and generateMetadata function exports are only supported in Server Components.

So I think the effectiveness of this solution also depends on how you next build (I'm using SSG)

References

I'm still very new to React + Next.js and I haven't dug into their structure yet, so I apologise in advance for my shallow answer.

I've also been using Netlify throughout, so I don't think it's a deployment thing.

Upvotes: 2

Related Questions