Search code examples
json-ldstructured-data

What JSON-LD structured data to use for a multi-pararaph, multi-image blogpost?


I have created the following JSON-LD for a blogpost in my blog:

{
      "@context": "http://schema.org",
      "@type": "BlogPosting",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.example.com"
      },
      "headline": "My Headline",
      "articleBody": "blablabla",      
      "articleSection": "bla",
      "description": "Article description",
      "inLanguage": "en",
      "image": "https://www.example.com/myimage.jpg",
      "dateCreated": "2019-01-01T08:00:00+08:00",
      "datePublished": "2019-01-01T08:00:00+08:00",
      "dateModified": "2019-01-01T08:00:00+08:00",
      "author": {
        "@type": "Organization",
        "name": "My Organization",
        "logo": {
          "@type": "ImageObject",
          "url": "https://www.example.com/logo.jpg"
        }
      },
       "publisher": {
        "@type": "Organization",
        "name": "Artina Luxury Villa",
         "name": "My Organization",
        "logo": {
          "@type": "ImageObject",
          "url": "https://www.example.com/mylogo.jpg"
        }
      }
    }

Now, I have some blog posts that contain multiple paragraphs and each paragraph is accompanied by an image. Any ideas how can I depict such a structure with JSON-LD?

Background

I have created a simple blog which uses a JSON file for 2 purposes: (a) feed the blog with posts instead using a DB (by using XMLHttpRequest and JSON.parse) and (b) to add JSON-LD structured data to the code for SEO purposes.

When I read the JSON file I have to know which image belongs to which paragraph of the text in order to display it correctly.


Solution

  • Note: As you seem to need this only for internal purposes, and as there is typically no need to publically provide data about this kind of structure, I think it would be best not to provide public Schema.org data about it. So you could, for example, use it to build the page, and then remove it again (or whatever works for your case). Then it would also be possible to use a custom vocabulary (under your own domain) for this, if it better fits your needs.


    You could use the hasPart property to add a WebPageElement for each paragraph+image block.

    Each WebPageElement can have text and image (and, again, hasPart, if you need to nest them).

    Note that JSON-LD arrays are unordered by default. You can use @list to make it ordered.

    "hasPart": { "@list":
      [
    
        {
          "@type": "WebPageElement",
          "text": "plain text",
          "image": "image-1.png"
        },
    
        {
          "@type": "WebPageElement",
          "text": "plain text",
          "image": "image-2.png"
        }
    
      ]
    }
    

    For the blog posting’s header/footer, you could use the more specific WPHeader/WPFooter instead of WebPageElement.