JSON-LD Alt Property Not Recognized

adamsdesk commented

2024-03-28 02:48:30 +00:00

Owner

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/"
}

I followed the documentation [Advanced Usage - Customizing Image Ouput](https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/advanced-usage.md#customizing-image-output) 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](https://github.com/jekyll/jekyll-seo-tag/issues/190). 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. ```yaml 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](https://validator.schema.org/) with the following example and refer to [ImageObject - Schema.org Type](https://schema.org/ImageObject). ```json { "@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/" } ```

adamsdesk commented

2024-03-28 02:54:18 +00:00

Author

Owner

As far as I can tell this issue has been around since Jekyll SEO Tag v2.8.0. There was mention of this problem in issue JSON-LD errors - Issue #190 . However, I was unable to find any further mention of this problem nor a resolution.

I'm not a Ruby programmer, but I believe the following will resolve the problem by editing the image method within the file json_ld_drop.rb for Jekyll SEO Tag v2.8.0.

The basic logic is this...

If image.alt exists and image.description does not exist then create image.description with the same value of image.alt
If image.alt exists delete it

This solution would allow the alt property to be set for Open Graph (og:image:alt) and X (Twitter) (twitter:image:alt), but at the same time automatically creating which ever is missing the alt or description for use in JSON-LD.

Code Changes

Before

def image
       return unless page_drop.image
        return page_drop.image.path if page_drop.image.keys.length == 1

        hash = page_drop.image.to_h
        hash["url"]   = hash.delete("path")
        hash["@type"] = "imageObject"
        hash
end

After

def image
        return unless page_drop.image
        return page_drop.image.path if page_drop.image.keys.length == 1

        hash = page_drop.image.to_h
        hash["url"]   = hash.delete("path")
        hash["@type"] = "imageObject"

        if hash["alt"] && !hash["description"]
            hash["description"] = hash["alt"]
        end

        if hash["alt"]
            hash.delete("alt")
        end

        hash
end

As far as I can tell this issue has been around since Jekyll SEO Tag v2.8.0. There was mention of this problem in issue [JSON-LD errors - Issue #190 ](https://github.com/jekyll/jekyll-seo-tag/issues/190). However, I was unable to find any further mention of this problem nor a resolution. I'm not a Ruby programmer, but I believe the following will resolve the problem by editing the image method within the file [json_ld_drop.rb](https://git.nixnet.services/adamsdesk/jekyll-seo-tag/src/branch/master/lib/jekyll-seo-tag/json_ld_drop.rb) for Jekyll SEO Tag v2.8.0. The basic logic is this... - If `image.alt` exists and `image.description` does not exist then create `image.description` with the same value of `image.alt` - If `image.alt` exists delete it This solution would allow the alt property to be set for Open Graph (`og:image:alt`) and X (Twitter) (`twitter:image:alt`), but at the same time automatically creating which ever is missing the `alt` or `description` for use in JSON-LD. ### Code Changes **Before** ```ruby def image return unless page_drop.image return page_drop.image.path if page_drop.image.keys.length == 1 hash = page_drop.image.to_h hash["url"] = hash.delete("path") hash["@type"] = "imageObject" hash end ``` **After** ```ruby def image return unless page_drop.image return page_drop.image.path if page_drop.image.keys.length == 1 hash = page_drop.image.to_h hash["url"] = hash.delete("path") hash["@type"] = "imageObject" if hash["alt"] && !hash["description"] hash["description"] = hash["alt"] end if hash["alt"] hash.delete("alt") end hash end ```

adamsdesk commented

2024-07-16 23:09:46 +00:00

Author

Owner

Pull request was issued at GitHub in hopes it will be merged into the Jekyll SEO Tag plugin.

Pull request was issued at [GitHub](https://github.com/jekyll/jekyll-seo-tag/pull/507) in hopes it will be merged into the Jekyll SEO Tag plugin.

adamsdesk commented

2024-07-16 23:22:07 +00:00

Author

Owner

The fix-json-ld-alt branch contains the code changes to fix the problem. Though this issue has not been officially accepted I will be considering this issue resolved and therefore closing it.

The [fix-json-ld-alt](https://git.nixnet.services/adamsdesk/jekyll-seo-tag/src/branch/fix-json-ld-alt) branch contains the code changes to fix the problem. Though this issue has not been officially accepted I will be considering this issue resolved and therefore closing it.

adamsdesk closed this issue

2024-07-16 23:23:02 +00:00

JSON-LD Alt Property Not Recognized #1

Environment

Problem

Code Changes