在不使用 HTML 样式属性的情况下动态设置多个背景图像 url

Question

tl;博士

在不使用 HTML style="" 属性的情况下，还有哪些动态解决方案可以用于为页面设置 background-image: url()？

我的页面从 13 个元素开始，我在其中设置了它们的 url()，当您滚动到页脚时，我们的延迟加载器将再加载 9 个（最多 12 个）元素，这些元素再次拥有自己独特的 "dynamic" 图片集。

我认为我们只需要降低我们的 SEO 分数，因为我认为没有更好的解决方案可用。

注意： 如果需要，我可以创建一个 JS Fiddle，但我认为这描述 well/generic 足够了，它不是需要。如果需要回答，请告诉我。

目的

我们公司正在努力提高他们的网站 SEO 分数，我们确定要修复的项目之一是将所有 HTML 样式属性移动到单个 CSS 文件（或 <style></style>声明）。我相信这被称为问题的原因是因为我们有几个元素使用它来设置他们的文章 background-image: url();.

为什么不直接使用 `<img>` 标签呢？

我们的客户有很多不同类型的图像（尺寸、焦点等），他们希望在发表文章时使用这些图像。为了让我们无论屏幕尺寸如何都拥有最一致的设计，我们使用 CSS background-image 样式而不是 <img> HTML 标签。我们还在处理一些 WP/XMLRPC 发布限制，我们无法为此创建自定义解决方案。

所以我们不能为此使用HTML，如果可以的话，这将是一个简单的解决方法。

为什么当前在 `style` 属性中设置了这个？

这是迄今为止我们找到的最好的 "dynamic" 解决方案。到目前为止（这会影响我们的 SEO 分数），这从来都不是问题。在我们的 CSS 样式中，我们有 .class {} 共享的特定背景图像样式。每篇文章唯一不同的是图像 URL，因此我们通过 PHP.

在 style="background-image: url();" 属性中动态设置它

问题

我的页面以 13 个元素开始，我在其中设置了 url()。我 "could" 在顶部有内联 CSS，我为这些元素设置了动态类，这些元素将有其独特的 background-image: url();，即使听起来很痛苦，这也可以工作setup/do.

但是当您滚动到页脚时，我们会发生延迟加载。我们加载了 9 个（最多 12 个）元素，这些元素再次拥有自己独特的 "dynamic" 图像集，全部通过 AJAX。我可以在这里做同样的事情，创建另一个内联 <style></style> CSS 位......但这是关键。我们对 SEO 的其他投诉之一是我们将多个内联 CSS（以及 JS）合并到一个声明中。如果我继续创建更多 <style></style> 声明来解决此 SEO 问题，我将 create/worsen 另一个 SEO 问题。

问题

在不使用 HTML style="" 属性的情况下，还有哪些动态解决方案可以用于为页面设置 background-image: url()？

我认为我们只需要在这方面降低我们的 SEO 分数，因为我认为没有更好的解决方案可用。

Answer 1

一个想法是改变 background-image 内联样式，其中的数据属性对 SEO 分数没有影响，然后您可以添加一些 JS 代码以将其更改为内联样式。

当然这可能会对其他脚本产生影响，因为我不知道您的网站是如何构建的，所以您可以将此 JS 代码添加为第一个 JS 代码，以便更改所有内联样式并且您有他们为任何未来的剧本做好了准备。

$('.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>

顺便说一下，我们可以将此解决方案推广到任何内联样式。所以我们的想法是将所有样式设置为数据属性，然后我们简单地将它们更改为内联样式：

$('[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：正如我在上面评论的那样，我们需要在网站的复杂性和我们获得的分数之间取得平衡。如果我们可以轻松获得 80%，则无需为了获得 85% 或 90% 而将网站过度复杂化，并且可能会产生一些错误或使网站维护变得困难。

在不使用 HTML 样式属性的情况下动态设置多个背景图像 url

Dynamically set multiple background-image urls without using the HTML style attribute

html

css

php

wordpress

seo

tl;博士

目的

为什么不直接使用 `<img>` 标签呢？

为什么当前在 `style` 属性中设置了这个？

问题

问题

在不使用 HTML 样式属性的情况下动态设置多个背景图像 url

Dynamically set multiple background-image urls without using the HTML style attribute

html

css

php

wordpress

seo

tl;博士

目的

为什么不直接使用 <img> 标签呢？

为什么当前在 style 属性中设置了这个？

问题

问题

为什么不直接使用 `<img>` 标签呢？

为什么当前在 `style` 属性中设置了这个？