@zfben/astro-head

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.

1.13.0
latest
Source
npm

Version published: 2 weeks ago

Weekly downloads: 191; increased by0.53%

Maintainers: 0

Weekly downloads

Created: 8 months ago

Source

Effortless SEO for Astro with @zfben/astro-head

Key Features

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.

Getting Started

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>

Supported Props

| Prop | Output | ------------- | -------------------------------------------------------- | disableSEO | title | path | type | charset | lang | description | image | siteName | author | twitter | twitterCard | alternates | ga | clarity | adsense | ahrefs | scp | Format | | ----------------------------------------------------------------------------- | --------------------- | ----- | ------------------------------ | | Disable SEO advices in log output | boolean, default is false | | title, og:title, twitter:title | string, required | | canonical, url, og:url, twitter:url | string, required, must be started with / | | og:type | string, default is website | | charset | string, default is utf-8 | | og:locale | string | | description, og:description, twitter:description | string | | image, og:image, twitter:image | string | | og:site_name | string | | author, article:author | string | | twitter:site, twitter:creator | string, must be started with @ | | twitter:card | string, one of summary | summary_large_image | app | player, default is summary | | alternate, og:locale:alternate | lang, path and default list | | Google Analytics' tracking code | string, must be started with G- | | Clarity's tracking code | string | | AdSense's tracking code | string | | Ahrefs Web Analytics | string | | Content Security Policy | string, default is default-src 'self'; img-src https://*; child-src 'none'; |

Keywords

FAQs

What is @zfben/astro-head?

Is @zfben/astro-head popular?

Is @zfben/astro-head well maintained?

Package last updated on 06 Jan 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install