Can problems with inline styles in Google webcache text only view affect SEO?

Question

I have a page that due to CMS requirements has an embedded background color style on an element that contains text <span style="background-color: #000">[text]</span>, the colour varies but in some instances will always be black.

When this is returned by Google webcache in text-only mode, the inline styles render in the browser and show plain black text on a black background as the main css styles aren't available to make it display correctly.

The page is rendered correctly in the full-version view.

As this is text-only, the visual error is due to the browser rendering the inline style, the question is, does this affect the way that Google sees and potentially ranks the page based on the text being hidden.

I'm aware that this question may solicit speculation, what I would like to know is if anyone has any evidence wither way.

Answer 1

Inline CSS directly doesn't affect your site SEO if it is less enough but it may affect indirectly to it.

Inline CSS affects page weight of your pages and browsers finds it quite difficult to load compare to external css.

It also causes browser catching and its result comes into extra page loading time.

You can use Inline CSS but you have to remember that your inline css won't affect your page loading speed, if it happens then only Google Considers it and consequences turns to penalty.

Suggestions:

1. If possible remove inline css from your commonly used sections like header, footer asides and other by which it will use browser catching properly and avoid some of time to load.
2. It is best practice to avoid inline css and use external css.

you can check this link for reference.

and can know more about inline css vs page loading

Answer 2

That is a very good question.

Yes, it can absolutely affect your organic rankings.

Why? Google is actually pretty good at rendering pages with javascript and css now. They actually look at your pages like humans do (almost) i.e. if you have black text on black background you might not see that content at all.. or if you place text within hidden elements.

There's been a discussion in the seo community if it is ok to hide text behind tabs on a page (with css).

On mobile it is perfectly fine, Google have said that oficially themselves. However, on desktop it can be considered as an old seo spam/keyword stuffing technique.

So test it yourself. Alter a page and track its performance the following weeks or month to see if you get affected or penalized.