Html Schema.org 给 div 一个 itemprop="image"？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18130827/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Schema.org give a div a itemprop="image"?
提问by Wayne's World
I am replacing an image with a <div>with background-imagefor the reason of background-size: cover;The page is structured the same way as before with a image just that "the image" is a div now.
我与一个替代的图像<div>以background-image供的原因background-size: cover;页面的结构相同的方式，用一个形象只是“形象”是一个div现在前。
Does is makes sense to give that itemprop to a <div>?
将该 itemprop 赋予 a 是否有意义<div>？
回答by Shawn Simister
CSS is not recognized by any Microdata parser that I'm aware of. You'll need to add a meta tag to specify the image like this:
我所知道的任何微数据解析器都无法识别 CSS。您需要添加一个元标记来指定这样的图像：
<div itemscope itemtype="http://schema.org/Article">
<meta itemprop="image" content="bg.jpg"></meta>
<div style="background-image:url('bg.jpg')"></div>
</div>
回答by Kristian
this is a good use for a meta tag within the containing div for your itemscope.
这对于 itemscope 的包含 div 中的元标记非常有用。
The two attributes you want in that meta tag are itempropand content
您需要在该元标记中的两个属性是itemprop和content
<meta itemprop="image" content="/some/url/to/an/image.gif" />
You can verify that meta information is, in fact, read just fine by testing it here: http://www.google.com/webmasters/tools/richsnippets
您可以通过在此处进行测试来验证元信息实际上是否可以正常阅读：http: //www.google.com/webmasters/tools/richsnippets
回答by darcher
Why not specify the imgin the content and hide it with CSS if it needs to be seen in the DOM but manipulated visually as a background-image? Keeps the metatags out of your bodymaking it slightly more traditional in my eyes as well as retaining the default browser functionality users anticipate with images such as saving an image (menu tree on right click) and cursor highlighting, etc.
img如果需要在 DOM 中看到但作为 a 进行可视化操作，为什么不在内容中指定并用 CSS 隐藏它background-image？将meta标签排除在您之外，body使其在我眼中更加传统，并保留用户预期的默认浏览器功能，例如保存图像（右键单击菜单树）和光标突出显示等。
<div itemscope itemtype="http://schema.org/Article">
<style scoped>
/* I only use scoped to avoid excess classing in this demo.
Read: http://caniuse.com/#feat=style-scoped */
figure
{ position: relative;
background-size: cover;
background-position: center center }
figure > img[itemprop=image]
{ opacity: 0;
position: absolute;
left: 0; top: 0;
width: 100%; height: 100% }
.specific-image
{ background-image: url(/path-to/image.jpg);
width: 300px; height: 150px }
</style>
<figure class="specific-image">
<img itemprop="image" src="/path-to/image.jpg" width="150" height="150" alt="image">
</figure>
</div>
Resource is only downloaded once since it's the same URL path, no additional HTTP requests.
资源只下载一次，因为它是相同的 URL 路径，没有额外的 HTTP 请求。
