Imagesize support for Structured Data (JSON-LD) and Open Graph

To improve our structured data, we need to change all our image properties to be ImageObjects. This means, we need to add a width and height property to all of them. To get the dimensions of an image, I want to implement the npm module [image-size](https://github.com/image-size/image-size) which will get the necessary dimensions on the fly.

---

Schema.org (JSON-LD)

This is our status quo (for example publisher):

"@context": "https://schema.org",
"@type": "Article",
"publisher": {
    "@type": "Organization",
    "name": "My Ghost Blog",
    "logo": "http://myblog.com/content/images/2016/06/IMG_1234.jpg"
    }

And this is how it should look like:

"@context": "https://schema.org",
"@type": "Article",
"publisher": {
    "@type": "Organization",
    "name": "My Ghost Blog",
    "logo": {
        "@type": "ImageObject",
        "url": "http://myblog.com/content/images/2016/06/IMG_1234.jpg"
        "width": 600,
        "height": 60
        }
    }

Note: Google has restrictions on the image dimension, especially for the publisher logo. The image needs to be <=600px wide and <=60px high (ideally exactly 600px x 60px). Unless we have proper image-handling (see #4453), we will not output an ImageObject if the logo doesn’t fit in the dimensions.

Applies to

• Schema for Post/Page:
  • publisher.logo
  • author.image
  • image
• Schema for Home/Website:
  • publisher.logo
  • image
• Schema for Tag:
  • publisher.logo
  • image
• Schema for Author:
  • image

---

Add mainEntityOfPage to JSON-LD as it is now required by Google:

"mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "http://myblog.com/",
    }

Applies to

• Schema for Post/Page
• Schema for Home/Website
• Schema for Tag
• Schema for Author

---

Open Graph (Facebook)

Now, we have the dimensions of images, we can improve our open graph data as well by adding

• og:image:width and
• og:image:height

---

ToDos:

• Add image-size to dependencies
• Make getImageSize util
• Include restrictions for publisher.logo (<=600px width and <=60px height)
• Update image properties in structured data to be full ImageObjects
• Add mainEntityOfPage to schema.org
• Add new properties og:image:width and og:image:height to structured data
• Use cache for image dimensions
• Write/update tests

[aileen]

Thanks for your comment, @halfdan,

How will this work with images that are stored externally? (S3, CloudFront, …)

The image-size module fetches the image dimensions from a URL, as well as locally stored images.

This issue is a bit concerning. Often people upload pictures that are rotated client side based on EXIF data. This would mean that these pictures incorrectly have their width/height swapped.

I’m aware, that we still have this issue with the EXIF data. This feature will be an v1 improvement until we have proper image handling. We will need to get the image size now anyway as we want to have AMP support, where we have to provide the width and height for every image in a blog post.

[puzrin]

I"d suggest to use https://github.com/nodeca/probe-image-size. It supports partial download for remote images, svg dimention units, and has none or errors reported in image-size.