1

Google is not as good as it claims when it comes to JavaScript single page application (SPA) websites. Sure it can read JavaScript very well, but removing pre-render server hit our search result so badly that we resurrected our pre-render server after 1 week of letting Google read our SPA website itself.

We show photo albums to users with only thumbnails. Once clicked, the thumbnails will show the full size image. We are planning to create image sitemap 

 <url>
<loc>http://example.com/albums?id=1</loc>
<image:image>
  <image:loc>http://cdn.example.com/photo1_fullsize.jpg</image:loc>
</image:image>
<image:image>
  <image:loc>http://cdn.example.com/photo2_fullsize.jpg</image:loc>
</image:image>
</url>

The problem is that we are pretty sure that Googlebot can not see photo1_fullsize.jpg, or photo2_fullsize.jpg but only their thumbnails when it crawls because they are click based. So we are afraid of getting banned with fake data (photo1_fullsize.jpg, photo2_fullsize.jpg). We DON'T DARE TO TRY because a failed trial can cause severe damage to the website.

Is the a safe way to let google know the images without hindering the user experience, and page load speed? Should we be using microdata and full size image inside noscript tag?

Improve this question
5
  • 1
    Breaking rule 1. Believing that a sitemap is going to improve your SEO... P.S Google can crawl dynamic pages created by JavaScript assuming the code follows good practices.
    – Simon Hayter
    Commented Apr 3, 2018 at 11:18
  • @SimonHayter : Google can not crawl things from clicks, in our case, it is the full size images
    – Phung D. An
    Commented Apr 3, 2018 at 12:05
  • 1
    See my answer to Lazy loading images and effects on SEO -- It has the code you need to use to get your full sized images ranked without penalties.
    – Stephen Ostermiller ♦
    Commented Apr 3, 2018 at 13:41
  • Google can crawl your SPA as long as you: 1. Put href links in the page for crawlers but have your JS intercept clicks to them and show the same content to the user in the current page. 2. Use pushState to change the apparent URL for users as they navigate within your single page. 3. Support deep linking by loading your SPA at any URL and showing the correct initial state based on that initial URL.
    – Stephen Ostermiller ♦
    Commented Apr 3, 2018 at 13:44
  • @StephenOstermiller Sounds like good practices to me :)
    – Simon Hayter
    Commented Apr 3, 2018 at 14:30

2 Answers 2

Reset to default
1

You can add the full resolution images to your sitemap. Google wants to crawl large, original images, and so this method might definitely get them to index all of the large images. You can also include the corresponding URL of the page in which the image was found in the sitemap, which allows for the clickthrough traffic to reach the correct page of your thumbnails. Your image sitemap formatting seems correct.

I wouldn't recommend making the thumbnail images all full size on your site. Sure, they full size images will get crawled by Google this way, but the user experience will be severely tampered with. And this could hurt your rankings.

https://www.xml-sitemaps.com/sitemap_images.xml https://webmasters.googleblog.com/2010/04/adding-images-to-your-sitemaps.html

Improve this answer
3
  • The problem is that googlebot (pretty sure) can not see photo1_fullsize.jpg , photo2_fullsize.jpg but only their thumbnails, when it crawls as it is click base. So we are afraid of get banned with "fake" data ( photo1_fullsize.jpg, photo2_fullsize.jpg ).
    – Phung D. An
    Commented Apr 3, 2018 at 12:05
  • 1
    I don't think you'll get hit with fake data penalties because those full size images actually are displayable on your pages with your onclick function. But there's no certainty. Googlebot's algorithm was created with far too much machine learning to know when it will mistakenly penalize websites at this point. I don't think it will happen, but I think your concern is valid.
    – Michael d
    Commented Apr 3, 2018 at 12:26
  • @PhamH.An Google will only credit a page for an image if it can physically detect the image being embedded on the page... Otherwise, users could make sitemaps with thousands of images of which none of them is embedded on the page... sitemaps are for pages that Google can not discover... it is NOT for making search engines crawl the uncrawlable...
    – Simon Hayter
    Commented Apr 3, 2018 at 22:11
1

Thank you everyone for helping me out.

We have come to a compromised and combined ( from suggestions here ) solution :

  • No more thumbnails, now just middle size ( about 600x600 ) and full size. Middle size images will be served right away to users, since CDN, 3G,4G fiber internet are omnipresent, thus we don't have to worry much. Full size ones will still be lazy-loaded upon clicked.
  • We index middle size images MOST of the time because the majority of image search result are middle size ( we tried , at least in our country)
  • In some place where full images to be indexed, we follow @Simon Hayter♦ answer , to avoid penalties.
Improve this answer
1
  • Full sized images tend to rank better in image search, btw. Google says they use "image quality" as a ranking signal. As far as I can tell when it comes to photos, bigger is better.
    – Stephen Ostermiller ♦
    Commented Apr 4, 2018 at 2:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.