我一直在做一个NextJS网站项目，我面临着一个Open Graph Meta标签的问题。我在网站的所有页面上添加了适当的标题，图像和描述Meta标签，以确保在社交媒体平台上正确共享。然而，当我将项目部署到互联网上并使用Facebook的调试工具来验证标签时，它们无法被识别。
我已经遵循标准过程在我的NextJS项目中的每个页面的组件中添加Open Graph Meta标记。下面是我如何实现它的一个例子：
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>
);
}字符串
在本地，当我测试网站并在社交媒体平台上分享页面时，Open Graph标签不起作用。在将项目部署到互联网上之后，标签似乎被忽略了。当我使用Facebook的调试工具（https://developers.facebook.com/tools/debug/）检查我的网站的URL时，它报告说没有找到Open Graph标签。然而，当我在https://dished.co检查我的网站页面时，我确实在那里看到了og Meta标签。
我已经尝试使用调试工具重新抓取URL，但似乎没有什么区别。我还确保Meta标记正确地嵌套在组件中。
有没有人遇到过类似的NextJS和Open Graph Meta标记在部署后无法识别的问题？如有任何见解或建议，将不胜感激。谢谢你，谢谢
Facebook Debuger Tool ResultWebsite Inspection
我已经尝试使用调试工具重新抓取URL，但似乎没有什么区别。我还确保Meta标记正确地嵌套在组件中。我尝试了多次重新部署。
1条答案
按热度按时间pb3skfrl1#
我使用的是旧版本的Next.js，我认为问题在于跨组件的
<Head>标签没有合并。<meta>标记，但不能在Page Source中看到。next/seo，但我不想使用另一个包我不知道如何修复旧版本，但我升级到最新版本，不使用JSX的Meta标记（
v13.4.12，它有一个完全不同的项目结构与app/文件夹优先）。现在对我有用了。根据我的理解，在这个新架构中，
metadata成为任何page.tsx/layout.tsx中的保留变量。所以包括这个片段：字符串
自动将页面的
<title>设置为“Next.js”。但也有这样的警告：
metadata对象和generateMetadata函数导出仅在服务器组件中受支持。所以我认为这个解决方案的有效性还取决于你如何
next build（我使用SSG）参考资料
*下一个.js文档：https://nextjs.org/docs/app/api-reference/functions/generate-metadata
*我关注的项目（Ctrl + F代表“SEO”查找相关代码）：https://github.com/timlrx/tailwind-nextjs-starter-blog/tree/v2
我对React + Next.js还很陌生，还没有深入研究它们的结构，所以我提前为我肤浅的回答道歉。
我也一直在使用Netlify，所以我不认为这是一个部署的事情。