google-custom-search - 谷歌网站搜索 : customising rich snippets with metadata in search results

Question

我正在创建一个 Google Site Search 自定义搜索引擎，并尝试在搜索结果中显示某些元数据，并使用条件标记来防止显示某些内容。元数据使用 PageMap 存储在我的页面上，如下所示:

<!--
    Google Search PageMap
    <PageMap>
        <DataObject type="document">
            <Attribute name="type">project</Attribute>
            <Attribute name="title">Page title</Attribute>
            <Attribute name="topic">Page topic</Attribute>

            <Attribute name="topic_url">http://url.com/knowledge-hubs/resilient-catchments/river-restoration-partnerships/</Attribute>
            <Attribute name="knowledge_hub">Page knowledge hub</Attribute>
            <Attribute name="knowledge_hub_url">http://url.com/knowledge-hubs/resilient-catchments/</Attribute>
            <Attribute name="sniffer_code">ABC123</Attribute>
            <Attribute name="project_status">Active</Attribute>
            <Attribute name="project_start">1 August 2010</Attribute>
            <Attribute name="project_end">1 July 2012</Attribute>
        </DataObject>

        <DataObject type="thumbnail">
            <Attribute name="src">http://url.com/img.jpg</Attribute>
            <Attribute name="width">100</Attribute>
            <Attribute name="height">60</Attribute>
        </DataObject>
    </PageMap>
-->

有些页面生成所有这些信息，其他页面仅包含一些内容(例如标题和类型)。

我希望能够显示此处包含的任何信息，具体取决于页面。这依赖于 webResult 模板中的条件 data-if 属性。

这是我到目前为止所得到的:

<article id="sniffer_webResult">
            <div class="gs-title">
                <a data-attr="{href:unescapedUrl,target:target}" class="gs-title">
                    <!--<span data-if="typeof richSnippet != 'undefined'" data-body="richSnippet.document.title"></span>-->
                    <span data-body="html(title)"></span>
                </a>
            </div>

            <div data-if="Vars.richSnippet" data-attr="0" data-body="render('thumbnail',richSnippet,{url:unescapedUrl,target:target})"></div>
            <div class="gs-snippet" data-body="html(content)"></div>
            <div data-if="typeof richSnippet != 'undefined'" class="meta">
                <!--<article data-if="richSnippet.document.type == 'project'">-->
                    <!--<div data-if="richSnippet.document.snifferCode != 'undefined'"><strong>Sniffer code: </strong><span data-body="richSnippet.document.snifferCode" data-attr="0"></span></div>-->
                    <div data-if="richSnippet && richSnippet.document.snifferCode"><strong>Sniffer code: </strong><span data-body="richSnippet.document.snifferCode" data-attr="0"></span></div>
                    <div data-if="richSnippet.document.projectStatus != null"><strong>Status: </strong><span data-body="richSnippet.document.projectStatus" data-attr="0"></span></div>
                    <div data-if="richSnippet.document.topic != null" class="topic"><strong>Topic: </strong><a data-attr="{href:richSnippet.document.topicUrl}" data-body="richSnippet.document.topic" data-attr="0"></a></div>
                    <div data-if="richSnippet.document.knowledgeHub != null" class="hub"><strong>Knowledge hub: </strong><a data-attr="{href:richSnippet.document.knowledgeHubUrl}" data-body="richSnippet.document.knowledgeHub" data-attr="0"></a></div>
                <!--</article>-->
            </div>
        </article>

(你可以看到我一直在搞评论等事情。)

我似乎无法让条件发挥作用。不过有些属性效果很好，所以我就快到了。像主页这样不包含大部分属性的页面会在结果中出现以下错误:

TypeError: Cannot read property 'snifferCode' of undefined: richSnippet && richSnippet.document.snifferCode

我已经浏览了 Google 的文档 here但我发现它不是特别全面。

非常感谢任何想法! :)

Answer 1

已决定沿着 XML 路线并在服务器端解析结果，然后再显示它们。这可以更好地控制页面元数据的显示方式和时间，总体而言它的功能更加强大。而且它并不像最初出现的那么可怕!

richSnippets 对于基本显示很有用，但我觉得我无法自信地控制它们的显示，所以这是使用 XML 的另一个原因。