I'm creating a Google Site Search custom search engine and I'm trying to display certain metadata in the search results, using conditional markup to prevent certain things being shown. The metadata is stored on my pages using PageMaps, like this:
<!--
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>
-->
Some pages generate all of this info, others just include a few things (e.g. title and type).
I want to be able to display whatever information is included here, depending on the page. This relies on conditional data-if
attributes in the webResult
template.
This is what I've got so far:
<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>
(You can see I've been mucking about commenting things out etc.)
I can't seem to get the conditionals to work. Some attributes work great though, so I'm almost there. Pages like the Homepage, which doesn't include most of the attributes, give this error in the results:
TypeError: Cannot read property 'snifferCode' of undefined: richSnippet && richSnippet.document.snifferCode
I've gone through the Google's documentation here but I've not found it to be particularly comprehensive.
Any thoughts much appreciated! :)