Generate the metadata for a page in Astro
Use the Layout component to generate the metadata for a page in Astro, including the title, description, canonical URL, and Open Graph and Twitter metadata.
Props
It receives an object with the following properties:
- Name
title- Type
- string
- Required
- required
- Description
The title of the page.
- Name
description- Type
- string
- Required
- required
- Description
The description of the page.
- Name
pageRoute- Type
- string
- Required
- required
- Description
The URL route for the page.
- Name
ogImg- Type
- string
- Description
The URL of the Open Graph image.
Usage
Add the file to your project
Copy the Layout.astro file to your project's layouts folder.
Edit the siteConfig object
Update the siteConfig object in the Layout.astro file with your site's base URL, name and default URL of the Open Graph image.
Layout.astro
const siteConfig: SiteConfig = {
baseUrl: "https://novajs.dev",
siteName: "Nova.js",
defaultOgImg: "/og-default.png",
};
Import the Layout component
Import the Layout component into every page where you want to generate metadata.
src/pages/index.astro
---
import Layout from "../layouts/Layout.astro";
---
<Layout
title="Nova.js - A collection of dependency-free React hooks"
description="Carefully developed React hooks that you can copy and paste into your project."
pageRoute="/"
ogImg="/og-landing.png"
>
<h1>Nova.js</h1>
</Layout>