动态面包屑模式答案

【问题标题】：dynamic breadcrumb schema动态面包屑模式
【发布时间】：2022-01-21 11:23:25
【问题描述】：

我在 JavaScript 代码中为面包屑设置了动态模式，一切正常。但是当在rich result test from google 中测试Url 时，通常找不到为此的架构。当我看到我的页面检查时，脚本标签的架构存在。

效果不好的原因是什么？

JavaScript 代码是这样的：

 <script>
    var bread = {
        "@@context": "https://www.schema.org",
        "@@type": "BreadcrumbList",
        "itemListElement": []
    }
    var exist = false;
    $('.breadcrumb li').each(function (index) {
        var item = {}
        var href = $(this).find("a").attr('href');
        if (href) item["@@id"] = "@Repository.Settings["WebSiteAddress"]" + href // OR location.protocol+"//"+location.host+href;
        else item["@@id"] = "@Repository.Settings["WebSiteAddress"]" + window.location.pathname
        item["name"] = $.trim($(this).text());

        bread.itemListElement.push({
            "@@type": "ListItem",
            "position": index + 1,
            item
        })
        exist = true;
    });
    if(exist){
        var jsonStrb = JSON.stringify(bread);
   var s2 = document.createElement("script");
   s2.type = "application/ld+json";
   s2.id = "BreadcrumbJson";
   $("body").append(s2);
    $('#BreadcrumbJson').append(jsonStrb);
    }        </script>

【问题讨论】：

标签： javascript html jquery seo schema

【解决方案1】：

这可能是因为代码在 DOM 准备好之前运行，所以 RRT 没有拾取它。

之后尝试运行它——就像你使用 jQuery 一样——通过将你的代码包装在 .ready 方法中：

$(document).ready(function() {

// your code

});

另外，请确保您使用的是有效的 JSON-LD 语法。也就是说，特殊属性应该有一个“@”字符（例如"@context"、"@type"），而不是双字符（"@@context"、"@@type" 等），尽管代码在您的屏幕截图/本地主机上看起来不错，与您提供的单独代码 sn-p 不同。

【讨论】：