How to Index Thumbnails for Crawler Based Engines

As you're getting started with Swiftype, you may be wondering how to index thumbnails from your website and serve them to users in your search results. The answer to this question lies in using Swiftype's custom <meta> tags, which allow site owners to pass detailed web page information to Swiftbot, our web crawler, as it moves across your site. As Swiftbot encounters these custom Swiftype <meta> tags, it indexes their content and incorporates that information in your search engine index schema. To learn more, see our dedicated <meta> tags tutorial.

To index thumbnails from your website, all you need to do is add a Swiftype image <meta> tag to the <head> section of your website template that indicates where images are located on your various page types. For illustration purposes, the Swiftype image <meta> tag is formatted like this:

<meta class="swiftype" name="image" data-type="enum" content="http://fullurl.com/example.jpg" />

Swiftype recommends placing these <meta> tags at the template level of your website to ensure that image files are dynamically populated within the tags, rather than being added manually for every page on site.

NOTE: the value of the "content" attribute must be HTML encoded. For more information see this guide. It is also important to use absolute image URL, not a relative path.

Alternatively, you can wrap images with a body-embedded Swiftype image <meta> tag to avoid changing your website <head>. For example, Swiftbot will index http://fullurl.com/example.jpg into the image field from the HTML below:

<body>
  <h1>Hello world</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut risus sed ante dignissim pharetra aliquet a orci. Maecenas varius.</p>
  <p>In in augue molestie, bibendum velit vel, luctus erat. Curabitur cursus, tellus at feugiat lacinia, tellus est suscipit lectus, non commodo diam elit sit amet justo.</p>
  <span data-swiftype-name="image" data-swiftype-type="enum" style="display:none;">http://fullurl.com/example.jpg</span>
</body>

It is important to note that in both the <head> and <body> embedded <meta> tags, you need to specify the data-type attribute as enum. For images, this will always be the case. For any other custom <meta> tags you choose to define, each attribute must be a valid, Swiftype-supported field type, which you may read about here.

tutorials

How to Index Thumbnails for Crawler Based Engines