Specify thumbnails

Thumbnail images in search results are a useful way to give users more information about the URLs in your custom search results pages. By default, your custom search results will automatically show thumbnail images where available. (You can disable this on the Look and Feel page of the Control Panel.)

A Google Custom Search rich snippet featuring a thumbnail image and two actions

 

You can specify thumbnail images as follows:

  • PageMap data in the <head> section of your HTML page
  • A thumbnail meta tag.

Using a PageMap

You can specify a thumbnail image by adding a PageMap (a block of code) to the <head> section of your page. This content is invisible to users, but it can provide valuable information to Custom Search. Create a thumbnail DataObject for your thumbnail image, like this:

<!--
  <PageMap>
    <DataObject type="thumbnail">
      <Attribute name="src" value="http://www.example.com/recipes/applepie/applepie.jpg"/>
      <Attribute name="width" value="100"/>
      <Attribute name="height" value="130"/>
    </DataObject>
  </PageMap>
-->

(You can also use PageMaps to create actions and custom attributes.)

Using a thumbnail meta tag

To specify a thumbnail image for a page, you can add a thumbnail meta tag to the <head> section of the page, like this:

<meta name="thumbnail" content="http://example/foo.jpg" />