Joint session with Vercel: How to build intelligent storefronts (May 15th)

URL Metadata Input

Studio v2
This plugin only works with an older version of Sanity Studio (v2), which is deprecated.

URL input for Sanity that retrieves metadata (title, description) along with open graph information.

By Espen Hovlandsdal

v2 install command (deprecated)

sanity install url-metadata-input

sanity-plugin-url-metadata-input

URL input for Sanity that retrieves metadata (title, description) along with OpenGraph information.

Note: The resolving is done by an addon to the Sanity API and usage will at some point be an opt-in addon that is billed.

Screenshot of the URL metadata input inside a Sanity studio

Installation

sanity install url-metadata-input

Usage

Use it in your schema types:

// [...]
{
  fields: [
    // [...]
    {
      name: 'relatedUrl',
      title: 'Related URL',
      type: 'urlWithMetadata',
    },
  ]
}

If you want the metadata below the URL field to be collapsed, set the collapsed option like so:

{
  name: 'relatedUrl',
  title: 'Related URL',
  type: 'urlWithMetadata',
  options: {
    collapsed: true,
  }
},

Data model

Note: Empty keys are not included

{
  _type: 'urlWithMetadata',

  // Raw user-input URL
  url: 'http://sanity.io',

  // Resolved URL after redirects
  resolvedUrl: 'https://sanity.io/',

  // Date when the metada resolving was performed
  crawledAt: '2017-09-01T09:48:35.501Z',

  // Basic metadata (from <head> of the page)
  meta: {
    title: 'Sanity – The fully customizable, headless CMS',
    description: 'Manage structured data collaboratively [...]'
  },

  // OpenGraph data (camelcased keys, eg `og:video:width` == `videoWidth`)
  // See http://ogp.me/ for more information
  openGraph: {
    title: '...',
    description: '...',
    siteName: '...',
    type: '...',
    url: '...',
    image: '...',
    imageAlt: '...',
    imageSecureUrl: '...',
    imageType: '...',
    imageHeight: '...',
    imageWidth: '...',
    audio: '...',
    audioSecureUrl: '...',
    audioType: '...',
    determiner: '...',
    locale: '...',
    video: '...',
    videoSecureUrl: '...',
    videoType: '...',
    videoHeight: '...',
    videoWidth: '...',
  }
}

License

MIT-licensed. See LICENSE.

Related contributions