# Page folder schema

The page folder schema lets you add additional page folder settings.

When [creating or updating a page folder](/frontend-studio/page-folders.md), you can only configure the **General settings**, **Data source**, **Display properties**, and **SEO** options. To allow further configuration of page folders, you must [extend the page folder schema](/frontend-development/page-folder-schema.md#extend-the-page-folder-schema) and add the necessary fields.

## Extend the page folder schema

To extend the page folder schema, follow these steps:

1. From the Studio home page or from the left menu, go to **Developer > Schemas**.

2. Click **Page folder schema**: the **Page folder schema** pane opens.

3. Click **Edit schema**: the [schema builder](/frontend-studio/using-the-schema-builder.md) opens.

4. Add the necessary schema fields. For more information about schema fields, see [Schemas](/frontend-development/schemas.md) or switch to the visual editor to see the available options automatically.

   Editing the **Display properties** and **SEO** schema fields will affect existing page folders and might cause issues with your website. Consult with your development team before editing the existing fields and always ensure backward compatibility with schema.

5. Click **Validate** and **Publish**.

Now you'll see the new configuration fields when [creating or updating a page folder](/frontend-studio/page-folders.md).

## Read page folder configuration in data sources

You can read the page folder configuration in a data source extension handler from the `pageFolder.configuration` property on the `context` parameter.

```ts title="Read data source extension reading page folder configuration"
const seoDataSource = async (
  config: DataSourceConfiguration,
  context: DataSourceContext
) => {
  return {
    dataSourcePayload: {
      title: context.pageFolder.configuration.seoTitle,
      seoDescription: context.pageFolder.configuration.seoDescription,
      seoKeywords: context.pageFolder.configuration.seoKeywords,
    },
  };
};
```

## Read page folder configuration in Frontend components

You can read the page folder configuration in a Frontend component from the `configuration` property on the `pageFolder` parameter.

```tsx title="Read page folder configuration in a Frontend component"
function SEOComponent({ data, pageFolder }) {
  return (
    <div>
      <h1>{pageFolder.configuration.seoTitle}</h1>
      <p>{pageFolder.configuration.seoDescription}</p>
      <p>{pageFolder.configuration.seoKeywords}</p>
    </div>
  );
}
```

## Related pages

- [Area overview page with navigation](/frontend-development.md)
- [Previous page: Schemas](/frontend-development/schemas.md)
- [Next page: Frontend application context](/frontend-development/the-context.md)