如何在需要等待内容加载的动态页面上使用 JSON-LD 添加结构化数据？
Posted
技术标签:
【中文标题】如何在需要等待内容加载的动态页面上使用 JSON-LD 添加结构化数据？【英文标题】：How do I add structured data using JSON-LD on dynamic pages that need to wait for content to load? 【发布时间】：2015-10-24 05:10:50 【问题描述】：我正在开发一个网站，我想将结构化数据添加到详细页面。 问题是我需要在知道要添加到 JSON-LD 脚本的内容之前请求数据。
我使用 Parse 作为后端。我还尝试四处寻找有关如何实现这一目标的教程，但似乎无法动态添加 JSON-LD。
我真的希望有人可以帮助我！ :)
编辑：
我需要放入 JSON-LD 中的数据的响应是在 DOM 准备好之后出现的。这种情况下的模式是什么？
我有一个项目列表，当单击其中一个时，我必须打开一个必须先加载的详细信息页面，但在加载内容后，我想通过 JSON-LD 提供结构化数据。
我才刚开始，我很难解决这个问题。
编辑 2：
这是我的实际实现：
在 html 中：
<body>
// my html page code
...
<script type="text/javascript">
loadDetailPageContent();
</script>
</body>
在 JS 中：
function loadDetailPageContent()
// Calling the method here is too early because I don't have info
//writeData();
createDetailPage();
function createDetailPage()
var recipe = Parse.Object.extend("Recipe");
var query = new Parse.Query(recipe);
query.equalTo("objectId", myId);
query.first(
success: function(result)
// Calling the method here would be perfect
writeData();
,
error: function(error)
alert("Error: " + error.code + " " + error.message);
);
function writeData()
var script = document.createElement('script');
script.type = 'application/ld+json';
script.text = JSON.stringify(
"@context": "http://schema.org",
"@type": "Recipe",
"name": "My recipe name"
);
document.querySelector('head').appendChild(el);
如您所见，writeData() 方法在两个地方被调用。如果我一开始就立即调用它，没有问题，并且使用谷歌结构化数据测试工具，我能够跟踪我需要的结构化数据。问题在于，那时我没有创建结构化数据的信息，因为我需要等待 Parse 的响应。
当我在成功回调中调用方法时，测试工具无法再检索数据:(
【问题讨论】：
您可以创建一个动态创建 JSON-LD 的脚本，google 的结构化数据解析器 - ***.com/questions/27169085/javascript-inside-ld-json 嘿 Mousey，谢谢，我找到了您链接的答案，问题是在创建 JSON-LD 之前我需要等待请求的响应。如果我将aswer中的代码添加到js文件中，结构化数据不存在 您只需要使用window.onload 或$(document).ready() 等待DOM 准备好，将创建JSON-LD 的部分放入***.com/questions/799981/… 中
哦！谢谢 Mousey，我会尝试并给你反馈！
@AlexBalo 你得到完美答案了吗？如果您使用 ajax 响应创建的 json-ld 来解决这个问题，我需要一些帮助。我在谷歌上看不到更新的结果。不是谷歌结构化工具中的事件。
【参考方案1】：
http://jsfiddle.net/c725wcn9/2/embedded
您将需要检查 DOM 以检查其是否有效。需要jquery。
$(document).ready(function()
var el = document.createElement('script');
el.type = 'application/ld+json';
el.text = JSON.stringify( "@context": "http://schema.org", "@type": "Recipe", "name": "My recipe name" );
document.querySelector('head').appendChild(el);
);
您的代码包含变量名称script，但将变量el 附加到<head>。还删除了使用 JSON-LD playground 检查的 JSON 字符串中的换行符。
【讨论】：
哦，好的，伟大的 Mousey，我今晚在家时会检查这个答案。对于 el 变量，我可能只是错误地复制和粘贴了。我会尽快给您反馈。 您好 Mousey，我尝试使用您的代码，但不幸的是，用于测试结构化数据的 Google 工具无法找到我注入的 json。 developers.google.com/structured-data/testing-tool。我认为问题是由于我需要在注入之前等待我的 Parse 请求的响应，并且此时页面已经被扫描以查找结构化数据。我真的很难理解它是如何工作的。 @AlexBalo - 这就是为什么您需要检查 DOM 以获取动态创建的 JSON-LD 代码，然后您可以将其复制到谷歌测试器中，或者使用代码创建一个测试页面并抓取它然后看看它是否出现（我花了 2 天）。 Google 的工具不检查动态代码，结构化数据 linter 工具也不检查。 啊，好吧，你的意思是用谷歌工具它不会被检索，但如果我在 DOM 中看到它，这意味着搜索引擎将能够理解它，对吧？我可以检查一下。例如在我的搜索控制台中的 2 天，对吗？ 感谢 Mousey 的帮助！【参考方案2】：我认为 Mousey 完美地回答了这个问题，我将分享类似的 我们在页面上加载航班详细信息但对于价格我们调用 API 的场景 当页面加载时，我们必须在获取价格时动态加载架构。
我们创建了一个嵌套函数，我们在页面加载和传递飞行时调用它 详细信息然后在我们调用“priceGraber”API 时页面加载（获取航班 price), 一旦 priceGraber 返回成功响应，我们就注入 schema 在页面上。
架构创建功能：
// create product schema
createProductSchema = function(from, to, currency)
return injectSchema = function(price)
let el = document.createElement('script');
el.type = 'application/ld+json';
el.text = JSON.stringify(
"@context": "https://schema.org/",
"@type": "Product",
"name": `Flight from $from to $to`,
"description": `Cheap flights from $from to $to`,
"offers":
"@type": "Offer",
"url": `http://flightsearches.net?fso=$from&fsd=$to`,
"priceCurrency": `$currency`,
"availability": "https://schema.org/InStock",
"price": `$price`,
);
console.log('inject now ');
document.querySelector('head').appendChild(el);
;
;
页面加载时可用的架构的页面加载传递信息
下面的脚本在刀片文件中， $flight_from , $flight_to 是刀片指令（服务器端变量）
<script>
$(function()
if(typeof createProductSchema == "function")
console.log('create product schema...');
window.injectProductSchema = createProductSchema( $flight_from , $flight_to );
else
console.error("product schema creator doesn't exists !");
);
</script>
动态注入架构
我们在 ajax 响应中调用下面的函数，在那里我们得到“价格”表单 API，然后这个函数调用嵌套函数，然后将模式附加到头部
window.injectProductSchema(price);
【讨论】：
以上是关于如何在需要等待内容加载的动态页面上使用 JSON-LD 添加结构化数据？的主要内容，如果未能解决你的问题，请参考以下文章