JSON-LD Alt Property Not Recognized #1

New Issue

Open

opened 2024-03-28 02:48:30 +00:00 by adamsdesk · 1 comment

adamsdesk commented

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

Owner

If the image alt property front matter is set it creates an invalid JSON-LD (schema). When using the Schema Markup Validator the following error message is returned, "The property alt is not recognized by the schema (e.g. schema.org) for an object of type ImageObject".

Examining the Schema specification it confirms that an ImageObject does not have a property called "alt". As I understand it the property that should be used in this context would be description.

According to the Jekyll SEO Tag Documentation the alt tag is used for the alternative image text in Open Graph (og:image:alt) and X (Twitter) (twitter:image:alt). There is no mention of JSON-LD use.

Example Front Matter

image:
    path: "assets/example.png"
    alt: "This is alt text."

Example JSON-LD Output

{
    "@context": "https://schema.org",
    "@type": "WebPage",
    "author": {
        "@type": "Person",
        "name": "Adam Douglas"
    },
    "dateModified": "2024-01-14T20:07:25-06:00",
    "description": "A detailed list of each hardware and peripheral used by Adamsdesk to produce material such as posts, graphics, videos, and more.",
    "headline": "Hardware and Peripherals",
    "image": {
        "width": 1200,
        "height": 630,
        "alt": "A Lego minifigure representing hardware and peripherals is siting on a chair in front a computer desk looking towards the viewer holding an uneasy face expression. To the left of the desk in large text reads, 'Our Setup'.",
        "url": "https://www.adamsdesk.com/assets/img/about/hardware-peripherals.webp",
        "@type": "imageObject"
    },
    "publisher": {
        "@type": "Organization",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.adamsdesk.com/assets/img/logo-adamsdesk.svg"
        },
        "name": "Adam Douglas"
    },
    "url": "https://www.adamsdesk.com/about/hardware-peripherals/"
}

If the image alt property front matter is set it creates an invalid JSON-LD (schema). When using the [Schema Markup Validator](https://validator.schema.org/) the following error message is returned, "The property alt is not recognized by the schema (e.g. schema.org) for an object of type ImageObject". Examining the Schema specification it confirms that an [ImageObject](https://schema.org/ImageObject) does not have a property called "alt". As I understand it the property that should be used in this context would be `description`. According to the [Jekyll SEO Tag Documentation](https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/advanced-usage.md#customizing-image-output) the `alt` tag is used for the alternative image text in Open Graph (`og:image:alt`) and X (Twitter) (`twitter:image:alt`). There is no mention of JSON-LD use. **Example Front Matter** ```yaml image: path: "assets/example.png" alt: "This is alt text." ``` **Example JSON-LD Output** ```json { "@context": "https://schema.org", "@type": "WebPage", "author": { "@type": "Person", "name": "Adam Douglas" }, "dateModified": "2024-01-14T20:07:25-06:00", "description": "A detailed list of each hardware and peripheral used by Adamsdesk to produce material such as posts, graphics, videos, and more.", "headline": "Hardware and Peripherals", "image": { "width": 1200, "height": 630, "alt": "A Lego minifigure representing hardware and peripherals is siting on a chair in front a computer desk looking towards the viewer holding an uneasy face expression. To the left of the desk in large text reads, 'Our Setup'.", "url": "https://www.adamsdesk.com/assets/img/about/hardware-peripherals.webp", "@type": "imageObject" }, "publisher": { "@type": "Organization", "logo": { "@type": "ImageObject", "url": "https://www.adamsdesk.com/assets/img/logo-adamsdesk.svg" }, "name": "Adam Douglas" }, "url": "https://www.adamsdesk.com/about/hardware-peripherals/" } ```

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 Else if image.altdoes not exist and image.description does not then create image.alt with the same value of image.description
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"]
        elsif !hash["alt"] && hash["description"]
            hash["alt"] = hash["description"]
        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` Else if `image.alt`does not exist and `image.description` does not then create `image.alt` with the same value of `image.description` - 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"] elsif !hash["alt"] && hash["description"] hash["alt"] = hash["description"] end if hash["alt"] hash.delete("alt") end hash end ```

No Label

No Milestone

No project

No Assignees

1 Participants

Notifications

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: adamsdesk/jekyll-seo-tag#1

No description provided.