NextJS 网站部署中无法识别 Open Graph 元标记

问题描述 投票：0回答：2

我一直在开发 NextJS 网站项目，并且面临开放图元标签的问题。我在网站的所有页面上为标题、图像和描述添加了适当的元标签，以确保在社交媒体平台上正确共享。然而，当我将项目部署到互联网并使用 Facebook 的调试工具来验证标签时，它们没有被识别。

我按照标准程序在 NextJS 项目的每个页面的组件中添加 Open Graph 元标记。这是我如何实现它的示例：


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>
  );
}

在本地，当我测试网站并在社交媒体平台上共享页面时，开放图谱标签不起作用。将项目部署到互联网后，标签似乎被忽略了。当我使用 Facebook 的调试工具 (https://developers.facebook.com/tools/debug/) 检查我的网站的 URL 时，它报告未找到 Open Graph 标签。但是，当我在 https://dished.co 检查我的网站页面时，我确实看到了 og 元标记。

我尝试使用调试工具重新抓取 URL，但似乎没有什么区别。我还确保元标记正确嵌套在组件内。

有人遇到过部署后 NextJS 和 Open Graph 元标记无法识别的类似问题吗？任何见解或建议将不胜感激。谢谢！

Facebook Debuger Tool Result Website Inspection

我尝试使用调试工具重新抓取 URL，但似乎没有什么区别。我还确保元标记正确嵌套在组件内。我尝试过多次重新部署。

next.js facebook-opengraph meta-tags share-open-graph
2个回答
1
投票

我使用的是旧版本的 Next.js，我认为问题在于组件之间的 

<Head>
标签没有合并。

  • 我可以在检查器中看到 
    <meta>
    标签，但看不到页面源。
  • 推荐了很多解决方案
    next/seo
    但我不想使用另一个包

我不确定如何修复旧版本，但我升级到了不使用 JSX 作为元标记的最新版本（

v13.4.12
，它具有完全不同的项目结构，其中 
app/
文件夹优先）。现在对我有用。

据我了解，在这个新架构中，

metadata
成为任何
page.tsx
/
layout.tsx
中的保留变量。所以包括这个片段：

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

自动将页面的 

<title>
设置为“Next.js”。

但是还有这个警告：

metadata
对象和
generateMetadata
函数导出仅 服务器组件支持。

所以我认为这个解决方案的有效性还取决于你如何

next build
（我正在使用SSG）

参考文献

我对 React + Next.js 还很陌生，我还没有深入研究它们的结构，所以我为我肤浅的回答提前道歉。

我一直在使用 Netlify，所以我不认为这是一个部署问题。

0
投票

在 Next.js 版本 13 中，它改用generateMetadata 函数。

您可以在这里阅读官方文档：https://nextjs.org/docs/app/building-your-application/optimizing/metadata#usage

它将自动从 

metadata
对象中提取元数据：

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

您可以使用具有 

opengraph-image
和 
twitter-image
文件约定的开放图图像文件，这些约定允许您为路线段设置开放图和 Twitter 图像。阅读更多相关信息这里。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.