suggestions-questions-brainstorming
suggestions-questions-brainstorming copied to clipboard
schemaorg
Correct Markup for Random CSS background-image?
I'm working on structured data for a CollectionPage. There are 6 sections, all of which point to sub-collection pages, and one section has its background-image randomly pulled from a set of featured images using WP_query, so I can't define this in the <head> as the query takes place in the <body>.
What I did was use an @id in the header <script> that points to the id of the <div>, the background-image is specified in inline style attribute—the URL is grabbed from a PHP variable created in the WP_query.
This works and validates, however referencing the @id this way causes a duplicate chunk of schema information that is identical. It shows up in the validator in succession.
Is this the correct way to do this? I'm also not sure if defining the additionalType as CollectionPage is semantically correct, even though by clicking anywhere in that page section will take you to that CollectionPage.
JSON-LD That Loads Dynamically in Header
"mainContentOfPage": {
"@id": "#main",
"hasPart": [
{
"@type": "WebPageElement",
"@id": "#section-id",
"additionalType": "CollectionPage",
"name": "Section Name",
"image": {
"@type": "ImageObject",
"@id": "#div-id-with-background-image"
}
},
Script Block in HTML Page
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPageElement",
"@id": "#section-id",
"image": {
"@id": "#div-id-with-background-image",
"url": "<?= $img_url[0] ?>",
"encodingFormat": "image/jpeg"
}
}
</script>
Validator Results
image
@type ImageObject
@id https://domain.com/page/#div-id-with-background-image
url https://domain.com/path/image.jpg
encodingFormat image/jpeg
image
@type ImageObject
@id https://domain.com/page/#div-id-with-background-image
url https://domain.com/path/image.jpg
encodingFormat image/jpeg
