7 个常见的 OpenGraph 错误及其解决方法

嘿，开发人员！👋 在帮助数百名 Gleam.so 用户处理他们的 OG 图像后，我注意到了一些常见的模式。以下是最常见的错误及其解决方法。

1. 图像尺寸不正确

问题

一位用户分享道：

“我的图片在 Twitter 上看起来很完美，但在 LinkedIn 上却被裁剪得很奇怪。”

修复

**专业提示：**使用 1200x630px 作为默认尺寸。它适用于所有平台。

2. 文本可读性问题

问题

// Common mistake: Not considering mobile view
const title = {
  fontSize: '32px',
  color: '#666666',  // Low contrast
  fontWeight: 'normal'
};

用户反馈：

“在移动设备上共享时，文本无法阅读。”

修复

// Text optimization
const titleStyle = {
  fontSize: '72px',
  color: '#000000',
  fontWeight: 'bold',
  lineHeight: 1.2,
  maxWidth: '80%'  // Prevent edge bleeding
};

// Contrast checker
const hasGoodContrast = (bg: string, text: string): boolean => {
  return calculateContrast(bg, text) >= 4.5;
};

3. 缺少后备数据

问题

用户体验：

“当 OG 图像加载失败时，帖子看起来就损坏了。”

修复

4.缓存问题

问题

// Image updates not reflecting
const ogImage = '/static/og-image.png';

常见投诉：

“更新了我的原始形象，但社交平台仍然显示旧形象。”

修复

// Add version control
const getOGImageUrl = (baseUrl: string): string => {
  const version = Date.now();
  return `${baseUrl}?v=${version}`;
};

// Usage

5. 表现不佳⚡

问题

// Generating images on every request
const generateOG = async (text: string) => {
  const svg = createSVG(text);
  const png = await convertToPNG(svg);
  return png;
};

用户反馈：

“OG 图像生成减慢了我的整个网站的速度。”

修复

// Implement caching
const cachedGenerate = async (text: string) => {
  const cacheKey = createHash(text);
  const cached = await cache.get(cacheKey);

  if (cached) return cached;

  const image = await generateOG(text);
  await cache.set(cacheKey, image, '7d');

  return image;
};

6. URL 损坏

问题

常见问题：

“我的 OG 图像可以在本地运行，但在生产中无法运行。”

修复

// Always use absolute URLs
const getAbsoluteUrl = (path: string): string => {
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
  return new URL(path, baseUrl).toString();
};

// Usage

7. 缺少移动优化

问题

// Desktop-only testing
const testOG = async (url: string) => {
  const response = await fetch(url);
  return response.ok;
};