Issue with Article Image Schema JSON-LD

Stack Overflow community

I have a website where I'm using JSON-LD scripts to include structured data. In one of the scripts, I'm specifying image URLs with the following format:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "http://localhost/digitalclimbers/understand-laravel-with-features/"
  },
  "headline": "What Is Laravel",
  "image": [
    "http://localhost/digitalclimbers/wp-content/uploads/2023/03/Untitled-design-4-min-300x300.jpg",
    "http://localhost/digitalclimbers/wp-content/uploads/2023/03/Untitled-design-4-min-480x360.jpg",
    "http://localhost/digitalclimbers/wp-content/uploads/2023/03/Untitled-design-4-min-1200x840.jpg"
  ],
  "description": "Understand what is Laravel Framework, and its key features",
  "datePublished": "2023-03-29T21:29:59+05:30",
  "dateModified": "2024-01-26T09:43:41+05:30",
  "wordCount": 256,
  "about": ["Definition", "Laravel"],
  "articleSection": "Laravel",
  "inLanguage": "en-IN",
  "author": {
    "@type": "Person",
    "name": "Md Taufique Khan",
    "image": {
      "@type": "ImageObject",
      "url": "http://localhost/digitalclimbers/wp-content/uploads/2023/03/Untitled-design-5.jpg",
      "width": 150,
      "height": 150,
      "caption": "author alttag"
    },
    "url": "https://example.com/author/john-doe",
    "sameAs": [
      "https://lookmyweb.com",
      "https://google.com",
      "https://facebook.com"
    ]
  },
  "publisher": {
    "@type": "Organization",
    "name": "Digital Climber",
    "logo": {
      "@type": "ImageObject",
      "url": "C:\\xampp\\htdocs\\digitalclimbers/wp-content/themes/tk/assets/Images/Logo/publisher-logo.webp",
      "width": 492,
      "height": 150,
      "caption": "Logo of Digital Climber - A Reliable Source for Learning Digital Marketing & Web Development"
    },
    "url": "http://localhost/digitalclimbers",
    "sameAs": [
      "link1",
      "link2",
      "link3"
    ]
  }
}
</script>

but according to Google, the image URL is invalid

"image": [
    "http://localhost/digitalclimbers/wp-content/uploads/2023/03/Untitled-design-4-min-300x300.jpg",
    "http://localhost/digitalclimbers/wp-content/uploads/2023/03/Untitled-design-4-min-480x360.jpg",
    "http://localhost/digitalclimbers/wp-content/uploads/2023/03/Untitled-design-4-min-1200x840.jpg"
  ],

Here is the Google Report

Help me to fix this.

Your general markup is correct, but localhost is a reserved host, that is not accessible outside of the scope of your local computer. This is most likely why Google reports it as an invalid URL. If you replace localhost with e.g. example.com your markup will validate just fine.

In addition, you might want to specify the image as ImageObject, so you can also add meta information like caption and creation date:

This is ideal structure

"image": [
    {
            "@type": "ImageObject",
            "url": "https://example.com/image1.jpg",
            "contentUrl": "https://example.com/image1.jpg",
            "caption": "Caption of image 1",
            "dateCreated": "2018-12-06"
    },
    {
            "@type": "ImageObject",
            "url": "https://example.com/image2.jpg",
            "contentUrl": "https://example.com/image2.jpg",
            "caption": "Caption of image 2",
            "dateCreated": "2018-12-07"
    },
]

But this is also correct

"image": [
    "https://example.com/image2.jpg",
    "https://example.com/image2.jpg",
    "https://example.com/image2.jpg"
  ],