无需登录 数据私有 本地保存

Schema.org 结构化数据标记生成器 - JSON-LD 创建

24
0
0
0
组织 Organization
本地商家 LocalBusiness
产品 Product
文章 Article
面包屑 BreadcrumbList
常见问答 FAQ
个人 Person
活动 Event
食谱 Recipe
评价 Review
生成的 JSON-LD
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "",
  "url": ""
}
字符数: 0
常见问题
什么是 Schema.org 结构化数据?

Schema.org 是由 Google、Microsoft、Yahoo 和 Yandex 联合创建的标准词汇表,用于标记网页内容,帮助搜索引擎理解页面信息,从而在搜索结果中展示富媒体片段(Rich Snippets)。

JSON-LD 格式有什么优势?

JSON-LD 是 Google 推荐的结构化数据格式。它与 HTML 代码分离,易于维护和更新,不影响页面布局,且支持动态注入。相比 Microdata 和 RDFa 更加灵活简洁。

如何验证生成的 JSON-LD 是否正确?

您可以使用 Google Rich Results Test(富媒体搜索结果测试)或 Schema Markup Validator 来验证生成的代码。复制生成的 JSON-LD 粘贴到测试工具中即可检查。

这段代码应该放在网页的什么位置?

将生成的 <script type="application/ld+json"> 代码块放在 HTML 的 <head><body> 中均可。Google 建议放在 <head> 中以便更快被解析。

所有字段都必须填写吗?

不是。带红色圆点标记的为推荐必填字段,其余为可选字段。但填写越完整,搜索引擎展示富媒体片段的可能性越大。建议至少填写核心字段。

BreadcrumbList 面包屑导航有什么 SEO 价值?

面包屑结构化数据能让搜索结果展示完整的导航路径,提升点击率(CTR)。它帮助用户了解页面在网站中的位置,也是 Google 强烈推荐使用的标记类型之一。

`; // 简单语法高亮 const highlighted = highlightJSON(generatedJSON); $preview.html(highlighted); const charCount = fullCode.length; $charCount.text(`字符数: ${charCount} (含script标签)`); // JSON验证 try { JSON.parse(generatedJSON); $badgeValid.show(); $badgeInvalid.hide(); } catch(e) { $badgeValid.hide(); $badgeInvalid.show(); } } function highlightJSON(jsonStr) { // 简单的JSON语法高亮 return jsonStr .replace(/&/g, '&') .replace(//g, '>') .replace(/("(?:[^"\\]|\\.)*")(\s*:)/g, '$1$2') .replace(/:(\s*)("(?:[^"\\]|\\.)*")/g, ':$1$2') .replace(/:(\s*)(\d+\.?\d*)/g, ':$1$2') .replace(/:(\s*)(true|false)/g, ':$1$2') .replace(/:(\s*)(null)/g, ':$1$2') .replace(/"@context"|"@type"|"@id"/g, '$&'); } function fillExample() { const example = exampleData[currentType]; if (!example) return; const config = schemaConfigs[currentType]; if (!config) return; if (config.isDynamicList) { if (example.items) { renderDynamicListItems(config, example.items); } } else { // 填充标准字段 if (config.fields) { config.fields.forEach(field => { if (example[field.name] !== undefined) { const $el = $(`.sg-field[data-field="${field.name}"]`); if ($el.length) $el.val(example[field.name]).trigger('change'); } }); } // 填充嵌套字段 if (config.nested) { for (const [nestedKey, nestedConfig] of Object.entries(config.nested)) { if (example[nestedKey] && nestedConfig && nestedConfig.fields) { nestedConfig.fields.forEach(field => { const fullName = nestedKey + '.' + field.name; const $el = $(`.sg-field[data-field="${fullName}"]`); if ($el.length && example[nestedKey][field.name] !== undefined) { $el.val(example[nestedKey][field.name]).trigger('change'); } }); } } } } updatePreview(); showToast('✅ 已填充示例数据'); } function clearForm() { $('.sg-field').val('').trigger('change'); // 重置动态列表 const config = schemaConfigs[currentType]; if (config && config.isDynamicList) { const emptyItem = {}; config.listItemFields.forEach(f => { emptyItem[f.name] = ''; }); renderDynamicListItems(config, [emptyItem]); } // 重置select $('.sg-field[type="select"]').each(function() { $(this).prop('selectedIndex', 0); }); updatePreview(); showToast('🗑️ 已清空表单'); } function copyCode() { const fullCode = ``; if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(fullCode).then(() => { $btnCopy.addClass('copied'); $btnCopy.html('已复制'); showToast('📋 已复制到剪贴板!'); setTimeout(() => { $btnCopy.removeClass('copied'); $btnCopy.html('复制'); }, 2000); }).catch(() => { fallbackCopy(fullCode); }); } else { fallbackCopy(fullCode); } } function fallbackCopy(text) { const textarea = document.createElement('textarea'); textarea.value = text; textarea.style.position = 'fixed'; textarea.style.opacity = '0'; document.body.appendChild(textarea); textarea.select(); try { document.execCommand('copy'); showToast('📋 已复制到剪贴板!'); $btnCopy.addClass('copied'); $btnCopy.html('已复制'); setTimeout(() => { $btnCopy.removeClass('copied'); $btnCopy.html('复制'); }, 2000); } catch(e) { showToast('⚠️ 复制失败,请手动选择代码'); } document.body.removeChild(textarea); } function downloadJSON() { const fullCode = ``; const blob = new Blob([fullCode], { type: 'text/html;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `schema-${currentType.toLowerCase()}.html`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showToast('💾 文件下载中...'); } function showToast(message) { const existingToast = document.querySelector('#schema-gen .toast-copy'); if (existingToast) existingToast.remove(); const toast = document.createElement('div'); toast.className = 'toast-copy'; toast.textContent = message; document.querySelector('#schema-gen').appendChild(toast); setTimeout(() => { toast.style.opacity = '0'; toast.style.transition = 'opacity 0.3s'; setTimeout(() => toast.remove(), 300); }, 2500); } // 事件绑定 $('#schema-gen').on('click', '.schema-type-card', function() { const type = $(this).data('type'); if (type === currentType) return; $('.schema-type-card').removeClass('active'); $(this).addClass('active'); currentType = type; renderForm(type); updatePreview(); }); $('#sg-btn-copy').on('click', copyCode); $('#sg-btn-download').on('click', downloadJSON); $('#sg-btn-example').on('click', fillExample); $('#sg-btn-clear').on('click', clearForm); // 键盘快捷键 Ctrl+C 在预览区 $preview.on('click', function() { // 点击预览区全选(方便复制) const selection = window.getSelection(); const range = document.createRange(); range.selectNodeContents(this); selection.removeAllRanges(); selection.addRange(range); }); // 初始化 renderForm('Organization'); updatePreview(); // 监听动态列表变化(用于更新预览) $(document).on('input change', '#sg-dynamic-list .sg-field', function() { updatePreview(); }); })();