Skip to content
Astro Meta

Getting Started

Installation

Terminal window
npm install @codemint/astro-meta

Usage

Import the MetaTags component and use it inside your head to add the meta tags.

---
import { MetaTags } from '@codemint/astro-meta';
---


<!doctype html>
<html lang="en">
  <head>
    <MetaTags
      title="My Blog Post Title"
      description="A detailed description of the blog post."
      openGraph={{
        type: 'website',
        title: 'Open Graph Title',
        description: 'Open Graph Description',
        image: {
          url: 'https://example.com/image.jpg',
        },
      }}
      twitter={{
        type: 'summary',
        site: '@username',
        title: 'Twitter Card Title',
        description: 'Twitter Card Description',
        image: 'https://example.com/twitter-image.jpg',
      }}
      canonicalUrl="https://example.com/blog/my-post"
    />
  </head>
  <body>
    <h1>My Blog post</h1>
  </body>
</html>

The above code snippet will generate the following meta tags:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="index, follow" />
    <title>My Blog Post Title</title>
    <meta
      name="description"
      content="A detailed description of the blog post."
    />
    <link rel="canonical" href="https://example.com/blog/my-post" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Open Graph Title" />
    <meta property="og:image" content="https://example.com/image.jpg" />
    <meta property="og:description" content="Open Graph Description" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@username" />
    <meta name="twitter:title" content="Twitter Card Title" />
    <meta name="twitter:description" content="Twitter Card Description" />
    <meta
      name="twitter:image"
      content="https://example.com/twitter-image.jpg"
    />
  </head>
  <body>
    <h1>My Blog post</h1>
  </body>
</html>

Check Metadata for type information

Tip: The props of MetaTags component is fully typed and include detailed JSDoc comments. This means you’ll get helpful hints, autocompletion, and documentation directly within your code editor as you use them.