Fix Invalid JSON-LD Image Object Alt Property

[adamsdesk]

I followed the documentation Advanced Usage - Customizing Image Ouput to set the image path and image alt properties. When attempting to validate the generated JSON-LD I received the following error message, "The property alt is not recognized by the schema (e.g. schema.org) for an object of type ImageObject."

This problem was brought up in JSON-LD errors · Issue #190 · jekyll/jekyll-seo-tag. However it appears that the alt property portion of the issue was never addressed.

Environment

• Jekyll v4.3.3
• Jekyll SEO Tag v2.8.0

Problem

The property alt is not recognized by the schema (e.g. schema.org) for an object of type ImageObject. This occurs when
using the Jekyll plugin Jekyll SEO Tag and having the front matter set with an image path and alt values as illustrated
below.

image:
    path: /assets/img/posts/jekyll-fix-cannot-load-such-file-json.webp
    alt: "A spotlight focuses on the centre of a dark area where a magnifying glass reveals three finger prints. Above a bold title stands with 'Solve The Case' and a subtitle of Jekyll Cannot Load Such File JSON Error."

With these values set, it generates the following JSON-LD that contains an invalid alt property. To confirm this is
indeed invalid, use the Schema Markup Validator with the following example and refer to ImageObject - Schema.org Type.

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "author": { "@type": "Person", "name": "Adam" },
  "dateModified": "2024-06-13T18:13:09-06:00",
  "datePublished": "2024-06-13T00:00:00-06:00",
  "description": "Improve your privacy and website performance in this comprehensive guide on how to block media elements (images, videos, etc.) using Mozilla Firefox.",
  "headline": "How to Block or Disable Media Using Mozilla Firefox",
  "image": {
    "width": 1200,
    "height": 630,
    "url": "https://www.adamsdesk.com/assets/img/posts/block-disable-media-mozilla-firefox.webp",
    "@type": "imageObject",
    "alt": "A large title stands in white over the blue gradient background that reads, 'Block Media To Improve Your Privacy and Website Performance'. Below the title is a Mozilla Firefox logo plus a uBlock Origin logo."
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.adamsdesk.com/posts/block-disable-media-mozilla-firefox/"
  },
  "publisher": {
    "@type": "Organization",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.adamsdesk.com/assets/img/logo-adamsdesk.svg"
    },
    "name": "Adam"
  },
  "url": "https://www.adamsdesk.com/posts/block-disable-media-mozilla-firefox/"
}

Solution

To solve the problem the file, "lib/jekyll-seo-tag/json_ld_drop.rb" will need to be modified with control logic. The modification will allow setting the "description" property with the same value as the "alt" property and then remove the alt property, so it will never appear in the generated JSON-LD output. This approach works without breaking the use of the "alt" property for other metadata tags and doesn't require changing how the front matter values are set.