Question

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! 🙂

Answer 1

Have decided to go down the XML route and parse the results serverside before displaying them. This gives a lot more control over how and when page metadata is displayed, and overall it’s much more powerful. And it’s not as scary as it first appeared!

richSnippets are useful for basic displays but I didn’t feel I could confidently control their display, so that’s another reason to go for XML instead.