Layout Builder: a Hidden SEO Issue

[Misho]

Hi!

With the new Layout builder, increasingly more people will go with the popular layout where the Featured image is served as a background, with the title over it. Usually with another layer of darkening it.

This is fine, if the users knows exactly what they are expecting from this approach. However, some will lose a significant amount of organic image traffic, because background images do not show up in Google image searches. For example, some will opt to create Real estate listings layouts, being unaware that the featured image won’t bring any organic traffic.

This can be solved either by unnecessary CSS grid layering of a proper image below the text, or pulling the bottom row with text up over the image, or other hacks. However, I believe that PRO should be a leader in SEO friendliness among page builders, and offer a native solution for the problem:

there should be a way to natively place an image with an <img> tag below the layer with content, transparent backgrounds etc.

Thanks!

[urchindesign]

100% agree on this…

[kory]

Howdy, @Misho and @urchindesign!

Thanks for sharing this. So I’d like to share a few thoughts with relation to the advanced backgrounds in general and then gather some more information from you to find a potential solution here.

The advanced backgrounds as a convention are meant to serve strictly as a decorative element to enhance the appearance of something, but it’s never been meant to be thought of as content in and of itself. Just as a potential video placed in this element is not expected to show up in the SERPs as “video content,” the images here shouldn’t be expected to show up that way either. The entire markup itself is wrapped in <div class="x-bg" aria-hidden="true"> ... </div> to hide all content from screen readers, crawlers, et cetera.

That being said, I can understand your concern that for an unexperienced user expecting this to “just show up,” this might be confusing. Unfortunately, there’s not much we can do to change what is currently being used as the image portion of the advanced background controls are literally leveraging CSS properties like background-position, background-size, background-repeat, et cetera, which are not available if using some static image.

I can see a couple of potential solutions here though:

1. We include some type of option on the image layer that might be a checkbox to output a duplicate asset as a physical <img/> element to be picked up by crawlers for the SERPs, but this image would be visibly hidden. This would of course dictate needing to move around some of the aria-hidden setup so the image can be “seen” by crawlers, and then it would remain hidden so you could utilize the styling that has always been available on the image layer of the advanced backgrounds.
2. We include some type of toggle for the image layer to output the image asset as either a “background image” or a “standard image.” Outputting as a background image would give you the options you’ve always had, outputting as a standard image would utilize an actual <img/> element, but you obviously wouldn’t not get the same amount of control as a background image. The closest analog would using object-fit and object-position on the <img/> element to style these, but with object-fit you’d really only be able to replicate the cover and contain values of background-size, you wouldn’t be able to do something like 50px 100px and use repeat-x, repeat-y, or repeat. For the use case you’re suggesting, this seems like it’d be okay, my only concern would be that introducing this might introduce some confusion as to why the controls available to each option are not the same. That all being said, there’s no other way to stack content like this than to use Grid like you mentioned (which would honestly be the proposed way going forward if you’re using Pro and have the Grid element available, especially with the recent changes I made to the Image Element), but that doesn’t offer a solution for X users. Out of these two options, this one feels the best to me, but it involves a little more on the user’s end to think of it all and manage it and decide how to use it.

The final disparity of all this is that there is no analog we could really apply to the video portion of this. Background videos would always be background videos, strictly decorative with no functional usage.

Let me know your thoughts on the above.

[Misho]

@kory, first of all, thank you for your detailed reply!

I must say that originally I wasn’t thinking about expanding the existing background option of the containers. But it sounds great if it is not that complicated to do.

Honestly, I’m not even sure what I was thinking about. Maybe more in the direction of the slider element that was announced a while ago. I think I was discussing it with Alexander during the previous Beta, as a possibility for some of the future updates. It was about some sort of slide-enabled container that would be able to accept any other element on top of it. Those elements (for example headings and text), would slide along with the image beneath them.

I have assumed that the slider image would not be a background-image. So if such element had just one slide, the arrows would be turned off and we would automatically get everything sorted out with SEO: we’d have a proper image below the text.

Such element would also be preferred for the Hero section on pages, because many people love sliders, no matter what some of us think about them.

I have drifted away from the main topic. From your two proposed options, I think that #1 is risky, because of possible cloaking signals to Google. Serving different content to search engines in never a good thing.

#2 sounds great, but I agree that it might be confusing. I also understand the problem of the lack of proper positioning controls of the image. I believe that lack of repeating options is not an issue, because that is mostly used for decorative stuff. Moving it around might be the problem though. But in the world of html images, there is something much more exciting than the background-position property: Focus point.

Something like this: https://www.jqueryscript.net/layout/Responsive-Image-Cropping-jQuery-FocusPoint.html

Since we have data attributes on images, implementing this is not a big problem. Honestly, I have no idea how heavy and “expensive” a code that provides focus points for images is. I think I have used this only few times really long time ago. But if it is not a big resource hog, perhaps something similar could hit Pro at some point in the future. It would be a very exciting feature.

[urchindesign]

I think option 2 makes the most sense. I really like that idea. With object fit etc. it would at least be possible to have some of the background style functionality while still being able to consider SEO. All to often in designs we have a header bar with a background image and then mostly content… this would solve that problem in an easy way…

[kory]

Hey @Misho and @urchindesign!

Thank you both for your replies. At this time we’ve decided to move forward with #2 for a few reasons and update the background partial to include a new “type” that can be selected.

You will be able to choose between a “Background Image” or an "<img/> Element," of which each option will feature their respective unique controls. So with a Background Image you’ll have the background-repeat property along with how background-size/position work, but with the <img/> Element you’ll be able to leverage things like alt text, and utilize object-fit and object-position to at least move it around a bit and get it working how you want.

Additionally, as a side note I’ll be adding a “Custom” type to the selection, which allows you to place anything you want in either layer (for instance, a slider shortcode, another decorative element produced by a plugin, et cetera).

I will keep you all updated here once this is in and share more on it at that time (hopefully tomorrow).

[kory]

Hey @Misho and @urchindesign!

Just wanted to let you all know that this feature is officially rolled in. While working through this, I’ve also gone ahead and made some other improvements to the Advanced Background Partial as well. Below are some images, which I will explain afterwards:

Some things of note in the images above:

1. I’ve gone ahead and remapped the partial completely so that the separate parallax controls are now rolled into their respective layer (rather than being standalone). This reduces the mixin by a whole control group and lessens the need to correlate the disparate sections together, so that’s a nice UI update there.
2. The Type selection has been altered from a choose control to a select, as we now have a couple more choices (and this will allow us to add more types in the future as we see fit).
3. There are now two image options to choose from: Background Image, which is the setup you’re familiar with from before and is powered by the standard CSS background-* properties and their respective unique abilities. Secondly, there is a new <img/> Element option, which outputs the image source as actual <img/> markup on the page. This allows you to leverage things like the alt attribute along with the object-* properties to size and position the image. If this layer is selected, aria-hidden="true" is removed from the top level of the partial so that the image is visible to all as content.
4. Finally, I’ve included a new Custom option, which is effectively a textarea that will allow you to output any type of input including text, custom markup, shortcodes, et cetera. As mentioned previously, this could be used to output a custom selection of images as a group, a slider, et cetera…it’s really completely open to you. I think there will be a lot of cool possibilities with this option now as you can still leverage the parallax options, but you can now input anything you wish.

Let me know what you all think of this once it goes out with the next beta release!

[ERES]

[urchindesign]

Looking great, excited to give it a go.

[Misho]

Just WOW!

The Custom option really opens up tons of possibilities. This may even open an almost native way to create something similar to covers that are going over the textual content, which are reacting on hover. Basically what Essential Grid and The Grid have. I would just need a bit of custom CSS. I’ll play with that to further explore it.

The <img> tag in the background will really do a lot for SEO, when used properly. If people don’t care or understand the purpose and the ideal usage of it will probably just leave the setting on the background image.

Thanks!

[kory]

Thanks, @Misho! I’m looking forward to seeing what you and others do with it. Question for you on the Custom option…currently it still has aria-hidden="true" on it like all the other layers other than <img/> Element, which removes this so that the content can be seen by screen readers / crawlers. Would you want the Custom option content to be decorative like the other layers and maintain aria-hidden="true", or would you rather it be seen as standard content?

[urchindesign]

Wow, this is awesome. Been playing around and super happy with this. Still need to wrap my head around the custom option but really like the image option for a background and also the option to set object fit with the normal image element.

[Misho]

@kory, that’s a good question, and it is not easy to answer it. There are many considerations to take and we don’t know how people would use the Custom option.

If there is text to enter, it would be expected for it to be readable. But I’m sure there are many other potential uses where it is better for it to be hidden.

A secondary option selector (Aria hidden or Aria visible), could be too complex for many users.

Perhaps leaving it hidden is the safest way after all. But if you find an effective compromise, it’d be welcomed.

Also, I’m not sure if adding Flexbox positioning of custom content would make sense? It would certainly help avoiding lots of custom CSS.

[kory]

@Misho, I think I’m going to go ahead and add a toggle to allow the “Custom” layer only be able to specify whether it should be aria-hidden="true" or aria-hidden="false". This will default to true, to keep in the spirit of the background partial being “decorative” in nature, but if people need it to be treated as content, they now have one more way to do it with “Custom.”

As for flexbox positioning, we will keep this out for now in the spirit of that layer being truly “custom.” Adding the controls would add a lot of heft to the background module that will hardly be used by people, and those who want to leverage it will likely know how to do so properly with a little custom CSS.