Are webflow tabs JS or CSS3?

I’d like to improve UX by keeping the written text within 100vp. I aim to do this by keeping sections within tabs instead of stacking the sections within the page.

My point; Google doesn’t crawl Javascript, therefore if we focus on using keywords within the tabs will it be wasted effort? (Unless the tabs are in CSS3 :crossed_fingers:t5::persevere::crossed_fingers:t5:)

HEELLPP MEEEEAAH

Hey @Dids,

This is a good question. Probably a Webflow team member can answer that!
@Brando @mistercreate @thesergie

1 Like

I’ve done some digging and found out that Google does index (since 2017/18) tabbed content so for anyone ready to answer, this is not my question.

The question is does the tab element and all it children elements read as javascript or css. If its the former, everyone should be advised not to place keywords as a strategy, inside the tabs. If its the latter then you better “tab dat class” for improved UX.

A quick peek at the source code of a page with tabs, will show you that the content is there and therefore 100% accessible to Googlebot.

Tabs do have a usability issue however. The inactive tabbed content wrappers are set to display:none and JavaScript us used to set the wrapper to display:block when the tab is clicked. So if you disable JavaScript, tabs will not function, thus the hidden content can’t be displayed.

From an SEO perspective this is a potential issue. However you can mitigate it by simply placing the content that is hidden (non active tabs) in the tab wrapper into a block via an HTML embed. I would place it below the tab component. You should not have an issue unless you purposely were hiding content for SEO. This would fall under recommended guidelines from Google for hidden text / links.

You could also choose to use a third party tab component that has better accessibility features with progressive enhancement like JQuery UI.

Generally speaking, tabs should only be used to display small amounts of content that can be compared by the user without needing to scroll. Other uses should be avoided.

2 Likes

Thank you for the informative response. With that said one should work around the tabs and not as a main location for written content. Gotcha, cheers!