Full-coverage <head> gear for your Astro app.
Visor automatically generates the necessary head tags for global metadata.
- Perfect Lighthouse scores out of the box
- Full PWA support
- Dynamic favicon generation
- Customizable metadata tags
- OpenGraph and social media tags
To install Visor, run one of the following commands in your Astro project:
pnpm install @binz/visor sharp sharp-iconpm install @binz/visor sharp sharp-icoyarn add @binz/visor sharp sharp-icoImport the component from the Visor package and use it in your Astro Layout component:
// src/layouts/default.astro
---
import {Visor} from '@binz/visor';
import logoSvgSrc from '../images/Logo.svg';
interface Props {
title: string;
}
const { title: pageTitle } = Astro.props;
const canonicalUrl = Astro.url;
---
<!doctype html>
<html lang="en">
<Visor
author={{
name: "Joe Bloggs",
twitterHandle: "@joe_blogs"
}}
canonicalURL={canonicalUrl}
description="Built with visor"
defaultKeywords={[]}
siteName="Example Site"
siteFaviconSvg={logoSvgSrc}
socialImagePath="/social.png"
title="Example Site"
>
<!-- Additional head tags -->
</Visor>
<body>
<!-- Your content here -->
</body>
</html>See the core package README for advanced usage including:
We recommend astro-shield for additional security headers.
Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request to the GitHub repository.
This repository uses Changesets to manage releases.
This Astro Head component is open source and available under the MIT License.
Visor builds on Favicon Generation with Astro by Matthias Kretschmann