IN RSD your images WILL NOT get...

User 2823310 Photo


Registered User
312 posts

If you have a business or site that has images that are important to you that they get indexed for IMAGE SEARCH than you should be aware that the way RSD uses the srcset they will not get picked up and shown by search engines. How that effects SEO for the main site though is debatable. Since the fantastic help from Scott is no longer around perhaps some other representive from Coffeecup may like to also weigh in, but this is my humble take on it.

Okay, so what is happening?
An image has a link that is indexed by search engines from it's src (source) or it's href (hypertext reference). In RSD the code is written to an image by using an src to a base64 gif. That is a fast loading very tiny image which makes the page download faster, then once the page loads it goes to the srcset. Which is the larger image real image you use and those can be set up to load different sized images in responsive design for the grid size. Those larger images are what you see on the page, but search engines only index the initial src image which in our case is the base64.

What does that mean though?
That means any image used inside RSD will not get picked up and used for any image index search, they don't see them. If you have a art business or a carpentry site like mine and someone searches for an image of say a mantel you won't have your images in that result.

Does that effect SEO or page rank?
Well that is debatable since we don't know how search engines work for ranking they are highly protected. On one hand a fast loading page is considered a method for getting better serp and if you fetch as google in your webmaster page you'll see the image alt and title tags are picked up which should go to relaventcy. But if the image is a base64 and not an actual image though who knows? It is recomended to use srcsets on redundent images but online the debate on results varies for using them on your important images and the actual image name is in the srcset. One thing we do know is they don't get indexed. Coffecup for example don't use an image srcset for their site.

What can you do about it?
You have to use a plug in that goes outside RSD and links to the images with an href like a carousel slider or a pop up image plug in. On my site for I used colorbox so the src goes to the thumbnail but my important images are a link to the larger images. Those then will get indexed.

Should we ask Coffecup to change the core?
Well in my opinion the speed of the download for images would help to offset the backend load of the scripts and CSS used in foundation for example, but I use the original coffeecup grid too to get around that. So it's kind of up to you. If images are important to you that they get indexed then perhaps, but that's where it would be good to have CC's ideas on using the srcset in their coding.

How can you check?
If you want to check if any of your images for you site put in the search site:yoursitelink.com (and change "yoursitelink") then click on the image index. Those images results are what is being picked up for your site. It can take up to 3 months after your site goes live to get any results for that index though too.
User 2088758 Photo


Senior Advisor
2,741 posts
Online Now

Thanks for sharing Alter,

Found a really interesting article regarding SEO specifically for images:

http://www.searchgap.com/blog/10-factor … -search-r/

You can control a lot of these things within RSD with very little effort.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 232214 Photo


COO
827 posts

A well thought out post based upon good research, I like it :)

There are 2 (3) main reasons for the current implementation:
1. This implementation prevents double loading and flashing (on, for example, mobile devices),
2. Having an empty or no src causes validation issues,
3. A smoother experience when JS is disabled.

The srcset is part of the HTML specification and the picture element is well supported...so if you really think about it, it would fall onto Google to index the images linked in the set...

If deemed of sufficient importance by our customers (let's hear some voices here), this is what we could do:
1. Add the link to the src if a single image is used — if you want your images to be indexed, don't add screen width specific images (this remedies issue 2 but not 1 (or 3) and places indexability above user experience),
2. Add an image element to the Element Pane. If indexability is deemed more important than serving different image sizes (for faster page load, better user experiences and specific design intents), that element could be used instead of the responsive picture element. In the end this is similar to the previous solution, with the same advantages and drawbacks, but maybe more explicit.
3. I have to tread carefully on the 3rd one...we maybe could add 2 variations of the picture element, one that suffers from the double loading (but is indexed) and one that gives a better user experience but is ignored by Google...until they fix this.

Thoughts?
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 122279 Photo


Senior Advisor
12,722 posts
Online Now

This concerns RFF too. I built my honey site (see signature) in January this year, and every image is a srcset.

As to thoughts: I have customers who are very particular about their images being indexed. But I agree that Google needs to get up to marks here.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2823310 Photo


Registered User
312 posts

Well thank-you for a rapid response Bob it's very much appreciated.

Gary (twinstream) when we started looking this over made a interesting solution suggestion found here:
https://ivopetkov.com/b/lazy-load-responsive-images/
So they load later... which may not be feasible to implement in CC though.

Perhaps with the newer browser support we don't require polyfill which if I understand correctly creates the double load. I think iOs caught up, and hopefully anyone still using ie at least updates? But the really it's on Google to get on the ball here, it's been around for years.

That not being possible though solution 2 would be my preference. Then it at least gives you the option internally other than a work-around as some sites would prefer having the indexed images.

User 244626 Photo


Registered User
770 posts

Inger wrote:
This concerns RFF too. I built my honey site (see signature) in January this year, and every image is a srcset.

As to thoughts: I have customers who are very particular about their images being indexed. But I agree that Google needs to get up to marks here.


I do not think that Google, Bing, and Yahoo are totally at fault for not indexing "srcset" images from what I have researched. If you think about it, which image from the "srcset" would you choose to rank the highest if you are a spider looking at images for one picture element. Since the "srcset" picture group is just a variation (size and resolution) of the "src" its much more efficient to choose the original "src" link.

I like Bobs suggestion number 2 currently. Different image settings could also be controlled using data-attributes such as data-src or what foundation recommends now data-interchange. http://foundation.zurb.com/sites/docs/interchange.html

Keeping the images responsive though is the highest priority.

It would be nice to have a webpage (website) we could all see different examples on before moving to conclusion.
Cutting Edge Grid Design
User 2823310 Photo


Registered User
312 posts

Don't want this to get too far off topic Gary but if you think about it the algorithm will pick up an src to href and use the larger image to index. There is a bit about that on a google research paper here:
http://www.esprockets.com/papers/www200 … baluja.pdf
So they could do that for an srcset...
Haven't looked in tha data attribute being indexed, that may create the same issue, have you seen anything on that in your research? You'd think with visual c++ that would be easier to implement in RSD though.
User 244626 Photo


Registered User
770 posts

Bob Visser wrote:
A well thought out post based upon good research, I like it :)

There are 2 (3) main reasons for the current implementation:
1. This implementation prevents double loading and flashing (on, for example, mobile devices),
2. Having an empty or no src causes validation issues,
3. A smoother experience when JS is disabled.

The srcset is part of the HTML specification and the picture element is well supported...so if you really think about it, it would fall onto Google to index the images linked in the set...

If deemed of sufficient importance by our customers (let's hear some voices here), this is what we could do:
1. Add the link to the src if a single image is used — if you want your images to be indexed, don't add screen width specific images (this remedies issue 2 but not 1 (or 3) and places indexability above user experience),
2. Add an image element to the Element Pane. If indexability is deemed more important than serving different image sizes (for faster page load, better user experiences and specific design intents), that element could be used instead of the responsive picture element. In the end this is similar to the previous solution, with the same advantages and drawbacks, but maybe more explicit.
3. I have to tread carefully on the 3rd one...we maybe could add 2 variations of the picture element, one that suffers from the double loading (but is indexed) and one that gives a better user experience but is ignored by Google...until they fix this.

Thoughts?


I am leaning more and more to the suggestion of # 2 "Add an image element to the Element Pane"

I believe you would want two elements. One for "Picture SEO" and one for "Picture Link SEO"

SEO is obviously complex and any one developer can look at it from a different strategy point of view with different ideas on how they want to gain visibility and rankings.

For instance if I were using Foundation 6 I may want to use the "src" along with the data-interchange plugin which would give me both the indexing of my image and the user experience of serving different sized images.

If I were in Bootstrap I may choose the use the "src" along with the data-srcset to again give me both the indexing of my image and the user experience of serving different sized images. Possibly even throw in a blank 1x1 gif for the srcset. https://ivopetkov.com/b/lazy-load-responsive-images/

I was somewhat worried about losing the poly-fill however since we now have the object-fit and object-postion controls recently added that should cover the responsiveness. Any thoughts on that ?

By just giving us the basic two SEO picture and SEO picture link elements that would use the actual "src" link, everything else would be up to the advanced developer who wants to apply their own method to each picture using the custom and framework attributes available such as data-interchange, data-src, data-srcset, data-sizes, and finally the "srcset" attribute itself (barring no-conflict and availability of "srcset" as that is used in the picture element we keep).

Since SEO requires extra work, then all these options become available to those who want to use them. However for someone who really just wants fast responsive pictures without the hassle.....use what we already have.

So basically, to start......just let us have the new two elements with a "src" link.....at see what happens.
Cutting Edge Grid Design
User 244626 Photo


Registered User
770 posts

Steve wrote:
Thanks for sharing Alter,

Found a really interesting article regarding SEO specifically for images:

http://www.searchgap.com/blog/10-factor … -search-r/

You can control a lot of these things within RSD with very little effort.


Steve, I noticed on your homepage www.misterwebguy.com that you do not use the "srcset" but rather the "src".
I was wondering if that page was done in RLM Pro ? I had noticed that before RSD introduced the "srcset" feature with the transparent 1x1 "src" gif base64 conversion that RLM Pro does not suffer from the lack of indexing of images due to on export the "src" remains unchanged? (Unless you bring the project into RSD of course...)
Cutting Edge Grid Design
User 2800147 Photo


Registered User
62 posts

Hi,

I want to thank Twinstream for helping me with this issue.

Half of the images on www.jewelry-tutorials.com got indexed after the script fix.

I added the same script fix at the end of June to www.custom-made-jewelry.com but it seems like these images are not indexed according to Search Console Data. This site is about a year old.
All these images are seo optimized with alt tags and such.

I don't know if the above site will be of any help to Twinstream and Alter Eagle in finding an answer to the indexing problem.

Kind regards,

Anne
jewelry-tutorials.com
drill-straight-tools.com
custom-made-jewelry.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.