CORE CONCEPTS
Metadata
Rasengan.js has a Metadata API that can be used to define your application metadata (e.g. meta and link tags inside your HTML head element) for improved SEO and web shareability.
Usage
There is two ways to use the Metadata API:
Using static metadata
import { Metadata, PageComponent } from "rasengan"; const metadata: Metadata = { // Title of the page title: "Home", // Description of the page description: "Home page", // Defines the meta tags to be added to the head element // (e.g. <meta name="viewport" content="width=device-width, initial-scale=1.0">) metaTags: [{ name: "viewport", content: "width=device-width, initial-scale=1.0" }], // Defines the link tags to be added to the head element // (e.g. <link rel="icon" href="/favicon.ico">) links: [{ rel: "icon", href: "/favicon.ico", }], // Used for link previews on social media openGraph: { title: "Rasengan.js", description: "Rasengan" image: "https://example.com/image.jpg", url: "https://example.com", }, // Used for Twitter link previews twitter: { title: "Rasengan.js", description: "Rasengan.js", image: "https://example.com/image.jpg", card: "summary_large_image", }, } const HomePage: PageComponent = () => { return ( <section> <h1>Home Page</h1> </section> ) } HomePage.path = "/"; HomePage.metadata = metadata; export default HomePage;
Using dynamic metadata
To use dynamic metadata, you have to rely on loader functions.
import { Metadata, PageComponent } from "rasengan"; const Home: PageComponent = () => { return ( <section> <h1>Home Page</h1> </section> ) } Home.path = "/"; Home.loader = async () => { // You can fetch data from an API or a database here const metadata: Metadata = { /* Your metaadata here */ } return { meta: metadata, } } export default Home;
The loader function must return an object with a meta property. The meta property must be an object that contains the metadata to be added to the page.
You can decide to mix static and dynamic metadata, but the dynamic metadata has the highest priority.
API
Metadata.title and Metadata.description
Metadata.metaTags
An array of meta tags to be added to the head element.
Metadata.links
An array of link tags to be added to the head element.
Metadata.openGraph
An object containing the Open Graph metadata for link previews on social media.
Metadata.twitter
An object containing the Twitter metadata for link previews.
