3

tl;dr

What other dynamic solution can be used to set the background-image: url() for a page without using the HTML style="" attribute?

My page starts with 13 elements where I set their url(), when you scroll to the footer our lazy-loader will then load 9 (up to 12) more elements that again have their own unique "dynamic" images set.

I think we'll just have to take a hit to our SEO score, as I don't believe a better solution is available.

NOTE: I can create a JS Fiddle if needed, but I think this is described well/generic enough that it's not needed. Please let me know if this is needed for answering.

Purpose

Our company is trying to improve their site SEO score, one of the items identified for us to fix is to move all HTML style attributes into a single CSS file (or <style></style> declaration). I believe the reason this is being called out as an issue is because we have several elements using this to set their article background-image: url();.

Why not just use <img> tag instead?

Our client has alot of different type of images (dimensions, center of focus, etc) they want to use when publishing an article. In order for us to have the most consistent design regardless of screen size is by using CSS background-image styles instead of an <img> HTML tag. We're also working with some WP/XMLRPC publishing constraints, where we're not able to create a custom solution for this.

So we cannot use HTML for this, if we could this would be an easy fix.

Why this is currently set in the style attribute?

This is the best "dynamic" solution we've found so far. Up until now (with this effecting our SEO score), this has never been an issue. In our CSS styles, we have our .class {} specific background image styles that are shared. The only thing that differs for each article is the image URL, so we set that in the style="background-image: url();" attribute dynamically through PHP.

The problem

My page starts with 13 elements where I set their url(). I "could" have inline CSS at the top where I set dynamic classes for these elements that will have their unique background-image: url();'s, this could work even if it sounds painful to setup/do.

BUT we have lazy-loading happening when you scroll to the footer. We load 9 (up to 12) more elements that again have their own unique "dynamic" images set, all via AJAX. I could do the same thing here, creating another inline <style></style> CSS bit... but here's the kicker. One of our other SEO complaints is for us to combine our multiple inline CSS (as well as JS) into a single declaration. If I keep creating more <style></style> declarations to fix this SEO issue, I'll create/worsen another SEO issue.

The Question

What other dynamic solution can be used to set the background-image: url() for a page without using the HTML style="" attribute?

I think we'll just have to take a hit to our SEO score on this one, as I don't believe a better solution is available.

Improve this question
13
  • 3
    Well let me tell you something : i worked a lot with wordpress and i developped more than 50 websites and i always face this issue when my client tell me "why the score is too low ??!!" .. he think that this too bad but in reality it's not ... when you test your page you get RECOMMENDATION on how a website should be because these recommendation can make the website better BUT you will never be able to meet all of them ... so my opinion is that you will waste a lot of time trying to optimize and you cannot reach the 100% .. you can test the score of well known websites to compare. Commented Feb 19, 2018 at 19:19
  • 2
    check how bad the score of amazon is gtmetrix.com/reports/amazon.com/ajgoZnXe ... so i believe you are simply trying to gain 2 or 3 points in score and this will have no effect on your website ... the most important is the fast loading, mobile friendly, well written meta, semantic tags, etc ... defer parsing of JS, compressing CSS, remove query strings, Avoid inline CSS are a simple recommendation that may help you but if your site is already fast there is no need to do them and complicate your life Commented Feb 19, 2018 at 19:22
  • 1
    yes sure you can keep this opening as it's a intresting problem, but i simply want to share my thought as i face this many times ;) and when i have this i try to convice my client instead of complicating my life :) Commented Feb 19, 2018 at 19:29
  • 1
    @TemaniAfif yea same here build a lot of websites but it's always the same, they look at the issue like you're trying to weasel out of work :) Commented Feb 19, 2018 at 19:33
  • 1
    @skplunkerin if you are afraid to mess (open/write) with the master css file then just create a new file whatever.php and include it in the master css file @ import 'whatever.php'; Commented Feb 19, 2018 at 19:38

1 Answer 1

Reset to default
1

An idea is to change the background-image inline style with a data attribute that has no effect on the SEO score, then you may add some JS code in order to change them as inline style.

Of course this may have an impact on other script as I don't know excatly how your site is built so you may add this JS code as the first JS code so that all your inline style are changed and you have them ready for any futur script.

$('.box').each(function() {
  var url = $(this).data('background');
  $(this).css('background-image','url('+url+')');
})
.box {
  width:100px;
  height:100px;
  display:inline-block;
  background-size:cover;
  border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-background="https://lorempixel.com/400/200/">
</div>
<div class="box" data-background="https://lorempixel.com/300/200/">
</div>
<div class="box" data-background="https://lorempixel.com/400/400/">
</div>

By the way we can generalize this solution to any inline style. So the idea is to have all the style set as a data attribute and then we simply change them to inline style:

$('[data-style]').each(function() {
  $(this).attr('style',$(this).data('style'));
  /*Not mandatory*/
  $(this).removeAttr('data-style');
})
.box {
  width:100px;
  height:100px;
  display:inline-block;
  background-size:cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-style="background-image:url(https://lorempixel.com/400/200/);padding:20px;border-color:yellow;">
</div>
<div class="another-box" data-style="background-image:url(https://lorempixel.com/200/200/);margin:20px;border:5px solid pink;height:50px;">
</div>
<div data-style="background-image:url(https://lorempixel.com/200/200/);height:200px;">
</div>

NB: as I commented above, we need to have a balance between the complexity of the site and the score we obtain. If we can easily obtain 80% no need to over complicate the site in order to have 85% or 90% and maybe create some bugs or make the maintenance of webiste site difficult.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Hmmmm, it would be interesting to test this as I wonder if results would vary if some SEO testers allow JS to parse... though I'd imagine they wouldn't (allow JS to parse). I agree again @TemaniAfif, making a site more complex just to get some extra SEO "suggestion" points isn't ideal. I really like this thinking out-of-the-box answer though.
@skplunkerin i don't think there is any SEO tools that parse JS ... as this is also a common issue for website built with pure JS framework (like angular) where such site are obliged sometimes to server a static version to non-real users (robot, crawler, etc)and serve only the JS site to real user. So am pretty sure you will gain some points with this :) ... by the way this can also be generic solution to any inline stye ;) you can for example use data-style that you change later to style .. am gonna add this to my answer :)
Slick man, nice addition! :) And that makes sense, I was actually wondering how Angular/the likes work in SEO reporters... needing to parse that yourself (by serving a static version) makes sense. I'm going to mark this as the correct answer for it's info, thank you!

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.