Twitter卡片未正确显示自定义Open Graph内容求助

数据老陈

2026-8-12

解决Twitter卡片不显示职位自定义OG内容的问题

核心原因

Twitter爬虫不执行JavaScript，你当前用useEffect在客户端异步获取职位数据，导致爬虫抓取页面时，OG/Twitter标签都是初始空值，只能显示网站默认的OG内容。此外，代码里还有标签错误、路径错误等问题，叠加导致卡片异常。

具体修复步骤

1. 改用服务端预渲染获取数据（Next.js）

把职位数据的获取移到服务端执行，确保页面渲染时OG标签已经填充了真实数据。在Job组件外部添加getServerSideProps：

export async function getServerSideProps(context) {
  const { jobId } = context.query;
  if (!jobId) {
    return { notFound: true };
  }
  const res = await fetch(`https://ecom-jobs.com/api/jobs?id=${jobId}`);
  const jobData = await res.json();
  // 确保返回必要字段，避免空值
  return { props: { jobData } };
}

然后修改组件内部，去掉useState和useEffect，直接接收props：

function Job({ jobData }) {
  // 原组件逻辑不变，去掉state和useEffect部分
  // ...
}

2. 修正Twitter标签的错误字段

你使用了错误的Twitter标签键名，Twitter官方只识别twitter:title和twitter:description，而非twitter:text:title/twitter:text:description。修正后的Head标签：

<Head>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>{`${jobData.job_position} | ${jobData.company_name}`}</title>

  {/* OG标签 */}
  <meta property="og:type" content="website"/>
  <meta property="og:url" content={`https://ecom-jobs.com/job/${jobId}`}/>
  <meta property="og:title" content={`${jobData.job_position} | ${jobData.company_name}`}/>
  <meta property="og:image" content={`https://ecom-jobs.com/images/${jobData.logo}`}/>
  <meta property="og:image:width" content="1200"/>
  <meta property="og:image:height" content="630"/>
  <meta property="og:description" content={`${jobData.job_description.substring(0, 160)}`}/>

  {/* 修正后的Twitter标签 */}
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:domain" content="ecom-jobs.com"/>
  <meta name="twitter:url" content={`https://ecom-jobs.com/job/${jobId}`}/>
  <meta name="twitter:title" content={`${jobData.job_position} | ${jobData.company_name}`}/>
  <meta name="twitter:description" content={`${jobData.job_description.substring(0, 160)}`}/>
  <meta name="twitter:image" content={`https://ecom-jobs.com/images/${jobData.logo}`}/>
</Head>

3. 修复OG标签的内容与路径错误

OG描述不要重复职位标题，改用职位描述的前160字符（符合Twitter的描述长度限制）
修正OG图片路径：页面内图片用/images/${jobData.logo}，OG标签里要写完整的绝对路径，避免爬虫找不到图片
确保OG的url字段正确：如果jobData.jobUrl不存在，直接用jobId拼接路径

4. 修复React Helmet的语法错误

原代码中Helmet包裹的script标签多了一对括号，导致结构化数据无法解析，修正为：

<Helmet>
  <script className='structured-data-list' type="application/ld+json">
    {JSON.stringify(data)}
  </script>
</Helmet>

5. 解决域名SSL与重定向问题

在Vercel域名设置中，确保www.ecom-jobs.com和ecom-jobs.com都已添加，并且SSL证书正常生效（Vercel可自动配置，若异常手动刷新证书）
设置301重定向，将其中一个域名永久重定向到另一个（比如把www域名重定向到非www），避免爬虫混淆两个域名的内容
确保Twitter机器人发布的链接是正常访问的非www域名

6. 强制刷新Twitter爬虫缓存

使用Twitter官方的卡片验证工具，输入职位页面URL，触发爬虫重新抓取页面内容，清除旧的缓存数据。

内容的提问来源于stack exchange，提问作者Shaun Smerling