sanity-meta

Meta Sanity Schema Types

Sanity Schema Types for managing HTML meta tags on your website
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

About The Project

• Built With

Getting Started

• Prerequisites
• Installation

Usage

Roadmap

Contributing

License

Contact

Acknowledgments

About The Project

Sanity Schema Types for managing HTML meta tags within your Sanity Studio

(back to top)

Built With

• Sanity Headless Content Management Platform (CMS);
• TypeScript JavaScript with syntax for types.

(back to top)

Getting Started

start a Sanity Project and set up your initial schema and frontend. follow guides on Sanity Docs. You can use any frontend framework you want. I use AstroJS

Prerequisites

you need to have NodeJS, and the JS package manager of your choice like npm, pnpm or yarn installed.

• @sanity or sanity@dev-preview
• sanity/client to query the site document;

Installation

1. navigate to your repository and folder where your Sanity Studio is setup

2. install the package using your package manager of choice

npm i --save-dev sanity-meta

pnpm add -D sanity-meta

yarn add sanity-meta

1. import the schemaTypes into your Sanity schemas array ./schemas/index see Usage for specific steps

2. create a document with type siteMeta,

(back to top)

Usage

Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.

Add the document type import it into your schematypes array

// ./studio/schemas/index.ts
import Documents from "./documents";
import Objects from "./objects";
import metaSchemaTypes from "sanity-meta";

export const schemaTypes = [
  ...Object.values(Documents),
  ...Object.values(Objects),
  ...metaSchemaTypes // spread the array here
]

Or you can add individual objects into the fields array to your Sanity documents and objects

// ./studio/schemas/documents/seo.ts
import { openGraph } from "sanity-meta";

export default {
  type: "document",
  name: "SEO",
  fields: [
    ...openGraph.fields, // include all openGraph fields
    ...locale, // locale is a single field
    {
      type: "string",
      name: "title"
    }
  ]
}

after Creating your siteMeta Document you can then query the document with the Sanity client if you have your client configured for your frontend

import React from "react";
import client from "./client"
import { getSiteMeta } from "sanity-meta"

const SITE = await getSiteMeta(client);

export default SiteTitle = () => {
  return (
    <h1>
      {site.title}
    </h1>
  )
}

(back to top)

Roadmap

• [ ] individual page and article meta/opengraph schema

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the ISC License. See LICENSE.txt for more information.

(back to top)

Contact

Andre Clark - [e-mail]

Project Link: https://github.com/AndreBClark/cosmic-schemas

(back to top)

Acknowledgments

• Astro SEO documented a helpful typescript interface for opengraph data
• Readme Template

(back to top)