schemaorg / suggestions-questions-brainstorming

Suggestions, questions, and brainstorming
20 stars 15 forks source link

Correct Markup for Random CSS background-image? #260

Open MrMerkin opened 3 years ago

MrMerkin commented 3 years ago

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