Native JSON+LD Support for next/image Component

[wneel]

Goals

1. Enhance SEO for pages using next/image.
2. Improve image indexing by search engines, particularly Google.
3. Provide richer metadata for images to improve visibility and relevance in search results.
4. Offer an optional parameter in the component for JSON+LD schema.

Non-Goals

1. Does not aim to replace existing SEO practices and tools.
2. Does not provide comprehensive metadata for non-image content.
3. Does not focus on improving performance of image loading/rendering.

Background

Currently, the next/image component in Next.js is excellent for optimizing images in terms of performance and responsiveness.

However, it lacks native support for embedding JSON+LD schema, which is crucial for enhancing SEO. JSON+LD (JavaScript Object Notation for Linked Data) allows webmasters to provide structured data for search engines, thereby improving the visibility of images in search results. While it is possible to manually add JSON+LD scripts in your code by using dangerouslySetInnerHTML, having native support within the next/image component would streamline this process and encourage best practices across Next.js projects !

Proposal

The proposed feature involves adding an optional parameter to the next/image component that allows users to include a JSON+LD schema for images. This parameter would accept a JSON object with fields such as contentUrl, license, acquireLicensePage, creditText, creator, and copyrightNotice, that I took from the Google Documentation.

The implementation would involve:

1. Extending the next/image component to accept a new prop, jsonLd.
2. When the jsonLd prop is provided, the component would automatically generate and insert the corresponding JSON+LD script into the HTML head.
3. Ensure the JSON+LD schema complies with Google’s guidelines for ImageObject.

Example code:

import Image from 'next/image'

const MyComponent = () => (
  <div>
    <Image
      src="https://example.com/photos/320/black-labrador-puppy-800w.jpg"
      alt="Black labrador puppy"
      width={800}
      height={600}
      jsonLd={{
        "@context": "https://schema.org/",
        "@type": "ImageObject",
        "contentUrl": "https://example.com/photos/320/black-labrador-puppy-800w.jpg",
        "license": "https://example.com/license",
        "acquireLicensePage": "https://example.com/how-to-use-my-images",
        "creditText": "Labrador PhotoLab",
        "creator": {
          "@type": "Person",
          "name": "Anakin Skywalker"
        },
        "copyrightNotice": "John Doe"
      }}
    />
  </div>
)

Alternative example suggested by @xtrm-en

import Image from 'next/image';
import { Creator, LinkedData } from 'next/jsonld';

const MyComponent = () => (
  <div>
    <Image
      src="https://example.com/photos/320/black-labrador-puppy-800w.jpg"
      alt="Black labrador puppy"
      width={800}
      height={600}
    >
      <LinkedData
        type="ImageObject", // Could probably be inferred from the context
        contentUrl="https://example.com/photos/320/black-labrador-puppy-800w.jpg"
        licenseUrl="https://example.com/license"
        acquireLicenseUrl="https://example.com/how-to-use-my-images"
        creditText="Labrador PhotoLab"
        copyrightNotice="John Doe"
      >
        <Creator
          type="Person"
          name="Anakin Skywalker"
        />
      </LinkedData>
    </Image>
  </div>
)

Are you interested in contributing?

Yes, I am willing to contribute to the implementation of this feature and collaborate with the Next.js team to ensure its successful integration.

Additionally, this is my first time proposing a feature, so I am open to any alternatives or constructive feedback ! Please feel free to share your thoughts and suggestions.

[xtrm-en]

I would see composition doing better in this kind of setup, tho I'm unsure which would fit better in Next's case, as I'm not that familiar with it anymore.

Modified example:

import Image from 'next/image';
import { Creator, LinkedData } from 'next/jsonld';

const MyComponent = () => (
  <div>
    <Image
      src="https://example.com/photos/320/black-labrador-puppy-800w.jpg"
      alt="Black labrador puppy"
      width={800}
      height={600}
    >
      <LinkedData
        type="ImageObject", // Could probably be inferred from the context
        contentUrl="https://example.com/photos/320/black-labrador-puppy-800w.jpg"
        licenseUrl="https://example.com/license"
        acquireLicenseUrl="https://example.com/how-to-use-my-images"
        creditText="Labrador PhotoLab"
        copyrightNotice="John Doe"
      >
        <Creator
          type="Person"
          name="Anakin Skywalker"
        />
      </LinkedData>
    </Image>
  </div>
)

Thoughts?

[wneel]

Thank you very much for your response ! I find your suggestion about using composition very relevant and well thought out. Integrating components like LinkedData and Creator could indeed provide a more modular and flexible solution for managing JSON+LD data in Next.js.

I will include this alternative in my proposal. Thanks again for your help, it is really appreciated. If you have any other suggestions or feedback, please feel free to share them.