astro-seo-meta
v4.1.1
Published
Astro seo provides a <Seo> component to update meta tags
Downloads
1,045
Maintainers
mohammed-elhaouariReadme
🚀 Astro SEO Meta
This Astro component makes it easy to add tags that are relevant for search engine optimization (SEO) to your pages.
It supports Facebook, Twitter, Open Graph, and meta tags.
📦 Installation
This package is hosted on npm.
npm install astro-seo-metaOr using yarn
yarn add astro-seo-meta🥑 Usage
To add a base set of SEO tags in any of your Astro pages, import Astro Seo and then use the component inside the <head> section of your HTML:
---
import { Seo } from "astro-seo-meta"
---
<html lang="en">
<head>
<Seo
title="My astro website"
description="My fast astro website"
icon="favicon.ico"
/>
</head>
<body>
<h1>Hello from astro</h1>
</body>
</html>📖 API Reference
<Seo>
| Name | Required | Example | Description |
| :--------------- | :------: | :-------------------------------- | :--------------------------------------------------------- |
| title | false | "My Astro website" | Page title. |
| description | false | "My blazing fast astro website" | Description of the page. |
| keywords | false | ["website", "blog", "astro"] | Array of keywords. |
| icon | false | "/favicon.ico" | Tab icon url. |
| themeColor | false | "#000000" | Browser theme color. |
| colorScheme | false | "light" | Preferred color scheme. |
| facebook.image | false | "/facebook.png" | Facebook share image. |
| facebook.url | false | "https://astro.build" | Page URL. |
| facebook.type | false | "website" | Type of resource. See all types here. |
| twitter.image | false | "/twitter.png" | Twitter share image. |
| twitter.site | false | "@astrodotbuild" | Twitter handle of publishing site. |
| twitter.card | false | "summary" | Format of Twitter share card. See all types here. |
All of the Seo props are optional. If a prop is not provided, the associated meta tag will not be rendered.
// renders no seo tags
<Seo/>
// renders all seo tags
<Seo
title="My Astro website"
description="My blazing fast astro website"
keywords={["website", "blog", "astro"]}
icon="/favicon.ico"
themeColor="#000000"
colorScheme="light"
facebook={{
image: "/facebook.png",
url: "https://astro.build",
type: "website",
}}
twitter={{
image: "/twitter.png",
site: "@astrodotbuild",
card: "summary",
}}
/>
// renders some seo tags
<Seo
title="My Astro website"
description="My blazing fast astro website"
keywords={["website", "blog", "technology"]}
/>What does this component do, exactly?
This package adds all the necessary and SEO-relevant HTML tags inside your page's <head> tag.
Change log
Please see the changelog for more information on what has changed recently.
Acknowledgements
Astro Seo Meta is heavily inspired by Next SEO and all the amazing work the Brad Garropy is doing developing it. Thanks Brad! ❤️
Also great thanks to Jonas Schumacher Author of Astro SEO. ❤️