UD5工具箱
网页整页截图生成器 - html2canvas当前页面捕获
使用html2canvas截取当前网页的完整内容（需粘贴HTML或演示），生成长图并下载。
网页元数据查看器
检测 Open Graph / Twitter Card / SEO 元标签，预览社交媒体分享效果
快速体验：
加载中...
正在获取网页元数据...
Facebook / Open Graph 预览
—
—
—
Twitter Card 预览
—
—
—
📋 关键标签检查
📊 Open Graph 标签详情
| 属性 | 内容 | |
|---|---|---|
| 暂无数据 | ||
🐦 Twitter Card 标签详情
| 属性 | 内容 | |
|---|---|---|
| 暂无数据 | ||
🔍 其他SEO元标签
| 名称 | 内容 | |
|---|---|---|
| 暂无数据 | ||
📝 原始Meta标签 (共 0 个)
输入网页URL开始检测
查看网页在社交媒体上的分享预览效果
常见问题
Open Graph (OG) 是由 Facebook 于2010年推出的开放图谱协议，它通过
<meta property="og:xxx"> 标签让网页在社交媒体上被分享时能展示丰富的预览卡片（包含标题、描述、缩略图等）。如今已被 LinkedIn、Slack、Discord、WhatsApp、Telegram 等几乎所有主流平台广泛采用。没有 OG 标签的网页在分享时可能只显示一个裸露的链接，严重影响点击率和用户体验。
Twitter Card 是 Twitter/X 平台专用的元数据标准，使用
twitter: 前缀。虽然 Twitter 在2018年后也支持回退读取 OG 标签（当 twitter 标签缺失时），但为了精确控制在不同平台上的展示效果，强烈建议同时设置两套标签。特别是 twitter:card 决定了卡片类型（summary / summary_large_image / player），而 OG 没有这个区分。最佳实践是让两者共存，且内容保持一致。
Facebook 推荐 1200×630 像素（比例 1.91:1），这是最通用的尺寸，在绝大多数平台都能良好展示。Twitter summary_large_image 推荐 1200×675（比例 16:9）。格式方面，JPEG 和 PNG 均可，文件大小建议不超过 5MB（Facebook）或 1MB（Twitter）。务必使用绝对URL而非相对路径，否则平台可能无法正确抓取图片。另外，图片内容中文字占比不宜过大，避免被平台裁切后信息丢失。
常见原因包括：① 缓存问题——Facebook/Twitter 会缓存抓取结果，修改后需使用官方调试工具手动刷新（Facebook Sharing Debugger、Twitter Card Validator）；② 标签位置——OG标签必须在
<head> 中，且建议放在所有JS/CSS之前；③ 图片URL不是绝对路径或无法公开访问；④ 服务器响应过慢（超过10秒）导致爬虫超时；⑤ robots.txt 或 X-Robots-Tag 阻止了爬虫访问。使用本工具可以快速检查标签是否正确嵌入，然后配合官方调试工具刷新缓存。
最常见的
og:type 值包括：website（通用网站/首页）、article（文章/博客，Facebook会特别展示作者和发布时间）、product（商品页，可配合 product:price 等标签）、video.movie（视频内容）、profile（个人主页）、book（书籍）、music.album（音乐专辑）。正确设置 type 能让平台更好地理解页面内容类型，从而给予更精准的展示和推荐。如果不确定，使用 website 即可。
本工具通过 CORS 代理服务获取目标网页的原始 HTML，然后在浏览器端使用 DOMParser 解析
<meta> 标签。由于浏览器的同源策略限制，直接从客户端抓取其他域名会失败，因此依赖代理中转。如果您需要更高的稳定性，可以在自己的服务器上部署后端代理（如 Cloudflare Workers、Node.js 等），然后修改本工具的代理地址。
已复制到剪贴板
GraphQL Schema 关系图浏览器 - 类型图谱展示
输入 GraphQL Schema SDL，生成交互式的关系图谱，展示类型、字段及关联。
JSON Schema 示例生成器 - 根据定义产出示例数据
提供JSON Schema定义，自动生成符合约束的示例JSON数据，用于接口文档说明。
JSON 数据表格生成器 - 自动列与样式
粘贴 JSON 数组，自动生成带搜索、排序和分页功能的数据表格组件。
占位图片生成器 - 在线生成示意图片(Canvas)
自定义尺寸、背景色、文字，纯前端生成占位图，适用于原型设计和网页排版，无需依赖外部服务。
在线像素标尺 - 测量网页元素宽高
在页面移动鼠标时显示十字参考线和像素距离，方便UI开发。
HAR 文件分析器 - 网络请求日志可视化
上传HTTP Archive格式文件，生成请求瀑布图与状态统计，深入了解网页加载细节。
像素画编辑器 - 在线网格绘图与导出
在可缩放网格上逐点绘制像素艺术，支持调色板、橡皮擦和导出PNG。
占位图构建器 - 指定宽高文字自动生成
输入宽高、背景色和文字，生成对应尺寸的占位图片，适用于原型设计和文档填充。
API Blueprint 预览器 - 在线渲染 API 文档
编写 API Blueprint 标记，实时预览生成的 HTML 文档，方便 API 设计。
CSS Grid交互演示 - 网格布局可视化学习
通过控件调整网格轨道、间距和对齐，实时展示效果及对应CSS代码，轻松掌握Grid。
视图过渡动画演示 - View Transitions API
在多页面或元素切换时呈现流畅的交叉淡入淡出和变形动画，体验原生视图过渡。
结构化数据 (JSON-LD) 验证器 - Schema.org 类型检测
粘贴JSON-LD，校验其是否符合Schema.org语法并预览可能触发的丰富结果类型。
Alexa Skill 意图模型验证器 - 检查 JSON 语法
粘贴 Alexa 技能交互模型 JSON，验证格式并检查常见错误。
高级占位图生成器 - 渐变/几何/文字组合
生成漂亮几何图案或文字占位图，指定尺寸，下载用于原型。
工作任务分解结构(WBS)图 - 在线绘制并导出
拖拽创建树形工作分解结构，清晰展示项目交付物与任务包，支持导出PNG/SVG，项目规划利器。
CSS Subgrid 布局构建器 - 对齐嵌套网格轨道
拖拽设计包含 Subgrid 的嵌套网格，直观展示子网格如何继承父网格轨道并进行独立调整，生成代码。
CSS Subgrid 布局生成器 - 可视化创建子网格
拖拽嵌套网格项，预览并生成使用 CSS Subgrid 对齐父子网格的代码。
布局蓝图生成器 - 线框容器配置
选择页眉、侧边栏、主体、页脚的网格布局，生成基本的布局骨架代码。
GraphQL 查询成本计算器 - 估算字段解析复杂度
粘贴 GraphQL 查询和 Schema（或模拟类型权重），计算请求的代价分，辅助限流策略。
网页长截图工具 - 滚动捕捉整个页面
输入URL或使用当前页，自动滚动并拼接为一张完整的长图。
ASCII字符画编辑器 - 网格绘制导出
在字符网格上通过工具绘制猫、超人等各种图案，导出为.txt ASCII艺术。
空状态插画生成器 - 无数据占位符
为应用的空白页（如无订单、无消息）生成带插画和文案的HTML/CSS占位组件。
响应式表格生成器 - 移动端堆叠表格
将HTML表格转换为移动端友好的折叠行显示模式，并生成相应CSS。
Temporal API 演练场 - 现代日期时间处理实验
使用 Temporal 提案中的对象（PlainDate, ZonedDateTime 等）进行日期运算和格式化。
视频缩略图提取器 - 任意时间点截图
加载本地视频，拖动时间轴选取帧，捕获该帧为PNG图片下载。
三分法构图覆盖 - 上传图片加九宫格参考线
为上传的照片添加可调节的三分线、斐波那契螺旋等构图辅助线。
在线SVG基础编辑器 - 矢量图形可视化绘制
直接编写SVG代码并实时预览，或通过基本形状工具绘制矩形、圆形、路径，适合动态图形调试。
JavaScript事件循环可视化 - 任务队列动画
动画展示调用栈、宏任务和微任务的执行顺序，帮助理解JS异步机制。
网页截取转PDF - 输入URL生成PDF
输入网址，使用浏览器渲染并转换为可下载的PDF文件（纯前端模拟）。