Setting Page Title and Description in Sanity using element previews

7 replies
Last updated: Mar 14, 2023
Does anyone have an example for setting Page Title and Page Description via sanity...or it has to be done for each component separately ? not using react-helmet --
user Q
, I think what you're looking for is element previews. You set these in the schema/s, just once for each type. You have a lot of freedom as to what you want to put in them, while the defaults show how it can be equally simple, such as the items you mention.
You'd need a way to pull a description from your item, which could be based on its content (first few lines if text, or a field in the item if you want to write this separately in the editor.

This documentation should explain, and good fortune:
https://www.sanity.io/docs/previews-list-views (edited)
Hey, thank you for the reply...no sure if i mentioned it correctly...i am talking about the page meta data...
well, unless I misunderstand, it would be the same method. Here's how it's done for pages in a blog schema -- look at the bottom lines about preview, select (which is how you can pull data from fields) and prepare (which lets you format it, also add info from other sources programmatically)

import {defineField, defineType} from 'sanity'


export default defineType({

name: 'post',

title: 'Post',

type: 'document',

fields: [

defineField({

name: 'title',

title: 'Title',

type: 'string',

}),

defineField({

name: 'slug',

title: 'Slug',

type: 'slug',

options: {

source: 'title',

maxLength: 96,

},

}),

defineField({

name: 'author',

title: 'Author',

type: 'reference',

to: {type: 'author'},

}),

defineField({

name: 'mainImage',

title: 'Main image',

type: 'image',

options: {

hotspot: true,

},

}),

defineField({

name: 'categories',

title: 'Categories',

type: 'array',

of: [{type: 'reference', to: {type: 'category'}}],

}),

defineField({

name: 'publishedAt',

title: 'Published at',

type: 'datetime',

}),

defineField({

name: 'body',

title: 'Body',

type: 'blockContent',

}),

],


preview: {

select: {

title: 'title',

author: 'author.name',

media: 'mainImage',

},

prepare(selection) {

const {author} = selection
`return {...selection, subtitle: author &&
by ${author}
}`
},

},

})
thanks mate..let me try this..:)
should do - I'll have a look in the morning πŸ™‚
πŸ˜‚
it's good to begin with..;)

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.

Was this answer helpful?