Docs
Core Concepts
Optimizing
Metadata

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

src/app/home.page.tsx
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
  metadataTags: [{
    name: "viewport",
    content: "width=device-width, initial-scale=1.0"
  }],
 
  // Defines the link tags to be added to the head element
  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 (
    <div>
      <h1>Home Page</h1>
    </div>
  )
}
 
HomePage.path = "/";
HomePage.metadata = metadata;
 
export default HomePage;

API

Metadata.title and Metadata.description

PropertyTypeDescriptionOptionalDefault
titlestringThe title of the pagetrueName of the page component
descriptionstringThe description of the pagetrue-

Metadata.metadataTags

An array of meta tags to be added to the head element.

PropertyTypeDescriptionOptional
namestringThe name of the meta tag.true
propertystringThe property of the meta tag. Can replace the name property sometimestrue
contentstringThe content of the meta tag.false

don't use name and property at the same time, juste one depending on what you want to achieve.

Metadata.links

An array of link tags to be added to the head element.

PropertyTypeDescriptionDefaultOptional
relstringThe relationship of the link tag."icon"false
hrefstringThe href of the link tag.-false
typestringThe type of the link tag."image/png"true
sizesstringThe sizes of the link tag."32x32"true

href can be an absolute path of the icon you want to display, or also a relative path to the one stored inside the public directory

Metadata.openGraph

An object containing the Open Graph metadata for link previews on social media.

PropertyTypeDescriptionDefaultOptional
titlestringThe title of the link preview.-false
descriptionstringThe description of the link preview.-false
imagestringThe image of the link preview.-true
urlstringThe URL of the link preview.-true
typestringThe type of the link preview."website"false
widthnumberThe width of the image.-false
heightnumberThe height of the image.-false

image has to be an absolute path of the image you want to display in the link preview

Metadata.twitter

An object containing the Twitter metadata for link previews.

PropertyTypeDescriptionDefaultOptional
titlestringThe title of the link preview.-true
descriptionstringThe description of the link preview.-false
imagestringThe image of the link preview.-true
cardstringThe type of the link preview."summary_large_image"true
sitestringThe site of the link preview.-false
creatorstringThe creator of the link preview.-false

image has to be an absolute path of the image you want to display in the link preview

Next steps

Optimizing - Static Files
Logo Image