astro-seo-metadata
Version:
Bare minimum SEO meta tags to make most social networks and Google engine happy.
142 lines (107 loc) • 4.09 kB
Markdown
# 🚀 Astro — SEO metadata
[](https://www.npmjs.com/package/astro-seo-metadata)
[](https://github.com/JulianCataldo/web-garden/blob/develop/LICENSE)
[](https://makeapullrequest.com)
[](https://astro.build)
[](http://www.typescriptlang.org/)
[](https://prettier.io)
[](https://editorconfig.org)
[](https://eslint.org)
Bare minimum SEO meta tags to make most social networks and Google engine happy.
## 📦 Installation
```sh
pnpm i astro-seo-metadata
```
## 🛠 Usage
```astro
---
import { SEOMetadata } from 'astro-seo-metadata';
// ...
---
```
```astro
<!-- ... -->
<head>
<!-- Place component inside `HEAD` tag -->
<!-- All properties are optional -->
<SEOMetadata
siteName={'Le Website'}
title={'Le cool title'}
description={'Le insightful description'}
image={'http://example.com/the_image_url-preferably_absolute.jpg'}
favicon={'/favicon.svg'}
author="Julian Cataldo"
copyright="ISC"
astroSitemap={true}
canonicalUrl={Astro.url.toString()}
type={'website'}
astroGenerator={true}
/>
<!-- ... -->
</head>
```
---
In `<head>`:
```html
<!-- SEO -->
<link
rel="canonical"
href="https://code.juliancataldo.com/component/astro-seo"
/>
<meta property="og:type" content="website" />
<meta name="apple-mobile-web-app-title" content="Julian's Web Garden" />
<meta property="og:site_name" content="Julian's Web Garden" />
<title>
🚀 Astro — SEO | Bare minimum SEO meta tags to make most social
networks and Google engine happy. | 🚀 Astro — SEO
</title>
<meta
property="og:title"
content="🚀 Astro — SEO | Bare minimum SEO meta tags to make most social networks and Google engine happy. | 🚀 Astro — SEO"
/>
<meta
name="twitter:title"
content="🚀 Astro — SEO | Bare minimum SEO meta tags to make most social networks and Google engine happy. | 🚀 Astro — SEO"
/>
<meta
property="og:image:alt"
content="Building blocks for making progressive and future-proof websites.
Components collection features Astro, HTML, SCSS, JS, TS…
Configurations features ESLint, Prettier, Stylelint…"
/>
<meta
name="description"
property="og:description"
content="Building blocks for making progressive and future-proof websites.
Components collection features Astro, HTML, SCSS, JS, TS…
Configurations features ESLint, Prettier, Stylelint…"
/>
<meta
name="twitter:description"
content="Building blocks for making progressive and future-proof websites.
Components collection features Astro, HTML, SCSS, JS, TS…
Configurations features ESLint, Prettier, Stylelint…"
/>
<meta property="og:image" content="https://code.juliancataldo.com/poster.png" />
<meta
name="twitter:image:src"
content="https://code.juliancataldo.com/poster.png"
/>
<meta name="twitter:card" content="summary_large_image" />
<!-- -->
<meta name="author" content="Julian Cataldo" />
<meta name="copyright" content="ISC" />
<!-- -->
<link rel="sitemap" type="application/xml" href="/sitemap-index.xml" />
<meta name="generator" content="Astro v1.0.6" />
<!-- /SEO -->
```
<div class="git-footer">
---
## [LIVE DEMO 🎭 DOCUMENTATION WEBSITE ⎋](https://code.juliancataldo.com/)
[](https://code.juliancataldo.com)
**_[`code.juliancataldo.com`](https://code.juliancataldo.com/)_**
---
🔗 [JulianCataldo.com](https://www.juliancataldo.com/)
</div>