# Open Graph生成器

为社交媒体分享和富摘要生成Open Graph元标签

> 标准页面: https://elysiatools.com/zh/tools/open-graph-generator

- **分类:** Development

- **关键词:** open graph, og, 元标签, 社交媒体, 分享, facebook, twitter, linkedin, 富摘要

## 概述

Open Graph生成器是一款专为开发者和内容创作者设计的实用工具，能够快速生成符合社交媒体标准的Open Graph元标签，确保您的网页在Facebook、Twitter、LinkedIn等平台分享时，以美观的富摘要形式呈现。

## 输入项

- **标题** (text): Enter page title...
- **描述** (textarea): Enter page description (recommended: 150-200 characters)
- **URL** (text): https://example.com/page
- **图片URL** (text): https://example.com/image.jpg (recommended: 1200x630px)
- **内容类型** (select)
- **网站名称** (text): Your Website Name
- **语言环境** (text): en_US, zh_CN, es_ES, etc.
- **包含Twitter卡片** (checkbox)
- **Twitter用户名** (text): @yourusername (without @)
- **包含Facebook标签** (checkbox)
- **包含LinkedIn标签** (checkbox)
- **包含基础元标签** (checkbox)
- **额外属性** (textarea): key:value, key:value (e.g., og:audio:audio.mp3, article:published_time:2024-01-01)

## 适用场景

- 在发布新网页或博客文章前，需要优化社交媒体分享预览效果时。
- 需要为不同社交平台（如Twitter卡片）定制特定的分享元数据时。
- 希望通过规范的元标签提升网页在社交媒体上的点击率和展示质量时。

## 工作原理

- 输入网页的基本信息，包括标题、描述、URL及封面图片链接。
- 选择内容类型（如文章、产品或网站）并设置语言环境。
- 勾选需要生成的平台支持，如Twitter卡片或Facebook标签。
- 点击生成，即可获取一段标准的HTML代码，直接复制并粘贴到网页的 部分即可。

## 使用案例

- 博客文章推广：为每篇新文章生成专属的OG标签，确保分享时显示文章标题和精美封面。
- 电商产品展示：通过设置 product 类型，让商品在社交媒体上以富摘要形式展示价格和详情。
- 品牌官网优化：统一配置网站名称和语言环境，提升品牌在社交网络上的专业形象。

## 常见问题

### 什么是Open Graph标签？

Open Graph标签是一组元数据，用于控制网页在社交媒体分享时显示的标题、描述和缩略图。

### 为什么我的分享链接没有显示图片？

通常是因为缺少 og:image 标签，或者图片尺寸不符合社交平台的推荐要求（建议 1200x630px）。

### 这个工具支持哪些社交平台？

支持Facebook、Twitter（通过Twitter卡片）、LinkedIn等主流社交媒体平台。

### 生成的代码应该放在哪里？

请将生成的代码复制并粘贴到您网页 HTML 文件的 和 标签之间。

### 我可以自定义额外的元属性吗？

可以，通过“额外属性”字段，您可以添加如 og:audio 或 article:published_time 等特定元数据。

## 相关工具

- [Data URI 生成器](https://elysiatools.com/zh/tools/data-uri-generator): 将文件转换为 Data URI（Base64 或百分号编码），用于直接在 HTML、CSS 或 Markdown 中内联图片、字体等资源
- [艺术拼贴制作器](https://elysiatools.com/zh/tools/image-collage-maker): 创建艺术照片拼贴，支持圆角、边框、阴影和渐变背景等装饰效果。适合社交媒体发布和照片墙制作。
- [SERP 与社交卡片预览器](https://elysiatools.com/zh/tools/serp-social-preview-studio): 同时渲染 Google SERP（桌面/移动端像素级标题截断）、X (Twitter) 卡片、OpenGraph 卡片，并提供上线前的 SEO 诊断
- [无障碍热力图生成器](https://elysiatools.com/zh/tools/accessibility-heatmap-generator): 从 UI 截图或 HTML 输入生成聚焦对比度的无障碍热力图，并给出建议修补色值
- [批量条码生成器](https://elysiatools.com/zh/tools/barcode-batch-generator): 从 CSV 或多行文本批量生成 Code 128、EAN-13、UPC-A、ITF-14、QR Code 和 Data Matrix，并导出 PNG ZIP 或 PDF
- [深度图生成器](https://elysiatools.com/zh/tools/image-depth-map): 从图像生成深度图，使用亮度、饱和度和边缘分析。生成灰度深度图，较亮像素表示较近物体，较暗像素表示较远物体。
- [分形图案生成器](https://elysiatools.com/zh/tools/image-fractal-generator): 生成美丽的分形图案，包括曼德博集、朱利亚集和燃烧船，参数可自定义
- [晃动立体图生成器](https://elysiatools.com/zh/tools/image-wiggle-stereoscopy): 生成晃动立体图GIF，通过快速交替左右视角创建3D效果。无需3D眼镜！

## 示例

- [Android Java 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-java): Android Java 图像处理示例，包括图像读取保存、缩放和格式转换
- [Android Kotlin 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-kotlin): Android Kotlin 图像处理示例，包括图像读取保存、缩放和格式转换
- [Web Python 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-python): Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
- [Web Rust 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-rust): Web Rust 图像处理示例，包括图像读取保存、缩放和格式转换

## 相关内容

- [技术 SEO URL 工作流](https://elysiatools.com/zh/hubs/technical-seo-url-workflows): 校验 SEO 友好的 slug，检查查询参数，准备 robots 与 sitemap，生成社交元数据，并在上线前验证页面信号。