【发布时间】：2017-07-19 23:30:49
【问题描述】：
我在 stackoverflow 上找到了this，对此我有疑问。我可以在CodePen 上使用此代码来满足 SEO 和设计部分页面吗？
<figure>
<img src="https://placehold.it/350x150" alt="something important">
<figcaption>
something important
</figcaption>
</figure>
*{
font-family: helvetica;
}
figure {
margin: 100px auto;
position: relative;
width: 500px;
height: 100px;
background-image: url(https://placehold.it/650x150);
background-size: cover;
background-position: center center;
}
img{
display: none;
}
figcaption{
position: absolute;
bottom: 0;
width: 100%;
background: maroon;
color: WhiteSmoke;
text-align: center;
font:small-caption;
font-style: italic;
}
【问题讨论】：
-
“满足 SEO”取决于您页面上的内容。您没有提供任何上下文：img 或背景中的内容，以及您使用其中一个或另一个或两者的原因。
-
它是一家出售艺术品的画廊...img 是他们出售的图片的缩略图，但那些 jpeg 不是裁剪为 100px*100px 但有些是 300px，其他 500px...我想要它们大小相同，但没有花所有时间在 PS 中裁剪它们...我认为在图形上使用内联样式作为背景图像
-
搜索蜘蛛不关心你的页面是什么样子，他们只关心文本，包括你的
figcaption标签和alt属性。 -
我明白....我问是因为我希望它信息丰富、可搜索并且看起来不错...
-
@AmericanSlime Google 如今可以理解图像，只是让您知道。 （好）今天的蜘蛛今天也关心图像。