JSON Schema 示例生成器 - 根据定义产出示例数据
提供JSON Schema定义,自动生成符合约束的示例JSON数据,用于接口文档说明。
UD5工具箱
验证 JSON-LD 语法,检测 Schema.org 类型,确保结构化数据符合规范
输入 JSON-LD 代码并点击验证
支持单个对象或数组格式
| 类型 | 层级 | 核心属性 | Google Rich Result |
|---|---|---|---|
Product | Thing | name, description, image, offers, sku | 支持 |
Article | Thing > CreativeWork | headline, author, datePublished, image | 支持 |
FAQPage | Thing > CreativeWork > WebPage | mainEntity (Question/Answer) | 支持 |
BreadcrumbList | Thing | itemListElement (ListItem) | 支持 |
Recipe | Thing > CreativeWork > HowTo | name, recipeIngredient, recipeInstructions | 支持 |
LocalBusiness | Thing > Organization > LocalBusiness | name, address, telephone, openingHours | 支持 |
Event | Thing | name, startDate, location, performer | 支持 |
Review | Thing > CreativeWork | reviewRating, author, itemReviewed | 支持 |
HowTo | Thing > CreativeWork | name, step (HowToStep), tool, supply | 支持 |
VideoObject | Thing > CreativeWork > MediaObject | name, contentUrl, thumbnailUrl, duration | 支持 |
Organization | Thing | name, url, logo, contactPoint | 部分 |
Person | Thing | name, url, image, sameAs | — |
JobPosting | Thing | title, description, hiringOrganization, datePosted | 支持 |
Course | Thing > CreativeWork | name, description, provider, teaches | 支持 |
WebSite | Thing > CreativeWork | name, url, potentialAction (SearchAction) | 支持 |
<script type="application/ld+json"> 标签中,不会影响页面渲染。正确使用 JSON-LD 可以帮助搜索引擎更好地理解页面内容,有机会获得 Rich Results(富结果展示),如星级评分、面包屑导航、FAQ 折叠等,从而提升点击率。
@context: "https://schema.org" 声明使用 Schema.org 词汇表,通过 @type 指定具体类型。
@context 和 @type 是 JSON-LD 结构化数据的两个核心字段。@context 定义了术语的上下文,对于 Schema.org 结构化数据,通常设置为 "https://schema.org"。@type 指定了实体的类型,如 Product、Article 等。缺少这两个字段中的任何一个,搜索引擎可能无法正确解析结构化数据。此外,@context 也可以是数组,包含多个上下文来源。
@context 而非 @content;5) URL 格式不正确——确保所有 URL 以 https:// 开头;6) 类型层级错误——使用了不该使用的属性组合。本工具会帮助检测这些常见问题。
<script type="application/ld+json"> 标签,每个标签中有独立的 JSON-LD 数据。也可以在一个 JSON-LD 块中使用数组格式包含多个结构化数据对象(使用 @graph 或直接使用顶层数组)。Google 推荐将相关的结构化数据放在同一个块中,使用 @graph 或数组来组织,这样更清晰且便于维护。
提供JSON Schema定义,自动生成符合约束的示例JSON数据,用于接口文档说明。
输入 GraphQL Schema SDL,生成交互式的关系图谱,展示类型、字段及关联。
输入网址,抓取并展示该页面的标题、描述、OG标签和Twitter Card信息。
拖拽创建树形工作分解结构,清晰展示项目交付物与任务包,支持导出PNG/SVG,项目规划利器。
拖拽设计包含 Subgrid 的嵌套网格,直观展示子网格如何继承父网格轨道并进行独立调整,生成代码。
上传HTTP Archive格式文件,生成请求瀑布图与状态统计,深入了解网页加载细节。
在字符网格上通过工具绘制猫、超人等各种图案,导出为.txt ASCII艺术。
选择页眉、侧边栏、主体、页脚的网格布局,生成基本的布局骨架代码。
在页面移动鼠标时显示十字参考线和像素距离,方便UI开发。
可视化选择设备类型、屏幕方向和宽度范围,一键生成标准CSS媒体查询代码。
生成用于网页游戏或展示的动态血量/进度条样式代码,支持渐变和闪烁。
将HTML表格转换为移动端友好的折叠行显示模式,并生成相应CSS。
通过控件调整网格轨道、间距和对齐,实时展示效果及对应CSS代码,轻松掌握Grid。
按类型筛选状态码,点击查看详细描述与常见使用场景,开发调试速查手册。
动画展示调用栈、宏任务和微任务的执行顺序,帮助理解JS异步机制。
输入网址,通过多个公有镜像请求检测目标站点可用性,并显示各节点状态码。
粘贴SVG代码,移除无用命名空间、注释与默认属性,减小文件体积,提升加载速度。
在多页面或元素切换时呈现流畅的交叉淡入淡出和变形动画,体验原生视图过渡。
输入宽高、背景色和文字,生成对应尺寸的占位图片,适用于原型设计和文档填充。
在可缩放网格上逐点绘制像素艺术,支持调色板、橡皮擦和导出PNG。
输入网址,使用浏览器渲染并转换为可下载的PDF文件(纯前端模拟)。
直接编写SVG代码并实时预览,或通过基本形状工具绘制矩形、圆形、路径,适合动态图形调试。
编写或配置基础的CSS渐变、径向、锥形图案组合,生成美观的无缝重复背景代码。
使用html2canvas截取当前网页的完整内容(需粘贴HTML或演示),生成长图并下载。
设置限制行数,生成带“更多”按钮的纯CSS或轻JS截断方案。
生成漂亮几何图案或文字占位图,指定尺寸,下载用于原型。
为上传的照片添加可调节的三分线、斐波那契螺旋等构图辅助线。
为应用的空白页(如无订单、无消息)生成带插画和文案的HTML/CSS占位组件。
简洁的待办事项管理工具,支持添加、完成、删除任务,数据保存在浏览器本地存储中,刷新不丢失。
上传多张连续重叠截屏,自动对齐并拼成一幅完整长图,完美展示聊天或网页。