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

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?

1. Automatic optimization: Respects editor-defined crops and hotspots
2. Easy transformations: Simple API for resizing, format conversion, etc.
3. OG image specs: Easily set the recommended 1200×630 dimensions
4. 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.