OG Meta标签生成器 - Open Graph和Twitter卡片预览
用可视化预览生成Open Graph和Twitter Card元标签。查看页面在Facebook、X(Twitter)和LinkedIn分享时的效果。
常见问题
什么是 Open Graph 元标签？
Open Graph (OG) 元标签是 HTML 元素，用于控制 URL 在 Facebook、Twitter、LinkedIn 和 Slack 等社交媒体平台上共享时的显示方式。它最初由 Facebook 在 2010 年创建，现已成为社交分享元数据的标准。主要标签包括 og:title、og:description、og:image 和 og:url。没有这些标签，社交平台会自动提取信息，通常会产生不准确或不美观的预览。
如何使用这个 OG Meta 生成器？
在 Open Graph 字段中输入页面标题、描述、图片 URL 和页面 URL。选择适当的内容类型。可选择自定义 Twitter Card 字段——默认继承 OG 值。实时预览显示链接在 Facebook、Twitter、LinkedIn 和 Slack 上的显示效果。选择导出格式并复制代码。
我的数据安全吗？会发送到服务器吗？
所有元标签生成和预览渲染都使用 JavaScript 在浏览器中 100% 客户端执行。页面标题、描述、URL 或图片引用不会传输到任何服务器。此工具完全在浏览器中运行，可安全用于未发布的产品页面和机密营销内容。
Open Graph 标签和 Twitter Card 标签有什么区别？
Open Graph 标签（使用 property="og:..."）是 Facebook、LinkedIn、WhatsApp、Slack 和大多数平台使用的通用标准。Twitter Card 标签（使用 name="twitter:..."）特定于 Twitter/X。最佳实践是同时包含两者。
社交媒体分享应使用什么图片尺寸？
Open Graph（Facebook、LinkedIn）推荐图片尺寸为 1200 x 630 像素。Twitter 大图摘要卡使用 1200 x 628 像素（约 2:1 比例）。始终使用 HTTPS URL。
添加元标签后为什么社交媒体预览没有更新？
社交平台会积极缓存链接预览。更新元标签后，需要使用各平台的官方调试工具清除缓存：Facebook Sharing Debugger、Twitter Card Validator 和 LinkedIn Post Inspector。
代码示例
// Generate OG and Twitter Card meta tags
function generateMetaTags({ title, description, image, url, type = 'website', twitterCard = 'summary_large_image' }) {
const escape = (s) => s.replace(/&/g, '&').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
const tags = [];
if (title) tags.push(`<meta property="og:title" content="${escape(title)}" />`);
if (description) tags.push(`<meta property="og:description" content="${escape(description)}" />`);
if (image) tags.push(`<meta property="og:image" content="${escape(image)}" />`);
if (url) tags.push(`<meta property="og:url" content="${escape(url)}" />`);
tags.push(`<meta property="og:type" content="${escape(type)}" />`);
tags.push(`<meta name="twitter:card" content="${escape(twitterCard)}" />`);
if (title) tags.push(`<meta name="twitter:title" content="${escape(title)}" />`);
if (description) tags.push(`<meta name="twitter:description" content="${escape(description)}" />`);
if (image) tags.push(`<meta name="twitter:image" content="${escape(image)}" />`);
return tags.join('\n');
}
console.log(generateMetaTags({
title: 'My Page',
description: 'A great page about something.',
image: 'https://example.com/image.jpg',
url: 'https://example.com'
}));