Create preview images for your web page displayed in Google search results

You might want to create a preview image for your web page which it will be displayed in Google search results. This image will help users in the sense of showing what the resource looks like when searching with Google search engine.

Introduction via examples

Try to find “SBGN” in the “All” section. As of writing this post, the results only have two links having the preview image on the first page. See the screenshot below.

An example of showing preview image in Google search results
An example of showing preview image in Google search results

But if we switch to Google images search with the same keyword, we can have more expected results such as some SBGN drawings shown in the following screenshot.

Google search images with SBGN keyword
Google search images with SBGN keyword

Therefore, Google needs to know where its search engine finds out the preview image for each page to index it. One way to do is to create a sitemap.xml file and leave it in the root directory of the website.

What is the website’s sitemap?

A sample of sitemap.xml
A sample of sitemap.xml

As you can see, XML sitemaps are not human-friendly. XML sitemaps are feeds explicitly designed for search engines. They help search engines like Google comprehend which URLs to crawl and what gets priority. Plus, how often do those URLs change, and which new ones got added to the site.

How to create sitemap.xml files?

Let’s have a look at an example:

https://github.com/sanderlab/tumorcomparer/blob/master/inst/shinyApp/www/static/sitemap.xml

As you can see in the document from the link above, each URL node in the sitemap.xml file should have the tags pointing out the image location and the description shown off when you hover the mouse over the image.

<image:image>
   <image:loc>http://projects.sanderlab.org/tumorcomparer/static/brca_cclp_tcga_tumorcomparer_files/figure-html/comparing_breast_cancer_cell_lines_to_tumor_samples.-1.png</image:loc>
   <image:title>comparing breast cancer cell lines to tumor samples</image:title>
</image:image>

That’s all what you need to do for the sitemap.xml file. Obviously, you have to automate the generation of the sitemap.xml file.

If you have any idea to achieve this work, please share it in the comment box.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.