{"id":4044,"date":"2022-10-09T11:32:05","date_gmt":"2022-10-09T10:32:05","guid":{"rendered":"https:\/\/www.itersdesktop.com\/?p=4044"},"modified":"2022-10-09T11:32:23","modified_gmt":"2022-10-09T10:32:23","slug":"create-preview-images-for-your-web-page-displayed-in-google-search-results","status":"publish","type":"post","link":"https:\/\/www.itersdesktop.com\/fr\/2022\/10\/09\/create-preview-images-for-your-web-page-displayed-in-google-search-results\/","title":{"rendered":"Create preview images for your web page displayed in Google search results"},"content":{"rendered":"<p>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.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a14f356c9b26\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a14f356c9b26\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.itersdesktop.com\/fr\/2022\/10\/09\/create-preview-images-for-your-web-page-displayed-in-google-search-results\/#introduction-via-examples\" >Introduction via examples<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.itersdesktop.com\/fr\/2022\/10\/09\/create-preview-images-for-your-web-page-displayed-in-google-search-results\/#what-is-the-websites-sitemap\" >What is the website&rsquo;s sitemap?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.itersdesktop.com\/fr\/2022\/10\/09\/create-preview-images-for-your-web-page-displayed-in-google-search-results\/#how-to-create-sitemapxml-files\" >How to create sitemap.xml files?<\/a><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"introduction-via-examples\"><\/span>Introduction via examples<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>Try to find \u00ab\u00a0SBGN\u00a0\u00bb in the \u00ab\u00a0All\u00a0\u00bb section. As of writing this post, the results only have two links having the preview image on the first page. See the screenshot below.<\/p>\n<figure id=\"attachment_4046\" aria-describedby=\"caption-attachment-4046\" style=\"width: 1416px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4046\" src=\"https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2022\/10\/4044-sbgn-preview-image.png\" alt=\"An example of showing preview image in Google search results\" width=\"1416\" height=\"542\" srcset=\"https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2022\/10\/4044-sbgn-preview-image.png 1416w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2022\/10\/4044-sbgn-preview-image-300x115.png 300w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2022\/10\/4044-sbgn-preview-image-1024x392.png 1024w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2022\/10\/4044-sbgn-preview-image-768x294.png 768w\" sizes=\"auto, (max-width: 1416px) 100vw, 1416px\" \/><figcaption id=\"caption-attachment-4046\" class=\"wp-caption-text\"><em>An example of showing preview image in Google search results<\/em><\/figcaption><\/figure>\n<p>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.<\/p>\n<figure id=\"attachment_4047\" aria-describedby=\"caption-attachment-4047\" style=\"width: 1920px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4047\" src=\"https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2022\/10\/4044-sbgn-google-search-images.png\" alt=\"Google search images with SBGN keyword\" width=\"1920\" height=\"532\" srcset=\"https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2022\/10\/4044-sbgn-google-search-images.png 1920w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2022\/10\/4044-sbgn-google-search-images-300x83.png 300w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2022\/10\/4044-sbgn-google-search-images-1024x284.png 1024w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2022\/10\/4044-sbgn-google-search-images-768x213.png 768w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2022\/10\/4044-sbgn-google-search-images-1536x426.png 1536w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><figcaption id=\"caption-attachment-4047\" class=\"wp-caption-text\"><em>Google search images with SBGN keyword<\/em><\/figcaption><\/figure>\n<p>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.<\/p>\n<h1><span class=\"ez-toc-section\" id=\"what-is-the-websites-sitemap\"><\/span>What is the website&rsquo;s sitemap?<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<figure id=\"attachment_4048\" aria-describedby=\"caption-attachment-4048\" style=\"width: 1342px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4048\" src=\"https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2022\/10\/4044-sitemap-sample.png\" alt=\"A sample of sitemap.xml\" width=\"1342\" height=\"1078\" srcset=\"https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2022\/10\/4044-sitemap-sample.png 1342w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2022\/10\/4044-sitemap-sample-300x241.png 300w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2022\/10\/4044-sitemap-sample-1024x823.png 1024w, https:\/\/www.itersdesktop.com\/wp-content\/uploads\/2022\/10\/4044-sitemap-sample-768x617.png 768w\" sizes=\"auto, (max-width: 1342px) 100vw, 1342px\" \/><figcaption id=\"caption-attachment-4048\" class=\"wp-caption-text\"><em>A sample of sitemap.xml<\/em><\/figcaption><\/figure>\n<p>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.<\/p>\n<h1><span class=\"ez-toc-section\" id=\"how-to-create-sitemapxml-files\"><\/span>How to create sitemap.xml files?<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p>Let&rsquo;s have a look at an example:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">https:\/\/github.com\/sanderlab\/tumorcomparer\/blob\/master\/inst\/shinyApp\/www\/static\/sitemap.xml<\/pre>\n<p>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.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;image:image&gt;\r\n   &lt;image:loc&gt;http:\/\/projects.sanderlab.org\/tumorcomparer\/static\/brca_cclp_tcga_tumorcomparer_files\/figure-html\/comparing_breast_cancer_cell_lines_to_tumor_samples.-1.png&lt;\/image:loc&gt;\r\n   &lt;image:title&gt;comparing breast cancer cell lines to tumor samples&lt;\/image:title&gt;\r\n&lt;\/image:image&gt;<\/pre>\n<p>That&rsquo;s all what you need to do for the sitemap.xml file. Obviously, you have to automate the generation of the sitemap.xml file.<\/p>\n<p>If you have any idea to achieve this work, please share it in the comment box.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&hellip; <\/p>\n","protected":false},"author":2,"featured_media":4049,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[225,4,222,290],"tags":[825,826],"class_list":["post-4044","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","category-web-engineering","category-web-programming","category-xml","tag-seo","tag-sitemap"],"_links":{"self":[{"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/posts\/4044","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/comments?post=4044"}],"version-history":[{"count":3,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/posts\/4044\/revisions"}],"predecessor-version":[{"id":4051,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/posts\/4044\/revisions\/4051"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/media\/4049"}],"wp:attachment":[{"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/media?parent=4044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/categories?post=4044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/tags?post=4044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}