Question

我正在尝试使用微数据从链接中提取图书网址。格式在schema.org中指定。这是我的HTML。

  <div class="col-sm-4 col-md-3" itemscope itemtype="http://schema.org/Book">
                    <div class="thumbnail">
                        <img src="{{ book.thumbnailurl }}" itemprop="thumbnailUrl" style="width: 100px;height: 200px;">
                        <div class="caption">
                            <h4><span itemprop="name">{{ book.name }}</span> - <span itemprop="author">{{ book.author }}</span></h4>
                            <p><span itemprop="about"> {{ book.about }}</span></p>
                            <p> 

                                    <a href="{{ book.url }}" itemprop="url" onclick="trackOutboundLink(‘{{ book.name }}’);">
                                      <button type="button" class="btn btn-default btn-md">
                                        <span class="glyphicon glyphicon-book"></span>Read
                                      </button>
                                    </a>

                            </p>
                        </div>
                    </div>
                 </div>

当我使用谷歌snippet testing tool时，JSON API会将图书作为html链接返回。但是，当我在javascript中调用url时，url的值是text（＆＃34; Read＆＃34;）。

javascript - full file

function PrintSearchResults(result) {
    var $result = $("<a href='" + result["link"] + "' class='list-group-item'></a>");
    var $title = $("<h4 class='list-group-item-heading'>" + result['title'] + "</h4>");
    var $snippet = $("<p class='list-group-item-text'>" + result['htmlSnippet'] + "</p>");
    $result.append($title);
    // handle the pagemap if its available. 
    if(result["pagemap"] != undefined){
        var pagemap = result["pagemap"];
        if(pagemap["thumbnail"] != undefined){
            var src = pagemap["thumbnail"][0]["src"];
            var width = 50;
            var height = 50;
            var $thumbnail = $("<div id='result-container'><div class='pull-left' style='margin-right:6px;'><img src='" + src + "' style='width:" + width + "px; height: " + height + "px;'/></div></div>");
            $result.height("100%");
            $result.append($thumbnail); 
        }
    }
    $result.append($snippet);
    if(result["pagemap"] != undefined){
        var pagemap = result["pagemap"];
        if(pagemap["book"]!= undefined){
            $result.append("<hr/>")
            $result.append("<div><em>Other books you may be interested in.</em></div>")
            $booklist = $("<ul style='list-style-type: none;'></ul>");
            pagemap["book"].forEach(function(b){
                var thumbnailurl = b["thumbnailurl"];
                var name = b["name"];
                var author = b["author"];
                var about = b["about"];
                var url = b["url"];
                $booklist.append("<li><span class='glyphicon glyphicon-book' style='margin-right:10px;'></span>" + name + "</li>");
            });

            var $listdivs = $("<div style='margin-left:15px;'></div>");
            $listdivs.append($booklist);
            $result.append($listdivs);
        }
    }
    $('.list-group').append($result);
    HideDisplay();
}

这是我对网站搜索的查询 - query

我缺少什么？

Answer 1

好的，经过大量的挖掘，我得到了答案。

根本原因如下： Google CSE（自定义搜索引擎）不会将微数据属性值作为＆＃34; a＆＃34;的href属性。 HTML元素。它消耗了＆＃34; a＆＃34;中的儿童文本内容。 HTML元素。

Google CSE可以使用＆＃34;链接＆＃34; HTML元素。

因此。

 <a href="{{ book.url }}" itemprop="url" onclick="trackOutboundLink(‘{{ book.name }}’);">

不起作用。

 <link itemprop="url" href="{{ book.url }}">
 <a href="{{ book.url }}" onclick="trackOutboundLink(‘{{ book.name }}’);">

的工作原理。

使用Microdata时，CSE不会从Element中的href属性中获取url

1 个答案: