How do I separate @types into different cards using JSON-LD?

Question

The Structured Data Testing Tool doesn't separate my @types into different sections, and places all of the @types into one main type: Product. How can i separate the types so that each are validated as their own container?

https://i.sstatic.net/69z3C.jpg (I want to go from the 1st picture to something similar to the 3rd picture, please excuse the errors/warnings)

{
  "@context": "http://schema.org",
  "@type": "Product",
  "name": "Product1",
  "image": "http://mycompany.com/logo.png",
  "color": "example",

  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "1",
    "ratingCount": "0",
    "worstRating": "1",
    "bestRating": "5"
  },
  "brand": {
    "@type": "Organization",
    "name": "Company1",
    "logo": "http://mycompany.com/logo.png"
  }

I have more markup than this, but I think this shows enough of what I'm trying to accomplish. Thanks!

Answer 1

There are several ways you can do this, but each is different because the meaning is different.

For example, if you are speaking the sentence "My Product has an AggregateRating of <values> and is branded by an Organization", you would state the above.

Alternatively, you could make several individual statements and link them together. For example:

<script type="application/ld+json">
{
    "@context": {
        "@vocab": "http://schema.org/",
        "id": "@id",
        "graph": "@graph",
        "type": "@type"
    },
    "graph": [
        {
            "type": "Organization",
            "id": "#001",
            "name": "Big-Daddy",
            "image": "http://bigdaddy.com/logo.png"
        },
        {
            "type": "Product",
            "id": "#002",
            "name": "Big-2",
            "image": "http://bigdaddy.com/big-2.png",
            "brand": {
                "type": "Organization",
                "id": "#001"
            },
            "aggregateRating": {
                "type": "AggregateRating",
                "ratingValue": "3",
                "ratingCount": "20",
                "worstRating": "3",
                "bestRating": "4"
            }
        },
        {
            "type": "Product",
            "id": "#003",
            "name": "Big-3",
            "image": "http://bigdaddy.com/big-3.png",
            "brand": {
                "type": "Organization",
                "id": "#001"
            },
            "aggregateRating": {
                "type": "AggregateRating",
                "ratingValue": "3",
                "ratingCount": "20",
                "worstRating": "2",
                "bestRating": "5"
            }
        }
    ]
}
</script>

In speaking mode this says: "I have two products, each with AggregateRating of <values>, that are branded by Big-Daddy."

I can think of several other variations, but each would mean something different.

However, the Google SDTT acknowledges two Products in the above example.