Managing SEO for your Astro website just got easier with @zfben/astro-head. This package simplifies the process of adding essential meta tags and open graph/twitter meta data to your Astro components, boosting your website's search engine visibility.
- Simplified Integration: Seamlessly integrate SEO elements directly within your Astro components. No complex configurations needed!
- Automated Meta Generation: Automatically generate open graph and twitter meta tags, saving you time and ensuring consistent data across your site.
- Leverages Astro Configuration: Utilizes your existing site settings in astro.config.js to automatically generate accurate URLs within meta tags.
- SEO Best Practices: Follows SEO best practices to ensure your website is optimized for search engines.
-
Installation: Install the package using npm:
npm install @zfben/astro-head - Configuration: Ensure you have a site property defined within your astro.config.js file. This provides the base URL for your website.
- Import and Usage: Import the Head component from the package and use it within your Astro components:
---
import { Head } from "@zfben/astro-head";
---
<html>
<head>
<Head
title="Hello world"
path="/"
/>
</head>
</html>| Prop | Output | Format |
| ------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------- | --------------------- | ----- | ------------------------------ |
| disableSEO | Disable SEO advices in log output | boolean, default is false |
| title | title, og:title, twitter:title | string, required |
| path | canonical, url, og:url, twitter:url | string, required, must be started with / |
| type | og:type | string, default is website |
| charset | charset | string, default is utf-8 |
| lang | og:locale | string |
| description | description, og:description, twitter:description | string |
| image | image, og:image, twitter:image | string |
| siteName | og:site_name | string |
| author | author, article:author | string |
| twitter | twitter:site, twitter:creator | string, must be started with @ |
| twitterCard | twitter:card | string, one of summary | summary_large_image | app | player, default is summary |
| alternates | alternate, og:locale:alternate | lang, path and default list |
| ga | Google Analytics' tracking code | string, must be started with G- |
| clarity | Clarity's tracking code | string |
| adsense | AdSense's tracking code | string |
| ahrefs | Ahrefs Web Analytics | string |
| scp | Content Security Policy | string, default is default-src 'self'; img-src https://*; child-src 'none'; |