What path to use for OG image when querying Sanity image asset?

5 replies

Last updated: Jun 8, 2023

So if Im using type

image

to populate my OG Image in Sanity. When I query the image asset what should I be using for the path? I see in

asset

theres

url

which is the cd.sanity.io url,

publicUrl

that returns a long string. Is there a preferred way to do the OG image here?

AI Update

For OG images in Sanity, you should use the url field from the image asset, which returns the cdn.sanity.io URL. However, the best approach is to use the @sanity/image-url package to build your image URLs, as it automatically handles crop and hotspot settings while giving you control over transformations.

Quick Answer

When querying for OG images, use this pattern:

*[_type == 'page']{
  "ogImageUrl": ogImage.asset->url
}

This gets you the base cdn.sanity.io URL. However, for better control and optimization, use the image URL builder:

import { createImageUrlBuilder } from '@sanity/image-url'
import { client } from './client'

const builder = createImageUrlBuilder(client)

// For OG images, you typically want specific dimensions
const ogImageUrl = builder
  .image(ogImage)
  .width(1200)
  .height(630)
  .url()

About `publicUrl`

The publicUrl field you're seeing is likely related to Media Library assets. For most use cases, stick with the standard url field and use the image URL builder for transformations.

Why Use the URL Builder?

Automatic optimization: Respects editor-defined crops and hotspots
Easy transformations: Simple API for resizing, format conversion, etc.
OG image specs: Easily set the recommended 1200×630 dimensions
Performance: Can add ?auto=format to serve optimal formats

Example OG Image Implementation

export function getOgImageUrl(image) {
  return builder
    .image(image)
    .width(1200)
    .height(630)
    .auto('format')  // Serve optimal format
    .url()
}

The key takeaway: while asset->url works, using @sanity/image-url gives you better control and respects editorial decisions about cropping and focal points. For OG images specifically, you'll want to ensure they're sized to 1200×630 pixels for optimal social media display.

Show original thread

5 replies

You can look at building a "urlFor()"

https://www.sanity.io/docs/image-url
it let's you grab the image based the size you need.

This should get you the link you need if you just want to grab the base url
*[ _type == "pages" ]{
"imageUrl": image{
asset->{
url
}
}
}

I think the preferred way is to use the URL builder.

Yeah I've used urlFor and pass it the asset id and then use the generated url as the value for the og url field.

For some reason when trying to implement the Sanity client in Gatsby after using the plugin

gatsby-source-sanity

the component wont even render anything. _sanityClient.js_:

const { createClient } = require('@sanity/client')
import imageUrlBuilder from '@sanity/image-url'

const client = createClient({
  projectId: process.env.SANITY_STUDIO_PROJECT_ID,
  dataset: process.env.SANITY_STUDIO_PROJECT_DATASET,
  useCdn: false, // set to `false` to bypass the edge cache
  apiVersion: process.env.SANITY_API_VERSION, // use current date (YYYY-MM-DD) to target the latest API version
  token: process.env.SANITY_SECRET_TOKEN, // Only if you want to update content with the client
})

const builder = imageUrlBuilder(client)

export const clientCheck = client
  .fetch(`count(*)`)
  .then(data => console.log(`Number of documents: ${data}`))
  .catch(console.error)

export const getOgImage = async source => {
  return builder.image(source)
}

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for free Explore the demo